@getflip/swirl-components 0.232.0 → 0.233.1

package/dist/collection/collection-manifest.json

@@ -344,6 +344,8 @@
     "components/swirl-theme-provider/swirl-theme-provider.js",
     "components/swirl-time-input/swirl-time-input.js",
     "components/swirl-tree-navigation-item/swirl-tree-navigation-item.js",
+    "components/swirl-tree-view-item/swirl-tree-view-item.js",
+    "components/swirl-tree-view/swirl-tree-view.js",
     "components/swirl-video-thumbnail/swirl-video-thumbnail.js",
     "components/swirl-visually-hidden/swirl-visually-hidden.js",
     "prototypes/file-manager/file-manager.js"

package/dist/collection/components/swirl-tree-view/swirl-tree-view.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tree-view {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  gap: var(--s-space-2);
+}

package/dist/collection/components/swirl-tree-view/swirl-tree-view.js

@@ -0,0 +1,310 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * @slot slot - The tree view items
+ */
+export class SwirlTreeView {
+    constructor() {
+        this.onSlotChange = () => {
+            this.init();
+        };
+        this.initiallyExpandedItemIds = undefined;
+        this.label = undefined;
+    }
+    componentDidLoad() {
+        if (Boolean(this.initiallyExpandedItemIds)) {
+            this.expandItems(this.initiallyExpandedItemIds);
+        }
+        this.init();
+    }
+    async expandItems(itemIds) {
+        const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
+        items.forEach((item) => item.expand());
+    }
+    onKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            this.selectNextItem();
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            this.selectPreviousItem();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            this.expandSelectedItem();
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.collapseSelectedItem();
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            this.selectFirstItem();
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.selectLastItem();
+        }
+    }
+    onItemSelected(event) {
+        this.getItems().forEach((item) => {
+            if (item !== event.target) {
+                item.unselect();
+            }
+        });
+    }
+    onExpandedChange(event) {
+        const target = event.target;
+        if (target?.tagName === "SWIRL-TREE-VIEW-ITEM") {
+            this.itemExpansionChanged.emit({
+                itemId: target.itemId,
+                expanded: event.detail,
+            });
+        }
+    }
+    init() {
+        const selectedItem = this.getSelectedItem();
+        const allItems = this.getItems();
+        allItems.forEach((item) => item.unselect());
+        if (Boolean(selectedItem)) {
+            selectedItem.select();
+        }
+        else {
+            allItems[0]?.select();
+        }
+    }
+    selectFirstItem() {
+        this.unselectAllItems();
+        this.getItems()[0]?.select(true);
+    }
+    selectLastItem() {
+        const allItems = this.getItems();
+        const lastVisibleItem = allItems
+            .filter((item) => item.parentElement
+            .closest("swirl-tree-view-item")
+            ?.querySelector(':scope > li > [aria-expanded="true"]') ||
+            !Boolean(item.parentElement.closest("swirl-tree-view-item")))
+            .pop();
+        this.unselectAllItems();
+        lastVisibleItem?.select(true);
+    }
+    expandSelectedItem() {
+        const selectedItem = this.getSelectedItem();
+        if (!Boolean(selectedItem)) {
+            return;
+        }
+        const isExpanded = this.isItemExpanded(selectedItem);
+        if (isExpanded) {
+            this.selectNextItem();
+        }
+        else {
+            selectedItem.expand();
+        }
+    }
+    collapseSelectedItem() {
+        const selectedItem = this.getSelectedItem();
+        if (!Boolean(selectedItem)) {
+            return;
+        }
+        const isExpanded = this.isItemExpanded(selectedItem);
+        if (isExpanded) {
+            selectedItem.collapse();
+        }
+        else {
+            const parent = selectedItem.parentElement.closest("swirl-tree-view-item");
+            if (!Boolean(parent)) {
+                return;
+            }
+            this.unselectAllItems();
+            parent.select(true);
+        }
+    }
+    selectNextItem() {
+        const selectedItem = this.getSelectedItem();
+        const selectedItemExpanded = this.isItemExpanded(selectedItem);
+        const nextSibling = this.getNextSibling(selectedItem);
+        let parent = selectedItem.parentElement.closest("swirl-tree-view-item");
+        let nextSiblingOfParent = this.getNextSibling(parent);
+        while (Boolean(parent) && !Boolean(nextSiblingOfParent)) {
+            parent = parent?.parentElement.closest("swirl-tree-view-item, swirl-tree-view");
+            nextSiblingOfParent = this.getNextSibling(parent);
+        }
+        const firstChild = selectedItem.querySelector("swirl-tree-view-item");
+        const nextItem = selectedItemExpanded
+            ? firstChild
+            : nextSibling || nextSiblingOfParent;
+        if (!Boolean(nextItem)) {
+            return;
+        }
+        this.unselectAllItems();
+        nextItem.select?.(true);
+    }
+    selectPreviousItem() {
+        const allItems = this.getItems();
+        const selectedItem = this.getSelectedItem();
+        const previousSibling = this.getPreviousSibling(selectedItem);
+        const previousSiblingExpanded = Boolean(previousSibling?.querySelector('[aria-expanded="true"]'));
+        // find the last child of the nested previous sibling
+        if (previousSiblingExpanded) {
+            let lastChildOfNestedPreviousSibling = previousSibling?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item");
+            let lastChildOfNestedPreviousSiblingExpanded = Boolean(lastChildOfNestedPreviousSibling?.querySelector('[aria-expanded="true"]'));
+            while (lastChildOfNestedPreviousSiblingExpanded) {
+                lastChildOfNestedPreviousSibling =
+                    lastChildOfNestedPreviousSibling?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item");
+                lastChildOfNestedPreviousSiblingExpanded = Boolean(lastChildOfNestedPreviousSibling?.querySelector('[aria-expanded="true"]'));
+            }
+            allItems.forEach((item) => item.unselect());
+            lastChildOfNestedPreviousSibling.select?.(true);
+            return;
+        }
+        const parent = selectedItem.parentElement.closest("swirl-tree-view-item");
+        const previousItem = previousSibling || parent;
+        if (!Boolean(previousItem)) {
+            return;
+        }
+        allItems.forEach((item) => item.unselect());
+        previousItem.select?.(true);
+    }
+    unselectAllItems() {
+        this.getItems().forEach((item) => item.unselect());
+    }
+    getItems() {
+        return Array.from(this.el.querySelectorAll("swirl-tree-view-item"));
+    }
+    getSelectedItem() {
+        return this.getItems().find((item) => item.querySelector("a")?.getAttribute("aria-selected") === "true");
+    }
+    isItemExpanded(item) {
+        return Boolean(item.querySelector(':scope > li > [aria-expanded="true"]'));
+    }
+    getNextSibling(item) {
+        if (item?.nextElementSibling?.tagName === "SWIRL-TREE-VIEW-ITEM") {
+            return item.nextElementSibling;
+        }
+        const nestedSibling = item?.parentElement?.nextElementSibling?.querySelector("swirl-tree-view-item");
+        return nestedSibling ?? undefined;
+    }
+    getPreviousSibling(item) {
+        if (item?.previousElementSibling?.tagName === "SWIRL-TREE-VIEW-ITEM") {
+            return item.previousElementSibling;
+        }
+        const nestedSibling = item?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");
+        return nestedSibling ?? undefined;
+    }
+    render() {
+        return (h(Host, { key: 'cf2b5d1a4d8a6894ab94ac25974a16378b99e293' }, h("ul", { key: '22c81f9e9c9109bc8cc9dd066a390d146820fc5c', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: '9167a63b90026578af2f0d7263da97229ea3942e', onSlotchange: this.onSlotChange }))));
+    }
+    static get is() { return "swirl-tree-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-tree-view.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-tree-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "initiallyExpandedItemIds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemExpansionChanged",
+                "name": "itemExpansionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    itemId: string;\n    expanded: boolean;\n  }",
+                    "resolved": "{ itemId: string; expanded: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "expandItems": {
+                "complexType": {
+                    "signature": "(itemIds: string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemIds",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "itemSelected",
+                "method": "onItemSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "expandedChange",
+                "method": "onExpandedChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/swirl-tree-view/swirl-tree-view.spec.js

@@ -0,0 +1,193 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlTreeViewItem } from "../swirl-tree-view-item/swirl-tree-view-item";
+import { SwirlTreeView } from "./swirl-tree-view";
+describe("swirl-tree-view", () => {
+    it("renders children", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTreeView, SwirlTreeViewItem],
+            html: `
+        <swirl-tree-view label="Label">
+          <swirl-tree-view-item href="#" icon="🪁" id="item-1" label="Item 1">
+            <swirl-tree-view-item href="#" icon="🍄" id="item-2" label="Item 1.1"></swirl-tree-view-item>
+            <swirl-tree-view-item href="#" icon="🌎" id="item-3" label="Item 1.2">
+              <swirl-tree-view-item href="#" icon="❄️" id="item-4" label="Item 1.2.1"></swirl-tree-view-item>
+              <swirl-tree-view-item href="#" icon="🌭" id="item-5" label="Item 1.2.2"></swirl-tree-view-item>
+            </swirl-tree-view-item>
+            <swirl-tree-view-item href="#" icon="🎾" id="item-6" label="Item 1.3"></swirl-tree-view-item>
+          </swirl-tree-view-item>
+          <swirl-tree-view-item href="#" icon="🎷" id="item-7" label="Item 2">
+            <swirl-tag bordered id="item-2" label="Draft" size="s" slot="tags"></swirl-tag>
+          </swirl-tree-view-item>
+          <swirl-tree-view-item href="#" icon="🎮" id="item-8" label="Item 3">
+            <swirl-tree-view-item href="#" icon="💈" id="item-9" label="Item 3.1"></swirl-tree-view-item>
+          </swirl-tree-view-item>
+        </swirl-tree-view>
+      `,
+        });
+        expect(page.root).toMatchInlineSnapshot(`
+      <swirl-tree-view label="Label">
+        <mock:shadow-root>
+          <ul aria-label="Label" class="tree-view" role="tree">
+            <slot></slot>
+          </ul>
+        </mock:shadow-root>
+        <swirl-tree-view-item href="#" icon="🪁" label="Item 1" role="none">
+          <!---->
+          <li class="tree-view-item" role="none">
+            <a aria-expanded="false" aria-level="1" aria-owns="undefined-children" aria-selected="true" class="tree-view-item__link" href="#" role="treeitem" tabindex="0" style="padding-left: calc(0 * var(--s-space-12) + var(--s-space-4));">
+              <span class="tree-view-item__toggle-icon">
+                <swirl-icon-chevron-right size="24"></swirl-icon-chevron-right>
+              </span>
+              <span class="tree-view-item__icon">
+                🪁
+              </span>
+              <span class="tree-view-item__label">
+                Item 1
+              </span>
+              <span class="tree-view-item__tags"></span>
+            </a>
+            <ul aria-label="Item 1" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;">
+              <swirl-tree-view-item href="#" icon="🍄" id="item-2" label="Item 1.1" role="none">
+                <!---->
+                <li class="tree-view-item" role="none">
+                  <a aria-level="2" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(1 * var(--s-space-12) + var(--s-space-4));">
+                    <span class="tree-view-item__toggle-icon"></span>
+                    <span class="tree-view-item__icon">
+                      🍄
+                    </span>
+                    <span class="tree-view-item__label">
+                      Item 1.1
+                    </span>
+                    <span class="tree-view-item__tags"></span>
+                  </a>
+                  <ul aria-label="Item 1.1" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;"></ul>
+                </li>
+              </swirl-tree-view-item>
+              <swirl-tree-view-item href="#" icon="🌎" id="item-3" label="Item 1.2" role="none">
+                <!---->
+                <li class="tree-view-item" role="none">
+                  <a aria-expanded="false" aria-level="2" aria-owns="undefined-children" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(1 * var(--s-space-12) + var(--s-space-4));">
+                    <span class="tree-view-item__toggle-icon">
+                      <swirl-icon-chevron-right size="24"></swirl-icon-chevron-right>
+                    </span>
+                    <span class="tree-view-item__icon">
+                      🌎
+                    </span>
+                    <span class="tree-view-item__label">
+                      Item 1.2
+                    </span>
+                    <span class="tree-view-item__tags"></span>
+                  </a>
+                  <ul aria-label="Item 1.2" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;">
+                    <swirl-tree-view-item href="#" icon="❄️" id="item-4" label="Item 1.2.1" role="none">
+                      <!---->
+                      <li class="tree-view-item" role="none">
+                        <a aria-level="3" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(2 * var(--s-space-12) + var(--s-space-4));">
+                          <span class="tree-view-item__toggle-icon"></span>
+                          <span class="tree-view-item__icon">
+                            ❄️
+                          </span>
+                          <span class="tree-view-item__label">
+                            Item 1.2.1
+                          </span>
+                          <span class="tree-view-item__tags"></span>
+                        </a>
+                        <ul aria-label="Item 1.2.1" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;"></ul>
+                      </li>
+                    </swirl-tree-view-item>
+                    <swirl-tree-view-item href="#" icon="🌭" id="item-5" label="Item 1.2.2" role="none">
+                      <!---->
+                      <li class="tree-view-item" role="none">
+                        <a aria-level="3" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(2 * var(--s-space-12) + var(--s-space-4));">
+                          <span class="tree-view-item__toggle-icon"></span>
+                          <span class="tree-view-item__icon">
+                            🌭
+                          </span>
+                          <span class="tree-view-item__label">
+                            Item 1.2.2
+                          </span>
+                          <span class="tree-view-item__tags"></span>
+                        </a>
+                        <ul aria-label="Item 1.2.2" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;"></ul>
+                      </li>
+                    </swirl-tree-view-item>
+                  </ul>
+                </li>
+              </swirl-tree-view-item>
+              <swirl-tree-view-item href="#" icon="🎾" id="item-6" label="Item 1.3" role="none">
+                <!---->
+                <li class="tree-view-item" role="none">
+                  <a aria-level="2" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(1 * var(--s-space-12) + var(--s-space-4));">
+                    <span class="tree-view-item__toggle-icon"></span>
+                    <span class="tree-view-item__icon">
+                      🎾
+                    </span>
+                    <span class="tree-view-item__label">
+                      Item 1.3
+                    </span>
+                    <span class="tree-view-item__tags"></span>
+                  </a>
+                  <ul aria-label="Item 1.3" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;"></ul>
+                </li>
+              </swirl-tree-view-item>
+            </ul>
+          </li>
+        </swirl-tree-view-item>
+        <swirl-tree-view-item href="#" icon="🎷" id="item-7" label="Item 2" role="none">
+          <!---->
+          <li class="tree-view-item tree-view-item--has-tags" role="none">
+            <a aria-level="1" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(0 * var(--s-space-12) + var(--s-space-4));">
+              <span class="tree-view-item__toggle-icon"></span>
+              <span class="tree-view-item__icon">
+                🎷
+              </span>
+              <span class="tree-view-item__label">
+                Item 2
+              </span>
+              <span class="tree-view-item__tags">
+                <swirl-tag bordered="" id="item-2" label="Draft" size="s" slot="tags"></swirl-tag>
+              </span>
+            </a>
+            <ul aria-label="Item 2" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;">
+            </ul>
+          </li>
+        </swirl-tree-view-item>
+        <swirl-tree-view-item href="#" icon="🎮" id="item-8" label="Item 3" role="none">
+          <!---->
+          <li class="tree-view-item" role="none">
+            <a aria-expanded="false" aria-level="1" aria-owns="undefined-children" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(0 * var(--s-space-12) + var(--s-space-4));">
+              <span class="tree-view-item__toggle-icon">
+                <swirl-icon-chevron-right size="24"></swirl-icon-chevron-right>
+              </span>
+              <span class="tree-view-item__icon">
+                🎮
+              </span>
+              <span class="tree-view-item__label">
+                Item 3
+              </span>
+              <span class="tree-view-item__tags"></span>
+            </a>
+            <ul aria-label="Item 3" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;">
+              <swirl-tree-view-item href="#" icon="💈" id="item-9" label="Item 3.1" role="none">
+                <!---->
+                <li class="tree-view-item" role="none">
+                  <a aria-level="2" aria-selected="false" class="tree-view-item__link" href="#" role="treeitem" tabindex="-1" style="padding-left: calc(1 * var(--s-space-12) + var(--s-space-4));">
+                    <span class="tree-view-item__toggle-icon"></span>
+                    <span class="tree-view-item__icon">
+                      💈
+                    </span>
+                    <span class="tree-view-item__label">
+                      Item 3.1
+                    </span>
+                    <span class="tree-view-item__tags"></span>
+                  </a>
+                  <ul aria-label="Item 3.1" class="tree-view-item__children" id="undefined-children" role="group" style="display: none;"></ul>
+                </li>
+              </swirl-tree-view-item>
+            </ul>
+          </li>
+        </swirl-tree-view-item>
+      </swirl-tree-view>
+    `);
+    });
+});

