@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/utils/field/useAriaLabelledBy.cjs

@@ -0,0 +1,87 @@
+"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 useAriaLabelledBy_exports = {};
+__export(useAriaLabelledBy_exports, {
+  useAriaLabelledBy: () => useAriaLabelledBy
+});
+module.exports = __toCommonJS(useAriaLabelledBy_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_useBaseUiId = require("../useBaseUiId.cjs");
+function useAriaLabelledBy(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useAriaLabelledBy");
+  const explicitAriaLabelledBy = user[0];
+  const labelId = user[1];
+  const labelSourceRef = user[2];
+  const enableFallback = user[3] ?? true;
+  const labelSourceId = user[4];
+  const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "fb")
+  );
+  const generatedLabelId = (0, import_useBaseUiId.useBaseUiId)(
+    labelSourceId ? `${labelSourceId}-label` : void 0,
+    (0, import_internal.subSlot)(slot, "gen")
+  );
+  const ariaLabelledBy = explicitAriaLabelledBy ?? labelId ?? fallbackAriaLabelledBy;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const nextAriaLabelledBy = explicitAriaLabelledBy || labelId || !enableFallback ? void 0 : getAriaLabelledBy(labelSourceRef.current, generatedLabelId);
+      if (fallbackAriaLabelledBy !== nextAriaLabelledBy) {
+        setFallbackAriaLabelledBy(nextAriaLabelledBy);
+      }
+    },
+    void 0,
+    (0, import_internal.subSlot)(slot, "e:fallback")
+  );
+  return ariaLabelledBy;
+}
+function getAriaLabelledBy(labelSource, generatedLabelId) {
+  const label = findAssociatedLabel(labelSource);
+  if (!label) {
+    return void 0;
+  }
+  if (!label.id && generatedLabelId) {
+    label.id = generatedLabelId;
+  }
+  return label.id || void 0;
+}
+function findAssociatedLabel(labelSource) {
+  if (!labelSource) {
+    return void 0;
+  }
+  const parent = labelSource.parentElement;
+  if (parent && parent.tagName === "LABEL") {
+    return parent;
+  }
+  const controlId = labelSource.id;
+  if (controlId) {
+    const nextSibling = labelSource.nextElementSibling;
+    if (nextSibling && nextSibling.htmlFor === controlId) {
+      return nextSibling;
+    }
+  }
+  const labels = labelSource.labels;
+  return labels ? labels[0] : void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAriaLabelledBy
+});

package/dist/cjs/utils/field/useFieldControlRegistration.cjs

@@ -0,0 +1,165 @@
+"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 useFieldControlRegistration_exports = {};
+__export(useFieldControlRegistration_exports, {
+  useFieldControlRegistration: () => useFieldControlRegistration
+});
+module.exports = __toCommonJS(useFieldControlRegistration_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_getCombinedFieldValidityData = require("./getCombinedFieldValidityData.cjs");
+var import_FormContext = require("./FormContext.cjs");
+var import_useStableCallback = require("../useStableCallback.cjs");
+function useFieldControlRegistration(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useFieldControlRegistration");
+  const {
+    commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setRegisteredFieldName,
+    setRegisteredFieldId,
+    setValidityData,
+    validityData
+  } = user[0];
+  const { formRef } = (0, import_FormContext.useFormContext)();
+  const activeFieldControlSourceRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "active"));
+  const registrationRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "reg"));
+  const fallbackControlRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "fallback"));
+  const getValueForForm = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      const registration = registrationRef.current;
+      if (!registration) {
+        return void 0;
+      }
+      if (registration.getValue) {
+        return registration.getValue();
+      }
+      return registration.value;
+    },
+    (0, import_internal.subSlot)(slot, "getValue")
+  );
+  function getRegistrationValue(registration) {
+    return registration.value === void 0 ? getValueForForm() : registration.value;
+  }
+  const validate = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      const registration = registrationRef.current;
+      markedDirtyRef.current = true;
+      if (!registration) {
+        commit(validityData.value);
+        return;
+      }
+      commit(getRegistrationValue(registration));
+    },
+    (0, import_internal.subSlot)(slot, "validate")
+  );
+  function refreshRegistration() {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue: getValueForForm,
+      name: name ?? registration.name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: (0, import_getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+      validate
+    });
+  }
+  function deleteRegistration(id = registrationRef.current?.id) {
+    if (id) {
+      formRef.current.fields.delete(id);
+    }
+  }
+  function syncInitialValue() {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    const initialValue = getRegistrationValue(registration);
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData((prev) => ({ ...prev, initialValue }));
+    }
+  }
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const registration = registrationRef.current;
+      if (!registration || !registration.id) {
+        return;
+      }
+      setRegisteredFieldName(name ? void 0 : registration.name);
+      formRef.current.fields.set(registration.id, {
+        getValue: getValueForForm,
+        name: name ?? registration.name,
+        controlRef: registration.controlRef ?? fallbackControlRef,
+        validityData: (0, import_getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+        validate
+      });
+    },
+    [formRef, getValueForForm, invalid, name, setRegisteredFieldName, validate, validityData],
+    (0, import_internal.subSlot)(slot, "e:register")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const fields = formRef.current.fields;
+      return () => {
+        const id = registrationRef.current?.id;
+        if (id) {
+          fields.delete(id);
+        }
+      };
+    },
+    [formRef],
+    (0, import_internal.subSlot)(slot, "e:cleanup")
+  );
+  const register = (0, import_useStableCallback.useStableCallback)(
+    (source, registration) => {
+      if (!registration) {
+        if (activeFieldControlSourceRef.current === source) {
+          activeFieldControlSourceRef.current = null;
+          deleteRegistration();
+          registrationRef.current = null;
+          setRegisteredFieldName(void 0);
+          setRegisteredFieldId(void 0);
+        }
+        return;
+      }
+      const previousId = registrationRef.current?.id;
+      activeFieldControlSourceRef.current = source;
+      registrationRef.current = registration;
+      if (!name) {
+        setRegisteredFieldName(registration.name);
+      }
+      setRegisteredFieldId(registration.id);
+      if (previousId && previousId !== registration.id) {
+        deleteRegistration(previousId);
+      }
+      syncInitialValue();
+      refreshRegistration();
+    },
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  return [validate, register];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFieldControlRegistration
+});

