@esri/calcite-components 5.2.0-next.8 → 5.2.0-next.80

package/dist/chunks/useForm.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController, bypassReadOnly } from "@arcgis/lumina/controllers";
 import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
-import { r as isCalciteFocusable } from "./dom.js";
+import { z as isCalciteFocusable } from "./dom.js";
 import "lit";
 const minMaxStepTypes = ["date", "datetime-local", "month", "number", "range", "time", "week"];
 const patternTypes = ["email", "password", "search", "tel", "text", "url"];
@@ -35,6 +35,18 @@ function isSupportedType(type) {
 }
 const joinableValueTypes = ["text", "email", "search", "hidden", "tel", "url"];
 const allValid = Object.freeze({ validity: {}, validationMessage: "" });
+const validityFlagKeys = [
+  "badInput",
+  "customError",
+  "patternMismatch",
+  "rangeOverflow",
+  "rangeUnderflow",
+  "stepMismatch",
+  "tooLong",
+  "tooShort",
+  "typeMismatch",
+  "valueMissing"
+];
 function validate({
   component,
   input,
@@ -42,9 +54,10 @@ function validate({
 }) {
   if (!Array.isArray(value)) {
     if (component && input.type === "radio") {
-      let group = component.elementInternals.form?.elements[component.name];
-      if (group?.length > 0) {
-        group = Array.from(group).filter(
+      const item = component.elementInternals.form?.elements.namedItem(component.name);
+      if (item) {
+        const elements = "length" in item ? Array.from(item) : [item];
+        const group = elements.filter(
           (element) => element.tagName === component.el.tagName
         );
         const isRequired = group.some((radioTypeElement) => radioTypeElement.required);
@@ -107,8 +120,8 @@ function validateValue(inputDelegate, valueToValidate) {
 }
 function getValidityFlags(validityState) {
   const validityFlags = {};
-  for (const key in validityState) {
-    if (key !== "valid" && validityState[key]) {
+  for (const key of validityFlagKeys) {
+    if (validityState[key]) {
       validityFlags[key] = true;
     }
   }
@@ -240,9 +253,10 @@ const useForm = (options) => {
         () => {
           clearValidationMessage(component, validationMessage);
           if (inputDelegate?.type === "radio") {
-            let group = component.elementInternals.form?.elements[component.name];
-            if (group?.length > 0) {
-              group = Array.from(group).filter(
+            const item = component.elementInternals.form?.elements.namedItem(component.name);
+            if (item) {
+              const elements = "length" in item ? Array.from(item) : [item];
+              const group = elements.filter(
                 (element) => element.tagName === component.el.tagName
               );
               const others = group.filter((radioTypeElement) => radioTypeElement !== component.el);

package/dist/chunks/useInlineEdit.js

@@ -0,0 +1,65 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { safeClassMap } from "@arcgis/lumina";
+import { nothing, html } from "lit";
+import { ref } from "lit/directives/ref.js";
+const CSS = {
+  container: "inline-edit--container",
+  enableEditing: "enable-editing",
+  confirmChanges: "confirm-changes",
+  cancelEditing: "cancel-editing"
+};
+const InlineEditControls = ({ cancelEditingLabel, confirmChangesLabel, inlineEditing, enableEditingLabel, enableEditingButtonRef, loading, onCancelEditing, onConfirmChanges, onEnableEditing, scale, showControls }) => html`<div class=${safeClassMap(CSS.container)}>${!inlineEditing && html`<calcite-action .ariaLabel=${enableEditingLabel} class=${safeClassMap(CSS.enableEditing)} icon=pencil @click=${onEnableEditing} .scale=${scale} .text=${enableEditingLabel} title=${enableEditingLabel ?? nothing} type=button ${ref(enableEditingButtonRef)}></calcite-action>` || ""}${showControls && [
+  html`<calcite-action .ariaLabel=${confirmChangesLabel} class=${safeClassMap(CSS.confirmChanges)} .disabled=${loading} icon=check .loading=${loading} @click=${onConfirmChanges} .scale=${scale} .text=${confirmChangesLabel} title=${confirmChangesLabel ?? nothing} type=button></calcite-action>`,
+  html`<calcite-action .ariaLabel=${cancelEditingLabel} class=${safeClassMap(CSS.cancelEditing)} .disabled=${loading} icon=x @click=${onCancelEditing} .scale=${scale} .text=${cancelEditingLabel} title=${cancelEditingLabel ?? nothing} type=button></calcite-action>`
+] || ""}</div>`;
+class UseInlineEdit {
+  constructor(options) {
+    this.options = options;
+    this.valuePriorToEditing = "";
+  }
+  enable() {
+    this.valuePriorToEditing = this.options.getValue();
+    this.options.setInlineEditing(true);
+    requestAnimationFrame(() => {
+      this.options.setFocus();
+    });
+    this.options.emitEnableEditingChange();
+  }
+  disable() {
+    this.options.setInlineEditing(false);
+  }
+  cancelEditing() {
+    this.options.restoreValue(this.valuePriorToEditing);
+    this.disable();
+    this.options.emitCancel();
+    this.options.emitEnableEditingChange();
+  }
+  async confirm(confirm, setLoading) {
+    if (confirm) {
+      setLoading?.(true);
+      try {
+        await confirm();
+      } finally {
+        setLoading?.(false);
+      }
+    }
+    this.options.commitValue();
+    this.disable();
+    this.options.emitConfirm();
+    this.options.emitEnableEditingChange();
+  }
+}
+const inlineEditConverter = {
+  fromAttribute(value) {
+    return value === null ? false : value === "controls-disabled" ? value : true;
+  },
+  toAttribute(value) {
+    return value === false ? null : value === true ? "" : value;
+  }
+};
+export {
+  CSS as C,
+  InlineEditControls as I,
+  UseInlineEdit as U,
+  inlineEditConverter as i
+};

package/dist/chunks/useLabel.js

@@ -0,0 +1,150 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+import { q as queryElementRoots, c as closestElementCrossShadowBoundary, i as isBefore } from "./dom.js";
+const useLabel = makeGenericController((component, controller) => {
+  controller.onConnected(() => {
+    connectLabel(component);
+  });
+  controller.onDisconnected(() => {
+    disconnectLabel(component);
+  });
+});
+const labelClickEvent = "calciteInternalLabelClick";
+const labelConnectedEvent = "calciteInternalLabelConnected";
+const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
+const labelTagName = "calcite-label";
+const labelToLabelables = /* @__PURE__ */ new WeakMap();
+const onLabelClickMap = /* @__PURE__ */ new WeakMap();
+const onLabelConnectedMap = /* @__PURE__ */ new WeakMap();
+const onLabelDisconnectedMap = /* @__PURE__ */ new WeakMap();
+const unlabeledComponents = /* @__PURE__ */ new Set();
+const findLabelForComponent = (componentEl) => {
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel || // labelable components within other custom elements are not considered labelable
+  hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
+};
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = ((event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  });
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements.filter((el) => el !== componentEl && el !== label).filter((el) => el.tagName?.includes("-"));
+  return ancestorCustomElements.length > 0;
+}
+function connectLabel(component) {
+  if (!component) {
+    return;
+  }
+  const labelEl = findLabelForComponent(component.el);
+  if (labelEl && onLabelClickMap.has(labelEl) && labelEl === component.labelEl || !labelEl && unlabeledComponents.has(component)) {
+    return;
+  }
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  if (labelEl) {
+    component.labelEl = labelEl;
+    const labelables = labelToLabelables.get(labelEl) || [];
+    labelables.push(component);
+    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
+    if (!onLabelClickMap.has(component.labelEl)) {
+      onLabelClickMap.set(component.labelEl, onLabelClick);
+      component.labelEl.addEventListener(labelClickEvent, onLabelClick);
+    }
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+  } else if (!unlabeledComponents.has(component)) {
+    boundOnLabelDisconnected();
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  }
+}
+function disconnectLabel(component) {
+  if (!component) {
+    return;
+  }
+  unlabeledComponents.delete(component);
+  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  onLabelConnectedMap.delete(component);
+  onLabelDisconnectedMap.delete(component);
+  if (!component.labelEl) {
+    return;
+  }
+  const labelables = labelToLabelables.get(component.labelEl);
+  if (labelables.length === 1) {
+    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
+    onLabelClickMap.delete(component.labelEl);
+  }
+  labelToLabelables.set(
+    component.labelEl,
+    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder)
+  );
+  component.labelEl = void 0;
+}
+function sortByDOMOrder(a, b) {
+  return isBefore(a.el, b.el) ? -1 : 1;
+}
+function onLabelClick(event) {
+  const labelClickTarget = event.detail.sourceEvent.target;
+  const labelables = labelToLabelables.get(this);
+  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
+  const labelableChildClicked = clickedLabelable && labelables.includes(clickedLabelable);
+  if (labelableChildClicked) {
+    return;
+  }
+  const firstLabelable = labelables[0];
+  if (firstLabelable.disabled) {
+    return;
+  }
+  firstLabelable.onLabelClick(event);
+}
+function onLabelConnected() {
+  if (unlabeledComponents.has(this)) {
+    connectLabel(this);
+  }
+}
+function onLabelDisconnected() {
+  unlabeledComponents.add(this);
+  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+  onLabelConnectedMap.set(this, boundOnLabelConnected);
+  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+}
+async function associateExplicitLabelToUnlabeledComponent(label) {
+  await label.componentOnReady();
+  const alreadyLabeled = labelToLabelables.has(label);
+  if (alreadyLabeled) {
+    return;
+  }
+  const forComponentEl = label.for && label.ownerDocument?.getElementById(label.for);
+  if (!forComponentEl) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    for (const labelable of unlabeledComponents) {
+      if (labelable.el === forComponentEl) {
+        connectLabel(labelable);
+        break;
+      }
+    }
+  });
+}
+export {
+  associateExplicitLabelToUnlabeledComponent as a,
+  labelDisconnectedEvent as b,
+  labelConnectedEvent as l,
+  useLabel as u
+};

package/dist/chunks/useSetFocus.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { c as componentFocusable } from "./component.js";
-import { e as getRootNode, i as focusElement } from "./dom.js";
+import { g as getRootNode, f as focusElement } from "./dom.js";
 const useSetFocus = () => {
   return makeGenericController((component, controller) => {
     let abortController;

package/dist/chunks/useSortable.js

@@ -15,12 +15,36 @@ function onGlobalDragEnd() {
   Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
 }
 const globalDragState = { active: false };
+const activeSortableComponentSet = /* @__PURE__ */ new Set();
+function syncGlobalDragState() {
+  const active = activeSortableComponentSet.size > 0;
+  if (globalDragState.active === active) {
+    return;
+  }
+  globalDragState.active = active;
+  if (active) {
+    onGlobalDragStart();
+    return;
+  }
+  onGlobalDragEnd();
+}
+function markDragActive(component) {
+  activeSortableComponentSet.add(component);
+  syncGlobalDragState();
+}
+function markDragInactive(component) {
+  activeSortableComponentSet.delete(component);
+  syncGlobalDragState();
+}
 function createSortable(component) {
   const dataIdAttr = "id";
   const { el, group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
   return Sortable.create(el, {
     dataIdAttr,
     swapThreshold: 0.5,
+    // Keep the fallback ghost out of nested list DOM updates during touch drag startup.
+    // Applied globally so all sortable hosts use the same stable fallback behavior.
+    fallbackOnBody: true,
     ...CSS,
     ...!!draggable && { draggable },
     ...!!group && {
@@ -59,14 +83,18 @@ function createSortable(component) {
     },
     handle,
     filter: `${handle}[disabled]`,
+    onChoose: () => {
+      markDragActive(component);
+    },
+    onUnchoose: () => {
+      markDragInactive(component);
+    },
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      globalDragState.active = true;
-      onGlobalDragStart();
+      markDragActive(component);
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      globalDragState.active = false;
-      onGlobalDragEnd();
+      markDragInactive(component);
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onSort: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
@@ -103,6 +131,8 @@ const useSortable = () => {
       setUpSortable(component);
     });
     controller.onDisconnected(() => {
+      sortableComponentSet.delete(component);
+      markDragInactive(component);
       tearDownSortable(component);
     });
     return {

package/dist/chunks/useTime.js

@@ -1,9 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { toFunction, GenericController } from "@arcgis/lumina/controllers";
 import { createEvent } from "@arcgis/lumina";
-import { l as localizedTwentyFourHourMeridiems, i as isValidNumber, n as numberStringFormatter, g as getDateTimeFormat, b as getSupportedNumberingSystem } from "./locale.js";
+import { l as localizedTwentyFourHourMeridiems, i as isValidNumber, n as numberStringFormatter, g as getDateTimeFormat, a as getSupportedNumberingSystem } from "./locale.js";
 import { d as decimalPlaces, g as getDecimals } from "./math.js";
-import { c as capitalizeWord } from "./text.js";
 import { n as numberKeys } from "./key.js";
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter({
@@ -55,6 +54,7 @@ function formatTimePart(number, minLength) {
   if (number >= 10) {
     return numberAsString;
   }
+  return;
 }
 function fractionalSecondPartToMilliseconds(fractionalSecondPart) {
   return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 1e-3).toFixed(3), 10);
@@ -391,6 +391,11 @@ function toISOTimeString(value, step = 60) {
   }
   return isoTimeString;
 }
+const localizedTimePartProperty = {
+  hour: "localizedHour",
+  minute: "localizedMinute",
+  second: "localizedSecond"
+};
 class TimeController extends GenericController {
   constructor() {
     super(...arguments);
@@ -827,7 +832,7 @@ class TimeController extends GenericController {
     } else {
       const oldValue = this[key];
       this[key] = typeof value === "number" ? formatTimePart(value) : value;
-      this[`localized${capitalizeWord(key)}`] = localizeTimePart({
+      this[localizedTimePartProperty[key]] = localizeTimePart({
         value: this[key],
         part: key,
         locale,