@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

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

@@ -1,17 +1,18 @@
 /*!
  * 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.82
+ * v1.0.0-beta.85
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
+import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { getHandleAndItemElement, getScreenReaderText } from "./utils";
 /**
- * @slot - A slot for adding calcite-value-list-item elements. List items are displayed as a vertical list.
+ * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
 export class ValueList {
@@ -22,30 +23,30 @@ export class ValueList {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, prevents user interaction. This state shows list items grayed out and with lower opacity.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, list items are sortable via a draggable button.
+     * When true, `calcite-value-list-item`s are sortable via a draggable button.
      */
     this.dragEnabled = false;
     /**
-     * When true, an input appears at the top of the list that can be used by end users to filter list items.
+     * When true, an input appears at the top of the component that can be used by end users to filter list items.
      */
     this.filterEnabled = false;
     /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
     /**
      * Similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple list items at a time.
-     * When false, only a single list item can be selected at a time,
-     * and selecting a new list item will deselect any other selected list items.
+     * When true, a user can select multiple `calcite-value-list-item`s at a time.
+     * When false, only a single `calcite-value-list-item` can be selected at a time,
+     * and a new selection will deselect previous selections.
      */
     this.multiple = false;
     /**
-     * When true and single-selection is enabled, the selection changes when navigating list items via the keyboard.
+     * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -66,18 +67,18 @@ export class ValueList {
     this.handleFilter = handleFilter.bind(this);
     this.getItemData = getItemData.bind(this);
     this.keyDownHandler = (event) => {
-      const handleElement = event
-        .composedPath()
-        .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
-      const item = event
-        .composedPath()
-        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-      // Only trigger keyboard sorting when the internal drag handle is focused and activated
-      if (!handleElement || !item.handleActivated) {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (handle && !item.handleActivated && event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "commit", this));
+      }
+      if (!handle || !item.handleActivated) {
         keyDownHandler.call(this, event);
         return;
       }
       const { items } = this;
+      if (event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "active", this));
+      }
       if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
         return;
       }
@@ -96,8 +97,18 @@ export class ValueList {
       }
       this.items = this.getItems();
       this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handleElement.focus());
+      requestAnimationFrame(() => handle === null || handle === void 0 ? void 0 : handle.focus());
       item.handleActivated = true;
+      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
+    };
+    this.storeAssistiveEl = (el) => {
+      this.assistiveTextEl = el;
+    };
+    this.handleFocusIn = (event) => {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
+        this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+      }
     };
   }
   // --------------------------------------------------------------------------
@@ -128,12 +139,13 @@ export class ValueList {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   // --------------------------------------------------------------------------
   //
@@ -173,6 +185,11 @@ export class ValueList {
     (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
     this.sortable = null;
   }
+  handleBlur() {
+    if (this.dragEnabled) {
+      this.updateScreenReaderText("");
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -182,7 +199,11 @@ export class ValueList {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -198,8 +219,14 @@ export class ValueList {
     }
     return type;
   }
+  updateScreenReaderText(text) {
+    this.assistiveTextEl.textContent = text;
+  }
+  updateHandleAriaLabel(handleElement, text) {
+    handleElement.ariaLabel = text;
+  }
   render() {
-    return h(List, { onKeyDown: this.keyDownHandler, props: this });
+    return (h(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
   }
   static get is() { return "calcite-value-list"; }
   static get encapsulation() { return "shadow"; }
@@ -222,7 +249,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents user interaction. This state shows list items grayed out and with lower opacity."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -240,7 +267,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, list items are sortable via a draggable button."
+        "text": "When true, `calcite-value-list-item`s are sortable via a draggable button."
       },
       "attribute": "drag-enabled",
       "reflect": true,
@@ -258,7 +285,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, an input appears at the top of the list that can be used by end users to filter list items."
+        "text": "When true, an input appears at the top of the component that can be used by end users to filter list items."
       },
       "attribute": "filter-enabled",
       "reflect": true,
@@ -293,7 +320,7 @@ export class ValueList {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        "text": "The component's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
       },
       "attribute": "group",
       "reflect": false
@@ -310,7 +337,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+        "text": "When true, a busy indicator is displayed."
       },
       "attribute": "loading",
       "reflect": true,
@@ -328,7 +355,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple list items at a time.\nWhen false, only a single list item can be selected at a time,\nand selecting a new list item will deselect any other selected list items."
+        "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-value-list-item`s at a time.\nWhen false, only a single `calcite-value-list-item` can be selected at a time,\nand a new selection will deselect previous selections."
       },
       "attribute": "multiple",
       "reflect": true,
@@ -346,11 +373,79 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true and single-selection is enabled, the selection changes when navigating list items via the keyboard."
+        "text": "When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard."
       },
       "attribute": "selection-follows-focus",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "intlDragHandleIdle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-idle",
+      "reflect": false
+    },
+    "intlDragHandleActive": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-active",
+      "reflect": false
+    },
+    "intlDragHandleChange": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-change",
+      "reflect": false
+    },
+    "intlDragHandleCommit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-commit",
+      "reflect": false
     }
   }; }
   static get states() { return {
@@ -422,7 +517,10 @@ export class ValueList {
       "complexType": {
         "signature": "(focusId?: ListFocusId) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -438,7 +536,10 @@ export class ValueList {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }
@@ -462,14 +563,14 @@ export class ValueList {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemPropsChange",
-      "method": "calciteListItemPropsChangeHandler",
+      "name": "calciteInternalListItemPropsChange",
+      "method": "calciteInternalListItemPropsChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemValueChange",
-      "method": "calciteListItemValueChangeHandler",
+      "name": "calciteInternalListItemValueChange",
+      "method": "calciteInternalListItemValueChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/value-list-item/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.82
+ * v1.0.0-beta.85
  */
 export const ICONS = {
   drag: "drag"

package/dist/collection/components/value-list-item/value-list-item.css

@@ -103,7 +103,8 @@ calcite-pick-list-item {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host([active]), :host([selected]) {
+:host([active]), 
+:host([selected]) {
   --tw-shadow: 0 0 0 1px var(--calcite-ui-brand);
   --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -122,9 +123,7 @@ calcite-pick-list-item {
   padding-right: 0.25rem;
   color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);

package/dist/collection/components/value-list-item/value-list-item.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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -9,42 +9,43 @@ import { guid } from "../../utils/guid";
 import { CSS } from "../pick-list-item/resources";
 import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
-import { getSlotted, toAriaBoolean } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot actions-end - A slot for adding actions or content to the end side of the item.
- * @slot actions-start - A slot for adding actions or content to the start side of the item.
+ * @slot actions-end - A slot for adding actions or content to the end side of the component.
+ * @slot actions-start - A slot for adding actions or content to the start side of the component.
  */
 export class ValueListItem {
   constructor() {
     /**
-     * When true, the list item cannot be clicked and is visually muted.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * @internal When false, the list item cannot be deselected by user interaction.
+     * @internal
      */
     this.disableDeselect = false;
     /**
-     * When true, prevents the content of the list item from user interaction.
+     * When true, prevents the content of the component from user interaction.
      */
     this.nonInteractive = false;
     /**
-     * @internal - Stores the activated state of the drag handle.
+     * @internal
      */
     this.handleActivated = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
     /**
-     * When true, adds an action to remove the list item.
+     * When true, adds an action to remove the component.
      */
     this.removable = false;
     /**
-     * When true, preselects the list item. Toggles when an item is checked/unchecked.
+     * When true, the component is selected.
      */
     this.selected = false;
     this.pickListItem = null;
@@ -89,6 +90,8 @@ export class ValueListItem {
   /**
    * Toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.pickListItem.toggleSelected(coerce);
@@ -120,7 +123,7 @@ export class ValueListItem {
   renderHandle() {
     const { icon } = this;
     if (icon === ICON_TYPES.grip) {
-      return (h("span", { "aria-pressed": toAriaBoolean(this.handleActivated), class: {
+      return (h("span", { class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" },
@@ -155,7 +158,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for the list item that displays below the label text."
+        "text": "A description for the component that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -172,7 +175,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the list item cannot be clicked and is visually muted."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -191,7 +194,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When false, the list item cannot be deselected by user interaction."
+            "text": undefined
           }],
         "text": ""
       },
@@ -211,7 +214,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents the content of the list item from user interaction."
+        "text": "When true, prevents the content of the component from user interaction."
       },
       "attribute": "non-interactive",
       "reflect": true,
@@ -230,7 +233,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "- Stores the activated state of the drag handle."
+            "text": undefined
           }],
         "text": ""
       },
@@ -276,7 +279,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for the list item. Appears next to the icon."
+        "text": "Label and accessible name for the component. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -297,7 +300,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Provides additional metadata to a list item. Primary use is for a filter on the parent list."
+        "text": "Provides additional metadata to the component. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -312,7 +315,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, adds an action to remove the list item."
+        "text": "When true, adds an action to remove the component."
       },
       "attribute": "removable",
       "reflect": true,
@@ -330,7 +333,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, preselects the list item. Toggles when an item is checked/unchecked."
+        "text": "When true, the component is selected."
       },
       "attribute": "selected",
       "reflect": true,
@@ -348,7 +351,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The list item's associated value."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -362,7 +365,7 @@ export class ValueListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the remove button is pressed."
+        "text": "Fires when the remove button is pressed."
       },
       "complexType": {
         "original": "void",
@@ -375,7 +378,10 @@ export class ValueListItem {
       "complexType": {
         "signature": "(coerce?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "coerce"
+              }],
             "text": ""
           }],
         "references": {
@@ -387,7 +393,10 @@ export class ValueListItem {
       },
       "docs": {
         "text": "Toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "coerce"
+          }]
       }
     },
     "setFocus": {

package/dist/collection/utils/array.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.82
+ * v1.0.0-beta.85
  */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.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.82
+ * v1.0.0-beta.85
  */
 import { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";
@@ -10,6 +10,8 @@ let mutationObserver;
 const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
+ *
+ * @param component
  */
 export function connectConditionalSlotComponent(component) {
   if (!mutationObserver) {
@@ -19,6 +21,8 @@ export function connectConditionalSlotComponent(component) {
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
+ *
+ * @param component
  */
 export function disconnectConditionalSlotComponent(component) {
   observed.delete(component.el);