@esri/calcite-components 1.5.0-next.8 → 1.5.0

package/dist/collection/components/list/list.js

@@ -1,20 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { debounce } from "lodash-es";
 import { slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 import { MAX_COLUMNS } from "../list-item/resources";
 import { getListItemChildren, updateListItemChildren } from "../list-item/utils";
 import { CSS, debounceTimeout, SLOTS } from "./resources";
+import { connectSortableComponent, disconnectSortableComponent, } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
 const listItemSelector = "calcite-list-item";
+const listItemSelectorDirect = `:scope > calcite-list-item`;
 const parentSelector = "calcite-list-item-group, calcite-list-item";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
@@ -24,16 +26,16 @@ import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../
  */
 export class List {
   constructor() {
-    this.listItems = [];
+    this.dragSelector = "calcite-list-item";
     this.enabledListItems = [];
+    this.handleSelector = "calcite-handle";
+    this.listItems = [];
     this.mutationObserver = createObserver("mutation", () => this.updateListItems());
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.handleDefaultSlotChange = (event) => {
-      updateListItemChildren(getListItemChildren(event));
+      updateListItemChildren(getListItemChildren(event.target));
+      if (this.parentListEl) {
+        this.calciteInternalListDefaultSlotChange.emit();
+      }
     };
     this.handleFilterActionsStartSlotChange = (event) => {
       this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
@@ -82,15 +84,26 @@ export class List {
         label: item.label,
         description: item.description,
         metadata: item.metadata,
-        value: item.value
+        value: item.value,
       }));
     };
     this.updateListItems = debounce((emit = false) => {
-      const { selectionAppearance, selectionMode } = this;
+      const { selectionAppearance, selectionMode, dragEnabled } = this;
+      if (!!this.parentListEl) {
+        const items = this.queryListItems(true);
+        items.forEach((item) => {
+          item.selectionAppearance = selectionAppearance;
+          item.selectionMode = selectionMode;
+          item.dragHandle = dragEnabled;
+        });
+        this.setUpSorting();
+        return;
+      }
       const items = this.queryListItems();
       items.forEach((item) => {
         item.selectionAppearance = selectionAppearance;
         item.selectionMode = selectionMode;
+        item.dragHandle = dragEnabled;
       });
       this.listItems = items;
       if (this.filterEnabled) {
@@ -100,12 +113,13 @@ export class List {
         }
       }
       this.updateFilteredItems(emit);
-      this.enabledListItems = items.filter((item) => !item.disabled && !item.closed);
+      this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
       this.setActiveListItem();
       this.updateSelectedItems(emit);
+      this.setUpSorting();
     }, debounceTimeout);
-    this.queryListItems = () => {
-      return Array.from(this.el.querySelectorAll(listItemSelector));
+    this.queryListItems = (direct = false) => {
+      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
     };
     this.focusRow = (focusEl) => {
       const { enabledListItems } = this;
@@ -123,7 +137,7 @@ export class List {
       return parentListItemEl.open && this.isNavigable(parentListItemEl);
     };
     this.handleListKeydown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || !!this.parentListEl) {
         return;
       }
       const { key } = event;
@@ -131,13 +145,17 @@ export class List {
       const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
       if (key === "ArrowDown") {
         event.preventDefault();
-        const nextIndex = currentIndex + 1;
+        const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
         if (filteredItems[nextIndex]) {
           this.focusRow(filteredItems[nextIndex]);
         }
       }
       else if (key === "ArrowUp") {
         event.preventDefault();
+        if (currentIndex === 0 && this.filterEnabled) {
+          this.filterEl?.setFocus();
+          return;
+        }
         const prevIndex = currentIndex - 1;
         if (filteredItems[prevIndex]) {
           this.focusRow(filteredItems[prevIndex]);
@@ -159,6 +177,10 @@ export class List {
       }
     };
     this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
+    this.dragEnabled = false;
+    this.group = undefined;
     this.filterEnabled = false;
     this.filteredItems = [];
     this.filteredData = [];
@@ -170,20 +192,21 @@ export class List {
     this.selectedItems = [];
     this.selectionMode = "none";
     this.selectionAppearance = "icon";
+    this.assistiveText = undefined;
     this.dataForFilter = [];
-    this.hasFilterActionsStart = false;
     this.hasFilterActionsEnd = false;
-  }
-  handleFilterEnabledChange() {
-    this.updateListItems();
+    this.hasFilterActionsStart = false;
   }
   async handleFilterTextChange() {
     this.performFilter();
   }
-  handleSelectionAppearanceChange() {
+  handleListItemChange() {
     this.updateListItems();
   }
   handleCalciteInternalFocusPreviousItem(event) {
+    if (this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     const { enabledListItems } = this;
     const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
@@ -193,6 +216,10 @@ export class List {
     }
   }
   handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     const target = event.target;
     const { listItems } = this;
     listItems.forEach((listItem) => {
@@ -200,9 +227,26 @@ export class List {
     });
   }
   handleCalciteListItemSelect() {
+    if (!!this.parentListEl) {
+      return;
+    }
     this.updateSelectedItems(true);
   }
+  handleCalciteInternalHandleChange(event) {
+    this.assistiveText = event.detail.message;
+    event.stopPropagation();
+  }
+  handleCalciteHandleNudge(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.handleNudgeEvent(event);
+  }
   handleCalciteInternalListItemSelect(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     const target = event.target;
     const { listItems, selectionMode } = this;
     if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
@@ -210,21 +254,31 @@ export class List {
     }
     this.updateSelectedItems();
   }
-  handleCalciteListItemClose() {
+  handleCalciteInternalListItemChange(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     this.updateListItems(true);
   }
+  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+    event.stopPropagation();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+    this.connectObserver();
     this.updateListItems();
+    this.setUpSorting();
     connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
     disconnectInteractive(this);
   }
   componentWillLoad() {
@@ -243,8 +297,11 @@ export class List {
   // --------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
-    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+    await componentFocusable(this);
+    if (this.filterEnabled) {
+      return this.filterEl?.setFocus();
+    }
+    return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -252,12 +309,45 @@ export class List {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd } = this;
-    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: STACK_SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
+    return (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: STACK_SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: STACK_SLOTS.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
-  filterElements({ el, filteredItems, visibleParents }) {
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  connectObserver() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectObserver() {
+    this.mutationObserver?.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled } = this;
+    if (!dragEnabled) {
+      return;
+    }
+    connectSortableComponent(this);
+  }
+  onDragStart() {
+    this.disconnectObserver();
+  }
+  onDragEnd() {
+    this.connectObserver();
+  }
+  onDragSort(event) {
+    this.updateListItems();
+    const { from, item, to } = event;
+    this.calciteListOrderChange.emit({
+      dragEl: item,
+      fromEl: from,
+      toEl: to,
+    });
+  }
+  filterElements({ el, filteredItems, visibleParents, }) {
     const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
     el.hidden = hidden;
     const closestParent = el.parentElement.closest(parentSelector);
@@ -270,7 +360,7 @@ export class List {
     this.filterElements({
       el: closestParent,
       filteredItems,
-      visibleParents
+      visibleParents,
     });
   }
   updateFilteredData(emit = false) {
@@ -292,6 +382,58 @@ export class List {
     await filterEl.filter(filterText);
     this.updateFilteredData();
   }
+  handleNudgeEvent(event) {
+    const { direction } = event.detail;
+    const composedPath = event.composedPath();
+    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
+    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
+    const parentEl = sortItem?.parentElement;
+    if (!parentEl) {
+      return;
+    }
+    const { enabledListItems } = this;
+    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+    const lastIndex = sameParentItems.length - 1;
+    const startingIndex = sameParentItems.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    if (direction === "up") {
+      if (startingIndex === 0) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex - 1;
+      }
+    }
+    else {
+      if (startingIndex === lastIndex) {
+        buddyIndex = 0;
+      }
+      else if (startingIndex === lastIndex - 1) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex + 2;
+      }
+    }
+    this.disconnectObserver();
+    if (appendInstead) {
+      parentEl.appendChild(sortItem);
+    }
+    else {
+      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
+    }
+    this.updateListItems();
+    this.connectObserver();
+    this.calciteListOrderChange.emit({
+      dragEl: sortItem,
+      fromEl: null,
+      toEl: null,
+    });
+    handle.setFocus().then(() => {
+      handle.activated = true;
+    });
+  }
   static get is() { return "calcite-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -324,6 +466,81 @@ export class List {
         "reflect": true,
         "defaultValue": "false"
       },
+      "canPull": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(event: DragEvent) => boolean",
+          "resolved": "(event: DragEvent) => boolean",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When provided, the method will be called to determine whether the element can  move from the list."
+        }
+      },
+      "canPut": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(event: DragEvent) => boolean",
+          "resolved": "(event: DragEvent) => boolean",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When provided, the method will be called to determine whether the element can be added from another list."
+        }
+      },
+      "dragEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, `calcite-list-item`s are sortable via a draggable button."
+        },
+        "attribute": "drag-enabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "group": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        },
+        "attribute": "group",
+        "reflect": true
+      },
       "filterEnabled": {
         "type": "boolean",
         "mutable": false,
@@ -555,9 +772,10 @@ export class List {
   }
   static get states() {
     return {
+      "assistiveText": {},
       "dataForFilter": {},
-      "hasFilterActionsStart": {},
-      "hasFilterActionsEnd": {}
+      "hasFilterActionsEnd": {},
+      "hasFilterActionsStart": {}
     };
   }
   static get events() {
@@ -591,6 +809,46 @@ export class List {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "calciteListOrderChange",
+        "name": "calciteListOrderChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the order of the list has changed."
+        },
+        "complexType": {
+          "original": "DragEvent",
+          "resolved": "DragEvent",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        }
+      }, {
+        "method": "calciteInternalListDefaultSlotChange",
+        "name": "calciteInternalListDefaultSlotChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the default slot has changes in order to notify parent lists."
+        },
+        "complexType": {
+          "original": "DragEvent",
+          "resolved": "DragEvent",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -616,17 +874,23 @@ export class List {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "filterEnabled",
-        "methodName": "handleFilterEnabledChange"
-      }, {
         "propName": "filterText",
         "methodName": "handleFilterTextChange"
+      }, {
+        "propName": "filterEnabled",
+        "methodName": "handleListItemChange"
+      }, {
+        "propName": "group",
+        "methodName": "handleListItemChange"
+      }, {
+        "propName": "dragEnabled",
+        "methodName": "handleListItemChange"
       }, {
         "propName": "selectionMode",
-        "methodName": "handleSelectionAppearanceChange"
+        "methodName": "handleListItemChange"
       }, {
         "propName": "selectionAppearance",
-        "methodName": "handleSelectionAppearanceChange"
+        "methodName": "handleListItemChange"
       }];
   }
   static get listeners() {
@@ -648,6 +912,18 @@ export class List {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteInternalHandleChange",
+        "method": "handleCalciteInternalHandleChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteHandleNudge",
+        "method": "handleCalciteHandleNudge",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "calciteInternalListItemSelect",
         "method": "handleCalciteInternalListItemSelect",
@@ -655,8 +931,14 @@ export class List {
         "capture": false,
         "passive": false
       }, {
-        "name": "calciteListItemClose",
-        "method": "handleCalciteListItemClose",
+        "name": "calciteInternalListItemChange",
+        "method": "handleCalciteInternalListItemChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteInternalListItemGroupDefaultSlotChange",
+        "method": "handleCalciteInternalListItemGroupDefaultSlotChange",
         "target": undefined,
         "capture": false,
         "passive": false

package/dist/collection/components/list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
 export const CSS = {
   container: "container",
@@ -9,10 +9,11 @@ export const CSS = {
   scrim: "scrim",
   stack: "stack",
   tableContainer: "table-container",
-  sticky: "sticky-pos"
+  sticky: "sticky-pos",
+  assistiveText: "assistive-text",
 };
 export const debounceTimeout = 0;
 export const SLOTS = {
   filterActionsStart: "filter-actions-start",
-  filterActionsEnd: "filter-actions-end"
+  filterActionsEnd: "filter-actions-end",
 };