@esri/calcite-components 1.5.0-next.3 → 1.5.0-next.30

package/dist/components/dom.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { g as guid } from './guid.js';
 
@@ -19,11 +19,11 @@ const CSS_UTILITY = {
   calciteAnimateInDown: "calcite-animate__in-down",
   calciteAnimateInRight: "calcite-animate__in-right",
   calciteAnimateInLeft: "calcite-animate__in-left",
-  calciteAnimateInScale: "calcite-animate__in-scale"
+  calciteAnimateInScale: "calcite-animate__in-scale",
 };
 
 /*!
-* tabbable 6.1.2
+* tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -203,7 +203,27 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   }
   return candidates;
 };
-var getTabindex = function getTabindex(node, isScope) {
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
   if (node.tabIndex < 0) {
     // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
     // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -212,16 +232,28 @@ var getTabindex = function getTabindex(node, isScope) {
     // order, consider their tab index to be 0.
     // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
     // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    //
-    // isScope is positive for custom element with shadow root or slot that by default
-    // have tabIndex -1, but need to be sorted by document order in order for their
-    // content to be inserted in the correct position
-    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
       return 0;
     }
   }
   return node.tabIndex;
 };
+
+/**
+ * Determine the tab index of a given node __for sort order purposes__.
+ * @param {HTMLElement} node
+ * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
+ *  has tabIndex -1, but needs to be sorted by document order in order for its content to be
+ *  inserted into the correct sort position.
+ * @returns {number} Tab order (negative, 0, or positive number).
+ */
+var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
+  var tabIndex = getTabIndex(node);
+  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
+    return 0;
+  }
+  return tabIndex;
+};
 var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
   return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
 };
@@ -464,7 +496,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
   return true;
 };
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
+  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
   return true;
@@ -489,7 +521,7 @@ var sortByOrder = function sortByOrder(candidates) {
   candidates.forEach(function (item, i) {
     var isScope = !!item.scopeParent;
     var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getTabindex(element, isScope);
+    var candidateTabindex = getSortOrderTabIndex(element, isScope);
     var elements = isScope ? sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
@@ -508,32 +540,32 @@ var sortByOrder = function sortByOrder(candidates) {
     return acc;
   }, []).concat(regularTabbables);
 };
-var tabbable = function tabbable(el, options) {
+var tabbable = function tabbable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
       getShadowRoot: options.getShadowRoot,
       shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
   return sortByOrder(candidates);
 };
-var focusable = function focusable(el, options) {
+var focusable = function focusable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorFocusable.bind(null, options),
       flatten: true,
       getShadowRoot: options.getShadowRoot
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
   }
   return candidates;
 };
