@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/tree.test.focus.js

@@ -34,6 +34,23 @@ it('focuses the selected tree item on `focus()`, if there is one', async () => {
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[1].label);
 });
+it('does not focus the selected tree item on `focus()` if collapsed', 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"
+          selected
+        ></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await tree.updateComplete;
+    expect(document.activeElement === childItems[0]).to.equal(true);
+});
 it('expands a tree item if right arrow is pressed', async () => {
     const tree = await fixture(html `
     <glide-core-tree>
@@ -100,8 +117,12 @@ it(`focuses on a non-collapsible tree item's parent if left arrow is pressed`, a
 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 expanded label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1">
+          <glide-core-tree-item
+            label="Great Grandchild Item 1"
+          ></glide-core-tree-item>
+        </glide-core-tree-item>
       </glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
@@ -110,8 +131,7 @@ it(`focuses on a collapsed tree item's parent if left arrow is pressed`, async (
     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);
+    expect(document.activeElement === childItems[0]).to.equal(true);
 });
 it('moves down the non-expanded tree items with down arrow', async () => {
     const tree = await fixture(html `
@@ -291,3 +311,70 @@ it('can use the keyboard to navigate to a tree item menu', async () => {
     await sendKeys({ press: 'Tab' });
     assert(document.activeElement instanceof GlideCoreTreeItemMenu);
 });
+it('does not focus on a tree item icon button unless that tree item is focused', 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-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' });
+    expect(document.activeElement === document.body).to.equal(true);
+    childItems[1].focus();
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement instanceof GlideCoreTreeItemIconButton).to.equal(true);
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
+    expect(document.activeElement === childItems[1]).to.equal(true, 'can keyboard navigate back to the parent Tree Item');
+});
+it('does not focus on a tree item menu unless that tree item is focused', 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-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' });
+    expect(document.activeElement === document.body).to.equal(true);
+    childItems[1].focus();
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement instanceof GlideCoreTreeItemMenu).to.equal(true);
+});
+it('does not select a tree item if Enter is pressed while its tree item icon button is focused', 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' });
+    expect(document.activeElement instanceof GlideCoreTreeItemIconButton).to.equal(true);
+    await sendKeys({ press: 'Enter' });
+    expect(childItems[0].hasAttribute('selected')).to.equal(false);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -13,7 +13,6 @@
     "dist",
     "!dist/eslint",
     "!dist/icons/storybook.*",
-    "!dist/src",
     "!dist/storybook",
     "!dist/*.test.js",
     "!dist/*.stories.js"
@@ -29,14 +28,12 @@
     "./styles/*": null,
     "./label.js": null,
     "./toasts.toast.js": null,
-    "./library/set-containing-block.js": "./dist/library/set-containing-block.js",
     "./styles/fonts.css": "./dist/styles/fonts.css",
     "./styles/variables.css": "./dist/styles/variables.css"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.8",
     "@shoelace-style/localize": "^3.1.2",
-    "composed-offset-position": "^0.0.6",
     "nanoid": "^5.0.7",
     "ow": "^1.1.1"
   },
@@ -73,12 +70,14 @@
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "chalk": "^5.3.0",
+    "cheerio": "^1.0.0",
     "esbuild": "^0.19.12",
     "eslint": "^8.56.0",
     "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-no-skip-tests": "^1.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",

package/dist/checkbox.test.states.js

@@ -1,63 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreCheckbox from './checkbox.js';
-GlideCoreCheckbox.shadowRootOptions.mode = 'open';
-it('is checked after being clicked', async () => {
-    const component = await fixture(html `<glide-core-checkbox></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    expect(component.checked).to.equal(true);
-    expect(component.hasAttribute('checked')).to.be.false;
-});
-it('is unchecked after being clicked', async () => {
-    const component = await fixture(html `<glide-core-checkbox checked></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    expect(component.checked).to.equal(false);
-    expect(component.hasAttribute('checked')).to.be.true;
-});
-it('is checked and not indeterminate after being clicked when unchecked and indeterminate', async () => {
-    const component = await fixture(html `<glide-core-checkbox indeterminate></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.indeterminate).to.be.false;
-    expect(component.checked).to.equal(true);
-    expect(component.indeterminate).to.equal(false);
-    expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.hasAttribute('indeterminate')).to.be.true;
-});
-it('is unchecked and not indeterminate after being clicked when checked and indeterminate', async () => {
-    const component = await fixture(html `<glide-core-checkbox checked indeterminate></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.indeterminate).to.be.false;
-    expect(component.checked).to.equal(false);
-    expect(component.indeterminate).to.equal(false);
-    expect(component.hasAttribute('checked')).to.be.true;
-    expect(component.hasAttribute('indeterminate')).to.be.true;
-});
-it('is still checked after being clicked when checked but disabled', async () => {
-    const component = await fixture(html `<glide-core-checkbox checked disabled></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    expect(component.checked).to.equal(true);
-    expect(component.hasAttribute('checked')).to.be.true;
-});
-it('is still unchecked after being clicked when unchecked and disabled', async () => {
-    const component = await fixture(html `<glide-core-checkbox disabled></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
-});
-it('is still indeterminate after being clicked when unchecked and disabled', async () => {
-    const component = await fixture(html `<glide-core-checkbox disabled indeterminate></glide-core-checkbox>`);
-    component.click();
-    await elementUpdated(component);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.indeterminate).to.be.true;
-    expect(component.indeterminate).to.equal(true);
-    expect(component.hasAttribute('indeterminate')).to.be.true;
-});

package/dist/drawer.test.floating-components.d.ts

@@ -1 +0,0 @@
-import './drawer.js';

package/dist/drawer.test.floating-components.js

@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './drawer.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreDrawer from './drawer.js';
-import GlideCoreTreeItemMenu from './tree.item.menu.js';
-GlideCoreDrawer.shadowRootOptions.mode = 'open';
-GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
-it('sets containing block for tooltips', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>
-      <div>Some other element</div>
-      <glide-core-tooltip>
-        Tooltip
-        <span slot="target">Target</span>
-      </glide-core-tooltip>
-    </glide-core-drawer>`);
-    const containingBlock = drawer.shadowRoot?.querySelector('aside');
-    drawer.open();
-    const tooltip = drawer.querySelector('glide-core-tooltip');
-    expect(tooltip?.containingBlock === containingBlock).to.be.true;
-});
-it('sets containing block for menus', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>
-      <glide-core-menu>
-        <glide-core-menu-options>
-          <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
-        </glide-core-menu-options>
-
-        <div slot="target">Target</div>
-      </glide-core-menu>
-    </glide-core-drawer>`);
-    const containingBlock = drawer.shadowRoot?.querySelector('aside');
-    drawer.open();
-    const menu = drawer.querySelector('glide-core-menu');
-    expect(menu?.containingBlock === containingBlock).to.be.true;
-});
-it('sets containing block for tree item menu', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>
-      <glide-core-tree>
-        <glide-core-tree-item label="yup">
-          <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>
-    </glide-core-drawer>`);
-    const containingBlock = drawer.shadowRoot?.querySelector('aside');
-    drawer.open();
-    const treeItemMenu = drawer.querySelector('glide-core-tree-item-menu');
-    const menu = treeItemMenu?.shadowRoot?.querySelector('glide-core-menu');
-    expect(menu?.containingBlock === containingBlock).to.be.true;
-});

package/dist/library/set-containing-block.d.ts

@@ -1,15 +0,0 @@
-interface Arguments {
-    elements: Element[];
-    containingBlock: Element;
-}
-/**
- * Sets the containing block for all child elements that might contain
- * floating-ui components (i.e. tooltips, popovers, or menus),
- * for cases where the containing block element is inside a closed shadow DOM,
- * and therefore wouldn't be able to be detected by floating-ui's getOffsetParent calculations.
- * Necessary when the containing block has something like a backdrop-filter
- * https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
- * https://github.com/floating-ui/floating-ui/issues/2955
- */
-export declare function setContainingBlock({ elements, containingBlock }: Arguments): void;
-export {};

package/dist/library/set-containing-block.js

@@ -1 +0,0 @@
-import GlideCoreMenu from"../menu.js";import GlideCoreTooltip from"../tooltip.js";import GlideCoreTree from"../tree.js";export function setContainingBlock({elements:o,containingBlock:e}){const i=o.filter((o=>o instanceof GlideCoreTooltip||o instanceof GlideCoreMenu||o instanceof GlideCoreTree));for(const o of i)o.setContainingBlock(e)}

package/dist/modal.test.floating-components.js

@@ -1,63 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreModal from './modal.js';
-import GlideCoreModalTertiaryIcon from './modal.tertiary-icon.js';
-import GlideCoreTreeItemMenu from './tree.item.menu.js';
-GlideCoreModal.shadowRootOptions.mode = 'open';
-GlideCoreModalTertiaryIcon.shadowRootOptions.mode = 'open';
-GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
-it('sets containing block for tooltips', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      <glide-core-tooltip>
-        Tooltip
-        <span slot="target">Target</span>
-      </glide-core-tooltip>
-      <glide-core-modal-tertiary-icon
-        slot="tertiary"
-        label="Information"
-        tooltip-placement="right"
-      >
-        Icon
-      </glide-core-modal-tertiary-icon>
-    </glide-core-modal>`);
-    const containingBlock = element.shadowRoot?.querySelector('dialog');
-    element.showModal();
-    const tooltip = element.querySelector('glide-core-tooltip');
-    expect(tooltip?.containingBlock === containingBlock).to.be.true;
-    const tertiaryIconTooltip = element
-        .querySelector('glide-core-modal-tertiary-icon')
-        ?.shadowRoot?.querySelector('glide-core-tooltip');
-    expect(tertiaryIconTooltip?.containingBlock === containingBlock).to.be.true;
-});
-it('sets containing block for menus', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      <glide-core-menu>
-        <glide-core-menu-options>
-          <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
-        </glide-core-menu-options>
-
-        <div slot="target">Target</div>
-      </glide-core-menu>
-    </glide-core-modal>`);
-    const containingBlock = element.shadowRoot?.querySelector('dialog');
-    element.showModal();
-    const menu = element.querySelector('glide-core-menu');
-    expect(menu?.containingBlock === containingBlock).to.be.true;
-});
-it('sets containing block for tree item menu', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      <glide-core-tree>
-        <glide-core-tree-item label="yup">
-          <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>
-    </glide-core-modal>`);
-    const containingBlock = element.shadowRoot?.querySelector('dialog');
-    element.showModal();
-    const treeItemMenu = element.querySelector('glide-core-tree-item-menu');
-    const menu = treeItemMenu?.shadowRoot?.querySelector('glide-core-menu');
-    expect(menu?.containingBlock === containingBlock).to.be.true;
-});