@brandsync/wc 1.15.0 → 1.16.0

package/dist/collection/components/bs-tree/bs-tree.cmp.test.js

@@ -0,0 +1,166 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+const mount = (props = {}) => render(h("bs-tree", { ariaLabel: "Files", ...props }, h("bs-tree-item", { label: "src", value: "src", expanded: true }, h("bs-tree-item", { label: "components", value: "components" }, h("bs-tree-item", { label: "button.tsx", value: "button" })), h("bs-tree-item", { label: "locked", value: "locked", disabled: true }), h("bs-tree-item", { label: "index.ts", value: "index" })), h("bs-tree-item", { label: "docs", value: "docs" }, h("bs-tree-item", { label: "readme", value: "readme" })), h("bs-tree-item", { label: "package.json", value: "pkg" })));
+const get = (root, v) => Array.from(root.querySelectorAll('bs-tree-item')).find(i => i.value === v);
+const tabbables = (root) => Array.from(root.querySelectorAll('bs-tree-item')).filter(i => i.getAttribute('tabindex') === '0');
+const press = async (key, waitForChanges) => {
+    await userEvent.keyboard(key);
+    await waitForChanges();
+};
+describe('bs-tree', () => {
+    it('renders role=tree with the label and a single roving tab stop', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const tree = root;
+        const inner = tree.shadowRoot.querySelector('[role="tree"]');
+        expect(inner).toEqualAttribute('aria-label', 'Files');
+        expect(tabbables(root)).toEqual([get(root, 'src')]);
+        expect(get(root, 'locked').hasAttribute('tabindex')).toBe(false);
+    });
+    it('puts the roving tab stop on the selected item', async () => {
+        const { root, waitForChanges } = await mount({ value: 'index' });
+        await waitForChanges();
+        expect(tabbables(root)).toEqual([get(root, 'index')]);
+        expect(get(root, 'index').selected).toBe(true);
+        expect(get(root, 'index')).toEqualAttribute('aria-selected', 'true');
+    });
+    it('selects on click, emits bsChange once, and keeps selection single', async () => {
+        const { root, waitForChanges } = await mount();
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        get(root, 'index').shadowRoot.querySelector('[part="container"]').click();
+        await waitForChanges();
+        get(root, 'src').shadowRoot.querySelector('[part="container"]').click();
+        await waitForChanges();
+        expect(changes).toEqual(['index', 'src']);
+        expect(root.value).toBe('src');
+        expect(Array.from(root.querySelectorAll('bs-tree-item')).filter(i => i.selected)).toEqual([get(root, 'src')]);
+        // Row click on a parent selects but does not toggle.
+        expect(get(root, 'src').expanded).toBe(true);
+    });
+    it('syncs value set from code without emitting bsChange', async () => {
+        const { root, waitForChanges } = await mount();
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        root.value = 'pkg';
+        await waitForChanges();
+        expect(get(root, 'pkg').selected).toBe(true);
+        expect(changes).toEqual([]);
+        root.value = '';
+        await waitForChanges();
+        expect(get(root, 'pkg').selected).toBe(false);
+    });
+    it('selectable=false: rows do not select but caret still expands', async () => {
+        const { root, waitForChanges } = await mount({ selectable: false });
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        get(root, 'index').shadowRoot.querySelector('[part="container"]').click();
+        await waitForChanges();
+        expect(changes).toEqual([]);
+        expect(get(root, 'index').selected).toBe(false);
+        get(root, 'docs').shadowRoot.querySelector('[part="caret"]').click();
+        await waitForChanges();
+        expect(get(root, 'docs').expanded).toBe(true);
+    });
+    it('collapsed children leave the layout and navigation', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const readme = get(root, 'readme');
+        expect(readme.getBoundingClientRect().height).toBe(0);
+        get(root, 'docs').expanded = true;
+        await waitForChanges();
+        expect(readme.getBoundingClientRect().height).toBe(48);
+    });
+    it('ArrowDown / ArrowUp / Home / End move focus over visible, enabled items', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        await userEvent.tab();
+        expect(document.activeElement).toBe(get(root, 'src'));
+        await press('{ArrowDown}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'components'));
+        await press('{ArrowDown}', waitForChanges);
+        // 'locked' is disabled -> skipped.
+        expect(document.activeElement).toBe(get(root, 'index'));
+        await press('{ArrowDown}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'docs'));
+        // readme is collapsed -> next is package.json
+        await press('{ArrowDown}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'pkg'));
+        expect(tabbables(root)).toEqual([get(root, 'pkg')]);
+        await press('{ArrowUp}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'docs'));
+        await press('{Home}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'src'));
+        await press('{End}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'pkg'));
+    });
+    it('ArrowRight expands then enters; ArrowLeft collapses then goes to the parent', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        await userEvent.tab();
+        await press('{ArrowDown}', waitForChanges); // components (closed)
+        const toggles = [];
+        get(root, 'components').addEventListener('bsToggle', e => toggles.push(e.detail));
+        await press('{ArrowRight}', waitForChanges);
+        expect(get(root, 'components').expanded).toBe(true);
+        expect(get(root, 'components')).toEqualAttribute('aria-expanded', 'true');
+        expect(document.activeElement).toBe(get(root, 'components'));
+        await press('{ArrowRight}', waitForChanges);
+        expect(document.activeElement).toBe(get(root, 'button'));
+        await press('{ArrowLeft}', waitForChanges); // leaf -> parent
+        expect(document.activeElement).toBe(get(root, 'components'));
+        await press('{ArrowLeft}', waitForChanges); // collapse
+        expect(get(root, 'components').expanded).toBe(false);
+        expect(toggles).toEqual([true, false]);
+        await press('{ArrowLeft}', waitForChanges); // closed -> parent
+        expect(document.activeElement).toBe(get(root, 'src'));
+    });
+    it('Enter and Space select the focused item', async () => {
+        const { root, waitForChanges } = await mount();
+        const changes = [];
+        root.addEventListener('bsChange', e => changes.push(e.detail));
+        await waitForChanges();
+        await userEvent.tab();
+        await press('{Enter}', waitForChanges);
+        await press('{ArrowDown}', waitForChanges);
+        await press(' ', waitForChanges);
+        expect(changes).toEqual(['src', 'components']);
+        expect(get(root, 'components').selected).toBe(true);
+        expect(get(root, 'src').selected).toBe(false);
+    });
+    it('* expands all siblings of the focused item', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        await userEvent.tab();
+        await press('{ArrowDown}', waitForChanges); // components
+        await press('*', waitForChanges);
+        expect(get(root, 'components').expanded).toBe(true);
+        await press('{End}', waitForChanges); // pkg (top level)
+        await press('*', waitForChanges);
+        expect(get(root, 'docs').expanded).toBe(true);
+    });
+    it('expandAll / collapseAll', async () => {
+        const { root, waitForChanges } = await mount();
+        await root.expandAll();
+        await waitForChanges();
+        expect(Array.from(root.querySelectorAll('bs-tree-item')).filter(i => i.expanded).length).toBe(root.querySelectorAll('bs-tree-item').length);
+        await root.collapseAll();
+        await waitForChanges();
+        expect(Array.from(root.querySelectorAll('bs-tree-item')).some(i => i.expanded)).toBe(false);
+    });
+    it('handles items added later (levels, tabindex)', async () => {
+        const { root, waitForChanges } = await mount();
+        await waitForChanges();
+        const docs = get(root, 'docs');
+        const added = document.createElement('bs-tree-item');
+        added.label = 'late';
+        added.value = 'late';
+        docs.appendChild(added);
+        docs.expanded = true;
+        await waitForChanges();
+        await new Promise(r => setTimeout(r, 50));
+        expect(added).toEqualAttribute('aria-level', '2');
+        expect(added.getAttribute('tabindex')).toBe('-1');
+        expect(tabbables(root).length).toBe(1);
+    });
+});

package/dist/collection/components/bs-tree/bs-tree.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.bs-tree {
+  display: block;
+  width: 100%;
+}

package/dist/collection/components/bs-tree/bs-tree.js

@@ -0,0 +1,354 @@
+import { h } from "@stencil/core";
+/**
+ * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+ * WAI-ARIA tree keyboard pattern.
+ *
+ * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+ * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+ * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+ * their expansion state and emit `bsSelect` / `bsToggle`.
+ *
+ * Built from: `bs-tree-item` rows.
+ *
+ * @slot - Default slot: top-level `bs-tree-item` elements (nested ones go inside their parent item).
+ * @part container - The `role="tree"` wrapper.
+ */
+export class BsTree {
+    el;
+    /** Accessible name of the tree. Bound onto the internal `role="tree"` element (an `aria-label`
+     * on the host would not reach it). */
+    ariaLabel = null;
+    /** The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each
+     * item's `selected` (single selection). Setting it from code does not emit `bsChange`. */
+    value = '';
+    /** When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still
+     * expand and collapse. */
+    selectable = true;
+    /** Emitted when the user changes the selection (click, Enter/Space), with the new value. Not
+     * emitted when `value` is set from code. */
+    bsChange;
+    observer;
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.refresh());
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['expanded', 'disabled'],
+        });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    componentDidLoad() {
+        if (!this.value) {
+            const preselected = this.items().find(i => i.selected || i.hasAttribute('selected'));
+            if (preselected)
+                this.value = this.keyOf(preselected);
+        }
+        this.syncSelection();
+        this.refresh();
+    }
+    onValueChange() {
+        this.syncSelection();
+        this.refresh();
+    }
+    /** Expands every parent item. */
+    async expandAll() {
+        this.items().forEach(i => (i.expanded = true));
+    }
+    /** Collapses every parent item. */
+    async collapseAll() {
+        this.items().forEach(i => (i.expanded = false));
+    }
+    items() {
+        return Array.from(this.el.querySelectorAll('bs-tree-item'));
+    }
+    keyOf(item) {
+        return item.value || item.label;
+    }
+    isParent(item) {
+        return Array.from(item.children).some(c => c.tagName === 'BS-TREE-ITEM');
+    }
+    isRendered(item) {
+        let p = item.parentElement;
+        while (p && p !== this.el) {
+            if (p.tagName === 'BS-TREE-ITEM' && !p.expanded)
+                return false;
+            p = p.parentElement;
+        }
+        return true;
+    }
+    navigable() {
+        return this.items().filter(i => !i.disabled && this.isRendered(i));
+    }
+    syncSelection() {
+        let found = false;
+        this.items().forEach(i => {
+            const sel = !!this.value && !found && this.keyOf(i) === this.value;
+            if (sel)
+                found = true;
+            if (i.selected !== sel)
+                i.selected = sel;
+        });
+    }
+    /** Roving tabindex: one tabbable item (selected if navigable, else the first). */
+    refresh(preferred) {
+        const nav = this.navigable();
+        const target = preferred && nav.includes(preferred) ? preferred : nav.find(i => i.selected) ?? nav[0];
+        this.items().forEach(i => {
+            if (i.disabled)
+                i.removeAttribute('tabindex');
+            else
+                i.setAttribute('tabindex', i === target ? '0' : '-1');
+        });
+    }
+    focusItem(item) {
+        if (!item)
+            return;
+        this.refresh(item);
+        item.focus();
+    }
+    select(item) {
+        if (!this.selectable || item.disabled)
+            return;
+        const key = this.keyOf(item);
+        if (key === this.value)
+            return;
+        this.value = key;
+        this.syncSelection();
+        this.refresh(item);
+        this.bsChange.emit(key);
+    }
+    onItemSelect(e) {
+        const item = e.target.closest('bs-tree-item');
+        if (item)
+            this.select(item);
+    }
+    onFocusIn(e) {
+        const item = e.target.closest?.('bs-tree-item');
+        if (item && !item.disabled && e.target === item)
+            this.refresh(item);
+    }
+    onKeyDown(e) {
+        const item = e.target.closest?.('bs-tree-item');
+        if (!item || e.target !== item || e.altKey || e.ctrlKey || e.metaKey)
+            return;
+        const nav = this.navigable();
+        const idx = nav.indexOf(item);
+        const rtl = getComputedStyle(this.el).direction === 'rtl';
+        let key = e.key;
+        if (rtl && key === 'ArrowRight')
+            key = 'ArrowLeft';
+        else if (rtl && key === 'ArrowLeft')
+            key = 'ArrowRight';
+        const parent = this.isParent(item);
+        switch (key) {
+            case 'ArrowDown':
+                this.focusItem(nav[idx + 1]);
+                break;
+            case 'ArrowUp':
+                if (idx > 0)
+                    this.focusItem(nav[idx - 1]);
+                break;
+            case 'Home':
+                this.focusItem(nav[0]);
+                break;
+            case 'End':
+                this.focusItem(nav[nav.length - 1]);
+                break;
+            case 'ArrowRight':
+                if (!parent)
+                    return;
+                if (!item.expanded)
+                    item.setExpanded(true);
+                else
+                    this.focusItem(nav.find(i => i.parentElement === item));
+                break;
+            case 'ArrowLeft':
+                if (parent && item.expanded)
+                    item.setExpanded(false);
+                else {
+                    const up = item.parentElement;
+                    if (up && up.tagName === 'BS-TREE-ITEM' && !up.disabled)
+                        this.focusItem(up);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                this.select(item);
+                break;
+            case '*':
+                Array.from(item.parentElement.children)
+                    .filter((c) => c.tagName === 'BS-TREE-ITEM')
+                    .forEach(sib => sib.setExpanded(true));
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+    }
+    render() {
+        return (h("div", { key: '40bf9c9ae1f488a82f3d2972e5f9206db865928d', part: "container", class: "bs-tree", role: "tree", "aria-label": this.ariaLabel }, h("slot", { key: 'eb72026e90f834759d8249ed1a291aa7ca30ac2d' })));
+    }
+    static get is() { return "bs-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-tree.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the tree. Bound onto the internal `role=\"tree\"` element (an `aria-label`\non the host would not reach it)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each\nitem's `selected` (single selection). Setting it from code does not emit `bsChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still\nexpand and collapse."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user changes the selection (click, Enter/Space), with the new value. Not\nemitted when `value` is set from code."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "expandAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expands every parent item.",
+                    "tags": []
+                }
+            },
+            "collapseAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapses every parent item.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsSelect",
+                "method": "onItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/bs-tree/bs-tree.stories.js

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const items = html `
+  <bs-tree-item label="src" value="src" expanded>
+    <bs-tree-item label="components" value="components" expanded>
+      <bs-tree-item label="button.tsx" value="button"></bs-tree-item>
+      <bs-tree-item label="input.tsx" value="input"></bs-tree-item>
+    </bs-tree-item>
+    <bs-tree-item label="index.ts" value="index"></bs-tree-item>
+  </bs-tree-item>
+  <bs-tree-item label="docs" value="docs">
+    <bs-tree-item label="readme.md" value="readme"></bs-tree-item>
+  </bs-tree-item>
+  <bs-tree-item label="archive" value="archive" disabled></bs-tree-item>
+  <bs-tree-item label="package.json" value="package"></bs-tree-item>
+`;
+const meta = {
+    title: 'Components/bs-tree',
+    parameters: { docs: { description: { component: componentDescription('bs-tree') } } },
+    render: args => html `
+    <div style="width: 360px">
+      <bs-tree ariaLabel="Project files" .value=${args.value} .selectable=${args.selectable}>${items}</bs-tree>
+    </div>
+  `,
+    argTypes: {
+        value: { control: 'text' },
+        selectable: { control: 'boolean' },
+    },
+    args: { value: '', selectable: true },
+};
+export default meta;
+export const Default = {};
+export const ControlledValue = { args: { value: 'button' } };
+export const NonSelectable = { args: { selectable: false } };