@crowdstrike/glide-core 0.6.5 → 0.8.0

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import TreeItem from './tree.item.js';
 TreeItem.shadowRootOptions.mode = 'open';
@@ -11,6 +12,17 @@ it('renders and sets default attributes', async () => {
     expect(treeItem.expanded).to.equal(false);
     expect(treeItem.label).to.equal('Item');
     expect(treeItem.level).to.equal(1);
+    expect(treeItem.shadowRoot?.querySelector('.expand-icon-container')).to.be.ok;
+});
+it('does not render expand-icon-container if remove-indentation is set', async () => {
+    const treeItem = await fixture(html `
+    <glide-core-tree-item
+      label="Item"
+      remove-indentation
+    ></glide-core-tree-item>
+  `);
+    expect(treeItem.shadowRoot?.querySelector('.expand-icon-container')).to.be
+        .null;
 });
 it('renders with a prefix slot', async () => {
     await fixture(html `

package/dist/tree.js

@@ -1 +1 @@
-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)if(e===t)t.setAttribute("selected","true"),this.selectedItem=t;else{t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}setContainingBlock(e){for(const t of this.#i())t.setContainingBlock(e)}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#n(e){e?.focus(),this.focusedItem=e}#i(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#i(),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.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.#n(t)}#t(e){const t=e.relatedTarget;t&&this.contains(t)||(this.privateTabIndex=0,this.focusedItem=void 0)}#r(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.#n(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#n(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#n(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#n(t[s-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems?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;
+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}))}setContainingBlock(e){for(const t of this.#i())t.setContainingBlock(e)}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#n(e){e?.focus(),this.focusedItem=e}#i(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#i(),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.#n(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.#n(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.#n(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#n(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#n(t[s-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(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;

package/dist/tree.stories.d.ts

@@ -12,6 +12,7 @@ export declare const TreeItemDefault: StoryObj;
 export declare const TreeItemSelected: StoryObj;
 export declare const TreeItemWithChildItemsCollapsed: StoryObj;
 export declare const TreeItemWithChildItemsExpanded: StoryObj;
+export declare const TreeItemWithChildItemsNonCollapsible: StoryObj;
 export declare const TreeItemWithPrefixIcon: StoryObj;
 export declare const TreeItemWithSuffixIconButton: StoryObj;
 export declare const TreeItemWithMenu: StoryObj;

package/dist/tree.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.item.icon-button.js';
 import './tree.item.js';
 import './tree.js';
@@ -47,6 +48,9 @@ it('can click child and grandchild items to expand or select them', async () =>
       <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-item label="Child Item 3" expanded non-collapsible>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
     </glide-core-tree>
   `);
     const childItems = tree.slotElements;
@@ -63,6 +67,9 @@ it('can click child and grandchild items to expand or select them', async () =>
     // Can click and select a grandchild item
     grandchildItems[0].click();
     expect(grandchildItems[0].selected).to.equal(true);
+    // Can click and select a non-collapsible parent item
+    childItems[2].click();
+    expect(childItems[2].selected).to.equal(true);
 });
 it('does not select an item if a tree-item-icon-button is clicked', async () => {
     const tree = await fixture(html `

package/dist/tree.test.events.js

@@ -1,7 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.item.menu.js';
 import './tree.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreTree from './tree.js';
 import GlideCoreTreeItem from './tree.item.js';
 it('dispatches an "item-selected" event when an item is clicked', async () => {
     const component = await fixture(html `

package/dist/tree.test.focus.js

@@ -81,6 +81,22 @@ it('collapses an expanded tree item if left arrow is pressed', async () => {
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
 });
+it(`focuses on a non-collapsible 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" expanded non-collapsible>
+        <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(`focuses on a collapsed tree item's parent if left arrow is pressed`, async () => {
     const tree = await fixture(html `
     <glide-core-tree>
@@ -206,6 +222,22 @@ it('selects or expands/collapses node when Enter is pressed', async () => {
     await sendKeys({ press: 'Enter' });
     expect(grandchildItems[0].selected).to.equal(true);
 });
+it('selects a non-collapsible parent node when Enter is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded non-collapsible>
+        <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?.[0].slotElements;
+    grandchildItems[0].focus();
+    childItems[0].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(grandchildItems[0].selected).to.equal(false);
+    expect(childItems[0].selected).to.equal(true);
+});
 it('does nothing if some other key is pressed', async () => {
     const tree = await fixture(html `
     <glide-core-tree>

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.6.5",
+  "version": "0.8.0",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
+  "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/CrowdStrike/glide-core.git",
-    "directory": "packages/components"
+    "url": "https://github.com/CrowdStrike/glide-core.git"
   },
-  "type": "module",
   "files": [
     "dist",
+    "!dist/eslint",
     "!dist/icons/storybook.*",
     "!dist/src",
     "!dist/storybook",
@@ -33,10 +33,6 @@
     "./styles/fonts.css": "./dist/styles/fonts.css",
     "./styles/variables.css": "./dist/styles/variables.css"
   },
-  "engines": {
-    "node": ">= 20",
-    "pnpm": ">= 8"
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.6.8",
     "@shoelace-style/localize": "^3.1.2",
@@ -44,23 +40,33 @@
     "nanoid": "^5.0.7",
     "ow": "^1.1.1"
   },
+  "peerDependencies": {
+    "lit": "^3.1.0"
+  },
   "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
     "@crowdstrike/design-tokens": "^2.0.0",
+    "@eslint/eslintrc": "^3.0.2",
     "@eslint/js": "^8.56.0",
     "@open-wc/testing": "^3.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@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",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/core-events": "^8.2.7",
+    "@storybook/manager-api": "^8.2.7",
+    "@storybook/preview-api": "^8.2.7",
+    "@storybook/theming": "^8.2.7",
+    "@storybook/web-components": "^8.2.7",
+    "@storybook/web-components-vite": "^8.2.7",
     "@stylistic/eslint-plugin": "^1.7.0",
+    "@types/eslint": "^8.56.7",
     "@types/mocha": "^10.0.6",
     "@types/sinon": "^17.0.3",
+    "@typescript-eslint/rule-tester": "^8.0.1",
+    "@typescript-eslint/types": "^8.0.1",
+    "@typescript-eslint/utils": "^8.0.1",
     "@web/dev-server-esbuild": "^0.3.6",
     "@web/dev-server-rollup": "^0.6.1",
     "@web/test-runner": "^0.18.0",
@@ -79,6 +85,8 @@
     "globals": "^13.24.0",
     "globby": "^14.0.0",
     "http-server": "^14.1.1",
+    "husky": "^8.0.3",
+    "is-ci": "^3.0.1",
     "lint-staged": "^14.0.1",
     "lit": "^3.1.2",
     "lit-analyzer": "^2.0.3",
@@ -90,7 +98,7 @@
     "prettier": "3.1.0",
     "rimraf": "^5.0.7",
     "sinon": "^17.0.1",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.7",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
@@ -100,11 +108,12 @@
     "terser": "^5.31.1",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "^5.3.3",
-    "typescript-eslint": "^7.8.0",
-    "@crowdstrike/glide-core-eslint-plugin": "0.0.0"
+    "typescript-eslint": "^8.0.1",
+    "vitest": "^1.4.0"
   },
-  "peerDependencies": {
-    "lit": "^3.1.0"
+  "engines": {
+    "node": ">= 20",
+    "pnpm": ">= 8"
   },
   "scripts": {
     "start": "per-env",
@@ -120,18 +129,22 @@
     "format:production": "prettier . --check && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
     "lint": "per-env",
     "lint:development": "npm-run-all --print-name lint:development:*",
-    "lint:development:eslint": "eslint . --fix",
+    "lint:development:eslint": "tsc --outDir ./dist && eslint . --fix",
     "lint:development:lit-analyzer": "lit-analyzer **/*.ts",
     "lint:production": "npm-run-all --parallel --aggregate-output --print-label lint:production:*",
-    "lint:production:eslint": "eslint .",
+    "lint:production:eslint": "tsc --outDir ./dist && eslint .",
     "lint:production:lit-analyzer": "lit-analyzer **/*.ts",
     "typecheck": "tsc --noEmit",
     "test": "per-env",
-    "test:development": "npm-run-all --parallel test:development:* start:production:stylesheets",
+    "test:development": "npm-run-all --parallel test:development:serve test:development:web-test-runner start:production:stylesheets",
     "test:development:serve": "npx http-server dist/coverage/lcov-report --silent",
     "test:development:web-test-runner": "web-test-runner --watch",
+    "test:development:vitest": "vitest --config ./vitest.config.js",
+    "test:development:vitest:comment": "Vitest is excluded from `test:development` because it muddies the console when running alongside Web Test Runner.",
     "test:production": "npm-run-all --parallel test:production:* start:production:stylesheets --aggregate-output --print-label",
     "test:production:web-test-runner": "web-test-runner",
-    "postinstall": "pnpm dlx playwright install --with-deps"
+    "test:production:vitest": "vitest run --config ./vitest.config.js",
+    "postinstall": "pnpm dlx playwright@1.45.3 install --with-deps",
+    "release": "changeset publish"
   }
 }