npm - @esri/calcite-components - Versions diffs - 1.5.0-next.31 → 1.5.0-next.33 - Mend

@esri/calcite-components 1.5.0-next.31 → 1.5.0-next.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (961) hide show

package/dist/collection/components/split-button/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";

package/dist/collection/components/stack/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/stack/stack.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host } from "@stencil/core";
 import { slotChangeHasAssignedElement } from "../../utils/dom";

package/dist/collection/components/stepper/stepper.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { focusElementInGroup } from "../../utils/dom";

package/dist/collection/components/stepper-item/stepper-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/switch/switch.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tab/tab.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tab-nav/tab-nav.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { filterDirectChildren, focusElementInGroup, getElementDir, } from "../../utils/dom";

package/dist/collection/components/tab-title/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   closeButton: "close-button",

package/dist/collection/components/tab-title/tab-title.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Build, h, Host, } from "@stencil/core";
 import { getElementDir, getElementProp, toAriaBoolean, nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tabs/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const SLOTS = {
   titleGroup: "title-group",

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/text-area/resources.js CHANGED Viewed

@@ -1,9 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
+  assistiveText: "assistive-text",
   characterLimit: "character-limit",
   content: "content",
   container: "container",

package/dist/collection/components/text-area/text-area.css CHANGED Viewed

@@ -210,6 +210,18 @@ textarea.block-size--full {
   justify-content: flex-end;
 }
+.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;
+}
 ::slotted(input[slot=hidden-form-input]) {
   margin: 0 !important;
   opacity: 0 !important;

package/dist/collection/components/text-area/text-area.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -14,6 +14,7 @@ import { componentFocusable, componentLoaded, setComponentLoaded, setUpLoadableC
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { throttle } from "lodash-es";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
+import { guid } from "../../utils/guid";
 /**
  * @slot - A slot for adding text.
  * @slot footer-start - A slot for adding content to the start of the component's footer.
@@ -21,6 +22,7 @@ import { connectInteractive, disconnectInteractive, updateHostInteraction, } fro
  */
 export class TextArea {
   constructor() {
+    this.guid = guid();
     this.handleInput = (event) => {
       this.value = event.target["value"];
       this.calciteTextAreaInput.emit();
@@ -41,7 +43,7 @@ export class TextArea {
     this.renderCharacterLimit = () => {
       if (this.maxLength) {
         this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
-        return (h("span", { class: CSS.characterLimit }, h("span", { class: { [CSS.characterOverLimit]: this.value?.length > this.maxLength } }, this.localizedCharacterLengthObj.currentLength), "/", this.localizedCharacterLengthObj.maxLength));
+        return (h("span", { class: CSS.characterLimit }, h("span", { class: { [CSS.characterOverLimit]: this.isCharacterLimitExceeded() } }, this.localizedCharacterLengthObj.currentLength), "/", this.localizedCharacterLengthObj.maxLength));
       }
       return null;
     };
@@ -55,6 +57,10 @@ export class TextArea {
         this.setHeightAndWidthToAuto();
       }
     });
+    this.setTextAreaEl = (el) => {
+      this.textAreaEl = el;
+      this.resizeObserver.observe(el);
+    };
     // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
     // throttle is used to avoid flashing of textarea when user resizes.
     this.setHeightAndWidthToAuto = throttle(() => {
@@ -65,10 +71,6 @@ export class TextArea {
         this.el.style.width = "auto";
       }
     }, RESIZE_TIMEOUT, { leading: false });
-    this.setTextAreaEl = (el) => {
-      this.textAreaEl = el;
-      this.resizeObserver.observe(el);
-    };
     this.autofocus = false;
     this.columns = undefined;
     this.disabled = false;
@@ -130,9 +132,9 @@ export class TextArea {
   }
   render() {
     const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
-    return (h(Host, null, h("textarea", { "aria-invalid": toAriaBoolean(this.value?.length > this.maxLength), "aria-label": getLabelText(this), autofocus: this.autofocus, class: {
+    return (h(Host, null, h("textarea", { "aria-describedby": this.guid, "aria-invalid": toAriaBoolean(this.isCharacterLimitExceeded()), "aria-label": getLabelText(this), autofocus: this.autofocus, class: {
         [CSS.readOnly]: this.readOnly,
-        [CSS.textAreaInvalid]: this.value?.length > this.maxLength,
+        [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
         [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
         [CSS.blockSizeFull]: !hasFooter,
         [CSS.borderColor]: !hasFooter,
@@ -145,7 +147,7 @@ export class TextArea {
       }, ref: (el) => (this.footerEl = el) }, h("div", { class: {
         [CSS.container]: true,
         [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,
-      } }, h("slot", { name: SLOTS.footerStart, onSlotchange: (event) => (this.startSlotHasElements = slotChangeHasAssignedElement(event)) }), h("slot", { name: SLOTS.footerEnd, onSlotchange: (event) => (this.endSlotHasElements = slotChangeHasAssignedElement(event)) })), this.renderCharacterLimit()), h(HiddenFormInputSlot, { component: this })));
+      } }, h("slot", { name: SLOTS.footerStart, onSlotchange: (event) => (this.startSlotHasElements = slotChangeHasAssignedElement(event)) }), h("slot", { name: SLOTS.footerEnd, onSlotchange: (event) => (this.endSlotHasElements = slotChangeHasAssignedElement(event)) })), this.renderCharacterLimit()), h(HiddenFormInputSlot, { component: this }), this.isCharacterLimitExceeded() && (h("span", { "aria-hidden": true, "aria-live": "polite", class: CSS.assistiveText, id: this.guid }, this.replacePlaceHoldersInMessages()))));
   }
   //--------------------------------------------------------------------------
   //
@@ -195,15 +197,10 @@ export class TextArea {
   }
   syncHiddenFormInput(input) {
     input.setCustomValidity("");
-    if (this.value?.length > this.maxLength) {
+    if (this.isCharacterLimitExceeded()) {
       input.setCustomValidity(this.replacePlaceHoldersInMessages());
     }
   }
-  replacePlaceHoldersInMessages() {
-    return this.messages.tooLong
-      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
-      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
-  }
   setTextAreaHeight() {
     const { textAreaHeight, elHeight, footerHeight } = this.getHeightandWidthOfElements();
     if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {
@@ -223,6 +220,14 @@ export class TextArea {
       footerWidth,
     };
   }
+  replacePlaceHoldersInMessages() {
+    return this.messages.tooLong
+      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
+      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
+  }
+  isCharacterLimitExceeded() {
+    return this.value?.length > this.maxLength;
+  }
   static get is() { return "calcite-text-area"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

package/dist/collection/components/tile/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/tile-select/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tile-select-group/tile-select-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";

package/dist/collection/components/time-picker/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";

package/dist/collection/components/tip/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tip/tip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/tip-group/tip-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h } from "@stencil/core";
 /**

package/dist/collection/components/tip-manager/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tooltip/TooltipManager.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { getShadowRootNode, isPrimaryPointerButton } from "../../utils/dom";
 import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "./resources";

package/dist/collection/components/tooltip/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tooltip/tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tooltip/utils.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { queryElementRoots } from "../../utils/dom";
 export function getEffectiveReferenceElement(tooltip) {

package/dist/collection/components/tree/tree.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tree/utils.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 function isTreeItem(element) {
   return element?.matches("calcite-tree-item");

package/dist/collection/components/tree-item/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   actionsEnd: "actions-end",

package/dist/collection/components/tree-item/tree-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { slotChangeHasAssignedElement, filterDirectChildren, getElementDir, getSlotted, nodeListToArray, toAriaBoolean, } from "../../utils/dom";

package/dist/collection/components/value-list/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/value-list/utils.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { getItemIndex } from "../pick-list/shared-list-logic";
 export function getScreenReaderText(item, status, valueList) {

package/dist/collection/components/value-list/value-list.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
@@ -13,7 +13,7 @@ import { calciteInternalListItemValueChangeHandler, calciteListFocusOutHandler,
 import List from "../pick-list/shared-list-render";
 import { CSS, ICON_TYPES } from "./resources";
 import { getHandleAndItemElement, getScreenReaderText } from "./utils";
-import { connectSortableComponent, disconnectSortableComponent, onSortingStart, onSortingEnd, } from "../../utils/sortableComponent";
+import { connectSortableComponent, disconnectSortableComponent, } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 /**
  * @deprecated Use the `list` component instead.
@@ -24,6 +24,8 @@ export class ValueList {
   constructor() {
     this.lastSelectedItem = null;
     this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
+    this.handleSelector = `.${CSS.handle}`;
+    this.dragSelector = "calcite-value-list-item";
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
@@ -84,6 +86,8 @@ export class ValueList {
       }
     };
     this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
     this.dragEnabled = false;
     this.filteredItems = [];
     this.filteredData = [];
@@ -160,6 +164,17 @@ export class ValueList {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  onDragStart() {
+    cleanUpObserver.call(this);
+  }
+  onDragEnd() {
+    initializeObserver.call(this);
+  }
+  onDragSort() {
+    this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+    const values = this.items.map((item) => item.value);
+    this.calciteListOrderChange.emit(values);
+  }
   getItems() {
     return Array.from(this.el.querySelectorAll("calcite-value-list-item"));
   }
@@ -173,29 +188,11 @@ export class ValueList {
     }
   }
   setUpSorting() {
-    const { dragEnabled, group } = this;
+    const { dragEnabled } = this;
     if (!dragEnabled) {
       return;
     }
-    connectSortableComponent(this, {
-      dataIdAttr: "id",
-      group,
-      handle: `.${CSS.handle}`,
-      draggable: "calcite-value-list-item",
-      onStart: () => {
-        cleanUpObserver.call(this);
-        onSortingStart(this);
-      },
-      onEnd: () => {
-        onSortingEnd(this);
-        initializeObserver.call(this);
-      },
-      onUpdate: () => {
-        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-        const values = this.items.map((item) => item.value);
-        this.calciteListOrderChange.emit(values);
-      },
-    });
+    connectSortableComponent(this);
   }
   handleBlur() {
     if (this.dragEnabled) {
@@ -281,6 +278,46 @@ export class ValueList {
         "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,

package/dist/collection/components/value-list-item/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.31
+ * v1.5.0-next.33
  */
 export const ICONS = {
   drag: "drag",