@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

package/dist/collection/components/dropdown/dropdown.css

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {
@@ -96,7 +97,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-dropdown-width: the width of the dropdown wrapper
+* @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
 */
 :host {
   display: inline-flex;
@@ -110,20 +111,16 @@
 }
 
 :host .calcite-dropdown-wrapper {
+  --calcite-floating-ui-z-index: 600;
   display: block;
   position: absolute;
-  z-index: 900;
+  z-index: var(--calcite-floating-ui-z-index);
   visibility: hidden;
-  pointer-events: none;
-  inline-size: 0;
-  block-size: 0;
-  overflow: hidden;
 }
 
 .calcite-dropdown-wrapper .calcite-floating-ui-anim {
   position: relative;
   transition: var(--calcite-floating-ui-transition);
-  visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
@@ -144,16 +141,11 @@
 }
 .calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active {
   opacity: 1;
-  visibility: visible;
   transform: translate(0);
 }
 
 :host([open]) .calcite-dropdown-wrapper {
-  pointer-events: initial;
   visibility: visible;
-  inline-size: unset;
-  block-size: unset;
-  overflow: unset;
 }
 
 :host .calcite-dropdown-content {
@@ -165,7 +157,7 @@
   inline-size: var(--calcite-dropdown-width);
 }
 
-.calcite-dropdown-trigger-container {
+.calcite-trigger-container {
   position: relative;
   display: flex;
   flex: 1 1 auto;

package/dist/collection/components/dropdown/dropdown.js

@@ -1,10 +1,10 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
-import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
+import { focusElement, focusElementInGroup, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -14,65 +14,15 @@ import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
 /**
  * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
- * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
+ * @slot trigger - A slot for the element that triggers the `calcite-dropdown`.
  */
 export class Dropdown {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Opens or closes the dropdown
-     *
-     * @deprecated use open instead.
-     */
-    this.active = false;
-    /** When true, opens the dropdown */
-    this.open = false;
-    /**
-     allow the dropdown to remain open after a selection is made
-     if the selection-mode of the selected item's containing group is "none", the dropdown will always close
-     */
-    this.disableCloseOnSelect = false;
-    /** is the dropdown disabled  */
-    this.disabled = false;
-    /**
-     specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
-     this value does not include groupTitles passed to calcite-dropdown-group
-     */
-    this.maxItems = 0;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     */
-    this.overlayPositioning = "absolute";
-    /**
-     * Determines where the dropdown will be positioned relative to the button.
-     *
-     * @default "bottom-start"
-     */
-    this.placement = defaultMenuPlacement;
-    /** specify the scale of dropdown, defaults to m */
-    this.scale = "m";
-    /**
-     * **read-only** The currently selected items
-     *
-     * @readonly
-     */
-    this.selectedItems = [];
-    /** specify whether the dropdown is opened by hover or click of a trigger element */
-    this.type = "click";
     this.items = [];
     this.groups = [];
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
-    this.openTransitionProp = "visibility";
+    this.openTransitionProp = "opacity";
     this.guid = `calcite-dropdown-${guid()}`;
     this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------
@@ -100,7 +50,7 @@ export class Dropdown {
     };
     this.updateItems = () => {
       this.items = this.groups
-        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+        .map((group) => Array.from(group?.querySelectorAll("calcite-dropdown-item")))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition(true);
@@ -108,7 +58,7 @@ export class Dropdown {
     this.updateGroups = (event) => {
       const groups = event.target
         .assignedElements({ flatten: true })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+        .filter((el) => el?.matches("calcite-dropdown-group"));
       this.groups = groups;
       this.updateItems();
     };
@@ -125,7 +75,7 @@ export class Dropdown {
     };
     this.setDropdownWidth = () => {
       const { referenceEl, scrollerEl } = this;
-      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
+      const referenceElWidth = referenceEl?.clientWidth;
       if (!referenceElWidth || !scrollerEl) {
         return;
       }
@@ -199,9 +149,17 @@ export class Dropdown {
         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
       }
     };
-  }
-  activeHandler(value) {
-    this.open = value;
+    this.open = false;
+    this.closeOnSelectDisabled = false;
+    this.disabled = false;
+    this.flipPlacements = undefined;
+    this.maxItems = 0;
+    this.overlayPositioning = "absolute";
+    this.placement = defaultMenuPlacement;
+    this.scale = "m";
+    this.selectedItems = [];
+    this.type = "click";
+    this.width = undefined;
   }
   openHandler(value) {
     if (!this.disabled) {
@@ -211,7 +169,6 @@ export class Dropdown {
       else {
         updateAfterClose(this.floatingEl);
       }
-      this.active = value;
       return;
     }
     if (!value) {
@@ -243,16 +200,12 @@ export class Dropdown {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
       this.openHandler(this.open);
     }
-    if (this.active) {
-      this.activeHandler(this.active);
-    }
     connectOpenCloseComponent(this);
   }
   componentDidLoad() {
@@ -262,15 +215,14 @@ export class Dropdown {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    this.resizeObserver?.disconnect();
     disconnectOpenCloseComponent(this);
   }
   render() {
     const { open, guid } = this;
-    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
+    return (h(Host, null, h("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: open
@@ -325,37 +277,27 @@ export class Dropdown {
   }
   calciteInternalDropdownItemKeyEvent(event) {
     const { keyboardEvent } = event.detail;
-    // handle edge
     const target = keyboardEvent.target;
-    const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
-    const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
     switch (keyboardEvent.key) {
       case "Tab":
-        if (isLastItem && !keyboardEvent.shiftKey) {
+        if (this.items.indexOf(target) === this.items.length - 1 && !keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
         }
-        else if (isFirstItem && keyboardEvent.shiftKey) {
+        else if (this.items.indexOf(target) === 0 && keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
         }
-        else if (keyboardEvent.shiftKey) {
-          this.focusPrevItem(itemToFocus);
-        }
-        else {
-          this.focusNextItem(itemToFocus);
-        }
         break;
       case "ArrowDown":
-        this.focusNextItem(itemToFocus);
+        focusElementInGroup(this.items, target, "next");
         break;
       case "ArrowUp":
-        this.focusPrevItem(itemToFocus);
+        focusElementInGroup(this.items, target, "previous");
         break;
       case "Home":
-        this.focusFirstItem();
+        focusElementInGroup(this.items, target, "first");
         break;
       case "End":
-        this.focusLastItem();
+        focusElementInGroup(this.items, target, "last");
         break;
     }
     event.stopPropagation();
@@ -363,10 +305,8 @@ export class Dropdown {
   handleItemSelect(event) {
     this.updateSelectedItems();
     event.stopPropagation();
-    this.calciteDropdownSelect.emit({
-      item: event.detail.requestedDropdownItem
-    });
-    if (!this.disableCloseOnSelect ||
+    this.calciteDropdownSelect.emit();
+    if (!this.closeOnSelectDisabled ||
       event.detail.requestedDropdownGroup.selectionMode === "none") {
       this.closeCalciteDropdown();
     }
@@ -416,27 +356,6 @@ export class Dropdown {
       focusElement(this.triggers[0]);
     }
   }
-  focusFirstItem() {
-    const firstItem = this.items[0];
-    this.getFocusableElement(firstItem);
-  }
-  focusLastItem() {
-    const lastItem = this.items[this.items.length - 1];
-    this.getFocusableElement(lastItem);
-  }
-  focusNextItem(el) {
-    const index = this.itemIndex(el);
-    const nextItem = this.items[index + 1] || this.items[0];
-    this.getFocusableElement(nextItem);
-  }
-  focusPrevItem(el) {
-    const index = this.itemIndex(el);
-    const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
-    this.getFocusableElement(prevItem);
-  }
-  itemIndex(el) {
-    return this.items.indexOf(el);
-  }
   getFocusableElement(item) {
     if (!item) {
       return;
@@ -448,6 +367,7 @@ export class Dropdown {
   }
   static get is() { return "calcite-dropdown"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["dropdown.scss"]
@@ -460,27 +380,6 @@ export class Dropdown {
   }
   static get properties() {
     return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use open instead."
-            }],
-          "text": "Opens or closes the dropdown"
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -493,13 +392,13 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, opens the dropdown"
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "open",
         "reflect": true,
         "defaultValue": "false"
       },
-      "disableCloseOnSelect": {
+      "closeOnSelectDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -511,9 +410,9 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "allow the dropdown to remain open after a selection is made\nif the selection-mode of the selected item's containing group is \"none\", the dropdown will always close"
+          "text": "When `true`, the component will remain open after a selection is made.\n\nIf the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `\"none\"`, the component will always close."
         },
-        "attribute": "disable-close-on-select",
+        "attribute": "close-on-select-disabled",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -529,7 +428,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "is the dropdown disabled"
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -549,7 +448,7 @@ export class Dropdown {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Defines the available placements that can be used when a flip occurs."
@@ -567,7 +466,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group"
+          "text": "Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.\nValue must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`."
         },
         "attribute": "max-items",
         "reflect": true,
@@ -601,7 +500,7 @@ export class Dropdown {
         "mutable": false,
         "complexType": {
           "original": "MenuPlacement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "MenuPlacement": {
               "location": "import",
@@ -616,7 +515,7 @@ export class Dropdown {
               "name": "default",
               "text": "\"bottom-start\""
             }],
-          "text": "Determines where the dropdown will be positioned relative to the button."
+          "text": "Determines where the component will be positioned relative to the container element."
         },
         "attribute": "placement",
         "reflect": true,
@@ -639,7 +538,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the scale of dropdown, defaults to m"
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true,
@@ -664,7 +563,7 @@ export class Dropdown {
               "name": "readonly",
               "text": undefined
             }],
-          "text": "**read-only** The currently selected items"
+          "text": "Specifies the component's selected items."
         },
         "defaultValue": "[]"
       },
@@ -680,7 +579,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify whether the dropdown is opened by hover or click of a trigger element"
+          "text": "Specifies the action to open the component from the container element."
         },
         "attribute": "type",
         "reflect": true,
@@ -700,10 +599,10 @@ export class Dropdown {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the width of dropdown"
+          "text": "Specifies the width of the component."
         },
         "attribute": "width",
         "reflect": true
@@ -719,17 +618,12 @@ export class Dropdown {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "fires when a dropdown item has been selected or deselected"
+          "text": "Fires when a `calcite-dropdown-item`'s selection changes."
         },
         "complexType": {
-          "original": "Selection",
-          "resolved": "Selection",
-          "references": {
-            "Selection": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
         "method": "calciteDropdownBeforeClose",
@@ -825,9 +719,6 @@ export class Dropdown {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "active",
-        "methodName": "activeHandler"
-      }, {
         "propName": "open",
         "methodName": "openHandler"
       }, {

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

@@ -1,10 +1,10 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 export const SLOTS = {
-  dropdownTrigger: "dropdown-trigger"
+  dropdownTrigger: "trigger"
 };
 export const CSS = {
   calciteDropdownContent: "calcite-dropdown-content"

package/dist/collection/components/dropdown-group/dropdown-group.css

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {
@@ -84,6 +85,7 @@
 }
 
 :host {
+  position: relative;
   display: block;
 }
 

package/dist/collection/components/dropdown-group/dropdown-group.js

@@ -1,21 +1,19 @@
 /*!
  * 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-beta.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
- * @slot - A slot for adding `calcite-dropdown-item` components.
+ * @slot - A slot for adding `calcite-dropdown-item`s.
  */
 export class DropdownGroup {
   constructor() {
-    /**
-      specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
-     none (no active items), defaults to single
-     */
+    this.groupTitle = undefined;
     this.selectionMode = "single";
+    this.scale = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -59,6 +57,7 @@ export class DropdownGroup {
   }
   static get is() { return "calcite-dropdown-group"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["dropdown-group.scss"]
@@ -80,10 +79,10 @@ export class DropdownGroup {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "optionally set a group title for display"
+          "text": "Specifies and displays a group title."
         },
         "attribute": "group-title",
         "reflect": true
@@ -92,12 +91,15 @@ export class DropdownGroup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "SelectionMode",
-          "resolved": "\"multi\" | \"none\" | \"single\"",
+          "original": "Extract<\"single\" | \"none\" | \"multiple\", SelectionMode>",
+          "resolved": "\"multiple\" | \"none\" | \"single\"",
           "references": {
+            "Extract": {
+              "location": "global"
+            },
             "SelectionMode": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -105,7 +107,7 @@ export class DropdownGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),\nnone (no active items), defaults to single"
+          "text": "Specifies the component's selection mode, where\n`\"multiple\"` allows any number of (or no) selected `calcite-dropdown-item`s,\n`\"single\"` allows and requires one selected `calcite-dropdown-item`, and\n`\"none\"` does not allow selection on `calcite-dropdown-item`s."
         },
         "attribute": "selection-mode",
         "reflect": true,
@@ -128,7 +130,7 @@ export class DropdownGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the size of the action."
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true

package/dist/collection/components/dropdown-group/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-beta.97
+ * v1.0.0-beta.99
  */
 export const CSS = {
   containerSmall: "container--s",