@esri/calcite-components 5.1.0-next.9 → 5.1.1-next.0

package/dist/chunks/useFocusTrap.js

@@ -23,6 +23,7 @@ function defaultSetReturnFocus(hostEl, el) {
 function createFocusTrapOptions(hostEl, options) {
   const fallbackFocus = options?.fallbackFocus || hostEl;
   const clickOutsideDeactivates = options?.clickOutsideDeactivates ?? true;
+  let abortController;
   return {
     fallbackFocus,
     ...options,
@@ -36,6 +37,30 @@ function createFocusTrapOptions(hostEl, options) {
       }
       return typeof clickOutsideDeactivates === "function" ? clickOutsideDeactivates(event) : clickOutsideDeactivates;
     },
+    onActivate: (params) => {
+      if (options?.escapeDeactivates) {
+        abortController = new AbortController();
+        hostEl.addEventListener(
+          "keydown",
+          (event) => {
+            if (event.key === "Escape") {
+              const escapeDeactivates = options?.escapeDeactivates;
+              const deactivate = typeof escapeDeactivates === "function" ? escapeDeactivates(event) : escapeDeactivates ?? true;
+              if (deactivate) {
+                params.trap.deactivate();
+              }
+            }
+          },
+          { signal: abortController.signal }
+        );
+      }
+      options?.onActivate?.(params);
+    },
+    onDeactivate: (params) => {
+      abortController?.abort();
+      abortController = void 0;
+      options?.onDeactivate?.(params);
+    },
     onPostDeactivate: () => {
       outsideClickDeactivated.delete(hostEl);
     },
@@ -45,27 +70,56 @@ function createFocusTrapOptions(hostEl, options) {
     }
   };
 }
