Merge branch 'develop' into feature/coach-mark-closed-event

.changeset/strong-hounds-jump.md

@@ -0,0 +1,5 @@
+---
+"@ithaka/pharos": patch
+---
+
+Fix empty table column header cell and add test

package.json

@@ -62,10 +62,10 @@
     "@babel/preset-env": "^7.24.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^19.1.0",
+    "@commitlint/cli": "^19.2.0",
     "@commitlint/config-conventional": "^19.1.0",
     "@emotion/babel-plugin": "^11.11.0",
-    "@size-limit/preset-small-lib": "^11.0.3",
+    "@size-limit/preset-small-lib": "^11.1.0",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -85,10 +85,10 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-lit": "^1.11.0",
-    "eslint-plugin-mdx": "^1.16.0",
+    "eslint-plugin-mdx": "^1.17.1",
     "eslint-plugin-no-smart-quotes": "^1.3.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-wc": "^2.0.4",
@@ -100,18 +100,18 @@
     "postcss": "^8.4.35",
     "postcss-import": "^16.0.1",
     "postcss-media-minmax": "^5.0.0",
-    "postcss-preset-env": "^9.5.0",
+    "postcss-preset-env": "^9.5.1",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "sass": "^1.71.1",
-    "size-limit": "^11.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.72.0",
+    "size-limit": "^11.1.0",
     "storybook": "^7.6.17",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-scss": "^6.2.1",
-    "svglint": "^2.6.0",
+    "svglint": "^2.7.0",
     "vite": "^4.5.2"
   },
   "workspaces": {
@@ -120,7 +120,7 @@
     ]
   },
   "resolutions": {
-    "@custom-elements-manifest/analyzer": "0.9.0"
+    "@types/trusted-types": "^2.0.3"
   },
   "size-limit": [
     {

packages/pharos-cli/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.26",
+    "@types/node": "^20.11.28",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.2",
     "ts-morph": "^22.0.0",

packages/pharos-site/package.json

@@ -24,17 +24,17 @@
     "gatsby-transformer-sharp": "^4.25.0",
     "prettier": "^3.2.5",
     "prism-react-renderer": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-live": "^2.4.1",
-    "sass": "^1.71.1"
+    "react-live": "^4.1.6",
+    "sass": "^1.72.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-methods": "^7.23.3",
     "@types/mdx-js__react": "^1.5.8",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "babel-preset-gatsby": "^2.25.0",
     "typescript": "^5.4.2"

packages/pharos/custom-elements-manifest.config.mjs

@@ -3,7 +3,6 @@ import {
   isStaticMember,
   isProperty,
 } from '@custom-elements-manifest/analyzer/src/utils/ast-helpers.js';
-import { readonlyPlugin } from 'cem-plugin-readonly';
 
 const isOptionalClassProperty = (node) => {
   return isProperty(node) && node.questionToken;
@@ -28,6 +27,5 @@ export default {
         }
       },
     },
-    readonlyPlugin(),
   ],
 };

packages/pharos/package.json

@@ -55,34 +55,33 @@
   "author": "ITHAKA",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/dom": "^1.5.1",
+    "@floating-ui/dom": "^1.6.3",
     "@ithaka/focus-trap": "2.0.1",
     "@lit-labs/scoped-registry-mixin": "^1.0.0",
-    "@open-wc/dedupe-mixin": "^1.3.0",
+    "@open-wc/dedupe-mixin": "^1.4.0",
     "lit": "^2.8.0",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "sass": "^1.42.1"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.0",
-    "@open-wc/testing": "^3.0.1",
+    "@custom-elements-manifest/analyzer": "^0.9.3",
+    "@open-wc/testing": "^4.0.0",
     "@types/mocha": "^10.0.6",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "autoprefixer": "^10.4.18",
-    "cem-plugin-readonly": "^0.0.5",
     "chokidar": "^3.6.0",
     "globby": "^14.0.1",
     "minify-html-literals": "^1.3.5",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "replace-in-file": "^7.1.0",
     "rimraf": "^5.0.5",
     "sassdoc": "^2.7.4",

packages/pharos/scripts/build-react.js

