@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/list.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { j as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { u as updateListItemChildren, g as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
 import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
@@ -24,24 +24,25 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  table: "table",
-  scrim: "scrim",
-  stack: "stack",
-  tableContainer: "table-container",
-  sticky: "sticky-pos",
-  assistiveText: "assistive-text",
+    container: "container",
+    table: "table",
+    scrim: "scrim",
+    stack: "stack",
+    tableContainer: "table-container",
+    sticky: "sticky-pos",
+    assistiveText: "assistive-text",
 };
 const debounceTimeout = 0;
 const SLOTS = {
-  filterActionsStart: "filter-actions-start",
-  filterActionsEnd: "filter-actions-end",
+    filterNoResults: "filter-no-results",
+    filterActionsStart: "filter-actions-start",
+    filterActionsEnd: "filter-actions-end",
 };
 
-const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-color-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-color-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const listItemSelector = "calcite-list-item";
 const listItemSelectorDirect = `:scope > calcite-list-item`;
@@ -52,14 +53,17 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.calciteListChange = createEvent(this, "calciteListChange", 6);
+        this.calciteListDragEnd = createEvent(this, "calciteListDragEnd", 6);
+        this.calciteListDragStart = createEvent(this, "calciteListDragStart", 6);
         this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
         this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
         this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
-        this.dragSelector = "calcite-list-item";
-        this.enabledListItems = [];
+        this.dragSelector = listItemSelector;
+        this.focusableItems = [];
         this.handleSelector = "calcite-handle";
         this.listItems = [];
         this.mutationObserver = createObserver("mutation", () => this.updateListItems());
+        this.visibleItems = [];
         this.handleDefaultSlotChange = (event) => {
             updateListItemChildren(getListItemChildren(event.target));
             if (this.parentListEl) {
@@ -72,25 +76,28 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         this.handleFilterActionsEndSlotChange = (event) => {
             this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
         };
+        this.handleFilterNoResultsSlotChange = (event) => {
+            this.hasFilterNoResults = slotChangeHasAssignedElement(event);
+        };
         this.setActiveListItem = () => {
-            const { enabledListItems } = this;
-            if (!enabledListItems.some((item) => item.active)) {
-                if (enabledListItems[0]) {
-                    enabledListItems[0].active = true;
+            const { focusableItems } = this;
+            if (!focusableItems.some((item) => item.active)) {
+                if (focusableItems[0]) {
+                    focusableItems[0].active = true;
                 }
             }
         };
         this.updateSelectedItems = (emit = false) => {
-            this.selectedItems = this.enabledListItems.filter((item) => item.selected);
+            this.selectedItems = this.visibleItems.filter((item) => item.selected);
             if (emit) {
                 this.calciteListChange.emit();
             }
         };
         this.updateFilteredItems = (emit = false) => {
-            const { listItems, filteredData, filterText } = this;
+            const { visibleItems, filteredData, filterText } = this;
             const values = filteredData.map((item) => item.value);
-            const lastDescendantItems = listItems === null || listItems === void 0 ? void 0 : listItems.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
-            const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
+            const lastDescendantItems = visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.filter((listItem) => visibleItems.every((li) => li === listItem || !listItem.contains(li)));
+            const filteredItems = visibleItems.filter((item) => !filterText || values.includes(item.value)) || [];
             const visibleParents = new WeakSet();
             lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
             if (filteredItems.length > 0) {
@@ -145,8 +152,9 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
                     this.filterEl.items = this.dataForFilter;
                 }
             }
+            this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
             this.updateFilteredItems(emit);
-            this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
+            this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
             this.setActiveListItem();
             this.updateSelectedItems(emit);
             this.setUpSorting();
@@ -155,11 +163,11 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
             return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
         };
         this.focusRow = (focusEl) => {
-            const { enabledListItems } = this;
+            const { focusableItems } = this;
             if (!focusEl) {
                 return;
             }
-            enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
+            focusableItems.forEach((listItem) => (listItem.active = listItem === focusEl));
             focusEl.setFocus();
         };
         this.isNavigable = (listItem) => {
@@ -176,13 +184,13 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
                 return;
             }
             const { key } = event;
-            const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
-            const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
+            const navigableItems = this.focusableItems.filter((listItem) => this.isNavigable(listItem));
+            const currentIndex = navigableItems.findIndex((listItem) => listItem.active);
             if (key === "ArrowDown") {
                 event.preventDefault();
                 const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
-                if (filteredItems[nextIndex]) {
-                    this.focusRow(filteredItems[nextIndex]);
+                if (navigableItems[nextIndex]) {
+                    this.focusRow(navigableItems[nextIndex]);
                 }
             }
             else if (key === "ArrowUp") {
@@ -192,20 +200,20 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
                     return;
                 }
                 const prevIndex = currentIndex - 1;
-                if (filteredItems[prevIndex]) {
-                    this.focusRow(filteredItems[prevIndex]);
+                if (navigableItems[prevIndex]) {
+                    this.focusRow(navigableItems[prevIndex]);
                 }
             }
             else if (key === "Home") {
                 event.preventDefault();
-                const homeItem = filteredItems[0];
+                const homeItem = navigableItems[0];
                 if (homeItem) {
                     this.focusRow(homeItem);
                 }
             }
             else if (key === "End") {
                 event.preventDefault();
-                const endItem = filteredItems[filteredItems.length - 1];
+                const endItem = navigableItems[navigableItems.length - 1];
                 if (endItem) {
                     this.focusRow(endItem);
                 }
@@ -222,9 +230,9 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
             (_b = this.ancestorOfFirstFilteredItem) === null || _b === void 0 ? void 0 : _b.setAttribute("data-filter", "0");
         };
         this.getTopLevelAncestorItemElement = (el) => {
-            let closestParent = el.parentElement.closest("calcite-list-item");
+            let closestParent = el.parentElement.closest(listItemSelector);
             while (closestParent) {
-                const closestListItemAncestor = closestParent.parentElement.closest("calcite-list-item");
+                const closestListItemAncestor = closestParent.parentElement.closest(listItemSelector);
                 if (closestListItemAncestor) {
                     closestParent = closestListItemAncestor;
                 }
@@ -259,6 +267,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         this.dataForFilter = [];
         this.hasFilterActionsEnd = false;
         this.hasFilterActionsStart = false;
+        this.hasFilterNoResults = false;
     }
     async handleFilterTextChange() {
         this.performFilter();
@@ -274,11 +283,11 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
             return;
         }
         event.stopPropagation();
-        const { enabledListItems } = this;
-        const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
+        const { focusableItems } = this;
+        const currentIndex = focusableItems.findIndex((listItem) => listItem.active);
         const prevIndex = currentIndex - 1;
-        if (enabledListItems[prevIndex]) {
-            this.focusRow(enabledListItems[prevIndex]);
+        if (focusableItems[prevIndex]) {
+            this.focusRow(focusableItems[prevIndex]);
         }
     }
     handleCalciteInternalListItemActive(event) {
@@ -298,7 +307,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         }
         this.updateSelectedItems(true);
     }
-    handleCalciteInternalHandleChange(event) {
+    handleCalciteInternalAssistiveTextChange(event) {
         this.assistiveText = event.detail.message;
         event.stopPropagation();
     }
@@ -326,14 +335,14 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         }
         event.stopPropagation();
         const { target, detail } = event;
-        const { enabledListItems, lastSelectedInfo } = this;
+        const { focusableItems, lastSelectedInfo } = this;
         const selectedItem = target;
         if (detail.selectMultiple && !!lastSelectedInfo) {
-            const currentIndex = enabledListItems.indexOf(selectedItem);
-            const lastSelectedIndex = enabledListItems.indexOf(lastSelectedInfo.selectedItem);
+            const currentIndex = focusableItems.indexOf(selectedItem);
+            const lastSelectedIndex = focusableItems.indexOf(lastSelectedInfo.selectedItem);
             const startIndex = Math.min(lastSelectedIndex, currentIndex);
             const endIndex = Math.max(lastSelectedIndex, currentIndex);
-            enabledListItems
+            focusableItems
                 .slice(startIndex, endIndex + 1)
                 .forEach((item) => (item.selected = lastSelectedInfo.selected));
         }
@@ -405,7 +414,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         if (this.filterEnabled) {
             return (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
         }
-        return (_b = this.enabledListItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
+        return (_b = this.focusableItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
     }
     // --------------------------------------------------------------------------
     //
@@ -413,10 +422,10 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     //
     // --------------------------------------------------------------------------
     render() {
-        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, this.renderItemAriaLive(), 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: SLOTS$1.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+        const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, } = this;
+        return (h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), 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: SLOTS$1.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+            ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))), h("div", { "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, h("slot", { name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -424,12 +433,12 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     //
     // --------------------------------------------------------------------------
     renderItemAriaLive() {
-        const { messages, enabledListItems, parentListEl, effectiveLocale, numberingSystem, filterEnabled, filterText, filteredData, } = this;
+        const { messages, filteredItems, parentListEl, effectiveLocale, numberingSystem, filterEnabled, filterText, filteredData, } = this;
         numberStringFormatter.numberFormatOptions = {
             locale: effectiveLocale,
             numberingSystem,
         };
-        return !parentListEl ? (h("div", { "aria-live": "polite", class: CSS.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, h("div", { key: "aria-item-count" }, messages.total.replace("{count}", numberStringFormatter.localize(enabledListItems.length.toString()))), enabledListItems.length ? (h("ol", { key: "aria-item-list" }, enabledListItems.map((item) => (h("li", null, item.label))))) : null)) : null;
+        return !parentListEl ? (h("div", { "aria-live": "polite", class: CSS.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, h("div", { key: "aria-item-count" }, messages.total.replace("{count}", numberStringFormatter.localize(filteredItems.length.toString()))), filteredItems.length ? (h("ol", { key: "aria-item-list" }, filteredItems.map((item) => (h("li", null, item.label))))) : null)) : null;
     }
     connectObserver() {
         var _a;
@@ -446,12 +455,18 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         }
         connectSortableComponent(this);
     }
-    onDragStart() {
+    onGlobalDragStart() {
         this.disconnectObserver();
     }
-    onDragEnd() {
+    onGlobalDragEnd() {
         this.connectObserver();
     }
+    onDragEnd(detail) {
+        this.calciteListDragEnd.emit(detail);
+    }
+    onDragStart(detail) {
+        this.calciteListDragStart.emit(detail);
+    }
     onDragSort(detail) {
         this.setParentList();
         this.updateListItems();
@@ -462,13 +477,13 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         this.parentListEl = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-list");
     }
     filterElements({ el, filteredItems, visibleParents, }) {
-        const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
-        el.hidden = hidden;
+        const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el);
+        el.filterHidden = filterHidden;
         const closestParent = el.parentElement.closest(parentSelector);
         if (!closestParent) {
             return;
         }
-        if (!hidden) {
+        if (!filterHidden) {
             visibleParents.add(closestParent);
         }
         this.filterElements({
@@ -497,60 +512,42 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         this.updateFilteredData();
     }
     handleNudgeEvent(event) {
+        const { handleSelector, dragSelector } = this;
         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 === null || sortItem === void 0 ? void 0 : sortItem.parentElement;
+        const handle = composedPath.find((el) => (el === null || el === void 0 ? void 0 : el.tagName) && el.matches(handleSelector));
+        const dragEl = composedPath.find((el) => (el === null || el === void 0 ? void 0 : el.tagName) && el.matches(dragSelector));
+        const parentEl = dragEl === null || dragEl === void 0 ? void 0 : dragEl.parentElement;
         if (!parentEl) {
             return;
         }
-        const { enabledListItems } = this;
-        const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+        const { filteredItems } = this;
+        const sameParentItems = filteredItems.filter((item) => item.parentElement === parentEl);
         const lastIndex = sameParentItems.length - 1;
-        const oldIndex = sameParentItems.indexOf(sortItem);
-        let appendInstead = false;
+        const oldIndex = sameParentItems.indexOf(dragEl);
         let newIndex;
         if (direction === "up") {
-            if (oldIndex === 0) {
-                appendInstead = true;
-                newIndex = lastIndex;
-            }
-            else {
-                newIndex = oldIndex - 1;
-            }
+            newIndex = oldIndex === 0 ? lastIndex : oldIndex - 1;
         }
         else {
-            if (oldIndex === lastIndex) {
-                newIndex = 0;
-            }
-            else if (oldIndex === lastIndex - 1) {
-                appendInstead = true;
-                newIndex = lastIndex;
-            }
-            else {
-                newIndex = oldIndex + 2;
-            }
+            newIndex = oldIndex === lastIndex ? 0 : oldIndex + 1;
         }
         this.disconnectObserver();
-        if (appendInstead) {
-            parentEl.appendChild(sortItem);
-        }
-        else {
-            parentEl.insertBefore(sortItem, sameParentItems[newIndex]);
-        }
+        handle.blurUnselectDisabled = true;
+        const referenceEl = (direction === "up" && newIndex !== lastIndex) || (direction === "down" && newIndex === 0)
+            ? sameParentItems[newIndex]
+            : sameParentItems[newIndex].nextSibling;
+        parentEl.insertBefore(dragEl, referenceEl);
         this.updateListItems();
         this.connectObserver();
         this.calciteListOrderChange.emit({
-            dragEl: sortItem,
+            dragEl,
             fromEl: parentEl,
             toEl: parentEl,
             newIndex,
             oldIndex,
         });
-        handle.setFocus().then(() => {
-            handle.activated = true;
-        });
+        handle.setFocus().then(() => (handle.blurUnselectDisabled = false));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -591,8 +588,9 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         "dataForFilter": [32],
         "hasFilterActionsEnd": [32],
         "hasFilterActionsStart": [32],
+        "hasFilterNoResults": [32],
         "setFocus": [64]
-    }, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalHandleChange", "handleCalciteInternalHandleChange"], [0, "calciteHandleNudge", "handleCalciteHandleNudge"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteInternalListItemSelectMultiple", "handleCalciteInternalListItemSelectMultiple"], [0, "calciteInternalListItemChange", "handleCalciteInternalListItemChange"], [0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListItemGroupDefaultSlotChange"]], {
+    }, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalAssistiveTextChange", "handleCalciteInternalAssistiveTextChange"], [0, "calciteHandleNudge", "handleCalciteHandleNudge"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteInternalListItemSelectMultiple", "handleCalciteInternalListItemSelectMultiple"], [0, "calciteInternalListItemChange", "handleCalciteInternalListItemChange"], [0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListItemGroupDefaultSlotChange"]], {
         "filterText": ["handleFilterTextChange"],
         "messageOverrides": ["onMessagesChange"],
         "filterEnabled": ["handleListItemChange"],

package/dist/components/loadable.js

@@ -8,7 +8,7 @@ import { Build, forceUpdate } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();
@@ -26,7 +26,7 @@ const promiseMap = new WeakMap();
  * @param component
  */
 function setUpLoadableComponent(component) {
-  promiseMap.set(component, new Promise((resolve) => resolveMap.set(component, resolve)));
+    promiseMap.set(component, new Promise((resolve) => resolveMap.set(component, resolve)));
 }
 /**
  * This helper util lets the loadable component know that it is now loaded.
@@ -42,7 +42,7 @@ function setUpLoadableComponent(component) {
  * @param component
  */
 function setComponentLoaded(component) {
-  resolveMap.get(component)();
+    resolveMap.get(component)();
 }
 /**
  * This helper util can be used to ensure a component has been loaded (The "componentDidLoad" Stencil lifecycle method has been called).
@@ -61,7 +61,7 @@ function setComponentLoaded(component) {
  * @returns Promise<void>
  */
 function componentLoaded(component) {
-  return promiseMap.get(component);
+    return promiseMap.get(component);
 }
 /**
  * This helper util can be used to ensuring the component is loaded and rendered by the browser (The "componentDidLoad" Stencil lifecycle method has been called and any internal elements are focusable).
@@ -81,12 +81,12 @@ function componentLoaded(component) {
  * @returns Promise<void>
  */
 async function componentFocusable(component) {
-  await componentLoaded(component);
-  if (!Build.isBrowser) {
-    return;
-  }
-  forceUpdate(component);
-  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    await componentLoaded(component);
+    if (!Build.isBrowser) {
+        return;
+    }
+    forceUpdate(component);
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
 
 export { setComponentLoaded as a, componentLoaded as b, componentFocusable as c, setUpLoadableComponent as s };