@@ -565,7 +597,7 @@ var isFocusable = function isFocusable(node, options) {
  * See https://github.com/focus-trap/tabbable#tabbable
  */
 const tabbableOptions = {
-  getShadowRoot: true
+  getShadowRoot: true,
 };
 /**
  * This helper will guarantee an ID on the provided element.
@@ -665,7 +697,7 @@ function getHost(root) {
  * @param root0.id
  * @returns {Element} An element.
  */
-function queryElementRoots(element, { selector, id }) {
+function queryElementRoots(element, { selector, id, }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
   // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFrom(el) {
@@ -680,7 +712,7 @@ function queryElementRoots(element, { selector, id }) {
       ? "getElementById" in rootNode
         ? /*
           Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
-          https://github.com/Esri/calcite-components/pull/4280
+          https://github.com/Esri/calcite-design-system/pull/4280
            */
           rootNode.getElementById(id)
         : null
@@ -887,7 +919,7 @@ function slotChangeHasAssignedElement(event) {
  */
 function slotChangeGetAssignedElements(event) {
   return event.target.assignedElements({
-    flatten: true
+    flatten: true,
   });
 }
 /**
@@ -935,4 +967,4 @@ const focusElementInGroup = (elements, currentElement, destination, cycle = true
   return focusTarget;
 };
 
-export { isFocusable as A, tabbableOptions as B, CSS_UTILITY as C, autoMode as a, getSlotted as b, getElementDir as c, darkMode as d, closestElementCrossShadowBoundary as e, slotChangeHasAssignedElement as f, getElementProp as g, setRequestedIcon as h, focusElementInGroup as i, isPrimaryPointerButton as j, focusElement as k, focusFirstTabbable as l, ensureId as m, intersects as n, nodeListToArray as o, getRootNode as p, filterDirectChildren as q, getModeName as r, slotChangeGetAssignedElements as s, toAriaBoolean as t, queryElementRoots as u, getShadowRootNode as v, containsCrossShadowBoundary as w, tabbable as x, focusable as y, isTabbable as z };
+export { getTabIndex as A, isFocusable as B, CSS_UTILITY as C, tabbableOptions as D, autoMode as a, getElementDir as b, slotChangeHasAssignedElement as c, darkMode as d, setRequestedIcon as e, focusFirstTabbable as f, getSlotted as g, focusElementInGroup as h, isPrimaryPointerButton as i, getElementProp as j, focusElement as k, ensureId as l, intersects as m, nodeListToArray as n, getRootNode as o, filterDirectChildren as p, getModeName as q, closestElementCrossShadowBoundary as r, slotChangeGetAssignedElements as s, toAriaBoolean as t, queryElementRoots as u, getShadowRootNode as v, containsCrossShadowBoundary as w, tabbable as x, focusable as y, isTabbable as z };

package/dist/components/dropdown.js

@@ -1,23 +1,23 @@
 /*!
  * 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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { t as toAriaBoolean, j as isPrimaryPointerButton, i as focusElementInGroup, k as focusElement } from './dom.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, h as focusElementInGroup, k as focusElement } from './dom.js';
 import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
 import { g as guid } from './guid.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { i as isActivationKey } from './key.js';
-import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
+import { c as componentFocusable, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { c as createObserver } from './observers.js';
-import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 
 const SLOTS = {
-  dropdownTrigger: "trigger"
+  dropdownTrigger: "trigger",
 };
 
-const dropdownCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;flex:0 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{visibility:visible}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-trigger-container{position:relative;display:flex;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
+const dropdownCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;flex:0 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{visibility:visible}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-trigger-container{position:relative;display:flex;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -43,7 +43,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     //--------------------------------------------------------------------------
     this.slotChangeHandler = (event) => {
       this.defaultAssignedElements = event.target.assignedElements({
-        flatten: true
+        flatten: true,
       });
       this.updateItems();
     };
@@ -55,7 +55,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.updateTriggers = (event) => {
       this.triggers = event.target.assignedElements({
-        flatten: true
+        flatten: true,
       });
       this.reposition(true);
     };
@@ -106,7 +106,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.resizeObserver.observe(el);
       this.scrollerEl = el;
       this.transitionEl = el;
-      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -177,6 +176,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (value) {
         this.reposition(true);
       }
+      onToggleOpenCloseComponent(this);
       return;
     }
     this.open = false;
@@ -206,7 +206,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   //--------------------------------------------------------------------------
@@ -220,9 +220,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.reposition(true);
     if (this.open) {
       this.openHandler(this.open);
+      onToggleOpenCloseComponent(this);
     }
     connectInteractive(this);
-    connectOpenCloseComponent(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -239,7 +239,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.resizeObserver?.disconnect();
     disconnectInteractive(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    disconnectOpenCloseComponent(this);
   }
   render() {
     const { open, guid } = this;
@@ -250,7 +249,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
-        [FloatingCSS.animationActive]: open
+        [FloatingCSS.animationActive]: open,
       }, id: `${guid}-menu`, role: "menu",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setScrollerAndTransitionEl }, h("slot", { onSlotchange: this.updateGroups })))));
@@ -273,7 +272,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
-      type: "menu"
+      type: "menu",
     }, delayed);
   }
   closeCalciteDropdownOnClick(event) {

package/dist/components/el.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-au.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-ca.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-gb.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/es-mx.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/es.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/et.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/fi.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/filter.js

@@ -1,12 +1,12 @@
 /*!
  * 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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter2.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
-import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
 import { d as defineCustomElement$3 } from './icon.js';
@@ -16,15 +16,15 @@ import { d as debounce } from './debounce.js';
 
 const CSS = {
   container: "container",
-  searchIcon: "search-icon"
+  searchIcon: "search-icon",
 };
 const ICONS = {
   search: "search",
-  close: "x"
+  close: "x",
 };
 const DEBOUNCE_TIMEOUT = 250;
 
-const filterCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
+const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -37,11 +37,11 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.filter = debounce((value, emit = false) => this.updateFiltered(filter(this.items, value), emit), DEBOUNCE_TIMEOUT);
+    this.filterDebounced = debounce((value, emit = false, onFilter) => this.updateFiltered(filter(this.items, value), emit, onFilter), DEBOUNCE_TIMEOUT);
     this.inputHandler = (event) => {
       const target = event.target;
       this.value = target.value;
-      this.filter(target.value, true);
+      this.filterDebounced(target.value, true);
     };
     this.keyDownHandler = (event) => {
       if (event.key === "Escape") {
@@ -54,7 +54,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.clear = () => {
       this.value = "";
-      this.filter("", true);
+      this.filterDebounced("", true);
       this.setFocus();
     };
     this.items = [];
@@ -69,13 +69,13 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.defaultMessages = undefined;
   }
   watchItemsHandler() {
-    this.filter(this.value);
+    this.filterDebounced(this.value);
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   valueHandler(value) {
-    this.filter(value);
+    this.filterDebounced(value);
   }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
@@ -102,6 +102,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
+    this.filterDebounced.cancel();
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -111,17 +112,31 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /**
+   * Performs a filter on the component.
+   *
+   * This method can be useful because filtering is delayed and asynchronous.
+   *
+   * @param {string} value - The filter text value.
+   * @returns {Promise<void>}
+   */
+  async filter(value = this.value) {
+    return new Promise((resolve) => {
+      this.value = value;
+      this.filterDebounced(value, false, resolve);
+    });
+  }
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el?.focus();
   }
-  updateFiltered(filtered, emit = false) {
-    this.filteredItems.length = 0;
-    this.filteredItems = this.filteredItems.concat(filtered);
+  updateFiltered(filtered, emit = false, callback) {
+    this.filteredItems = filtered;
     if (emit) {
       this.calciteFilterChange.emit();
     }
+    callback?.();
   }
   // --------------------------------------------------------------------------
   //
@@ -157,6 +172,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "messageOverrides": [1040],
     "effectiveLocale": [32],
     "defaultMessages": [32],
+    "filter": [64],
     "setFocus": [64]
   }]);
 function defineCustomElement() {

package/dist/components/filter2.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.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';