@esri/calcite-components 5.1.0-next.4 → 5.1.0-next.5

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

@@ -3,7 +3,7 @@ import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+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 useInteractive } from "../../chunks/useInteractive.js";
@@ -22,6 +22,7 @@ class TableCell extends LitElement {
   constructor() {
     super(...arguments);
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -66,7 +67,7 @@ class TableCell extends LitElement {
     this.focused = true;
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const staticCell = this.disabled || this.interactionMode === "static" && (!this.selectionCell || this.selectionCell && this.parentRowType === "foot");
     return this.interactiveContainer({ disabled: this.disabled, children: html`<td class=${safeClassMap({
       [CSS.footerCell]: this.parentRowType === "foot",

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { b as slotChangeGetAssignedElements, B as getSlotAssignedElements } from "../../chunks/dom.js";
+import { a as slotChangeGetAssignedElements, A as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
 };

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

@@ -3,10 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 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 { g as getElementDir } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTime } from "../../chunks/useTime.js";
@@ -53,6 +53,7 @@ const styles = css`:host{display:inline-block}.time-picker{display:flex;-webkit-
 class TimePicker extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.fractionalSecondRef = createRef();
     this.hourRef = createRef();
     this.meridiemRef = createRef();
@@ -318,7 +319,7 @@ class TimePicker extends LitElement {
       [CSS.buttonFractionalSecondDown]: true
     })} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${showSecondSuffix && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.secondSuffix]: true })}>${localizedSecondSuffix.trim()}</span>` || ""}${showMeridiem && html`<div class=${safeClassMap({
       [CSS.column]: true,
-      [CSS.meridiemStart]: meridiemOrder === 0 || getElementDir(this.el) === "rtl"
+      [CSS.meridiemStart]: meridiemOrder === 0 || this.direction === "rtl"
     })} role=group><span .ariaLabel=${messages.meridiemUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonMeridiemUp]: true,

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

@@ -3,12 +3,13 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, h as hideFloatingUI, c as connectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { q as queryElementRoots, C as getShadowRootNode } from "../../chunks/dom.js";
+import { q as queryElementRoots, B as getShadowRootNode } from "../../chunks/dom.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container"
@@ -269,6 +270,7 @@ class Tooltip extends LitElement {
   constructor() {
     super(...arguments);
     this.arrowRef = createRef();
+    this.direction = useDirection();
     this.guid = IDS.host(guid());
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
@@ -298,6 +300,7 @@ class Tooltip extends LitElement {
   async reposition(delayed = false) {
     const { referenceEl, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowRef, floatingEl } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
-import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { i as focusElement, n as nodeListToArray, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 function isTreeItem(element) {
   return element?.tagName === "CALCITE-TREE-ITEM";

package/dist/components/calcite-tree-item/customElement.js

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { A as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { z as filterDirectChildren, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -39,6 +40,7 @@ class TreeItem extends LitElement {
   constructor() {
     super();
     this.actionSlotWrapperRef = createRef();
+    this.direction = useDirection();
     this.userChangedValue = false;
     this.interactiveContainer = useInteractive(this);
     this.hasEndActions = false;
@@ -242,7 +244,7 @@ class TreeItem extends LitElement {
     return null;
   }
   render() {
-    const rtl = getElementDir(this.el) === "rtl";
+    const rtl = this.direction === "rtl";
     const selectionIcon = this.getSelectionIcon();
     const checkboxIsIndeterminate = this.hasChildren && this.indeterminate;
     const chevron = this.hasChildren || this.selectionMode === "ancestors" ? html`<calcite-icon class=${safeClassMap({

package/dist/controllers/useForm.d.ts

@@ -0,0 +1,3 @@
+import type { Writable } from "type-fest";
+
+export type MutableValidityState = Writable<ValidityState>;