@esri/calcite-components 5.2.0-next.85 → 5.2.0-next.86

package/dist/components/calcite-table-cell/customElement.js

@@ -5,7 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS } from "../../chunks/resources29.js";
 import { s as styles$1 } from "../../chunks/screen-reader.js";
@@ -16,7 +16,7 @@ class TableCell extends LitElement {
     this.containerRef = createRef();
     this.direction = useDirection();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.contentsText = "";
     this.focused = false;

package/dist/components/calcite-table-header/customElement.js

@@ -5,7 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { C as CSS, I as ICONS } from "../../chunks/resources30.js";
 import { s as styles$1 } from "../../chunks/screen-reader.js";
 const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}th{text-align:start;font-weight:var(--calcite-font-weight-medium);vertical-align:top;white-space:normal;border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}th:not(.body-row):not(.footer-row){border-block-end-width:var(--calcite-internal-table-header-border-block-end-width, var(--calcite-border-width-sm));box-shadow:var(--calcite-internal-table-sticky-header-border-shadow, 0 0 0 0 transparent)}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
@@ -14,7 +14,7 @@ class TableHeader extends LitElement {
     super(...arguments);
     this.containerRef = createRef();
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.focused = false;
     this.screenReaderText = "";
     this.alignment = "start";

package/dist/components/calcite-table-row/customElement.js

@@ -45,7 +45,6 @@ class TableRow extends LitElement {
     this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
     this.calciteInternalTableRowSelect = createEvent({ cancelable: false });
     this.calciteTableRowSelect = createEvent({ cancelable: false });
-    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
   }
   static {
     this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, stickyHeaderEnabled: [5, {}, { type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
@@ -64,6 +63,7 @@ class TableRow extends LitElement {
     }
   }
   load() {
+    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
   willUpdate(changes) {

package/dist/components/calcite-text-area/customElement.js

@@ -16,7 +16,7 @@ import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 import { s as styles$1 } from "../../chunks/screen-reader.js";
@@ -79,7 +79,7 @@ class TextArea extends LitElement {
       this.el.style[dimension] = "auto";
     }, RESIZE_TIMEOUT, { edges: ["trailing"] });
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.endSlotHasElements = false;
     this.startSlotHasElements = false;

package/dist/components/calcite-tile/customElement.js

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { S as SLOTS, I as ICONS, C as CSS } from "../../chunks/resources32.js";
@@ -13,7 +13,7 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class Tile extends LitElement {
   constructor() {
     super();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasContentBottom = false;
     this.hasContentTop = false;

package/dist/components/calcite-time-picker/customElement.js

@@ -8,7 +8,7 @@ import { i as isValidNumber } from "../../chunks/locale.js";
 import { c as componentFocusable, g as getIconScale } from "../../chunks/component.js";
 import { d as decimalPlaces } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useTime } from "../../chunks/useTime.js";
 const CSS = {
   button: "button",
@@ -61,7 +61,7 @@ class TimePicker extends LitElement {
     this.pointerActivated = false;
     this.secondRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.showFractionalSecond = false;
     this.showSecond = false;
     this.time = useTime(this);