@esri/calcite-components 5.1.0-next.6 → 5.1.0-next.60

package/dist/chunks/useForm.js

@@ -0,0 +1,327 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController, bypassReadOnly } from "@arcgis/lumina/controllers";
+import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
+import { r 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"];
+const minMaxLengthTypes = ["email", "password", "search", "tel", "text", "textarea", "url"];
+function updateConstraintValidation(inputComponent, input, propName, matchesType) {
+  const attributeName = propName.toLowerCase();
+  const value = inputComponent[propName];
+  if (matchesType && value != null) {
+    input.setAttribute(attributeName, `${value}`);
+  } else {
+    input.removeAttribute(attributeName);
+  }
+}
+function syncInputDelegate(type, inputComponent, input) {
+  input.type = type;
+  const isMinMaxStepType = minMaxStepTypes.includes(type);
+  const numericInputComponent = inputComponent;
+  updateConstraintValidation(numericInputComponent, input, "min", isMinMaxStepType);
+  updateConstraintValidation(numericInputComponent, input, "max", isMinMaxStepType);
+  updateConstraintValidation(numericInputComponent, input, "step", isMinMaxStepType);
+  const isMinMaxLengthType = minMaxLengthTypes.includes(type);
+  const textualInputComponent = inputComponent;
+  updateConstraintValidation(textualInputComponent, input, "minLength", isMinMaxLengthType);
+  updateConstraintValidation(textualInputComponent, input, "maxLength", isMinMaxLengthType);
+  const isPatternType = patternTypes.includes(type);
+  updateConstraintValidation(textualInputComponent, input, "pattern", isPatternType);
+}
+function isSupportedType(type) {
+  const effectiveType = type === "textarea" ? "text" : type;
+  return minMaxStepTypes.includes(effectiveType) || patternTypes.includes(effectiveType) || minMaxLengthTypes.includes(effectiveType);
+}
+const joinableValueTypes = ["text", "email", "search", "hidden", "tel", "url"];
+const allValid = Object.freeze({ validity: {}, validationMessage: "" });
+function validate({
+  component,
+  input,
+  value
+}) {
+  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(
+          (element) => element.tagName === component.el.tagName
+        );
+        const isRequired = group.some((radioTypeElement) => radioTypeElement.required);
+        const isChecked = group.some((radioTypeElement) => radioTypeElement.checked);
+        const others = group.filter((radioTypeElement) => radioTypeElement !== component.el);
+        const valueMissing = isRequired && !isChecked;
+        input.required = !!valueMissing;
+        const validity = getValidityFlags(input.validity);
+        const validationMessage = input.validationMessage;
+        if (others?.length > 0) {
+          others.forEach((other) => {
+            if (valueMissing !== other.validity?.valueMissing && other.setValidity) {
+              other.setValidity(validity, validationMessage);
+            }
+          });
+        }
+      }
+    }
+    if (validateValue(input, value)) {
+      return allValid;
+    }
+    return {
+      validity: getValidityFlags(input.validity),
+      validationMessage: input.validationMessage
+    };
+  }
+  if (joinableValueTypes.includes(input.type)) {
+    if (validateValue(input, value.join(","))) {
+      return allValid;
+    }
+    return {
+      validity: getValidityFlags(input.validity),
+      validationMessage: input.validationMessage
+    };
+  }
+  const mergedValidity = {};
+  const validationMessages = [];
+  for (const item of value) {
+    if (validateValue(input, item)) {
+      continue;
+    }
+    Object.assign(mergedValidity, getValidityFlags(input.validity));
+    if (input.validationMessage) {
+      validationMessages.push(input.validationMessage);
+    }
+  }
+  return {
+    validity: mergedValidity,
+    validationMessage: validationMessages.join("; ")
+  };
+}
+function validateValue(inputDelegate, valueToValidate) {
+  inputDelegate.value = // file will throw if non-empty string is provided
+  inputDelegate.type === "file" || valueToValidate == null ? "" : String(valueToValidate);
+  return inputDelegate.validity.valid;
+}
+function getValidityFlags(validityState) {
+  const validityFlags = {};
+  for (const key in validityState) {
+    if (key !== "valid" && validityState[key]) {
+      validityFlags[key] = true;
+    }
+  }
+  return validityFlags;
+}
+const componentsWithInputEvent = [
+  "calcite-input",
+  "calcite-input-number",
+  "calcite-input-text",
+  "calcite-text-area"
+];
+function getClearValidationEventName(componentTag) {
+  const componentTagCamelCase = uncapitalize(kebabToPascal(componentTag));
+  return `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
+}
+function isFormComponentEl(el) {
+  return "form" in el && "name" in el && isCalciteFocusable(el);
+}
+function displayValidationMessage(component, { status, message, icon }) {
+  if ("status" in component) {
+    component.status = status;
+  }
+  if ("validationIcon" in component && typeof component.validationIcon !== "string") {
+    component.validationIcon = icon;
+  }
+  if ("validationMessage" in component && !component.validationMessage) {
+    component.validationMessage = message;
+  }
+}
+function syncInternalInput(component, input) {
+  const { disabled, name, required } = component;
+  input.disabled = disabled;
+  input.name = name || "";
+  input.required = !!required;
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+  } else if (isInputComponent(component, input)) {
+    syncInputDelegate(input.type, component, input);
+  }
+}
+function isCheckable(component) {
+  return "checked" in component;
+}
+function isInputComponent(component, input) {
+  return component && isSupportedType(input.type);
+}
+function focusFirstInvalidFormElement(form) {
+  const formElements = Array.from(form.elements);
+  requestAnimationFrame(() => {
+    const invalidEls = formElements.filter(
+      (el) => el.matches("[status=invalid]") && isFormComponentEl(el)
+    );
+    for (const el of invalidEls) {
+      if (el.validationMessage) {
+        el.setFocus();
+        break;
+      }
+    }
+  });
+}
+const useForm = (options) => {
+  return makeGenericController((component, controller) => {
+    let customValidityMessage = "";
+    let inputDelegate;
+    let lastAssociatedForm = null;
+    let effectiveInputType = options.inputType;
+    if (effectiveInputType) {
+      inputDelegate = document.createElement("input");
+    }
+    function invalidFormHandler(event) {
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      const form = event.currentTarget;
+      focusFirstInvalidFormElement(form);
+    }
+    function onFormReset() {
+      if ("status" in component) {
+        component.status = "idle";
+      }
+      if ("validationIcon" in component) {
+        component.validationIcon = false;
+      }
+      if ("validationMessage" in component) {
+        component.validationMessage = "";
+      }
+      if (isCheckable(component)) {
+        component.checked = component.defaultChecked;
+      }
+      component.value = component.defaultValue;
+    }
+    component.listen("luminaFormResetCallback", () => {
+      onFormReset();
+    });
+    component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+      if (form) {
+        form.addEventListener("invalid", invalidFormHandler, { capture: true });
+      } else {
+        lastAssociatedForm?.removeEventListener("invalid", invalidFormHandler, { capture: true });
+      }
+      lastAssociatedForm = form;
+    });
+    function handleInvalidInput() {
+      const validationMsg = customValidityMessage || inputDelegate?.validationMessage || "";
+      component.el.dispatchEvent(
+        // allows users to set custom validation messages
+        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
+      );
+      displayValidationMessage(component, {
+        message: validationMsg,
+        icon: true,
+        status: "invalid"
+      });
+      const clearValidationEvent = getClearValidationEventName(component.el.tagName.toLowerCase());
+      component.listen(
+        clearValidationEvent,
+        () => {
+          if ("status" in component) {
+            component.status = "idle";
+          }
+          if ("validationIcon" in component && (!component.validationIcon || component.validationIcon === true)) {
+            component.validationIcon = false;
+          }
+          if ("validationMessage" in component && component.validationMessage === validationMsg) {
+            component.validationMessage = "";
+          }
+        },
+        { once: true }
+      );
+    }
+    controller.onConnected(() => {
+      component.el.addEventListener("invalid", handleInvalidInput);
+    });
+    controller.onDisconnected(() => {
+      component.el.removeEventListener("invalid", handleInvalidInput);
+    });
+    controller.onUpdate((changes) => {
+      if (!component.hasUpdated) {
+        component.defaultValue = component.value;
+        if (isCheckable(component)) {
+          component.defaultChecked = component.checked;
+        }
+      }
+      if (changes.has("name") || changes.has("value") || isCheckable(component) && changes.has("checked")) {
+        component.elementInternals.setFormValue(getFormValue());
+      }
+      if (component.hasUpdated) {
+        updateValidity();
+      }
+    });
+    controller.onLoaded(() => updateValidity());
+    function updateValidity() {
+      const { disabled, elementInternals } = component;
+      if (disabled) {
+        return;
+      }
+      let validity = {};
+      let validationMessage = "";
+      if (inputDelegate) {
+        inputDelegate.type = effectiveInputType;
+        syncInternalInput(component, inputDelegate);
+        ({ validity, validationMessage } = validate({ component, input: inputDelegate, value: getComponentValue() }));
+      }
+      if (customValidityMessage) {
+        validity = { ...validity, customError: true };
+        validationMessage = customValidityMessage;
+      }
+      elementInternals.setValidity(validity, validationMessage);
+      if ("validity" in component) {
+        bypassReadOnly(() => {
+          component.validity = elementInternals.validity;
+        });
+      }
+    }
+    function getComponentValue() {
+      if (options.getValue) {
+        return options.getValue();
+      }
+      return component.value;
+    }
+    function getFormValue() {
+      const value = getComponentValue();
+      if (Array.isArray(value)) {
+        const formData = new FormData();
+        value.forEach((value2) => formData.append(component.name, value2));
+        return formData;
+      }
+      if (isCheckable(component)) {
+        if (component.checked) {
+          return value || "on";
+        }
+        return null;
+      }
+      return value;
+    }
+    return {
+      get active() {
+        return !!component.elementInternals.form;
+      },
+      overrideDefaultValue: (value) => {
+        component.defaultValue = value;
+      },
+      overrideInputType: (type) => {
+        effectiveInputType = type;
+        updateValidity();
+      },
+      requestSubmit: () => {
+        component.elementInternals.form?.requestSubmit();
+      },
+      setCustomValidity: (message) => {
+        customValidityMessage = message;
+        updateValidity();
+      }
+    };
+  });
+};
+export {
+  useForm as u
+};

package/dist/chunks/useFormTrigger.js

@@ -0,0 +1,25 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+const useFormTrigger = (options) => makeGenericController((component) => {
+  function clickHandler(event) {
+    const { form } = component.elementInternals;
+    if (event.defaultPrevented || component.disabled || options?.disabled?.() || !form || component.type === "button") {
+      return;
+    }
+    if (component.type === "submit") {
+      form.requestSubmit();
+      return;
+    }
+    form.reset();
+  }
+  component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+    if (form) {
+      component.el.addEventListener("click", clickHandler);
+    } else {
+      component.el.removeEventListener("click", clickHandler);
+    }
+  });
+});
+export {
+  useFormTrigger as u
+};

package/dist/chunks/{sortableComponent.js → useSortable.js}

@@ -1,4 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
 import Sortable from "sortablejs";
 const sortableComponentSet = /* @__PURE__ */ new Set();
 const CSS = {
@@ -7,15 +8,17 @@ const CSS = {
   dragClass: "calcite-sortable--drag",
   fallbackClass: "calcite-sortable--fallback"
 };
-function connectSortableComponent(component) {
-  if (dragActive(component)) {
-    return;
-  }
-  disconnectSortableComponent(component);
-  sortableComponentSet.add(component);
+function onGlobalDragStart() {
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
+}
+function onGlobalDragEnd() {
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
+}
+const globalDragState = { active: false };
+function createSortable(component) {
   const dataIdAttr = "id";
-  const { group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
-  component.sortable = Sortable.create(component.el, {
+  const { el, group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
+  return Sortable.create(el, {
     dataIdAttr,
     swapThreshold: 0.5,
     ...CSS,
@@ -25,22 +28,26 @@ function connectSortableComponent(component) {
       group: {
         name: group,
         ...!!component.canPull && {
-          pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPull({
-            toEl: to.el,
-            fromEl: from.el,
-            dragEl,
-            newIndex,
-            oldIndex
-          })
+          pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
+            return component.canPull({
+              toEl: to.el,
+              fromEl: from.el,
+              dragEl,
+              newIndex,
+              oldIndex
+            });
+          }
         },
         ...!!component.canPut && {
-          put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPut({
-            toEl: to.el,
-            fromEl: from.el,
-            dragEl,
-            newIndex,
-            oldIndex
-          })
+          put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
+            return component.canPut({
+              toEl: to.el,
+              fromEl: from.el,
+              dragEl,
+              newIndex,
+              oldIndex
+            });
+          }
         }
       }
     },
@@ -53,12 +60,12 @@ function connectSortableComponent(component) {
     handle,
     filter: `${handle}[disabled]`,
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      dragState.active = true;
+      globalDragState.active = true;
       onGlobalDragStart();
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      dragState.active = false;
+      globalDragState.active = false;
       onGlobalDragEnd();
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
@@ -67,25 +74,44 @@ function connectSortableComponent(component) {
     }
   });
 }
-function disconnectSortableComponent(component) {
-  if (dragActive(component)) {
-    return;
-  }
-  sortableComponentSet.delete(component);
-  component.sortable?.destroy();
-  component.sortable = null;
-}
-const dragState = { active: false };
-function dragActive(component) {
-  return component.dragEnabled && dragState.active;
-}
-function onGlobalDragStart() {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
-}
-function onGlobalDragEnd() {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
-}
+const useSortable = () => {
+  return makeGenericController((component, controller) => {
+    let sortable;
+    function dragActive(component2) {
+      return component2.dragEnabled && globalDragState.active;
+    }
+    function setUpSortable(component2) {
+      if (dragActive(component2)) {
+        return;
+      }
+      tearDownSortable(component2);
+      if (!component2.dragEnabled) {
+        return;
+      }
+      sortableComponentSet.add(component2);
+      sortable = createSortable(component2);
+    }
+    function tearDownSortable(component2) {
+      if (dragActive(component2)) {
+        return;
+      }
+      sortableComponentSet.delete(component2);
+      sortable?.destroy();
+      sortable = void 0;
+    }
+    controller.onConnected(() => {
+      setUpSortable(component);
+    });
+    controller.onDisconnected(() => {
+      tearDownSortable(component);
+    });
+    return {
+      reset: () => {
+        setUpSortable(component);
+      }
+    };
+  });
+};
 export {
-  connectSortableComponent as c,
-  disconnectSortableComponent as d
+  useSortable as u
 };

package/dist/chunks/utils.js

@@ -305,16 +305,16 @@ export {
   hexToRGB as h,
   isValidHex as i,
   CSS as j,
-  toNonAlphaMode as k,
-  HUE_LIMIT_CONSTRAINED as l,
-  normalizeAlpha as m,
+  HUE_LIMIT_CONSTRAINED as k,
+  normalizeAlpha as l,
+  alphaToOpacity as m,
   normalizeHex as n,
   opacityToAlpha as o,
   parseMode as p,
-  alphaToOpacity as q,
-  SCOPE_SIZE as r,
+  SCOPE_SIZE as q,
+  toAlphaMode as r,
   isLonghandHex as s,
-  toAlphaMode as t,
+  toNonAlphaMode as t,
   isShorthandHex as u,
   rgbToHex as v,
   hexChar as w

package/dist/chunks/utils3.js

@@ -53,8 +53,23 @@ function applyLocaleOverride(locale) {
 function getValueAsDateRange(value) {
   return value.map((v, index) => dateFromISO(v, index === 1));
 }
+function getSource(changes, stringProp, dateProp) {
+  const stringPropChanged = changes.has(stringProp);
+  const datePropChanged = changes.has(dateProp);
+  if (stringPropChanged && !datePropChanged) {
+    return stringProp;
+  }
+  if (datePropChanged && !stringPropChanged) {
+    return dateProp;
+  }
+  return null;
+}
+function getMinMaxSource(changes, type) {
+  return type === "min" ? getSource(changes, "min", "minAsDate") : getSource(changes, "max", "maxAsDate");
+}
 export {
-  applyLocaleOverride as a,
-  getLocaleData as b,
-  getValueAsDateRange as g
+  getValueAsDateRange as a,
+  applyLocaleOverride as b,
+  getLocaleData as c,
+  getMinMaxSource as g
 };

package/dist/components/calcite-accordion-item/customElement.d.ts

@@ -10,8 +10,8 @@ import type { HeadingLevel } from "../functional/Heading.js";
  * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
  * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
  * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
- * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color.
- * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color.
+ * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead. Specifies the component's background color.
+ * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead. Specifies the component's border color.
  * @cssproperty [--calcite-accordion-item-content-space] - Specifies the component's padding.
  * @cssproperty [--calcite-accordion-item-end-icon-color] - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
  * @cssproperty [--calcite-accordion-item-expand-icon-color] - Specifies the component's expand icon color.
@@ -19,10 +19,10 @@ import type { HeadingLevel } from "../functional/Heading.js";
  * @cssproperty [--calcite-accordion-item-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
  * @cssproperty [--calcite-accordion-item-header-background-color-press] - Specifies the component's `heading` background color when pressed.
  * @cssproperty [--calcite-accordion-item-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color.
+ * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's default icon color.
  * @cssproperty [--calcite-accordion-item-start-icon-color] - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color.
- * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover.
+ * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead. Specifies the component's text color.
+ * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead. Specifies the component's text color on hover.
  * @slot  - A slot for adding custom content, including nested `calcite-accordion-item`s.
  * @slot [actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
@@ -57,7 +57,7 @@ export abstract class AccordionItem extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's content area is collapsed. */