@esri/calcite-components 1.0.0-next.455 → 1.0.0-next.458

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-05-04T16:22:30",
+  "timestamp": "2022-05-06T17:31:09",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.15.1",
@@ -19450,7 +19450,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "- A slot for `calcite-tree-item` elements."
+          "text": "- A slot for calcite-tree-item elements."
         }
       ],
       "usage": {
@@ -19467,11 +19467,11 @@
           "docsTags": [
             {
               "name": "deprecated",
-              "text": "use \"ancestors\" selection-mode for checkbox input"
+              "text": "Use \"ancestors\" selection-mode for checkbox input."
             }
           ],
           "default": "false",
-          "deprecation": "use \"ancestors\" selection-mode for checkbox input",
+          "deprecation": "Use \"ancestors\" selection-mode for checkbox input.",
           "values": [
             {
               "type": "boolean"
@@ -19486,7 +19486,7 @@
           "mutable": true,
           "attr": "lines",
           "reflectToAttr": true,
-          "docs": "Display indentation guide lines",
+          "docs": "Display indentation guide lines.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19503,7 +19503,7 @@
           "mutable": true,
           "attr": "scale",
           "reflectToAttr": true,
-          "docs": "Specify the scale of the tree, defaults to m",
+          "docs": "Specify the scale of the tree.",
           "docsTags": [],
           "default": "\"m\"",
           "values": [
@@ -19529,7 +19529,7 @@
           "mutable": true,
           "attr": "selection-mode",
           "reflectToAttr": true,
-          "docs": "Customize how tree selection works (single, multi, children, multi-children, ancestors)",
+          "docs": "Customize how tree selection works.",
           "docsTags": [
             {
               "name": "default",
@@ -19570,7 +19570,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.",
+          "docs": "Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's \"detail\" property.",
           "docsTags": [
             {
               "name": "see",
@@ -19610,7 +19610,7 @@
       "slots": [
         {
           "name": "",
-          "docs": "A slot for `calcite-tree-item` elements."
+          "docs": "A slot for calcite-tree-item elements."
         }
       ],
       "parts": [],
@@ -19631,7 +19631,7 @@
         },
         {
           "name": "slot",
-          "text": "children - A slot for adding nested `calcite-tree` elements."
+          "text": "children - A slot for adding nested calcite-tree elements."
         }
       ],
       "usage": {},
@@ -19642,7 +19642,7 @@
           "mutable": true,
           "attr": "expanded",
           "reflectToAttr": true,
-          "docs": "True if the item is in an expanded state",
+          "docs": "Expanded state of the item.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19659,7 +19659,7 @@
           "mutable": true,
           "attr": "selected",
           "reflectToAttr": true,
-          "docs": "Is the item currently selected",
+          "docs": "Selected state of the item.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -19693,7 +19693,7 @@
         },
         {
           "name": "children",
-          "docs": "A slot for adding nested `calcite-tree` elements."
+          "docs": "A slot for adding nested calcite-tree elements."
         }
       ],
       "parts": [],

package/dist/loader/cdn.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.0.0-next.455
+ * v1.0.0-next.458
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.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.0.0-next.455
+ * v1.0.0-next.458
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.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.0.0-next.455
+ * v1.0.0-next.458
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.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.0.0-next.455
+ * v1.0.0-next.458
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/combobox/resources.d.ts

@@ -4,3 +4,7 @@ export declare const ComboboxChildSelector: string;
 export declare const TEXT: {
   removeTag: string;
 };
+export declare const CSS: {
+  labelActive: string;
+  labelSelected: string;
+};

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "./interfaces";
 import { ComputedPlacement, OverlayPositioning, MenuPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
@@ -74,6 +74,7 @@ export declare class Dropdown implements InteractiveComponent {
   handleItemSelect(event: CustomEvent): void;
   filteredFlipPlacements: ComputedPlacement[];
   private items;
+  private groups;
   /** trigger elements */
   private triggers;
   private popper;
@@ -84,7 +85,9 @@ export declare class Dropdown implements InteractiveComponent {
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;
   setFilteredPlacements: () => void;
+  updateTriggers: (event: Event) => void;
   updateItems: () => void;
+  updateGroups: (event: Event) => void;
   setMaxScrollerHeight: () => void;
   setScrollerEl: (scrollerEl: HTMLDivElement) => void;
   transitionEnd: (event: TransitionEvent) => void;

package/dist/types/components/tree/tree.d.ts

@@ -3,21 +3,21 @@ import { TreeItemSelectDetail } from "../tree-item/interfaces";
 import { TreeSelectDetail, TreeSelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
- * @slot - A slot for `calcite-tree-item` elements.
+ * @slot - A slot for calcite-tree-item elements.
  */
 export declare class Tree {
   el: HTMLCalciteTreeElement;
-  /** Display indentation guide lines */
+  /** Display indentation guide lines. */
   lines: boolean;
   /** Display input
-   * @deprecated use "ancestors" selection-mode for checkbox input
+   * @deprecated Use "ancestors" selection-mode for checkbox input.
    */
   inputEnabled: boolean;
-  /** @internal If this tree is nested within another tree, set to false */
+  /** @internal If this tree is nested within another tree, set to false. */
   child: boolean;
-  /** Specify the scale of the tree, defaults to m */
+  /** Specify the scale of the tree. */
   scale: Scale;
-  /** Customize how tree selection works (single, multi, children, multi-children, ancestors)
+  /** Customize how tree selection works.
    * @default "single"
    * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
    */
@@ -31,7 +31,7 @@ export declare class Tree {
   keyDownHandler(event: KeyboardEvent): void;
   updateAncestorTree(e: CustomEvent<TreeItemSelectDetail>): void;
   /**
-   * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.
+   * Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's "detail" property.
    * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)
    */
   calciteTreeSelect: EventEmitter<TreeSelectDetail>;

package/dist/types/components/tree-item/tree-item.d.ts

@@ -5,37 +5,37 @@ import { Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the item.
- * @slot children - A slot for adding nested `calcite-tree` elements.
+ * @slot children - A slot for adding nested calcite-tree elements.
  */
 export declare class TreeItem implements ConditionalSlotComponent {
   el: HTMLCalciteTreeItemElement;
-  /** Is the item currently selected */
+  /** Selected state of the item. */
   selected: boolean;
-  /** True if the item is in an expanded state */
+  /** Expanded state of the item. */
   expanded: boolean;
   expandedHandler(newValue: boolean): void;
-  /** @internal Is the parent of this item expanded? */
+  /** @internal Expanded state of the parent. */
   parentExpanded: boolean;
-  /** @internal What level of depth is this item at? */
+  /** @internal Level of depth of the item. */
   depth: number;
   /** @internal Does this tree item have a tree inside it? */
   hasChildren: boolean;
-  /** @internal Draw lines (set on parent) */
+  /** @internal Draws lines (set on parent). */
   lines: boolean;
-  /** Display checkboxes (set on parent)
+  /** Displays checkboxes (set on parent).
    * @internal
-   * @deprecated set "ancestors" selection-mode on parent tree for checkboxes
+   * @deprecated Use "ancestors" selection-mode on parent for checkbox input.
    */
   inputEnabled: boolean;
-  /** @internal Scale of the parent tree, defaults to m */
+  /** @internal Scale of the parent tree. */
   scale: Scale;
   /**
    * @internal
    * In ancestor selection mode,
-   * show as indeterminate when only some children are selected
+   * show as indeterminate when only some children are selected.
    **/
   indeterminate: boolean;
-  /** @internal Tree selection-mode (set on parent) */
+  /** @internal Tree selection-mode (set on parent). */
   selectionMode: TreeSelectionMode;
   getselectionMode(): void;
   connectedCallback(): void;

package/dist/types/components.d.ts

@@ -3401,19 +3401,19 @@ export namespace Components {
         "child": boolean;
         /**
           * Display input
-          * @deprecated use "ancestors" selection-mode for checkbox input
+          * @deprecated Use "ancestors" selection-mode for checkbox input.
          */
         "inputEnabled": boolean;
         /**
-          * Display indentation guide lines
+          * Display indentation guide lines.
          */
         "lines": boolean;
         /**
-          * Specify the scale of the tree, defaults to m
+          * Specify the scale of the tree.
          */
         "scale": Scale;
         /**
-          * Customize how tree selection works (single, multi, children, multi-children, ancestors)
+          * Customize how tree selection works.
           * @default "single"
           * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
          */
@@ -3422,21 +3422,21 @@ export namespace Components {
     interface CalciteTreeItem {
         "depth": number;
         /**
-          * True if the item is in an expanded state
+          * Expanded state of the item.
          */
         "expanded": boolean;
         "hasChildren": boolean;
         "indeterminate": boolean;
         /**
-          * Display checkboxes (set on parent)
-          * @deprecated set "ancestors" selection-mode on parent tree for checkboxes
+          * Displays checkboxes (set on parent).
+          * @deprecated Use "ancestors" selection-mode on parent for checkbox input.
          */
         "inputEnabled": boolean;
         "lines": boolean;
         "parentExpanded": boolean;
         "scale": Scale;
         /**
-          * Is the item currently selected
+          * Selected state of the item.
          */
         "selected": boolean;
         "selectionMode": TreeSelectionMode;
@@ -7497,24 +7497,24 @@ declare namespace LocalJSX {
     interface CalciteTree {
         /**
           * Display input
-          * @deprecated use "ancestors" selection-mode for checkbox input
+          * @deprecated Use "ancestors" selection-mode for checkbox input.
          */
         "inputEnabled"?: boolean;
         /**
-          * Display indentation guide lines
+          * Display indentation guide lines.
          */
         "lines"?: boolean;
         /**
-          * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.
+          * Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's "detail" property.
           * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)
          */
         "onCalciteTreeSelect"?: (event: CustomEvent<TreeSelectDetail>) => void;
         /**
-          * Specify the scale of the tree, defaults to m
+          * Specify the scale of the tree.
          */
         "scale"?: Scale;
         /**
-          * Customize how tree selection works (single, multi, children, multi-children, ancestors)
+          * Customize how tree selection works.
           * @default "single"
           * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
          */
@@ -7522,11 +7522,11 @@ declare namespace LocalJSX {
     }
     interface CalciteTreeItem {
         /**
-          * True if the item is in an expanded state
+          * Expanded state of the item.
          */
         "expanded"?: boolean;
         /**
-          * Is the item currently selected
+          * Selected state of the item.
          */
         "selected"?: boolean;
     }

package/hydrate/index.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.0.0-next.455
+ * v1.0.0-next.458
  */
 'use strict';
 
@@ -15682,6 +15682,8 @@ class Combobox {
       return;
     }
     const target = event.target;
+    const newIndex = this.visibleItems.indexOf(target);
+    this.updateActiveItemIndex(newIndex);
     this.toggleSelection(target, target.selected);
   }
   //--------------------------------------------------------------------------
@@ -16849,10 +16851,14 @@ class DatePicker {
     this.activeStartDate = startDate;
   }
   onMinChanged(min) {
-    this.minAsDate = dateFromISO(min);
+    if (min) {
+      this.minAsDate = dateFromISO(min);
+    }
   }
   onMaxChanged(max) {
-    this.maxAsDate = dateFromISO(max);
+    if (max) {
+      this.maxAsDate = dateFromISO(max);
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -17636,6 +17642,7 @@ class Dropdown {
     /** specify the width of dropdown, defaults to m */
     this.width = "m";
     this.items = [];
+    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver();
     this.resizeObserver = createObserver();
@@ -17650,12 +17657,26 @@ class Dropdown {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    this.updateTriggers = (event) => {
+      this.triggers = event.target.assignedElements({
+        flatten: true
+      });
+      this.reposition();
+    };
     this.updateItems = () => {
+      this.items = this.groups
+        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
-      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };
+    this.updateGroups = (event) => {
+      const groups = event.target
+        .assignedElements({ flatten: true })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+      this.groups = groups;
+      this.updateItems();
+    };
     this.setMaxScrollerHeight = () => {
       const { active, scrollerEl } = this;
       if (!scrollerEl || !active) {
@@ -17745,7 +17766,6 @@ class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-    this.updateItems();
     this.setFilteredPlacements();
   }
   componentDidLoad() {
@@ -17762,11 +17782,11 @@ class Dropdown {
   }
   render() {
     const { active } = this;
-    return (hAsync(Host, null, hAsync("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, hAsync("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS$h.dropdownTrigger })), hAsync("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl }, hAsync("div", { class: {
+    return (hAsync(Host, null, hAsync("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, hAsync("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS$h.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl }, hAsync("div", { class: {
         ["calcite-dropdown-content"]: true,
         [CSS$D.animation]: true,
         [CSS$D.animationActive]: active
-      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, hAsync("div", { hidden: !this.active }, hAsync("slot", null))))));
+      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, hAsync("div", { hidden: !this.active }, hAsync("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -17891,16 +17911,14 @@ class Dropdown {
     this.popper = null;
   }
   updateSelectedItems() {
-    const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
-    this.selectedItems = items.filter((item) => item.active);
+    this.selectedItems = this.items.filter((item) => item.active);
   }
   getMaxScrollerHeight() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    groups.forEach((group) => {
+    this.groups.forEach((group) => {
       if (maxItems > 0 && itemsToProcess < maxItems) {
         Array.from(group.children).forEach((item, index) => {
           if (index === 0) {
@@ -19390,10 +19408,6 @@ class Input {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
-      /* prevent default behavior for input to move the cursor to the beginning of the input with every ArrowUp press */
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-      }
       if (this.readOnly || this.disabled) {
         return;
       }
@@ -19477,6 +19491,8 @@ class Input {
         return;
       }
       if (event.key === "ArrowUp") {
+        /* prevent default behavior of moving cursor to the beginning of the input when holding down ArrowUp */
+        event.preventDefault();
         this.nudgeNumberValue("up", event);
         return;
       }
@@ -20052,10 +20068,14 @@ class InputDatePicker {
     this.setFilteredPlacements();
   }
   onMinChanged(min) {
-    this.minAsDate = dateFromISO(min);
+    if (min) {
+      this.minAsDate = dateFromISO(min);
+    }
   }
   onMaxChanged(max) {
-    this.maxAsDate = dateFromISO(max);
+    if (max) {
+      this.maxAsDate = dateFromISO(max);
+    }
   }
   activeHandler() {
     if (!this.disabled) {
@@ -32450,7 +32470,7 @@ var TreeSelectionMode;
 const treeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-tree: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*/.calcite-animate.sc-calcite-tree{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-tree{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-tree{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-tree{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-tree{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-tree:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-tree-h{display:none}/*!@:host*/.sc-calcite-tree-h{display:block;outline:2px solid transparent;outline-offset:2px}";
 
 /**
- * @slot - A slot for `calcite-tree-item` elements.
+ * @slot - A slot for calcite-tree-item elements.
  */
 class Tree {
   constructor(hostRef) {
@@ -32461,15 +32481,15 @@ class Tree {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Display indentation guide lines */
+    /** Display indentation guide lines. */
     this.lines = false;
     /** Display input
-     * @deprecated use "ancestors" selection-mode for checkbox input
+     * @deprecated Use "ancestors" selection-mode for checkbox input.
      */
     this.inputEnabled = false;
-    /** Specify the scale of the tree, defaults to m */
+    /** Specify the scale of the tree. */
     this.scale = "m";
-    /** Customize how tree selection works (single, multi, children, multi-children, ancestors)
+    /** Customize how tree selection works.
      * @default "single"
      * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
      */
@@ -32728,7 +32748,7 @@ const treeItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfram
 
 /**
  * @slot - A slot for adding content to the item.
- * @slot children - A slot for adding nested `calcite-tree` elements.
+ * @slot children - A slot for adding nested calcite-tree elements.
  */
 class TreeItem {
   constructor(hostRef) {
@@ -32739,13 +32759,13 @@ class TreeItem {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Is the item currently selected */
+    /** Selected state of the item. */
     this.selected = false;
-    /** True if the item is in an expanded state */
+    /** Expanded state of the item. */
     this.expanded = false;
-    /** @internal Is the parent of this item expanded? */
+    /** @internal Expanded state of the parent. */
     this.parentExpanded = false;
-    /** @internal What level of depth is this item at? */
+    /** @internal Level of depth of the item. */
     this.depth = -1;
     /** @internal Does this tree item have a tree inside it? */
     this.hasChildren = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.455",
+  "version": "1.0.0-next.458",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/calcite/p-02f97eeb.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.455
- */
-import{r as t,c as i,h as a,H as e,g as n}from"./p-e90d14bc.js";import{T as s,d as r,a as o,b as c,g as l,s as h,p,i as m}from"./p-2dfffea0.js";import{c as d,d as u,g as f}from"./p-012e8eb7.js";import{c as b,d as w,H as v}from"./p-ee3aed0a.js";import{d as y,f as g,u as k,C as x,c as D,p as C}from"./p-8a9685c1.js";import{u as I}from"./p-1ea5a818.js";import"./p-ea5b5e14.js";import"./p-0adeb150.js";import"./p-699fb309.js";import"./p-3d9712df.js";const P=class{constructor(a){t(this,a),this.calciteDatePickerChange=i(this,"calciteDatePickerChange",7),this.calciteDatePickerRangeChange=i(this,"calciteDatePickerRangeChange",7),this.calciteInputDatePickerChange=i(this,"calciteInputDatePickerChange",7),this.calciteInputDatePickerOpen=i(this,"calciteInputDatePickerOpen",7),this.calciteInputDatePickerClose=i(this,"calciteInputDatePickerClose",7),this.disabled=!1,this.active=!1,this.intlPrevMonth=s.prevMonth,this.intlNextMonth=s.nextMonth,this.intlYear=s.year,this.locale=document.documentElement.lang||"en",this.scale="m",this.placement=y,this.range=!1,this.required=!1,this.overlayPositioning="absolute",this.proximitySelectionDisabled=!1,this.layout="horizontal",this.focusedInput="start",this.activeTransitionProp="opacity",this.setFilteredPlacements=()=>{const{el:t,flipPlacements:i}=this;this.filteredFlipPlacements=i?g(i,t):null},this.transitionEnd=t=>{t.propertyName===this.activeTransitionProp&&(this.active?this.calciteInputDatePickerOpen.emit():this.calciteInputDatePickerClose.emit())},this.setStartInput=t=>{this.startInput=t},this.setEndInput=t=>{this.endInput=t},this.deactivate=()=>{this.active=!1},this.keyUpHandler=t=>{"Escape"===t.key&&(this.active=!1)},this.inputBlur=t=>{this.blur(t.detail)},this.startInputFocus=()=>{this.active=!0,this.focusedInput="start"},this.endInputFocus=()=>{this.active=!0,this.focusedInput="end"},this.inputInput=t=>{this.input(t.detail.value)},this.setMenuEl=t=>{t&&(this.menuEl=t,this.createPopper())},this.setStartWrapper=t=>{this.startWrapper=t,this.setReferenceEl()},this.setEndWrapper=t=>{this.endWrapper=t,this.setReferenceEl()},this.handleDateChange=t=>{this.range||(this.value=r(t.detail))},this.handleDateRangeChange=t=>{var i,a;if(!this.range||!t.detail)return;const{startDate:e,endDate:n}=t.detail;this.start=r(e),this.end=r(n),this.value=[this.start,this.end],this.shouldFocusRangeEnd()?null===(i=this.endInput)||void 0===i||i.setFocus():this.shouldFocusRangeStart()&&(null===(a=this.startInput)||void 0===a||a.setFocus())}}handleDisabledChange(t){t||(this.active=!1)}valueHandler(t){Array.isArray(t)?(this.valueAsDate=t.map((t=>o(t))),this.start=t[0],this.end=t[1]):t?(this.valueAsDate=o(t),this.start="",this.end=""):(this.valueAsDate=void 0,this.start=void 0,this.end=void 0)}flipPlacementsHandler(){this.setFilteredPlacements()}onMinChanged(t){this.minAsDate=o(t)}onMaxChanged(t){this.maxAsDate=o(t)}activeHandler(){this.disabled?this.active=!1:this.reposition()}handleDateOrRangeChange(){this.calciteInputDatePickerChange.emit()}calciteDaySelectHandler(){this.shouldFocusRangeStart()||this.shouldFocusRangeEnd()||(this.active=!1)}async setFocus(){var t;null===(t=this.startInput)||void 0===t||t.setFocus()}async reposition(){const{placement:t,popper:i,menuEl:a}=this,e=this.getModifiers();i?await k({el:a,modifiers:e,placement:t,popper:i}):this.createPopper()}connectedCallback(){Array.isArray(this.value)?(this.valueAsDate=this.value.map((t=>o(t))),this.start=this.value[0],this.end=this.value[1]):this.value&&(this.valueAsDate=o(this.value),this.start="",this.end=""),this.start&&(this.startAsDate=o(this.start)),this.end&&(this.endAsDate=o(this.end)),this.min&&(this.minAsDate=o(this.min)),this.max&&(this.maxAsDate=o(this.max)),this.createPopper(),d(this),b(this),this.setFilteredPlacements()}async componentWillLoad(){await this.loadLocaleData(),this.onMinChanged(this.min),this.onMaxChanged(this.max)}disconnectedCallback(){this.destroyPopper(),u(this),w(this)}componentDidRender(){I(this)}render(){var t,i;const{disabled:n}=this,s=c(this.range?this.startAsDate:this.valueAsDate,this.minAsDate,this.maxAsDate),r=this.range?c(this.endAsDate,this.minAsDate,this.maxAsDate):null,o=r?r.toLocaleDateString(this.locale):"",l=s?s.toLocaleDateString(this.locale):"";return a(e,{onBlur:this.deactivate,onKeyUp:this.keyUpHandler,role:"application"},this.localeData&&a("div",{"aria-expanded":this.active.toString(),class:"input-container",role:"application"},a("div",{class:"input-wrapper",ref:this.setStartWrapper},a("calcite-input",{class:"input "+("vertical"===this.layout&&this.range?"no-bottom-border":""),disabled:n,icon:"calendar",label:f(this),"number-button-type":"none",onCalciteInputBlur:this.inputBlur,onCalciteInputFocus:this.startInputFocus,onCalciteInputInput:this.inputInput,placeholder:null===(t=this.localeData)||void 0===t?void 0:t.placeholder,ref:this.setStartInput,scale:this.scale,type:"text",value:l})),a("div",{"aria-hidden":(!this.active).toString(),class:{"menu-container":!0,"menu-container--active":this.active},ref:this.setMenuEl},a("div",{class:{"calendar-picker-wrapper":!0,"calendar-picker-wrapper--end":"end"===this.focusedInput,[x.animation]:!0,[x.animationActive]:this.active},onTransitionEnd:this.transitionEnd},a("calcite-date-picker",{activeRange:this.focusedInput,endAsDate:this.endAsDate,headingLevel:this.headingLevel,intlNextMonth:this.intlNextMonth,intlPrevMonth:this.intlPrevMonth,intlYear:this.intlYear,locale:this.locale,max:this.max,maxAsDate:this.maxAsDate,min:this.min,minAsDate:this.minAsDate,onCalciteDatePickerChange:this.handleDateChange,onCalciteDatePickerRangeChange:this.handleDateRangeChange,proximitySelectionDisabled:this.proximitySelectionDisabled,range:this.range,scale:this.scale,startAsDate:this.startAsDate,tabIndex:0,valueAsDate:this.valueAsDate}))),this.range&&"horizontal"===this.layout&&a("div",{class:"horizontal-arrow-container"},a("calcite-icon",{flipRtl:!0,icon:"arrow-right",scale:"s"})),this.range&&"vertical"===this.layout&&"s"!==this.scale&&a("div",{class:"vertical-arrow-container"},a("calcite-icon",{icon:"arrow-down",scale:"s"})),this.range&&a("div",{class:"input-wrapper",ref:this.setEndWrapper},a("calcite-input",{class:{input:!0,"border-top-color-one":"vertical"===this.layout&&this.range},disabled:n,icon:"calendar","number-button-type":"none",onCalciteInputBlur:this.inputBlur,onCalciteInputFocus:this.endInputFocus,onCalciteInputInput:this.inputInput,placeholder:null===(i=this.localeData)||void 0===i?void 0:i.placeholder,ref:this.setEndInput,scale:this.scale,type:"text",value:o}))),a(v,{component:this}))}setReferenceEl(){const{focusedInput:t,layout:i,endWrapper:a,startWrapper:e}=this;this.referenceEl="end"===t||"vertical"===i?a||e:e||a,this.createPopper()}onLabelClick(){this.setFocus()}getModifiers(){const t={name:"flip",enabled:!0};return t.options={fallbackPlacements:this.filteredFlipPlacements||C},[t,{name:"eventListeners",enabled:this.active}]}createPopper(){this.destroyPopper();const{menuEl:t,placement:i,referenceEl:a,overlayPositioning:e}=this;if(!t||!a)return;const n=this.getModifiers();this.popper=D({el:t,modifiers:n,overlayPositioning:e,placement:i,referenceEl:a})}destroyPopper(){const{popper:t}=this;t&&t.destroy(),this.popper=null}startWatcher(t){this.startAsDate=o(t)}endWatcher(t){this.endAsDate=o(t)}async loadLocaleData(){const{locale:t}=this;this.localeData=await l(t)}clearCurrentValue(){if(!this.range)return"string"==typeof this.value&&this.value&&this.calciteDatePickerChange.emit(),void(this.value="");const{focusedInput:t}=this;"start"===t?(this.start&&this.calciteDatePickerRangeChange.emit(),this.value=Array.isArray(this.value)?["",this.value[1]||""]:[""],this.start=void 0):"end"===t&&(this.end&&this.calciteDatePickerRangeChange.emit(),this.value=Array.isArray(this.value)?[this.value[0]||"",""]:["",""],this.end=void 0)}input(t){const i=this.getDateFromInput(t);if(!i)return void this.clearCurrentValue();if(!this.range)return this.value=r(i),void this.calciteDatePickerChange.emit(i);const{focusedInput:a}=this;if("start"===a){if(!this.startAsDate||!h(i,this.startAsDate)){const t=r(i);this.value=Array.isArray(this.value)?[t,this.value[1]||""]:[t],this.start=t,this.calciteDatePickerRangeChange.emit({startDate:i,endDate:this.endAsDate})}}else if(!("end"!==a||this.endAsDate&&h(i,this.endAsDate))){const t=r(i);this.value=Array.isArray(this.value)?[this.value[0]||"",t]:["",t],this.end=t,this.calciteDatePickerRangeChange.emit({startDate:this.startAsDate,endDate:i})}}blur(t){const{locale:i,focusedInput:a,endAsDate:e,range:n,startAsDate:s,valueAsDate:r}=this;this.getDateFromInput(t.value)||(!n&&r?t.value=Array.isArray(r)?r["end"===a?1:0].toLocaleDateString(i):r.toLocaleDateString(i):"start"===a&&s?t.value=s.toLocaleDateString(i):"end"===a&&e&&(t.value=e.toLocaleDateString(i)))}shouldFocusRangeStart(){return!(!this.endAsDate||this.startAsDate||"end"!==this.focusedInput||!this.startInput)}shouldFocusRangeEnd(){return!(!this.startAsDate||this.endAsDate||"start"!==this.focusedInput||!this.endInput)}getDateFromInput(t){if(!this.localeData)return!1;const{separator:i}=this.localeData,{day:a,month:e,year:n}=p(t,this.localeData),s=a>0,r=e>-1,o=new Date(n,e,a);o.setFullYear(n);const c=!isNaN(o.getTime()),l=t.split(i).filter((t=>t)).length>2,h=n.toString().length>0;return!!(s&&r&&c&&l&&h&&m(o,this.min,this.max))&&o}get el(){return n(this)}static get watchers(){return{disabled:["handleDisabledChange"],value:["valueHandler"],flipPlacements:["flipPlacementsHandler"],min:["onMinChanged"],max:["onMaxChanged"],active:["activeHandler"],layout:["setReferenceEl"],focusedInput:["setReferenceEl"],start:["startWatcher"],end:["endWatcher"],locale:["loadLocaleData"]}}};P.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;width:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{top:1.5rem;position:absolute;left:0px;z-index:10;margin-left:1px;margin-right:1px;background-color:var(--calcite-ui-foreground-1);padding-left:0.625rem;padding-right:0.625rem}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .menu-container{pointer-events:initial;visibility:visible}.menu-container--active .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.menu-container--active .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container--active .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container--active .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container--active .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container--active .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.input .calcite-input__wrapper{margin-top:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{top:1.5rem;padding-left:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{height:0.75rem;width:0.75rem;min-width:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";export{P as calcite_input_date_picker}