@getflip/swirl-components 0.295.0 → 0.296.1

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

@@ -1,15 +1,32 @@
-:host {
+swirl-tree-view {
   display: block;
 }
 
-  :host * {
+  swirl-tree-view * {
     box-sizing: border-box;
   }
 
 .tree-view {
   display: flex;
   margin: 0;
-  padding: 0;
+  /*
+  * 4px bottom padding is important to provide a drop area for items at the
+  * end of the tree
+  */
+  padding: 0 0 var(--s-space-4);
   flex-direction: column;
   gap: var(--s-space-2);
 }
+
+.tree-view--dragging {
+  cursor: grabbing;
+}
+
+.tree-view--dragging .tree-view-item__link:hover,
+  .tree-view--dragging .tree-view-item__link:active {
+    background-color: var(--s-background-default) !important;
+  }
+
+.tree-view--dragging .tree-view-item__link:hover .tree-view-item__drag-handle, .tree-view--dragging .tree-view-item__link:active .tree-view-item__drag-handle {
+      opacity: 0;
+    }

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

@@ -1,4 +1,13 @@
-import { h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
+import Sortable from "sortablejs";
+import { treeViewDragDropConfig } from "./swirl-tree-view.config";
+const defaultDragDropInstructions = {
+    cannotBeDropped: "Cannot drop here.",
+    end: "{itemLabel}, dropped. Parent item: {parentLabel}. Final position in list: {position} of {childrenCount}.",
+    initial: "Press space to move items.",
+    moved: "{itemLabel}. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}.",
+    start: "{itemLabel}, grabbed. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}. Press up and down arrow keys to change position, Space to drop.",
+};
 /**
  * @slot slot - The tree view items
  */
@@ -7,19 +16,71 @@ export class SwirlTreeView {
         this.onSlotChange = () => {
             this.init();
         };
+        this.onFocus = () => {
+            if (this.liveRegionText === "") {
+                this.updateLiveRegionText("initial");
+            }
+        };
+        this.onBlur = (event) => {
+            const newlyFocusedElement = event.relatedTarget;
+            if (this.el.contains(newlyFocusedElement)) {
+                return;
+            }
+            if (this.liveRegionText !== "") {
+                this.updateLiveRegionText();
+            }
+        };
+        this.canDrop = undefined;
+        this.dragDropInstructions = defaultDragDropInstructions;
+        this.dragDropItemSelector = "swirl-tree-view-item";
+        this.enableDragDrop = undefined;
         this.initiallyExpandedItemIds = undefined;
         this.label = undefined;
+        this.liveRegionText = "";
     }
     componentDidLoad() {
         if (Boolean(this.initiallyExpandedItemIds)) {
             this.expandItems(this.initiallyExpandedItemIds);
         }
         this.init();
+        this.setUpDragDrop();
+    }
+    disconnectedCallback() {
+        this.sortable?.destroy();
+    }
+    handleEnableDragDropChange() {
+        this.setUpDragDrop();
     }
     async expandItems(itemIds) {
         const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
         items.forEach((item) => item.expand());
     }
+    onItemDrop(event) {
+        event.stopPropagation();
+        this.dropItem.emit(event.detail);
+        // force update the new and old parent of the dropped item to reflect
+        // new hierarchy
+        if (event.detail.targetParentItemId) {
+            const newParentItem = this.el.querySelector(`
+        swirl-tree-view-item#${event.detail.targetParentItemId},
+        #${event.detail.targetParentItemId} > swirl-tree-view-item
+      `);
+            if (newParentItem) {
+                forceUpdate(newParentItem);
+                newParentItem.expand();
+            }
+        }
+        if (event.detail.sourceParentItemId) {
+            const oldParentItem = this.el.querySelector(`
+        swirl-tree-view-item#${event.detail.sourceParentItemId},
+        #${event.detail.sourceParentItemId} > swirl-tree-view-item
+      `);
+            if (oldParentItem) {
+                forceUpdate(oldParentItem);
+                oldParentItem.expand();
+            }
+        }
+    }
     onKeyDown(event) {
         if (event.key === "ArrowDown") {
             event.preventDefault();
@@ -62,6 +123,15 @@ export class SwirlTreeView {
             });
         }
     }
+    onEndKeyboardMove(event) {
+        this.updateLiveRegionText("end", event.detail);
+    }
+    onStartKeyboardMove(event) {
+        this.updateLiveRegionText("start", event.detail);
+    }
+    onKeyboardMove(event) {
+        this.updateLiveRegionText("moved", event.detail);
+    }
     init() {
         const selectedItem = this.getSelectedItem();
         const allItems = this.getItems();
@@ -73,6 +143,53 @@ export class SwirlTreeView {
             allItems[0]?.select();
         }
     }
+    setUpDragDrop() {
+        if (this.sortable) {
+            this.sortable.destroy();
+            this.sortable = undefined;
+        }
+        if (this.enableDragDrop) {
+            this.sortable = new Sortable(this.listElement, {
+                ...treeViewDragDropConfig,
+                draggable: this.dragDropItemSelector,
+                onMove: (event) => {
+                    if (typeof this.canDrop === "function") {
+                        return this.canDrop({
+                            parentId: event.to.closest("swirl-tree-view-item")?.itemId,
+                            position: Math.max(Array.from(event.to.children).indexOf(event.related), 0) + 1,
+                        });
+                    }
+                    return true;
+                },
+                onStart: (event) => {
+                    treeViewDragDropConfig.onStart?.(event);
+                },
+                onEnd: (event) => {
+                    event.stopPropagation();
+                    treeViewDragDropConfig.onEnd?.(event);
+                    const { to, newIndex, oldIndex, item } = event;
+                    const sourceParentItemId = undefined;
+                    const targetParentItem = to.closest("swirl-tree-view-item");
+                    if (targetParentItem) {
+                        forceUpdate(targetParentItem);
+                        targetParentItem.expand();
+                    }
+                    this.dropItem.emit({
+                        newIndex,
+                        oldIndex,
+                        item,
+                        itemId: item.id ?? item.querySelector(":scope > swirl-tree-view-item").id,
+                        newNextSiblingItemId: newIndex < to.children.length - 1
+                            ? to.children[newIndex + 1].id
+                            : undefined,
+                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
+                        sourceParentItemId,
+                        targetParentItemId: targetParentItem?.itemId,
+                    });
+                },
+            });
+        }
+    }
     selectFirstItem() {
         this.unselectAllItems();
         this.getItems()[0]?.select(true);
@@ -191,11 +308,22 @@ export class SwirlTreeView {
         const nestedSibling = item?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");
         return nestedSibling ?? undefined;
     }
+    updateLiveRegionText(key, data) {
+        let newText = key ? this.dragDropInstructions[key] : "";
+        if (!data?.canDrop) {
+            newText += ` ${this.dragDropInstructions.cannotBeDropped}`;
+        }
+        for (const [key, value] of Object.entries(data ?? {})) {
+            newText = newText.replaceAll(`{${key}}`, String(value));
+        }
+        if (newText !== this.liveRegionText) {
+            this.liveRegionText = newText;
+        }
+    }
     render() {
-        return (h(Host, { key: 'caa7174a0cddd890bda97332701e66ef4ac9195a' }, h("ul", { key: '7648d3a86e8e7f9e4698085f86aa579894f1ee0f', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: '54224ff085a157bd7220d6ca34e9b00493ec50fc', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '678b41d203dee35c80b90b3c3fca2f81f9984934' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '4b692860fdc7ddc49a71241021f32c8654fef6ca' }, h("span", { key: 'ff928c6c929c94e24a29853c216641038bde5b77', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '9851185b8627512031aa019c8a4e68b99f364085', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: "tree", ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'd80f8a83a5f25dd3a96630a192cb8047b0db9387', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["swirl-tree-view.css"]
@@ -208,6 +336,78 @@ export class SwirlTreeView {
     }
     static get properties() {
         return {
+            "canDrop": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTreeViewCanDropHandler",
+                    "resolved": "(location: { parentId: string; position: number; }) => boolean",
+                    "references": {
+                        "SwirlTreeViewCanDropHandler": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view/swirl-tree-view.tsx",
+                            "id": "src/components/swirl-tree-view/swirl-tree-view.tsx::SwirlTreeViewCanDropHandler"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "dragDropInstructions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ cannotBeDropped: string; end: string; initial: string; moved: string; start: string; }",
+                    "resolved": "{ cannotBeDropped: string; end: string; initial: string; moved: string; start: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "defaultDragDropInstructions"
+            },
+            "dragDropItemSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drag-drop-item-selector",
+                "reflect": false,
+                "defaultValue": "\"swirl-tree-view-item\""
+            },
+            "enableDragDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "enable-drag-drop",
+                "reflect": false
+            },
             "initiallyExpandedItemIds": {
                 "type": "unknown",
                 "mutable": false,
@@ -242,8 +442,34 @@ export class SwirlTreeView {
             }
         };
     }
+    static get states() {
+        return {
+            "liveRegionText": {}
+        };
+    }
     static get events() {
         return [{
+                "method": "dropItem",
+                "name": "dropItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SwirlTreeViewDropItemEvent",
+                    "resolved": "Pick<SortableEvent, \"item\" | \"oldIndex\" | \"newIndex\"> & { itemId: string; newNextSiblingItemId: string; newPrevSiblingItemId: string; sourceParentItemId: string; targetParentItemId: string; }",
+                    "references": {
+                        "SwirlTreeViewDropItemEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view/swirl-tree-view.tsx",
+                            "id": "src/components/swirl-tree-view/swirl-tree-view.tsx::SwirlTreeViewDropItemEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "itemExpansionChanged",
                 "name": "itemExpansionChanged",
                 "bubbles": true,
@@ -286,8 +512,20 @@ export class SwirlTreeView {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "enableDragDrop",
+                "methodName": "handleEnableDragDropChange"
+            }];
+    }
     static get listeners() {
         return [{
+                "name": "dropTreeViewItem",
+                "method": "onItemDrop",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "keydown",
                 "method": "onKeyDown",
                 "target": undefined,
@@ -305,6 +543,24 @@ export class SwirlTreeView {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "endKeyboardMove",
+                "method": "onEndKeyboardMove",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "startKeyboardMove",
+                "method": "onStartKeyboardMove",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyboardMove",
+                "method": "onKeyboardMove",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }