@crowdstrike/glide-core 0.9.0 → 0.9.1

package/dist/tree.item.styles.js

@@ -129,11 +129,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      visibility: hidden;
     }
 
     .expanded {
       .child-items {
         block-size: auto;
+        visibility: visible;
       }
     }
 

package/dist/tree.item.test.basics.d.ts

@@ -1 +1,2 @@
-export {};
+import './menu.link.js';
+import './tree.item.menu.js';

package/dist/tree.item.test.basics.js

@@ -1,7 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.link.js';
+import './tree.item.menu.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import Menu from './menu.js';
 import TreeItem from './tree.item.js';
+import TreeItemMenu from './tree.item.menu.js';
 TreeItem.shadowRootOptions.mode = 'open';
+TreeItemMenu.shadowRootOptions.mode = 'open';
+Menu.shadowRootOptions.mode = 'open';
 it('registers', () => {
     expect(window.customElements.get('glide-core-tree-item')).to.equal(TreeItem);
 });
@@ -32,13 +38,49 @@ it('renders with a prefix slot', async () => {
   `);
     expect(document.querySelector('[data-prefix]')).to.be.ok;
 });
-it('renders with a menu slot', async () => {
-    await fixture(html `
+it('adds label to menu target', async () => {
+    const treeItem = await fixture(html `
+    <glide-core-tree-item label="Item">
+      <glide-core-tree-item-menu slot="menu" data-menu>
+        <glide-core-menu-link label="Move" url="/move"> </glide-core-menu-link>
+      </glide-core-tree-item-menu>
+    </glide-core-tree-item>
+  `);
+    const menuTarget = treeItem
+        .querySelector('glide-core-tree-item-menu')
+        ?.shadowRoot?.querySelector('glide-core-menu')
+        ?.querySelector('glide-core-icon-button');
+    expect(menuTarget?.label).to.equal('Actions for Item');
+});
+it('adds Japanese label to menu', async () => {
+    document.documentElement.setAttribute('lang', 'ja');
+    const treeItem = await fixture(html `
+    <glide-core-tree-item label="Item">
+      <glide-core-tree-item-menu slot="menu" data-menu>
+        <glide-core-menu-link label="Move" url="/move"> </glide-core-menu-link>
+      </glide-core-tree-item-menu>
+    </glide-core-tree-item>
+  `);
+    const menuTarget = treeItem
+        .querySelector('glide-core-tree-item-menu')
+        ?.shadowRoot?.querySelector('glide-core-menu')
+        ?.querySelector('glide-core-icon-button');
+    expect(menuTarget?.label).to.equal('Actions for Item');
+});
+it('adds French label to menu', async () => {
+    document.documentElement.setAttribute('lang', 'fr');
+    const treeItem = await fixture(html `
     <glide-core-tree-item label="Item">
-      <span slot="menu" data-menu>menu</span>
+      <glide-core-tree-item-menu slot="menu" data-menu>
+        <glide-core-menu-link label="Move" url="/move"> </glide-core-menu-link>
+      </glide-core-tree-item-menu>
     </glide-core-tree-item>
   `);
-    expect(document.querySelector('[data-menu]')).to.be.ok;
+    const menuTarget = treeItem
+        .querySelector('glide-core-tree-item-menu')
+        ?.shadowRoot?.querySelector('glide-core-menu')
+        ?.querySelector('glide-core-icon-button');
+    expect(menuTarget?.label).to.equal('Actions for Item');
 });
 it('renders with a suffix slot', async () => {
     await fixture(html `

package/dist/tree.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var l,r=arguments.length,i=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(i=(r<3?l(i):r>3?l(t,o,i):l(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#l}"><slot @slotchange="${this.#r}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#i(e){e?.focus(),this.focusedItem=e}#n(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#n(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem??this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#i(t)}#t(e){const t=e.relatedTarget;t&&this.contains(t)||(this.privateTabIndex=0,this.focusedItem=void 0)}#l(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#i(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#i(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#i(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#i(t[s-1]),"Home"===e.key&&this.#i(t[0]),"End"===e.key&&this.#i(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#r(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;
+var __decorate=this&&this.__decorate||function(e,t,o,s){var r,l=arguments.length,i=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(i=(l<3?r(i):l>3?r(t,o,i):r(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#i(e){e?.focus(),this.focusedItem=e}#n(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#n(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#i(t)}#t(e){e.relatedTarget&&e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget)||(this.privateTabIndex=0,this.focusedItem=void 0)}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(e.target&&e.target instanceof HTMLElement&&(e.target.closest("glide-core-tree-item-icon-button")??e.target.closest("glide-core-tree-item-menu")))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#i(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#i(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#i(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#i(t[s-1]),"Home"===e.key&&this.#i(t[0]),"End"===e.key&&this.#i(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#l(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;

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.9.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",
@@ -70,6 +70,7 @@
     "@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",