@octanejs/radix 0.1.32 → 0.1.34

package/dist/cjs/Form.cjs

@@ -0,0 +1,537 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Form_exports = {};
+__export(Form_exports, {
+  Control: () => Control,
+  Field: () => Field,
+  Form: () => Root,
+  FormControl: () => Control,
+  FormField: () => Field,
+  FormLabel: () => Label,
+  FormMessage: () => Message,
+  FormSubmit: () => Submit,
+  FormValidityState: () => ValidityState,
+  Label: () => Label,
+  Message: () => Message,
+  Root: () => Root,
+  Submit: () => Submit,
+  ValidityState: () => ValidityState,
+  createFormScope: () => createFormScope
+});
+module.exports = __toCommonJS(Form_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Label = require("./Label.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_useId = require("./useId.cjs");
+const [createFormContext, createFormScope] = (0, import_context.createContextScope)("Form");
+const FORM_NAME = "Form";
+const [ValidationProvider, useValidationContext] = createFormContext(FORM_NAME);
+const [AriaDescriptionProvider, useAriaDescriptionContext] = createFormContext(FORM_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("Form.Root");
+  const {
+    __scopeForm,
+    onClearServerErrors = () => {
+    },
+    ref: forwardedRef,
+    ...rootProps
+  } = props ?? {};
+  const formRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "form"));
+  const composedFormRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, formRef, (0, import_internal.subSlot)(slot, "refs"));
+  const [validityMap, setValidityMap] = (0, import_octane.useState)({}, (0, import_internal.subSlot)(slot, "validity"));
+  const getFieldValidity = (0, import_octane.useCallback)(
+    (fieldName) => validityMap[fieldName],
+    [validityMap],
+    (0, import_internal.subSlot)(slot, "getValidity")
+  );
+  const handleFieldValidityChange = (0, import_octane.useCallback)(
+    (fieldName, validity) => setValidityMap((prevValidityMap) => ({
+      ...prevValidityMap,
+      [fieldName]: { ...prevValidityMap[fieldName] ?? {}, ...validity }
+    })),
+    [],
+    (0, import_internal.subSlot)(slot, "validityChange")
+  );
+  const handleFieldValiditionClear = (0, import_octane.useCallback)(
+    (fieldName) => {
+      setValidityMap((prevValidityMap) => ({ ...prevValidityMap, [fieldName]: void 0 }));
+      setCustomErrorsMap((prevCustomErrorsMap) => ({ ...prevCustomErrorsMap, [fieldName]: {} }));
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "validityClear")
+  );
+  const [customMatcherEntriesMap, setCustomMatcherEntriesMap] = (0, import_octane.useState)({}, (0, import_internal.subSlot)(slot, "matchers"));
+  const getFieldCustomMatcherEntries = (0, import_octane.useCallback)(
+    (fieldName) => customMatcherEntriesMap[fieldName] ?? [],
+    [customMatcherEntriesMap],
+    (0, import_internal.subSlot)(slot, "getMatchers")
+  );
+  const handleFieldCustomMatcherAdd = (0, import_octane.useCallback)(
+    (fieldName, matcherEntry) => {
+      setCustomMatcherEntriesMap((prev) => ({
+        ...prev,
+        [fieldName]: [...prev[fieldName] ?? [], matcherEntry]
+      }));
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "matcherAdd")
+  );
+  const handleFieldCustomMatcherRemove = (0, import_octane.useCallback)(
+    (fieldName, matcherEntryId) => {
+      setCustomMatcherEntriesMap((prev) => ({
+        ...prev,
+        [fieldName]: (prev[fieldName] ?? []).filter((entry) => entry.id !== matcherEntryId)
+      }));
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "matcherRemove")
+  );
+  const [customErrorsMap, setCustomErrorsMap] = (0, import_octane.useState)({}, (0, import_internal.subSlot)(slot, "errors"));
+  const getFieldCustomErrors = (0, import_octane.useCallback)(
+    (fieldName) => customErrorsMap[fieldName] ?? {},
+    [customErrorsMap],
+    (0, import_internal.subSlot)(slot, "getErrors")
+  );
+  const handleFieldCustomErrorsChange = (0, import_octane.useCallback)(
+    (fieldName, customErrors) => {
+      setCustomErrorsMap((prev) => ({
+        ...prev,
+        [fieldName]: { ...prev[fieldName] ?? {}, ...customErrors }
+      }));
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "errorsChange")
+  );
+  const [messageIdsMap, setMessageIdsMap] = (0, import_octane.useState)(
+    {},
+    (0, import_internal.subSlot)(slot, "messages")
+  );
+  const handleFieldMessageIdAdd = (0, import_octane.useCallback)(
+    (fieldName, id) => {
+      setMessageIdsMap((prev) => {
+        const fieldDescriptionIds = new Set(prev[fieldName]).add(id);
+        return { ...prev, [fieldName]: fieldDescriptionIds };
+      });
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "messageAdd")
+  );
+  const handleFieldMessageIdRemove = (0, import_octane.useCallback)(
+    (fieldName, id) => {
+      setMessageIdsMap((prev) => {
+        const fieldDescriptionIds = new Set(prev[fieldName]);
+        fieldDescriptionIds.delete(id);
+        return { ...prev, [fieldName]: fieldDescriptionIds };
+      });
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "messageRemove")
+  );
+  const getFieldDescription = (0, import_octane.useCallback)(
+    (fieldName) => Array.from(messageIdsMap[fieldName] ?? []).join(" ") || void 0,
+    [messageIdsMap],
+    (0, import_internal.subSlot)(slot, "getDescription")
+  );
+  return (0, import_octane.createElement)(ValidationProvider, {
+    scope: __scopeForm,
+    getFieldValidity,
+    onFieldValidityChange: handleFieldValidityChange,
+    getFieldCustomMatcherEntries,
+    onFieldCustomMatcherEntryAdd: handleFieldCustomMatcherAdd,
+    onFieldCustomMatcherEntryRemove: handleFieldCustomMatcherRemove,
+    getFieldCustomErrors,
+    onFieldCustomErrorsChange: handleFieldCustomErrorsChange,
+    onFieldValiditionClear: handleFieldValiditionClear,
+    children: (0, import_octane.createElement)(AriaDescriptionProvider, {
+      scope: __scopeForm,
+      onFieldMessageIdAdd: handleFieldMessageIdAdd,
+      onFieldMessageIdRemove: handleFieldMessageIdRemove,
+      getFieldDescription,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.form, {
+        ...rootProps,
+        ref: composedFormRef,
+        // focus first invalid control when the form is submitted
+        onInvalid: (0, import_compose_event_handlers.composeEventHandlers)(props?.onInvalid, (event) => {
+          const firstInvalidControl = getFirstInvalidControl(
+            event.currentTarget
+          );
+          if (firstInvalidControl === event.target) firstInvalidControl.focus();
+          event.preventDefault();
+        }),
+        // clear server errors when the form is re-submitted
+        onSubmit: (0, import_compose_event_handlers.composeEventHandlers)(props?.onSubmit, onClearServerErrors, {
+          checkForDefaultPrevented: false
+        }),
+        // clear server errors when the form is reset
+        onReset: (0, import_compose_event_handlers.composeEventHandlers)(props?.onReset, onClearServerErrors)
+      })
+    })
+  });
+}
+const FIELD_NAME = "FormField";
+const [FormFieldProvider, useFormFieldContext] = createFormContext(FIELD_NAME);
+function Field(props) {
+  const slot = (0, import_internal.S)("Form.Field");
+  const { __scopeForm, name, serverInvalid = false, ...fieldProps } = props ?? {};
+  const validationContext = useValidationContext(FIELD_NAME, __scopeForm);
+  const validity = validationContext.getFieldValidity(name);
+  const id = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  return (0, import_octane.createElement)(FormFieldProvider, {
+    scope: __scopeForm,
+    id,
+    name,
+    serverInvalid,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      "data-valid": getValidAttribute(validity, serverInvalid),
+      "data-invalid": getInvalidAttribute(validity, serverInvalid),
+      ...fieldProps
+    })
+  });
+}
+function Label(props) {
+  const { __scopeForm, ...labelProps } = props ?? {};
+  const validationContext = useValidationContext("FormLabel", __scopeForm);
+  const fieldContext = useFormFieldContext("FormLabel", __scopeForm);
+  const htmlFor = labelProps.htmlFor || fieldContext.id;
+  const validity = validationContext.getFieldValidity(fieldContext.name);
+  return (0, import_octane.createElement)(import_Label.Root, {
+    "data-valid": getValidAttribute(validity, fieldContext.serverInvalid),
+    "data-invalid": getInvalidAttribute(validity, fieldContext.serverInvalid),
+    ...labelProps,
+    htmlFor
+  });
+}
+const CONTROL_NAME = "FormControl";
+function Control(props) {
+  const slot = (0, import_internal.S)("Form.Control");
+  const { __scopeForm, ref: forwardedRef, ...controlProps } = props ?? {};
+  const validationContext = useValidationContext(CONTROL_NAME, __scopeForm);
+  const fieldContext = useFormFieldContext(CONTROL_NAME, __scopeForm);
+  const ariaDescriptionContext = useAriaDescriptionContext(CONTROL_NAME, __scopeForm);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const name = controlProps.name || fieldContext.name;
+  const id = controlProps.id || fieldContext.id;
+  const customMatcherEntries = validationContext.getFieldCustomMatcherEntries(name);
+  const { onFieldValidityChange, onFieldCustomErrorsChange, onFieldValiditionClear } = validationContext;
+  const updateControlValidity = (0, import_octane.useCallback)(
+    async (control) => {
+      if (hasBuiltInError(control.validity)) {
+        const controlValidity = validityStateToObject(control.validity);
+        onFieldValidityChange(name, controlValidity);
+        return;
+      }
+      const formData = control.form ? new FormData(control.form) : new FormData();
+      const matcherArgs = [control.value, formData];
+      const syncCustomMatcherEntries = [];
+      const asyncCustomMatcherEntries = [];
+      customMatcherEntries.forEach((customMatcherEntry) => {
+        if (isAsyncCustomMatcherEntry(customMatcherEntry, matcherArgs)) {
+          asyncCustomMatcherEntries.push(customMatcherEntry);
+        } else if (isSyncCustomMatcherEntry(customMatcherEntry)) {
+          syncCustomMatcherEntries.push(customMatcherEntry);
+        }
+      });
+      const syncCustomErrors = syncCustomMatcherEntries.map(({ id: id2, match }) => {
+        return [id2, match(...matcherArgs)];
+      });
+      const syncCustomErrorsById = Object.fromEntries(syncCustomErrors);
+      const hasSyncCustomErrors = Object.values(syncCustomErrorsById).some(Boolean);
+      control.setCustomValidity(hasSyncCustomErrors ? DEFAULT_INVALID_MESSAGE : "");
+      onFieldValidityChange(
+        name,
+        validityStateToObject(control.validity)
+      );
+      onFieldCustomErrorsChange(name, syncCustomErrorsById);
+      if (!hasSyncCustomErrors && asyncCustomMatcherEntries.length > 0) {
+        const promisedCustomErrors = asyncCustomMatcherEntries.map(
+          ({ id: id2, match }) => match(...matcherArgs).then((matches) => [id2, matches])
+        );
+        const asyncCustomErrors = await Promise.all(promisedCustomErrors);
+        const asyncCustomErrorsById = Object.fromEntries(asyncCustomErrors);
+        const hasAsyncCustomErrors = Object.values(asyncCustomErrorsById).some(Boolean);
+        control.setCustomValidity(hasAsyncCustomErrors ? DEFAULT_INVALID_MESSAGE : "");
+        onFieldValidityChange(
+          name,
+          validityStateToObject(control.validity)
+        );
+        onFieldCustomErrorsChange(name, asyncCustomErrorsById);
+      }
+    },
+    [customMatcherEntries, name, onFieldCustomErrorsChange, onFieldValidityChange],
+    (0, import_internal.subSlot)(slot, "update")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const control = ref.current;
+      if (control) {
+        const handleChange = () => void updateControlValidity(control);
+        control.addEventListener("change", handleChange);
+        return () => control.removeEventListener("change", handleChange);
+      }
+    },
+    [updateControlValidity],
+    (0, import_internal.subSlot)(slot, "e:change")
+  );
+  const resetControlValidity = (0, import_octane.useCallback)(
+    () => {
+      const control = ref.current;
+      if (control) {
+        control.setCustomValidity("");
+        onFieldValiditionClear(name);
+      }
+    },
+    [name, onFieldValiditionClear],
+    (0, import_internal.subSlot)(slot, "reset")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const form = ref.current?.form;
+      if (form) {
+        form.addEventListener("reset", resetControlValidity);
+        return () => form.removeEventListener("reset", resetControlValidity);
+      }
+    },
+    [resetControlValidity],
+    (0, import_internal.subSlot)(slot, "e:reset")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const control = ref.current;
+      const form = control?.closest("form");
+      if (form && fieldContext.serverInvalid) {
+        const firstInvalidControl = getFirstInvalidControl(form);
+        if (firstInvalidControl === control) firstInvalidControl.focus();
+      }
+    },
+    [fieldContext.serverInvalid],
+    (0, import_internal.subSlot)(slot, "e:server")
+  );
+  const validity = validationContext.getFieldValidity(name);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.input, {
+    "data-valid": getValidAttribute(validity, fieldContext.serverInvalid),
+    "data-invalid": getInvalidAttribute(validity, fieldContext.serverInvalid),
+    "aria-invalid": fieldContext.serverInvalid ? true : void 0,
+    "aria-describedby": ariaDescriptionContext.getFieldDescription(name),
+    // disable default browser behaviour of showing built-in error message on hover
+    title: "",
+    ...controlProps,
+    ref: composedRef,
+    id,
+    name,
+    onInvalid: (0, import_compose_event_handlers.composeEventHandlers)(props?.onInvalid, (event) => {
+      const control = event.currentTarget;
+      void updateControlValidity(control);
+    }),
+    // octane adaptation: the source resets on React's `onChange`, which is the
+    // native `input` event (each edit) — NOT the native `change` (commit) the
+    // validate-on-change listener above uses. Binding this to octane's native
+    // onChange would fire on the SAME event and stomp the freshly-captured
+    // validity.
+    onInput: (0, import_compose_event_handlers.composeEventHandlers)(props?.onInput, () => {
+      resetControlValidity();
+    })
+  });
+}
+const _validityMatchers = [
+  "badInput",
+  "patternMismatch",
+  "rangeOverflow",
+  "rangeUnderflow",
+  "stepMismatch",
+  "tooLong",
+  "tooShort",
+  "typeMismatch",
+  "valid",
+  "valueMissing"
+];
+const DEFAULT_INVALID_MESSAGE = "This value is not valid";
+const DEFAULT_BUILT_IN_MESSAGES = {
+  badInput: DEFAULT_INVALID_MESSAGE,
+  patternMismatch: "This value does not match the required pattern",
+  rangeOverflow: "This value is too large",
+  rangeUnderflow: "This value is too small",
+  stepMismatch: "This value does not match the required step",
+  tooLong: "This value is too long",
+  tooShort: "This value is too short",
+  typeMismatch: "This value does not match the required type",
+  valid: void 0,
+  valueMissing: "This value is missing"
+};
+const MESSAGE_NAME = "FormMessage";
+function Message(props) {
+  const { match, name: nameProp, ...messageProps } = props ?? {};
+  const fieldContext = useFormFieldContext(MESSAGE_NAME, props?.__scopeForm);
+  const name = nameProp ?? fieldContext.name;
+  if (match === void 0) {
+    return (0, import_octane.createElement)(FormMessageImpl, {
+      ...messageProps,
+      name,
+      children: props?.children || DEFAULT_INVALID_MESSAGE
+    });
+  } else if (typeof match === "function") {
+    return (0, import_octane.createElement)(FormCustomMessage, { match, ...messageProps, name });
+  } else {
+    return (0, import_octane.createElement)(FormBuiltInMessage, { match, ...messageProps, name });
+  }
+}
+function FormBuiltInMessage(props) {
+  const { match, forceMatch = false, name, children, ...messageProps } = props;
+  const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);
+  const validity = validationContext.getFieldValidity(name);
+  const matches = forceMatch || validity?.[match];
+  if (matches) {
+    return (0, import_octane.createElement)(FormMessageImpl, {
+      ...messageProps,
+      name,
+      children: children ?? DEFAULT_BUILT_IN_MESSAGES[match]
+    });
+  }
+  return null;
+}
+function FormCustomMessage(props) {
+  const slot = (0, import_internal.S)("Form.CustomMessage");
+  const { match, forceMatch = false, name, id: idProp, children, ...messageProps } = props;
+  const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);
+  const _id = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  const id = idProp ?? _id;
+  const customMatcherEntry = { id, match };
+  const { onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove } = validationContext;
+  (0, import_octane.useEffect)(
+    () => {
+      onFieldCustomMatcherEntryAdd(name, customMatcherEntry);
+      return () => onFieldCustomMatcherEntryRemove(name, customMatcherEntry.id);
+    },
+    [id, match, name, onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove],
+    (0, import_internal.subSlot)(slot, "e:matcher")
+  );
+  const validity = validationContext.getFieldValidity(name);
+  const customErrors = validationContext.getFieldCustomErrors(name);
+  const hasMatchingCustomError = customErrors[id];
+  const matches = forceMatch || validity && !hasBuiltInError(validity) && hasMatchingCustomError;
+  if (matches) {
+    return (0, import_octane.createElement)(FormMessageImpl, {
+      id,
+      ...messageProps,
+      name,
+      children: children ?? DEFAULT_INVALID_MESSAGE
+    });
+  }
+  return null;
+}
+function FormMessageImpl(props) {
+  const slot = (0, import_internal.S)("Form.MessageImpl");
+  const { __scopeForm, id: idProp, name, ...messageProps } = props;
+  const ariaDescriptionContext = useAriaDescriptionContext(MESSAGE_NAME, __scopeForm);
+  const _id = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  const id = idProp ?? _id;
+  const { onFieldMessageIdAdd, onFieldMessageIdRemove } = ariaDescriptionContext;
+  (0, import_octane.useEffect)(
+    () => {
+      onFieldMessageIdAdd(name, id);
+      return () => onFieldMessageIdRemove(name, id);
+    },
+    [name, id, onFieldMessageIdAdd, onFieldMessageIdRemove],
+    (0, import_internal.subSlot)(slot, "e:id")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.span, { id, ...messageProps });
+}
+function ValidityState(props) {
+  const { __scopeForm, name: nameProp, children } = props ?? {};
+  const validationContext = useValidationContext("FormValidityState", __scopeForm);
+  const fieldContext = useFormFieldContext("FormValidityState", __scopeForm);
+  const name = nameProp ?? fieldContext.name;
+  const validity = validationContext.getFieldValidity(name);
+  return children(validity);
+}
+function Submit(props) {
+  const { __scopeForm, ...submitProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, { type: "submit", ...submitProps });
+}
+function validityStateToObject(validity) {
+  const object = {};
+  for (const key in validity) {
+    object[key] = validity[key];
+  }
+  return object;
+}
+function isHTMLElement(element) {
+  return element instanceof HTMLElement;
+}
+function isFormControl(element) {
+  return "validity" in element;
+}
+function isInvalid(control) {
+  return isFormControl(control) && (control.validity.valid === false || control.getAttribute("aria-invalid") === "true");
+}
+function getFirstInvalidControl(form) {
+  const elements = form.elements;
+  const [firstInvalidControl] = Array.from(elements).filter(isHTMLElement).filter(isInvalid);
+  return firstInvalidControl;
+}
+function isAsyncCustomMatcherEntry(entry, args) {
+  return entry.match.constructor.name === "AsyncFunction" || returnsPromise(entry.match, args);
+}
+function isSyncCustomMatcherEntry(entry) {
+  return entry.match.constructor.name === "Function";
+}
+function returnsPromise(func, args) {
+  return func(...args) instanceof Promise;
+}
+function hasBuiltInError(validity) {
+  let error = false;
+  for (const validityKey in validity) {
+    const key = validityKey;
+    if (key !== "valid" && key !== "customError" && validity[key]) {
+      error = true;
+      break;
+    }
+  }
+  return error;
+}
+function getValidAttribute(validity, serverInvalid) {
+  if (validity?.valid === true && !serverInvalid) return true;
+  return void 0;
+}
+function getInvalidAttribute(validity, serverInvalid) {
+  if (validity?.valid === false || serverInvalid) return true;
+  return void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Control,
+  Field,
+  Form,
+  FormControl,
+  FormField,
+  FormLabel,
+  FormMessage,
+  FormSubmit,
+  FormValidityState,
+  Label,
+  Message,
+  Root,
+  Submit,
+  ValidityState,
+  createFormScope
+});