-const useFocusTrap = (options) => {
+const useFocusTrap = (options = {}) => {
   return makeGenericController((component, controller) => {
     let focusTrap;
     let focusTrapEl;
     let effectiveContainers;
+    let requestedActive = false;
     const internalFocusTrapOptions = options.focusTrapOptions;
+    const isTriggerActive = () => options.triggerProp ? Boolean(component[options.triggerProp]) : true;
+    const shouldAutoActivate = () => options.triggerProp ? isTriggerActive() : requestedActive;
+    const canActivateTrap = () => typeof component.focusTrapDisabledOverride === "function" ? !component.focusTrapDisabledOverride() : !component.focusTrapDisabled;
+    const activateTrap = () => {
+      const targetEl = focusTrapEl || component.el;
+      if (!targetEl.isConnected) {
+        return;
+      }
+      if (!focusTrap) {
+        effectiveContainers ||= getEffectiveContainerElements(targetEl, component);
+        focusTrap = createFocusTrap(
+          effectiveContainers,
+          createFocusTrapOptions(targetEl, {
+            ...internalFocusTrapOptions,
+            ...component.focusTrapOptions
+          })
+        );
+      }
+      if (canActivateTrap()) {
+        focusTrap.activate();
+      }
+    };
+    const deactivateTrap = () => {
+      focusTrap?.deactivate();
+    };
     controller.onConnected(() => {
-      if (component[options.triggerProp] && focusTrap) {
-        utils.activate();
+      if (focusTrap && shouldAutoActivate()) {
+        activateTrap();
       }
     });
     controller.onUpdate((changes) => {
-      if (component.hasUpdated && changes.has("focusTrapDisabled")) {
-        if (component.focusTrapDisabled) {
-          utils.deactivate();
-        } else {
-          utils.activate();
-        }
+      if (!component.hasUpdated || !changes.has("focusTrapDisabled")) {
+        return;
+      }
+      if (component.focusTrapDisabled || !isTriggerActive()) {
+        deactivateTrap();
+        return;
+      }
+      if (shouldAutoActivate()) {
+        activateTrap();
       }
     });
-    controller.onDisconnected(() => utils.deactivate());
+    controller.onDisconnected(() => deactivateTrap());
     const utils = {
       get _instance() {
         if (process.env.NODE_ENV === "test") {
@@ -74,25 +128,13 @@ const useFocusTrap = (options) => {
         return void 0;
       },
       activate: () => {
-        const targetEl = focusTrapEl || component.el;
-        if (!targetEl.isConnected) {
-          return;
-        }
-        if (!focusTrap) {
-          effectiveContainers ||= getEffectiveContainerElements(targetEl, component);
-          focusTrap = createFocusTrap(
-            effectiveContainers,
-            createFocusTrapOptions(targetEl, {
-              ...internalFocusTrapOptions,
-              ...component.focusTrapOptions
-            })
-          );
-        }
-        if (typeof component.focusTrapDisabledOverride === "function" ? !component.focusTrapDisabledOverride() : !component.focusTrapDisabled) {
-          focusTrap.activate();
-        }
+        requestedActive = true;
+        activateTrap();
+      },
+      deactivate: () => {
+        requestedActive = false;
+        deactivateTrap();
       },
-      deactivate: () => focusTrap?.deactivate(),
       overrideFocusTrapEl: (el) => {
         if (focusTrap) {
           throw new Error("Focus trap already created");

package/dist/chunks/useForm.js

@@ -1,7 +1,115 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { makeGenericController } from "@arcgis/lumina/controllers";
+import { makeGenericController, bypassReadOnly } from "@arcgis/lumina/controllers";
 import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
-import { s as syncInputDelegate, i as isSupportedType } from "./input.js";
+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",
@@ -12,6 +120,9 @@ 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;
@@ -23,9 +134,21 @@ function displayValidationMessage(component, { status, message, icon }) {
     component.validationMessage = message;
   }
 }
+function clearValidationMessage(component, validationMessage) {
+  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 === validationMessage) {
+    component.validationMessage = "";
+  }
+}
 function syncInternalInput(component, input) {
-  const { disabled, required } = component;
+  const { disabled, name, required } = component;
   input.disabled = disabled;
+  input.name = name || "";
   input.required = !!required;
   if (isCheckable(component)) {
     input.checked = component.checked;
@@ -39,18 +162,36 @@ function isCheckable(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 defaultValueDirty = false;
-    let defaultCheckedDirty = false;
+    let customValidityMessage = "";
     let inputDelegate;
     let lastAssociatedForm = null;
-    if (options.inputType) {
+    let effectiveInputType = options.inputType;
+    if (effectiveInputType) {
       inputDelegate = document.createElement("input");
-      inputDelegate.type = options.inputType;
     }
     function invalidFormHandler(event) {
-      event?.preventDefault();
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      const form = event.currentTarget;
+      focusFirstInvalidFormElement(form);
     }
     function onFormReset() {
       if ("status" in component) {
@@ -63,11 +204,9 @@ const useForm = (options) => {
         component.validationMessage = "";
       }
       if (isCheckable(component)) {
-        component.checked = defaultCheckedDirty ? component.defaultChecked : component.checked;
+        component.checked = component.defaultChecked;
       }
-      component.value = defaultValueDirty ? component.defaultValue : component.value;
-      defaultValueDirty = false;
-      defaultCheckedDirty = false;
+      component.value = component.defaultValue;
     }
     component.listen("luminaFormResetCallback", () => {
       onFormReset();
@@ -81,28 +220,34 @@ const useForm = (options) => {
       lastAssociatedForm = form;
     });
     function handleInvalidInput() {
-      const validationMsg = inputDelegate?.validationMessage || "";
-      component.el.dispatchEvent(
-        // allows users to set custom validation messages
-        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
-      );
+      const validationMessage = customValidityMessage || inputDelegate?.validationMessage || "";
       displayValidationMessage(component, {
-        message: validationMsg,
+        message: validationMessage,
         icon: true,
         status: "invalid"
       });
+      component.el.dispatchEvent(
+        // allows users to set custom validation messages
+        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
+      );
       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 = "";
+          clearValidationMessage(component, validationMessage);
+          if (inputDelegate?.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 others = group.filter((radioTypeElement) => radioTypeElement !== component.el);
+              if (others?.length > 0) {
+                others.forEach((other) => {
+                  clearValidationMessage(other);
+                });
+              }
+            }
           }
         },
         { once: true }
@@ -115,51 +260,87 @@ const useForm = (options) => {
       component.el.removeEventListener("invalid", handleInvalidInput);
     });
     controller.onUpdate((changes) => {
-      if (changes.has("value") && !defaultValueDirty) {
-        defaultValueDirty = true;
+      if (!component.hasUpdated) {
         component.defaultValue = component.value;
+        if (isCheckable(component)) {
+          component.defaultChecked = component.checked;
+        }
       }
-      if (isCheckable(component) && changes.has("checked") && !defaultCheckedDirty) {
-        defaultCheckedDirty = true;
-        component.defaultChecked = component.checked;
-      }
-      if (changes.has("value") || isCheckable(component) && changes.has("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.value = component.value;
+        inputDelegate.type = effectiveInputType;
         syncInternalInput(component, inputDelegate);
-        inputDelegate.checkValidity();
-        component.elementInternals.setValidity(inputDelegate.validity, inputDelegate.validationMessage);
-        if ("validity" in component) {
-          component.validity = component.elementInternals.validity;
-        }
+        ({ 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() {
-      if (Array.isArray(component.value)) {
+      const value = getComponentValue();
+      if (Array.isArray(value)) {
         const formData = new FormData();
-        component.value.forEach((value) => formData.append(component.name, value));
+        value.forEach((value2) => formData.append(component.name, value2));
         return formData;
       }
       if (isCheckable(component)) {
         if (component.checked) {
-          return component.defaultValue === void 0 && !defaultValueDirty && component.value === void 0 ? "on" : component.value;
+          return value || "on";
         }
         return null;
       }
-      return component.value;
+      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 {
+  clearValidationMessage as c,
+  displayValidationMessage as d,
   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
 };