@getflip/swirl-components 0.342.1 → 0.343.1

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

@@ -17,7 +17,7 @@ export class SwirlTreeViewItem {
         this.movingViaKeyboard = false;
         this.selected = false;
         this.onFocus = () => {
-            if (!this.selected) {
+            if (!this.selected && this.getSemantics() === "tree") {
                 this.select();
             }
         };
@@ -63,20 +63,23 @@ export class SwirlTreeViewItem {
         this.setUpDragDrop();
     }
     async expand() {
-        if (this.expanded || !this.expandable) {
+        if (this.expanded || !this.expandable || this.getSemantics() !== "tree") {
             return;
         }
         this.expanded = true;
         this.expandedChange.emit(this.expanded);
     }
     async collapse() {
-        if (!this.expanded || !this.expandable) {
+        if (!this.expanded || !this.expandable || this.getSemantics() !== "tree") {
             return;
         }
         this.expanded = false;
         this.expandedChange.emit(this.expanded);
     }
     async select(focus) {
+        if (this.getSemantics() !== "tree") {
+            return;
+        }
         this.selected = true;
         if (focus) {
             this.link?.focus();
@@ -84,6 +87,9 @@ export class SwirlTreeViewItem {
         this.itemSelected.emit(this.el);
     }
     async unselect() {
+        if (this.getSemantics() !== "tree") {
+            return;
+        }
         this.selected = false;
     }
     setUpDragDrop() {
@@ -303,11 +309,19 @@ export class SwirlTreeViewItem {
         }
         this.cannotKeyboardDropInCurrentPosition = false;
     }
+    getSemantics() {
+        const hasTreeSemantics = this.el.closest('[role="tree"]');
+        return hasTreeSemantics ? "tree" : "list";
+    }
     render() {
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
         const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
         const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
         const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
+        const semantics = this.getSemantics();
+        const expanded = this.expanded || semantics !== "tree";
+        const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
+        const Tag = semantics === "tree" ? "li" : "div";
         const className = classNames("tree-view-item", {
             "tree-view-item--active": this.active,
             "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
@@ -315,13 +329,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: 'e407aad02c536ae6f3bf0adc999f4d6cef4deeb4', id: this.itemId, role: "none" }, h("li", { key: '30cad8635d5770373be5347ccd7b2c00ba99a6ff', class: className, role: "none" }, h("a", { key: 'ec8628de981fbc8246abdd5e7503abd6762f7b43', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '1e556ae354352718c83db374555cffef2906aec2', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: 'b8083166676ee2bd38b45727c984bdbaabb442cc', size: 20 }))), this.expandable && (h("span", { key: 'e90c1603518c56135cf3e9b1b04323947045d62e', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'ec6c9d66674cc67d40945c2424bb4549629032eb' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'e2399828aa48599248340f33bbf743934bcaaa6d' }, h("span", { key: '571b89b1766fd79ea0041d6d67d8b818c2186c21', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '915cfff5478e90ce13dde92cc57383e9ba1e3a82', class: "tree-view-item__label" }, this.label), h("span", { key: 'cafd19fe2bb21141713d946543b17e2a8e3af7c1', class: "tree-view-item__tags" }, h("slot", { key: '59e8d26054053902bdb83ac0f0431392a1822f81', name: "tags" }))), h("ul", { key: '19ba4fd45f7d38c886e69eb7e616d9c43e064163', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+        return (h(Host, { key: 'b69e0f608416e28e933f600068bc9781b8a7e67a', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '59debc40e5914cf0861f77d839b8e1fb5048185f', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '537cf90ebc08a8a1f852a2ebb44a7f6cd9487b9d', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+                ? undefined
+                : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
+                ? `${this.itemId}-children`
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '8964954fbe3bf1d76f002cad14103a6490e46e41', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '543ea8186b5fff51002487f4d1efd2157f579de2', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '16ddb005d1a629694d074823171d84add485c60a', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '736eb2a5bd66e82af18a65870f48d8f9bec05ea4' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '1b9889c672bfed46bdfa65ff2d5cab61de2e37cf' }, h("span", { key: 'c2e6b715bc17b468b7656de8750db4ba06cd41db', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '300e38e84a87b1f70408d5d710eb0b350a4b3e41', class: "tree-view-item__label" }, this.label), h("span", { key: 'ea9b1b1e29f7a770d123ed9aba08f15d2002f722', class: "tree-view-item__tags" }, h("slot", { key: 'd27ac7d0acb0da444304979cc21d6be4bf73ff68', name: "tags" }))), h("ul", { key: 'cb8ba76c9ceca5e94c9fb85005963b03f58ceb40', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
-                : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
-                display: (!this.expanded || !hasChildren) && !shouldShowChildrenDropZone
+                : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
+                display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '2e074013de5942bf92e445581ceb4f9f94e041b7' })))));
+            } }, h("slot", { key: '712ac39576c65889812fab90246284afefc79ca0' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get originalStyleUrls() {