@esri/calcite-components 1.0.0-next.313 → 1.0.0-next.317

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

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { getKey } from "../../utils/key";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
 import { DefaultDropdownPlacement, SLOTS } from "./resources";
@@ -95,7 +94,7 @@ export class CalciteDropdown {
     };
     this.keyDownHandler = (e) => {
       const target = e.target;
-      const key = getKey(e.key);
+      const key = e.key;
       if (this.triggers.includes(target) ||
         this.triggers.some((trigger) => trigger.contains(target))) {
         if (target.nodeName !== "BUTTON" && target.nodeName !== "CALCITE-BUTTON") {
@@ -221,7 +220,7 @@ export class CalciteDropdown {
     const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
-    switch (getKey(keyboardEvent.key)) {
+    switch (keyboardEvent.key) {
       case "Tab":
         if (isLastItem && !keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
 /**
@@ -88,7 +87,7 @@ export class CalciteDropdownItem {
     this.emitRequestedItem();
   }
   keyDownHandler(e) {
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.emitRequestedItem();
         if (this.href) {

package/dist/collection/components/calcite-filter/calcite-filter.js

@@ -67,25 +67,12 @@ export class CalciteFilter {
       this.setFocus();
     };
   }
-  watchDataHandler(value) {
-    this.items = value;
-  }
   watchItemsHandler() {
     this.filter(this.value);
   }
   valueHandler(value) {
     this.filter(value);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    if (this.data && !this.items) {
-      this.items = this.data;
-    }
-  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -98,7 +85,7 @@ export class CalciteFilter {
   updateFiltered(filtered) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit(filtered);
+    this.calciteFilterChange.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -127,24 +114,6 @@ export class CalciteFilter {
     "$": ["calcite-filter.css"]
   }; }
   static get properties() { return {
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object[]",
-        "resolved": "object[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use `items` instead."
-          }],
-        "text": "The input data. The filter uses this as the starting point, and returns items\nthat contain the string entered in the input, using a partial match and recursive search."
-      }
-    },
     "items": {
       "type": "unknown",
       "mutable": true,
@@ -281,8 +250,8 @@ export class CalciteFilter {
         "text": "This event fires when the filter text changes."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -306,9 +275,6 @@ export class CalciteFilter {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "data",
-      "methodName": "watchDataHandler"
-    }, {
       "propName": "items",
       "methodName": "watchItemsHandler"
     }, {

package/dist/collection/components/calcite-input/calcite-input.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -71,6 +70,8 @@ export class CalciteInput {
      * Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
      */
     this.type = "text";
+    /** input value */
+    this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
     //--------------------------------------------------------------------------
@@ -86,13 +87,13 @@ export class CalciteInput {
       if (this.readOnly || this.disabled) {
         return;
       }
-      if (this.isClearable && getKey(event.key) === "Escape") {
+      if (this.isClearable && event.key === "Escape") {
         this.clearInputValue(event);
         event.preventDefault();
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue(null, nativeEvent, true);
+      this.setValue("", nativeEvent, true);
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
@@ -234,7 +235,7 @@ export class CalciteInput {
         this.setLocalizedValue(this.value);
       }
       if (nativeEvent) {
-        if (this.type === "number" && (value === null || value === void 0 ? void 0 : value.endsWith("."))) {
+        if (this.type === "number" && value.endsWith(".")) {
           return;
         }
         const calciteInputInputEvent = this.calciteInputInput.emit({
@@ -269,6 +270,10 @@ export class CalciteInput {
     this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
   }
   valueWatcher(newValue) {
+    if (newValue == null) {
+      this.value = "";
+      return;
+    }
     if (this.type === "number" &&
       this.localizedValue !== localizeNumberString(newValue, this.locale)) {
       this.setLocalizedValue(newValue);
@@ -281,8 +286,7 @@ export class CalciteInput {
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
   get isClearable() {
-    var _a;
-    return !this.isTextarea && (this.clearable || this.type === "search") && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return !this.isTextarea && (this.clearable || this.type === "search") && this.value.length > 0;
   }
   get isTextarea() {
     return this.childElType === "textarea";
@@ -1041,7 +1045,8 @@ export class CalciteInput {
         "text": "input value"
       },
       "attribute": "value",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.js

@@ -6,7 +6,6 @@ import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event,
 import { getLocaleData } from "../calcite-date-picker/utils";
 import { getElementDir } from "../../utils/dom";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
-import { getKey } from "../../utils/key";
 import { TEXT } from "../calcite-date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -70,7 +69,7 @@ export class CalciteInputDatePicker {
       this.active = false;
     };
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.active = false;
       }
     };

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getKey } from "../../utils/key";
 import { parseTimeString, formatTimeString, getMeridiem, getMeridiemHour } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -116,7 +115,7 @@ export class CalciteInputTimePicker {
     this.internalValueChange = false;
   }
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape" && this.active) {
+    if (event.key === "Escape" && this.active) {
       this.active = false;
     }
   }

package/dist/collection/components/calcite-modal/calcite-modal.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getElementDir, getSlotted, isCalciteFocusable } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -154,7 +153,7 @@ export class CalciteModal {
   }
   renderCloseButton() {
     return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose },
-      h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : "l" }))) : null;
+      h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
@@ -184,7 +183,7 @@ export class CalciteModal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && getKey(e.key) === "Escape") {
+    if (this.active && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }

package/dist/collection/components/calcite-panel/calcite-panel.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getElementDir, getElementStyleDir, getSlotted } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
@@ -106,7 +106,7 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
   renderBackButton() {
     const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
+    const rtl = getElementStyleDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;

package/dist/collection/components/calcite-pick-list/shared-list-logic.js

@@ -215,8 +215,8 @@ export function selectSiblings(item, deselect = false) {
 }
 let groups;
 export function handleFilter(event) {
-  const filteredData = event.detail;
-  const values = filteredData.map((item) => item.value);
+  const { filteredItems } = event.currentTarget;
+  const values = filteredItems.map((item) => item.value);
   let hasSelectedMatch = false;
   if (!groups) {
     groups = new Set();

package/dist/collection/components/calcite-pick-list/shared-list-render.js

@@ -22,7 +22,7 @@ export const List = (_a) => {
   return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
-        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, dir: getElementDir(el), disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS.menuActions })),
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));

package/dist/collection/components/calcite-popover/calcite-popover.css

@@ -226,6 +226,7 @@
   flex-direction: column;
   flex-wrap: nowrap;
   align-self: center;
+  overflow: hidden;
   height: 100%;
   width: 100%;
 }

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -4,12 +4,10 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement } from "../../utils/dom";
+import { focusElement, getElementStyleDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { HiddenFormInputSlot, connectForm, disconnectForm } from "../../utils/form";
 import { CSS } from "./resources";
-import { getKey } from "../../utils/key";
-import { getElementDir } from "../../utils/dom";
 import { getRoundRobinIndex } from "../../utils/array";
 export class CalciteRadioButton {
   constructor() {
@@ -70,7 +68,7 @@ export class CalciteRadioButton {
     };
     this.handleKeyDown = (event) => {
       const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-      const key = getKey(event.key);
+      const key = event.key;
       const { el } = this;
       if (keys.indexOf(key) === -1) {
         return;
@@ -80,7 +78,7 @@ export class CalciteRadioButton {
         return;
       }
       let adjustedKey = key;
-      if (getElementDir(el) === "rtl") {
+      if (getElementStyleDir(el) === "rtl") {
         if (key === "ArrowRight") {
           adjustedKey = "ArrowLeft";
         }

package/dist/collection/components/calcite-radio-group/calcite-radio-group.js

@@ -3,8 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
-import { getKey } from "../../utils/key";
+import { getElementStyleDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 /**
@@ -42,7 +41,7 @@ export class CalciteRadioGroup {
     //--------------------------------------------------------------------------
     this.handleClick = (event) => {
       if (event.target.localName === "calcite-radio-group-item") {
-        this.selectItem(event.target);
+        this.selectItem(event.target, true);
       }
     };
   }
@@ -61,7 +60,6 @@ export class CalciteRadioGroup {
       .pop();
     if (match) {
       this.selectItem(match);
-      this.calciteRadioGroupChange.emit(match.value);
     }
     else if (items[0]) {
       items[0].tabIndex = 0;
@@ -72,7 +70,7 @@ export class CalciteRadioGroup {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  connectedCallback() {
+  componentWillLoad() {
     const items = this.getItems();
     const lastChecked = Array.from(items)
       .filter((item) => item.checked)
@@ -83,6 +81,8 @@ export class CalciteRadioGroup {
     else if (items[0]) {
       items[0].tabIndex = 0;
     }
+  }
+  connectedCallback() {
     connectLabel(this);
     connectForm(this);
   }
@@ -90,31 +90,25 @@ export class CalciteRadioGroup {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  componentDidLoad() {
-    this.hasLoaded = true;
-  }
   render() {
     return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null },
       h("slot", null),
       h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
-    // only fire after initial setup to prevent semi-infinite loops
-    if (this.hasLoaded) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.selectItem(event.target);
-    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.selectItem(event.target);
   }
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-    const key = getKey(event.key);
+    const key = event.key;
     const { el, selectedItem } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (getElementStyleDir(el) === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }
@@ -134,17 +128,17 @@ export class CalciteRadioGroup {
       case "ArrowUp":
         event.preventDefault();
         const previous = selectedIndex < 1 ? items.item(items.length - 1) : items.item(selectedIndex - 1);
-        this.selectItem(previous);
+        this.selectItem(previous, true);
         return;
       case "ArrowRight":
       case "ArrowDown":
         event.preventDefault();
         const next = selectedIndex === -1 ? items.item(1) : items.item(selectedIndex + 1) || items.item(0);
-        this.selectItem(next);
+        this.selectItem(next, true);
         return;
       case " ":
         event.preventDefault();
-        this.selectItem(event.target);
+        this.selectItem(event.target, true);
         return;
       default:
         return;
@@ -171,7 +165,7 @@ export class CalciteRadioGroup {
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
-  selectItem(selected) {
+  selectItem(selected, emit = false) {
     if (selected === this.selectedItem) {
       return;
     }
@@ -185,6 +179,9 @@ export class CalciteRadioGroup {
       item.tabIndex = matches ? 0 : -1;
       if (matches) {
         match = item;
+        if (emit) {
+          this.calciteRadioGroupChange.emit(match.value);
+        }
       }
     });
     this.selectedItem = match;

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Event, h, Prop, Element, Host, Watch, State } from "@stencil/core";
+import { Component, h, Prop, Element, Event, Host, Watch, State } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/calcite-select/calcite-select.js

@@ -118,6 +118,7 @@ export class CalciteSelect {
     this.updateNativeElement(optionOrGroup, nativeEl);
     if (isOption(optionOrGroup) && optionOrGroup.selected) {
       this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
     }
   }
   //--------------------------------------------------------------------------
@@ -157,7 +158,7 @@ export class CalciteSelect {
       }
     });
     if (futureSelected) {
-      requestAnimationFrame(() => (this.selectedOption = futureSelected));
+      this.selectedOption = futureSelected;
     }
   }
   toNativeElement(optionOrGroup) {

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, getElementStyleDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 /**
  * @slot - A slot for adding content to the shell panel.
@@ -54,7 +54,7 @@ export class CalciteShellPanel {
     };
     this.getKeyAdjustedWidth = (event) => {
       const { key } = event;
-      const { step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -69,15 +69,20 @@ export class CalciteShellPanel {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const increaseKeys = key === "ArrowUp" || (position === "end" ? key === "ArrowLeft" : key === "ArrowRight");
+      const dir = getElementStyleDir(el);
+      const directionKeys = ["ArrowLeft", "ArrowRight"];
+      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
+      const increaseKeys = key === "ArrowUp" ||
+        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + stepValue;
+        return initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" || (position === "end" ? key === "ArrowRight" : key === "ArrowLeft");
+      const decreaseKeys = key === "ArrowDown" ||
+        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - stepValue;
+        return initialContentWidth - directionFactor * stepValue;
       }
       if (typeof contentWidthMin === "number" && key === "Home") {
         return contentWidthMin;
@@ -102,9 +107,13 @@ export class CalciteShellPanel {
     };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { initialContentWidth, position, initialClientX } = this;
+      const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      this.setContentWidth(position === "end" ? initialContentWidth - offset : initialContentWidth + offset);
+      const dir = getElementStyleDir(el);
+      const adjustmentDirection = dir === "rtl" ? -1 : 1;
+      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
+      const width = initialContentWidth + adjustedOffset;
+      this.setContentWidth(width);
     };
     this.separatorPointerUp = (event) => {
       event.preventDefault();

package/dist/collection/components/calcite-slider/calcite-slider.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getKey } from "../../utils/key";
 import { intersects } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
@@ -374,7 +373,7 @@ export class CalciteSlider {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Enter" || key === " ") {
       event.preventDefault();
       return;

package/dist/collection/components/calcite-stepper/calcite-stepper.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
-import { getKey } from "../../utils/key";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
@@ -72,7 +71,7 @@ export class CalciteStepper {
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
-    switch (getKey(item.key)) {
+    switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
         if (isLastItem) {

package/dist/collection/components/calcite-stepper-item/calcite-stepper-item.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding custom content.
@@ -85,7 +84,7 @@ export class CalciteStepperItem {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (!this.disabled && e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();

package/dist/collection/components/calcite-switch/calcite-switch.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -31,7 +30,7 @@ export class CalciteSwitch {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
       }

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, filterDirectChildren } from "../../utils/dom";
+import { getElementStyleDir, filterDirectChildren } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-tab-title`s.
  */
@@ -86,7 +86,7 @@ export class CalciteTabNav {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const width = `${this.indicatorWidth}px`;
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
@@ -147,7 +147,7 @@ export class CalciteTabNav {
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;
     const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;