@esri/calcite-components 1.0.0-next.605 → 1.0.0-next.607

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.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.605
+ * v1.0.0-next.607
  */
 import { h } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -18,29 +18,27 @@ export class ColorPickerHexInput {
     //
     //--------------------------------------------------------------------------
     /**
-     * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.
+     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
      *
-     * When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
+     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
      */
     this.allowEmpty = false;
     /**
-     * Label used for the hex input.
+     * Accessible name for the Hex input.
      *
      * @default "Hex"
      */
     this.intlHex = TEXT.hex;
     /**
-     * Label used for the hex input when there is no color selected.
+     * Accessible name for the Hex input when there is no color selected.
      *
      * @default "No color"
      */
     this.intlNoColor = TEXT.noColor;
-    /**
-     * The component's scale.
-     */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * The hex value.
+     * The Hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
     this.onCalciteInternalInputBlur = () => {
@@ -213,7 +211,7 @@ export class ColorPickerHexInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\n\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty."
+          "text": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`."
         },
         "attribute": "allow-empty",
         "reflect": false,
@@ -234,7 +232,7 @@ export class ColorPickerHexInput {
               "name": "default",
               "text": "\"Hex\""
             }],
-          "text": "Label used for the hex input."
+          "text": "Accessible name for the Hex input."
         },
         "attribute": "intl-hex",
         "reflect": false,
@@ -255,7 +253,7 @@ export class ColorPickerHexInput {
               "name": "default",
               "text": "\"No color\""
             }],
-          "text": "Label used for the hex input when there is no color selected."
+          "text": "Accessible name for the Hex input when there is no color selected."
         },
         "attribute": "intl-no-color",
         "reflect": false,
@@ -278,7 +276,7 @@ export class ColorPickerHexInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component's scale."
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true,
@@ -296,7 +294,7 @@ export class ColorPickerHexInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The hex value."
+          "text": "The Hex value."
         },
         "attribute": "value",
         "reflect": true,

package/dist/collection/components/color-picker-hex-input/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.605
+ * v1.0.0-next.607
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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.605
+ * v1.0.0-next.607
  */
 import { h } from "@stencil/core";
 import Color from "color";
@@ -15,11 +15,11 @@ export class ColorPickerSwatch {
     //
     //--------------------------------------------------------------------------
     /**
-     * Used to display whether the swatch is active or not.
+     * When `true`, the component is active.
      */
     this.active = false;
     /**
-     * The component scale.
+     * Specifies the size of the component.
      */
     this.scale = "m";
   }
@@ -68,7 +68,7 @@ export class ColorPickerSwatch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Used to display whether the swatch is active or not."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -111,7 +111,7 @@ export class ColorPickerSwatch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component scale."
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true,

package/dist/collection/components/color-picker-swatch/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.605
+ * v1.0.0-next.607
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.css

@@ -96,7 +96,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-combobox-input-height: the height of the combobox input
+* @prop --calcite-combobox-input-height: Specifies the height of the component's input.
 */
 :host {
   position: relative;
@@ -255,7 +255,6 @@
   display: block;
   position: absolute;
   z-index: 900;
-  transform: scale(0);
   visibility: hidden;
   pointer-events: none;
   inline-size: 0;

package/dist/collection/components/combobox/combobox.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.0.0-next.605
+ * v1.0.0-next.607
  */
 import { h, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
+import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
@@ -33,16 +33,16 @@ export class Combobox {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, opens the combobox
+     * When `true`, displays and positions the component.
      *
-     * @deprecated use open instead
+     * @deprecated use `open` instead.
      */
     this.active = false;
-    /**When true, opens the combobox */
+    /**When `true`, displays and positions the component. */
     this.open = false;
-    /** Disable combobox input */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
+    /** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
     this.maxItems = 0;
     /**
      * Determines the type of positioning to use for the overlaid content.
@@ -54,24 +54,24 @@ export class Combobox {
      */
     this.overlayPositioning = "absolute";
     /**
-     * When true, the component must have a value in order for the form to submit.
+     * When `true`, the component must have a value in order for the form to submit.
      *
      * @internal
      */
     this.required = false;
     /**
-     * specify the selection mode
-     * - multi: allow any number of selected items (default)
-     * - single: only one selection)
-     * - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
+     * Specifies the selection mode -
+     * `"multi"` (allow any number of selected items),
+     * `"single"` (allow only one selection), or
+     * `"ancestors"` (like `"multi"`, but show ancestors of selected items as selected. Only the deepest children are shown in `calcite-chip`s).
      */
     this.selectionMode = "multi";
-    /** Specify the scale of the combobox, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** The value(s) of the selectedItem(s) */
+    /** The component's value(s) from the selected `calcite-combobox-item`(s). */
     this.value = null;
     /**
-     * string to override the English "Remove tag" text for when an item is selected.
+     * Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.
      *
      * @default "Remove tag"
      */
@@ -103,7 +103,6 @@ export class Combobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -235,11 +234,11 @@ export class Combobox {
       if (!listContainerEl || !open) {
         return;
       }
-      await this.debouncedReposition();
+      await this.reposition(true);
       const maxScrollerHeight = this.getMaxScrollerHeight();
       listContainerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
       listContainerEl.style.minWidth = `${referenceEl.clientWidth}px`;
-      await this.debouncedReposition();
+      await this.reposition(true);
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
       this.open = false;
@@ -374,6 +373,9 @@ export class Combobox {
     this.open = value;
   }
   openHandler(value) {
+    if (!value) {
+      updateAfterClose(this.floatingEl);
+    }
     if (this.disabled) {
       this.active = false;
       this.open = false;
@@ -392,7 +394,7 @@ export class Combobox {
     this.setMaxScrollerHeight();
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
@@ -411,7 +413,7 @@ export class Combobox {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   //--------------------------------------------------------------------------
   //
@@ -438,17 +440,21 @@ export class Combobox {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
       type: "menu"
-    });
+    }, delayed);
   }
   /** Sets focus on the component. */
   async setFocus() {
@@ -472,7 +478,7 @@ export class Combobox {
     connectForm(this);
     connectOpenCloseComponent(this);
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
     if (this.active) {
       this.activeHandler(this.active);
     }
@@ -485,11 +491,11 @@ export class Combobox {
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
-    this.debouncedReposition();
+    this.reposition(true);
   }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
-      this.debouncedReposition();
+      this.reposition(true);
       this.inputHeight = this.el.offsetHeight;
     }
     updateHostInteraction(this);
@@ -851,9 +857,9 @@ export class Combobox {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use open instead"
+              "text": "use `open` instead."
             }],
-          "text": "When true, opens the combobox"
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "active",
         "reflect": true,
@@ -871,7 +877,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, opens the combobox"
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "open",
         "reflect": true,
@@ -889,7 +895,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disable combobox input"
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -907,7 +913,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Aria label for combobox (required)"
+          "text": "Accessible name for the component."
         },
         "attribute": "label",
         "reflect": false
@@ -924,7 +930,7 @@ export class Combobox {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Placeholder text for input"
+          "text": "Specifies the placeholder text for the input."
         },
         "attribute": "placeholder",
         "reflect": false
@@ -941,7 +947,7 @@ export class Combobox {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Placeholder icon for input"
+          "text": "Specifies the placeholder icon for the input."
         },
         "attribute": "placeholder-icon",
         "reflect": true
@@ -958,7 +964,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify the maximum number of combobox items (including nested children) to display before showing the scroller"
+          "text": "Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar."
         },
         "attribute": "max-items",
         "reflect": true,
@@ -976,7 +982,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The name of the switch input"
+          "text": "Specifies the name of the component on form submission."
         },
         "attribute": "name",
         "reflect": true
@@ -993,7 +999,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Allow entry of custom values which are not in the original set of items"
+          "text": "When `true`, allows entry of custom values, which are not in the original set of items."
         },
         "attribute": "allow-custom-values",
         "reflect": true
@@ -1036,7 +1042,7 @@ export class Combobox {
               "name": "internal",
               "text": undefined
             }],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,
@@ -1059,7 +1065,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the selection mode\n- multi: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips"
+          "text": "Specifies the selection mode -\n`\"multi\"` (allow any number of selected items),\n`\"single\"` (allow only one selection), or\n`\"ancestors\"` (like `\"multi\"`, but show ancestors of selected items as selected. Only the deepest children are shown in `calcite-chip`s)."
         },
         "attribute": "selection-mode",
         "reflect": true,
@@ -1082,7 +1088,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify the scale of the combobox, defaults to m"
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true,
@@ -1100,7 +1106,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The value(s) of the selectedItem(s)"
+          "text": "The component's value(s) from the selected `calcite-combobox-item`(s)."
         },
         "attribute": "value",
         "reflect": false,
