@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/tree.test.focus.js

@@ -0,0 +1,261 @@
+import './tree.js';
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTree from './tree.js';
+import GlideCoreTreeItem from './tree.item.js';
+import GlideCoreTreeItemIconButton from './tree.item.icon-button.js';
+import GlideCoreTreeItemMenu from './tree.item.menu.js';
+GlideCoreTree.shadowRootOptions.mode = 'open';
+it('focuses the first tree item when tree is focused, if there are no selected items', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    tree.dispatchEvent(new Event('focusin'));
+    const childItems = tree.slotElements;
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('focuses the selected tree item on `focus()`, if there is one', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.selectItem(childItems[1]);
+    tree.dispatchEvent(new Event('focusin'));
+    await tree.updateComplete;
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[1].label);
+});
+it('expands a tree item if right arrow is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowRight' });
+    expect(childItems[0].expanded).to.equal(true);
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
+});
+it(`focuses on an expanded tree item's child if right arrow is pressed`, async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded>
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowRight' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].slotElements[0].label);
+});
+it('collapses an expanded tree item if left arrow is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded>
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowLeft' });
+    expect(childItems[0].expanded).to.equal(false);
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
+});
+it(`focuses on a collapsed tree item's parent if left arrow is pressed`, async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    const grandchildItems = childItems[0].slotElements;
+    grandchildItems[0].focus();
+    await sendKeys({ press: 'ArrowLeft' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('moves down the non-expanded tree items with down arrow', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded>
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2">
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 3"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowDown' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].slotElements[0].label, 'moves to child item if expanded');
+    await sendKeys({ press: 'ArrowDown' });
+    expect(document.activeElement?.label).to.equal(childItems[1].label, 'moves from last child for next parent');
+    await sendKeys({ press: 'ArrowDown' });
+    expect(document.activeElement?.label).to.equal(childItems[2].label, 'Does not navigate to collapsed tree items');
+    await sendKeys({ press: 'ArrowDown' });
+    expect(document.activeElement?.label).to.equal(childItems[2].label, 'Does not move if at the last item');
+});
+it('moves up the non-expanded tree items with up arrow', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the last item
+    childItems[1].slotElements[0].focus();
+    await sendKeys({ press: 'ArrowUp' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[1].label);
+    await sendKeys({ press: 'ArrowUp' });
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'Does not navigate to collapsed tree items');
+    await sendKeys({ press: 'ArrowUp' });
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'Does not move if at the first item');
+});
+it('moves to the first item when Home is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the last item
+    childItems[1].slotElements[0].focus();
+    await sendKeys({ press: 'Home' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('moves to the last item when End is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the first item
+    childItems[0].focus();
+    await sendKeys({ press: 'End' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[1].slotElements[0].label);
+});
+it('selects or expands/collapses node when Enter is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    const grandchildItems = childItems?.[1].slotElements;
+    // For an item that doesn't have children, selects it
+    childItems[0].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(childItems[0].selected).to.equal(true);
+    expect(childItems[1].selected).to.equal(false);
+    expect(grandchildItems[0].selected).to.equal(false);
+    expect(childItems[1].expanded).to.equal(false);
+    // For an item that has children, expands it
+    childItems[1].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(childItems[1].expanded).to.equal(true);
+    // Can select a grandchild item
+    grandchildItems[0].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(grandchildItems[0].selected).to.equal(true);
+});
+it('does nothing if some other key is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the first item
+    childItems[0].focus();
+    await sendKeys({ press: 'a' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('can use the keyboard to navigate to a tree item icon button', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item-icon-button slot="suffix">
+          <svg viewBox="0 0 24 24">
+            <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+          </svg>
+        </glide-core-tree-item-icon-button>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    tree.dispatchEvent(new Event('focusin'));
+    const childItems = tree.slotElements;
+    childItems[0].focus();
+    await sendKeys({ press: 'Tab' });
+    assert(document.activeElement instanceof GlideCoreTreeItemIconButton);
+});
+it('can use the keyboard to navigate to a tree item menu', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item-menu slot="menu">
+          <glide-core-menu-link label="Edit" url="/edit">
+          </glide-core-menu-link>
+        </glide-core-tree-item-menu>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    tree.dispatchEvent(new Event('focusin'));
+    const childItems = tree.slotElements;
+    childItems[0].focus();
+    await sendKeys({ press: 'Tab' });
+    assert(document.activeElement instanceof GlideCoreTreeItemMenu);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -29,6 +29,7 @@
     "./styles/*": null,
     "./label.js": null,
     "./toasts.toast.js": null,
+    "./library/set-containing-block.js": "./dist/set-containing-block.js",
     "./styles/fonts.css": "./dist/styles/fonts.css",
     "./styles/variables.css": "./dist/styles/variables.css"
   },
@@ -37,7 +38,9 @@
     "pnpm": ">= 8"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/dom": "^1.6.8",
+    "@shoelace-style/localize": "^3.1.2",
+    "composed-offset-position": "^0.0.6",
     "ow": "^1.1.1"
   },
   "devDependencies": {
@@ -45,15 +48,15 @@
     "@eslint/js": "^8.56.0",
     "@open-wc/testing": "^3.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/core-events": "^8.0.9",
-    "@storybook/manager-api": "^8.1.1",
-    "@storybook/preview-api": "^8.0.9",
-    "@storybook/theming": "^8.1.1",
-    "@storybook/web-components": "^8.0.9",
-    "@storybook/web-components-vite": "^8.0.9",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/core-events": "^8.2.1",
+    "@storybook/manager-api": "^8.2.1",
+    "@storybook/preview-api": "^8.2.1",
+    "@storybook/theming": "^8.2.1",
+    "@storybook/web-components": "^8.2.1",
+    "@storybook/web-components-vite": "^8.2.1",
     "@stylistic/eslint-plugin": "^1.7.0",
     "@types/mocha": "^10.0.6",
     "@types/sinon": "^17.0.3",
@@ -68,6 +71,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-lit-a11y": "^4.1.2",
+    "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-sort-class-members": "^1.20.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-unicorn": "^50.0.1",
@@ -83,14 +87,16 @@
     "postcss": "^8.4.38",
     "postcss-lit": "^1.1.1",
     "prettier": "3.1.0",
+    "rimraf": "^5.0.7",
     "sinon": "^17.0.1",
-    "storybook": "^8.0.9",
+    "storybook": "^8.2.1",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.0",
     "stylelint-use-logical": "^2.1.2",
     "stylelint-use-nesting": "^5.1.1",
+    "terser": "^5.31.1",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "^5.3.3",
     "typescript-eslint": "^7.8.0",
@@ -101,13 +107,13 @@
   },
   "scripts": {
     "start": "per-env",
-    "start:development": "storybook dev --config-dir .storybook --disable-telemetry --port 6006",
-    "start:production": "npm-run-all --parallel start:production:components start:production:storybook start:production:stylesheets --aggregate-output --print-label",
-    "start:production:components": "node ./esbuild.ts.js && tsc --emitDeclarationOnly --declaration --outDir ./dist",
-    "start:production:components:comment": "https://github.com/evanw/esbuild/issues/95#issuecomment-626069971",
+    "start:development": "storybook dev --config-dir .storybook --disable-telemetry --port 6006 --ci",
+    "start:development:comment": "Upon running this script, a new tab will **not** automatically open due to the `--ci` flag. This may be a bit unexpected as it is not the default behavior. One must manually navigate to the Storybook URL provided in the terminal.",
+    "start:production": "rimraf ./dist && npm-run-all --parallel start:production:components start:production:storybook start:production:stylesheets --aggregate-output --print-label",
+    "start:production:components": "tsc --outDir ./dist && node ./terser.js",
     "start:production:figma": "pnpm dt export-variables && pnpm dt build-tokens && pnpm dt build-styles",
     "start:production:storybook": "storybook build --config-dir .storybook --disable-telemetry --output-dir ./dist/storybook",
-    "start:production:stylesheets": "node ./esbuild.css.js",
+    "start:production:stylesheets": "node ./esbuild.js",
     "format": "per-env",
     "format:development": "prettier . --write && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --fix",
     "format:production": "prettier . --check && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
@@ -124,6 +130,7 @@
     "test:development:serve": "npx http-server dist/coverage/lcov-report --silent",
     "test:development:web-test-runner": "web-test-runner --watch",
     "test:production": "npm-run-all --parallel test:production:* start:production:stylesheets --aggregate-output --print-label",
-    "test:production:web-test-runner": "web-test-runner"
+    "test:production:web-test-runner": "web-test-runner",
+    "postinstall": "pnpm dlx playwright install --with-deps"
   }
 }