package/dist/collection/components/swirl-tree-view/swirl-tree-view.stories.js

@@ -0,0 +1,36 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-tree-view.mdx";
+export default {
+    component: "swirl-tree-view",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Components/SwirlTreeView",
+};
+const Template = (args) => {
+    const element = generateStoryElement("swirl-tree-view", args);
+    element.innerHTML = `
+    <swirl-tree-view-item href="#" icon="🪁" item-id="item-1" label="Item 1">
+      <swirl-tree-view-item href="#" icon="🍄" item-id="item-2" label="Item 1.1"></swirl-tree-view-item>
+      <swirl-tree-view-item href="#" icon="🌎" item-id="item-3" label="Item 1.2">
+        <swirl-tree-view-item href="#" icon="❄️" item-id="item-4" label="Item 1.2.1"></swirl-tree-view-item>
+        <swirl-tree-view-item href="#" icon="🌭" item-id="item-5" label="Item 1.2.2"></swirl-tree-view-item>
+      </swirl-tree-view-item>
+      <swirl-tree-view-item href="#" icon="🎾" item-id="item-6" label="Item 1.3"></swirl-tree-view-item>
+    </swirl-tree-view-item>
+    <swirl-tree-view-item active href="#" icon="🎷" item-id="item-7" label="Item 2">
+      <swirl-tag bordered item-id="item-2" label="Draft" size="s" slot="tags"></swirl-tag>
+    </swirl-tree-view-item>
+    <swirl-tree-view-item href="#" icon="file" item-id="item-8" label="Item 3">
+      <swirl-tree-view-item href="#" icon="💈" item-id="item-9" label="Item 3.1"></swirl-tree-view-item>
+    </swirl-tree-view-item>
+  `;
+    return element;
+};
+export const SwirlTreeView = Template.bind({});
+SwirlTreeView.args = {
+    label: "Tree view",
+};