@@ -71,13 +71,10 @@ const createDefaultProps = (reactName) => {
   const props =
     defaultFields.length &&
     defaultFields.map((property) => {
-      const hasInitializer = item.attributes?.find(
-        (attribute) => attribute.default === property.default && attribute.resolveInitializer
+      const valueFromVariable = modules.find(
+        (item) => item.kind === 'variable' && item.name === property.default
       );
-      const defaultValue = hasInitializer
-        ? modules.find((item) => item.kind === 'variable' && item.name === property.default)
-            ?.default
-        : property.default;
+      const defaultValue = valueFromVariable ? valueFromVariable.default : property.default;
       return `${property.name}: ${defaultValue},\n`;
     });
   return props ? `${reactName}.defaultProps = {\n` + `${props.join('')}` + `};` : ``;

packages/pharos/src/components/base/overlay-element.ts

@@ -6,7 +6,7 @@ import type {
   Placement,
   AlignedPlacement,
   Strategy as PositioningStrategy,
-} from '@floating-ui/dom/src/types';
+} from '@floating-ui/dom';
 export { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 
 export type { Placement, PositioningStrategy, Side };

packages/pharos/src/components/checkbox/pharos-checkbox.test.ts

@@ -37,9 +37,7 @@ describe('pharos-checkbox', () => {
 
   it('has an attribute to set check value', async () => {
     component = await fixture(html`
-      <test-pharos-checkbox ?checked=${true}
-        ><span slot="label">test checkbox</span></test-pharos-checkbox
-      >
+      <test-pharos-checkbox checked><span slot="label">test checkbox</span></test-pharos-checkbox>
     `);
     await expect(component.checked).to.equal(true);
   });

packages/pharos/src/components/radio-button/pharos-radio-button.test.ts

@@ -37,7 +37,7 @@ describe('pharos-radio-button', () => {
 
   it('has an attribute to set check value', async () => {
     component = await fixture(html`
-      <test-pharos-radio-button ?checked=${true}
+      <test-pharos-radio-button checked
         ><span slot="label">test radio</span></test-pharos-radio-button
       >
     `);

packages/pharos/src/components/table/pharos-table.test.ts

@@ -9,7 +9,9 @@ import type { PharosPagination } from '../pagination/pharos-pagination';
 import type { PharosSelect } from '../select/pharos-select';
 
 describe('pharos-table', () => {
-  let component: PharosTable, componentWithPagination: PharosTable;
+  let component: PharosTable,
+    componentWithPagination: PharosTable,
+    componentWithEmptyHeaderCell: PharosTable;
   const columns = [
     {
       name: 'Item',
@@ -20,6 +22,20 @@ describe('pharos-table', () => {
       field: 'filename',
     },
   ];
+  const columnsEmptyCell = [
+    {
+      name: '',
+      field: 'item',
+    },
+    {
+      name: 'Item',
+      field: 'item',
+    },
+    {
+      name: 'Filename',
+      field: 'filename',
+    },
+  ];
   const rowData = [
     {
       item: 1,
@@ -59,6 +75,16 @@ describe('pharos-table', () => {
       >
       </test-pharos-table>
     `);
+
+    componentWithEmptyHeaderCell = await fixture(html`
+      <test-pharos-table
+        .columns="${columnsEmptyCell}"
+        .rowData="${rowData}"
+        .totalResults="${2}"
+        caption="test table"
+      >
+      </test-pharos-table>
+    `);
   });
 
   it('is accessible', async () => {
@@ -147,6 +173,14 @@ describe('pharos-table', () => {
 
     expect(prevWasFired).to.be.true;
   });
+
+  it('renders an empty table cell instead of table header if column header is empty', async () => {
+    const rows = componentWithEmptyHeaderCell.renderRoot.querySelectorAll(`tr`);
+    const headerRow = rows[0];
+    const tableCell = headerRow.querySelectorAll('td');
+    await expect(tableCell[0].innerHTML).is.empty;
+    await expect(componentWithEmptyHeaderCell).to.be.accessible();
+  });
 });
 
 it('throws an error if caption is not provided', async () => {

packages/pharos/src/components/table/pharos-table.ts

@@ -136,7 +136,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       if (column.name) {
         return html`<th scope="col">${column.name}</th>`;
       } else {
-        return html`<tb></tb>`;
+        return html`<td></td>`;
       }
     });
   }

packages/pharos/src/components/toast/pharos-toaster.test.ts

@@ -26,6 +26,17 @@ describe('pharos-toaster', () => {
     document.dispatchEvent(event);
   };
 
+  const fireCloseToastEvent = () => {
+    const event = new CustomEvent('pharos-toast-close', {
+      detail: {
+        bubbles: true,
+        composed: true,
+        id: 'my-updateable-toast',
+      },
+    });
+    document.dispatchEvent(event);
+  };
+
   const fireUpdateToastEvent = () => {
     const event = new CustomEvent('pharos-toast-update', {
       detail: {
@@ -143,6 +154,7 @@ describe('pharos-toaster', () => {
     trigger.click();
     await component.updateComplete;
     await nextFrame();
+
     const triggerUpdate = document.createElement('button');
     triggerUpdate.addEventListener('click', fireUpdateToastEvent);
     document.body.appendChild(triggerUpdate);
@@ -160,6 +172,33 @@ describe('pharos-toaster', () => {
     `);
   });
 
+  it('can close an updateable toast', async () => {
+    const trigger = document.createElement('button');
+    trigger.addEventListener('click', fireOpenUpdateableToastEvent);
+    document.body.appendChild(trigger);
+    trigger.click();
+    await component.updateComplete;
+    await nextFrame();
+
+    const triggerUpdate = document.createElement('button');
+    triggerUpdate.addEventListener('click', fireUpdateToastEvent);
+    document.body.appendChild(triggerUpdate);
+    triggerUpdate.click();
+    await component.updateComplete;
+
+    const triggerClose = document.createElement('button');
+    triggerClose.addEventListener('click', fireCloseToastEvent);
+    document.body.appendChild(triggerClose);
+    triggerClose.click();
+    await component.updateComplete;
+    await nextFrame();
+
+    expect(component).shadowDom.to.equal(`
+      <div class="toaster__container">
+      </div>
+    `);
+  });
+
   it('can return focus to a specific element', async () => {
     let activeElement = null;
     const onFocusIn = (event: Event): void => {