package/dist/cjs/utils/field/useFieldValidation.cjs

@@ -0,0 +1,285 @@
+"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 useFieldValidation_exports = {};
+__export(useFieldValidation_exports, {
+  useFieldValidation: () => useFieldValidation
+});
+module.exports = __toCommonJS(useFieldValidation_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_mergeProps = require("../mergeProps.cjs");
+var import_useTimeout = require("../useTimeout.cjs");
+var import_useRefWithInit = require("../useRefWithInit.cjs");
+var import_useStableCallback = require("../useStableCallback.cjs");
+var import_constants = require("./constants.cjs");
+var import_getCombinedFieldValidityData = require("./getCombinedFieldValidityData.cjs");
+var import_FormContext = require("./FormContext.cjs");
+var import_LabelableContext = require("./LabelableContext.cjs");
+const validityKeys = Object.keys(import_constants.DEFAULT_VALIDITY_STATE);
+function isOnlyValueMissing(state) {
+  if (!state || state.valid || !state.valueMissing) {
+    return false;
+  }
+  let onlyValueMissing = false;
+  for (const key of validityKeys) {
+    if (key === "valid") {
+      continue;
+    }
+    if (key === "valueMissing") {
+      onlyValueMissing = state[key];
+    } else if (state[key]) {
+      onlyValueMissing = false;
+    }
+  }
+  return onlyValueMissing;
+}
+function findRepresentativeInput(inputs) {
+  let fallback = null;
+  for (const input of inputs) {
+    if (input.disabled) {
+      continue;
+    }
+    if (!input.validity.valid) {
+      return input;
+    }
+    fallback ??= input;
+  }
+  return fallback;
+}
+function clearCustomValidity(element, inputs) {
+  let didClearElement = false;
+  for (const input of inputs) {
+    input.setCustomValidity("");
+    didClearElement ||= input === element;
+  }
+  if (!didClearElement) {
+    element.setCustomValidity("");
+  }
+}
+function useFieldValidation(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useFieldValidation");
+  const params = user[0];
+  const { formRef } = (0, import_FormContext.useFormContext)();
+  const {
+    setValidityData,
+    validate,
+    validityData,
+    validationDebounceTime,
+    invalid,
+    markedDirtyRef,
+    state,
+    shouldValidateOnChange,
+    getRegisteredFieldId
+  } = params;
+  const { controlId, getDescriptionProps } = (0, import_LabelableContext.useLabelableContext)();
+  const timeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "timeout"));
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  const registeredInputs = (0, import_useRefWithInit.useRefWithInit)(
+    () => /* @__PURE__ */ new Set(),
+    (0, import_internal.subSlot)(slot, "registered")
+  ).current;
+  const validationCommitIdRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "commitId"));
+  const registerInput = (0, import_octane.useCallback)(
+    (element) => {
+      if (!element) {
+        return void 0;
+      }
+      registeredInputs.add(element);
+      return () => {
+        registeredInputs.delete(element);
+      };
+    },
+    [registeredInputs],
+    (0, import_internal.subSlot)(slot, "registerInput")
+  );
+  const commit = (0, import_useStableCallback.useStableCallback)(
+    async (value, revalidate = false) => {
+      const element = findRepresentativeInput(registeredInputs) ?? inputRef.current;
+      if (!element) {
+        return;
+      }
+      validationCommitIdRef.current += 1;
+      const validationCommitId = validationCommitIdRef.current;
+      function updateRegisteredFieldValidity(nextValidityData2, externalInvalid = invalid) {
+        const fieldId = getRegisteredFieldId() ?? controlId;
+        if (fieldId == null) {
+          return;
+        }
+        const currentFieldData = formRef.current.fields.get(fieldId);
+        if (!currentFieldData) {
+          return;
+        }
+        const validityDataWithFormErrors = (0, import_getCombinedFieldValidityData.getCombinedFieldValidityData)(
+          nextValidityData2,
+          externalInvalid
+        );
+        formRef.current.fields.set(fieldId, {
+          ...currentFieldData,
+          validityData: validityDataWithFormErrors
+        });
+      }
+      if (revalidate) {
+        if (state.valid !== false) {
+          return;
+        }
+        const currentNativeValidity = element.validity;
+        if (!currentNativeValidity.valueMissing) {
+          const nextValidityData2 = {
+            value,
+            state: { ...import_constants.DEFAULT_VALIDITY_STATE, valid: true },
+            error: "",
+            errors: [],
+            initialValue: validityData.initialValue
+          };
+          clearCustomValidity(element, registeredInputs);
+          updateRegisteredFieldValidity(nextValidityData2, false);
+          setValidityData(nextValidityData2);
+          return;
+        }
+        const currentNativeValidityObject = validityKeys.reduce(
+          (acc, key) => {
+            acc[key] = currentNativeValidity[key];
+            return acc;
+          },
+          {}
+        );
+        if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) {
+          return;
+        }
+      }
+      function getState(el) {
+        const computedState = validityKeys.reduce(
+          (acc, key) => {
+            acc[key] = el.validity[key];
+            return acc;
+          },
+          {}
+        );
+        let hasOnlyValueMissingError = false;
+        for (const key of validityKeys) {
+          if (key === "valid") {
+            continue;
+          }
+          if (key === "valueMissing" && computedState[key]) {
+            hasOnlyValueMissingError = true;
+          } else if (computedState[key]) {
+            return computedState;
+          }
+        }
+        if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+          computedState.valid = true;
+          computedState.valueMissing = false;
+        }
+        return computedState;
+      }
+      timeout.clear();
+      let result = null;
+      let validationErrors = [];
+      const nextState = getState(element);
+      let defaultValidationMessage;
+      const isValidatingOnChange = shouldValidateOnChange();
+      if (element.validationMessage && !isValidatingOnChange) {
+        defaultValidationMessage = element.validationMessage;
+        validationErrors = [element.validationMessage];
+      } else {
+        const formValues = Array.from(formRef.current.fields.values()).reduce(
+          (acc, field) => {
+            if (field.name) {
+              acc[field.name] = field.getValue();
+            }
+            return acc;
+          },
+          {}
+        );
+        const resultOrPromise = validate(value, formValues);
+        if (typeof resultOrPromise === "object" && resultOrPromise !== null && "then" in resultOrPromise) {
+          result = await resultOrPromise;
+          if (validationCommitId !== validationCommitIdRef.current) {
+            return;
+          }
+        } else {
+          result = resultOrPromise;
+        }
+        if (result !== null) {
+          nextState.valid = false;
+          nextState.customError = true;
+          if (Array.isArray(result)) {
+            validationErrors = result;
+            element.setCustomValidity(result.join("\n"));
+          } else if (result) {
+            validationErrors = [result];
+            element.setCustomValidity(result);
+          }
+        } else if (isValidatingOnChange) {
+          clearCustomValidity(element, registeredInputs);
+          nextState.customError = false;
+          if (element.validationMessage) {
+            defaultValidationMessage = element.validationMessage;
+            validationErrors = [element.validationMessage];
+          } else if (element.validity.valid && !nextState.valid) {
+            nextState.valid = true;
+          }
+        }
+      }
+      const nextValidityData = {
+        value,
+        state: nextState,
+        error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ""),
+        errors: validationErrors,
+        initialValue: validityData.initialValue
+      };
+      updateRegisteredFieldValidity(nextValidityData);
+      setValidityData(nextValidityData);
+    },
+    (0, import_internal.subSlot)(slot, "commit")
+  );
+  const change = (0, import_useStableCallback.useStableCallback)(
+    (value) => {
+      timeout.clear();
+      const validateOnChange = shouldValidateOnChange();
+      if (validateOnChange && value !== "" && validationDebounceTime) {
+        validationCommitIdRef.current += 1;
+        timeout.start(validationDebounceTime, () => {
+          commit(value);
+        });
+      } else {
+        commit(value, !validateOnChange);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "change")
+  );
+  const getValidationProps = (0, import_octane.useCallback)(
+    (disabled, externalProps = {}) => (0, import_mergeProps.mergeProps)(
+      getDescriptionProps(externalProps),
+      state.valid === false && !state.disabled && !disabled ? { "aria-invalid": true } : {}
+    ),
+    [getDescriptionProps, state.disabled, state.valid],
+    (0, import_internal.subSlot)(slot, "getValidationProps")
+  );
+  return (0, import_octane.useMemo)(
+    () => ({ getValidationProps, inputRef, registerInput, commit, change }),
+    [getValidationProps, registerInput, commit, change],
+    (0, import_internal.subSlot)(slot, "return")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFieldValidation
+});