@@ -1121,7 +1127,7 @@ export class Combobox {
               "name": "default",
               "text": "\"Remove tag\""
             }],
-          "text": "string to override the English \"Remove tag\" text for when an item is selected."
+          "text": "Accessible name for the component's remove tag when a `calcite-combobox-item` is selected."
         },
         "attribute": "intl-remove-tag",
         "reflect": false,
@@ -1172,9 +1178,9 @@ export class Combobox {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use calciteComboboxChange instead"
+              "text": "use `calciteComboboxChange` instead."
             }],
-          "text": "Called when the selected items set changes"
+          "text": "Fires when the selected items set changes."
         },
         "complexType": {
           "original": "HTMLCalciteComboboxItemElement[]",
@@ -1193,7 +1199,7 @@ export class Combobox {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Called when the selected item(s) changes."
+          "text": "Fires when the selected item(s) changes."
         },
         "complexType": {
           "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
@@ -1212,7 +1218,7 @@ export class Combobox {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Called when the user has entered text to filter the options list"
+          "text": "Fires when text is added to filter the options list."
         },
         "complexType": {
           "original": "{\n    visibleItems: HTMLCalciteComboboxItemElement[];\n    text: string;\n  }",
@@ -1231,7 +1237,7 @@ export class Combobox {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Called when a selected item in the combobox is dismissed via its chip\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead"
+          "text": "Fires when a selected item in the component is dismissed via its `calcite-chip`.\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine the removed value instead."
         },
         "complexType": {
           "original": "DeprecatedEventPayload",
@@ -1251,7 +1257,7 @@ export class Combobox {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires when the component is requested to be closed and before the closing transition begins."
+          "text": "Fires when the component is requested to be closed, and before the closing transition begins."
         },
         "complexType": {
           "original": "void",
@@ -1309,8 +1315,14 @@ export class Combobox {
     return {
       "reposition": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(delayed?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "delayed"
+                }],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -1320,7 +1332,10 @@ export class Combobox {
         },
         "docs": {
           "text": "Updates the position of the component.",
-          "tags": []
+          "tags": [{
+              "name": "param",
+              "text": "delayed"
+            }]
         }
       },
       "setFocus": {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.605
+ * v1.0.0-next.607
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/utils.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.605
+ * v1.0.0-next.607
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";