package/dist/cjs/utils/field/useLabel.cjs

@@ -0,0 +1,99 @@
+"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 useLabel_exports = {};
+__export(useLabel_exports, {
+  focusElementWithVisible: () => focusElementWithVisible,
+  useLabel: () => useLabel
+});
+module.exports = __toCommonJS(useLabel_exports);
+var import_internal = require("../../internal.cjs");
+var import_list_utils = require("../composite/list-utils.cjs");
+var import_owner = require("../owner.cjs");
+var import_useRegisteredLabelId = require("../useRegisteredLabelId.cjs");
+var import_useStableCallback = require("../useStableCallback.cjs");
+var import_LabelableContext = require("./LabelableContext.cjs");
+function isHTMLElement(el) {
+  return el != null && el instanceof HTMLElement;
+}
+function focusElementWithVisible(element) {
+  element.focus({ focusVisible: true });
+}
+function useLabel(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useLabel");
+  const {
+    id: idProp,
+    fallbackControlId,
+    native = false,
+    setLabelId: setLabelIdProp,
+    focusControl: focusControlProp
+  } = user[0] ?? {};
+  const { controlId: contextControlId, setLabelId: setContextLabelId } = (0, import_LabelableContext.useLabelableContext)();
+  const syncLabelId = (0, import_useStableCallback.useStableCallback)(
+    (nextLabelId) => {
+      setContextLabelId(nextLabelId);
+      setLabelIdProp?.(nextLabelId);
+    },
+    (0, import_internal.subSlot)(slot, "sync")
+  );
+  const id = (0, import_useRegisteredLabelId.useRegisteredLabelId)(idProp, syncLabelId, (0, import_internal.subSlot)(slot, "id"));
+  const resolvedControlId = contextControlId ?? fallbackControlId;
+  function focusControl(event) {
+    if (focusControlProp) {
+      focusControlProp(event, resolvedControlId);
+      return;
+    }
+    if (!resolvedControlId) {
+      return;
+    }
+    const controlElement = (0, import_owner.ownerDocument)(event.currentTarget).getElementById(resolvedControlId);
+    if (isHTMLElement(controlElement)) {
+      focusElementWithVisible(controlElement);
+    }
+  }
+  function handleInteraction(event) {
+    const target = (0, import_list_utils.getTarget)(event);
+    if (target?.closest("button,input,select,textarea")) {
+      return;
+    }
+    if (!event.defaultPrevented && event.detail > 1) {
+      event.preventDefault();
+    }
+    if (native) {
+      return;
+    }
+    focusControl(event);
+  }
+  return native ? {
+    id,
+    htmlFor: resolvedControlId ?? void 0,
+    onMouseDown: handleInteraction
+  } : {
+    id,
+    onClick: handleInteraction,
+    onPointerDown(event) {
+      event.preventDefault();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  focusElementWithVisible,
+  useLabel
+});