@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/checkbox.cjs

@@ -0,0 +1,475 @@
+"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 checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => Checkbox,
+  PARENT_CHECKBOX: () => PARENT_CHECKBOX
+});
+module.exports = __toCommonJS(checkbox_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_mergeProps = require("./utils/mergeProps.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_composeRefs = require("./utils/composeRefs.cjs");
+var import_useRefWithInit = require("./utils/useRefWithInit.cjs");
+var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_getDefaultFormSubmitter = require("./utils/getDefaultFormSubmitter.cjs");
+var import_noop = require("./utils/noop.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_constants = require("./utils/field/constants.cjs");
+var import_FieldRootContext = require("./utils/field/FieldRootContext.cjs");
+var import_FieldItemContext = require("./utils/field/FieldItemContext.cjs");
+var import_FormContext = require("./utils/field/FormContext.cjs");
+var import_LabelableContext = require("./utils/field/LabelableContext.cjs");
+var import_useRegisterFieldControl = require("./utils/field/useRegisterFieldControl.cjs");
+var import_useAriaLabelledBy = require("./utils/field/useAriaLabelledBy.cjs");
+var import_CheckboxGroupContext = require("./utils/CheckboxGroupContext.cjs");
+var import_useValueChanged = require("./utils/useValueChanged.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+const PARENT_CHECKBOX = "data-parent";
+function useStateAttributesMapping(state) {
+  return (0, import_octane.useMemo)(
+    () => ({
+      checked(value) {
+        if (state.indeterminate) {
+          return {};
+        }
+        if (value) {
+          return { "data-checked": "" };
+        }
+        return { "data-unchecked": "" };
+      },
+      ...import_constants.fieldValidityMapping
+    }),
+    [state.indeterminate],
+    (0, import_internal.S)("Checkbox.mapping")
+  );
+}
+const CheckboxRootContext = (0, import_octane.createContext)(void 0);
+function useCheckboxRootContext() {
+  const context = (0, import_octane.useContext)(CheckboxRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>."
+    );
+  }
+  return context;
+}
+function CheckboxRoot(props) {
+  const slot = (0, import_internal.S)("CheckboxRoot");
+  const {
+    checked: checkedProp,
+    className,
+    defaultChecked = false,
+    "aria-labelledby": ariaLabelledByProp,
+    disabled: disabledProp = false,
+    form,
+    id: idProp,
+    indeterminate = false,
+    inputRef: inputRefProp,
+    name: nameProp,
+    onCheckedChange,
+    parent = false,
+    readOnly = false,
+    render,
+    required = false,
+    uncheckedValue,
+    value: valueProp,
+    nativeButton = false,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const {
+    disabled: rootDisabled,
+    name: fieldName,
+    setDirty,
+    setFilled,
+    setFocused,
+    setTouched,
+    state: fieldState,
+    validationMode,
+    validityData,
+    validation: localValidation
+  } = (0, import_FieldRootContext.useFieldRootContext)();
+  const fieldItemContext = (0, import_FieldItemContext.useFieldItemContext)();
+  const { labelId, controlId, registerControlId, getDescriptionProps } = (0, import_LabelableContext.useLabelableContext)();
+  const groupContext = (0, import_CheckboxGroupContext.useCheckboxGroupContext)();
+  const parentContext = groupContext?.parent;
+  const isGroupedWithParent = parentContext && groupContext.allValues;
+  const disabled = rootDisabled || fieldItemContext.disabled || groupContext?.disabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const value = valueProp ?? name;
+  const id = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "id"));
+  const parentId = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "parentId"));
+  let inputId = controlId;
+  if (isGroupedWithParent) {
+    inputId = parent ? parentId : `${parentContext.id}-${value}`;
+  } else if (idProp) {
+    inputId = idProp;
+  }
+  let groupProps = {};
+  if (isGroupedWithParent) {
+    if (parent) {
+      groupProps = groupContext.parent.getParentProps();
+    } else if (value) {
+      groupProps = groupContext.parent.getChildProps(value);
+    }
+  }
+  const {
+    checked: groupChecked = checkedProp,
+    indeterminate: groupIndeterminate = indeterminate,
+    onCheckedChange: groupOnChange,
+    ...otherGroupProps
+  } = groupProps;
+  const groupValue = groupContext?.value;
+  const setGroupValue = groupContext?.setValue;
+  const defaultGroupValue = groupContext?.defaultValue;
+  const controlRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "controlRef"));
+  const controlSourceRef = (0, import_useRefWithInit.useRefWithInit)(
+    () => /* @__PURE__ */ Symbol("checkbox-control"),
+    (0, import_internal.subSlot)(slot, "controlSrc")
+  );
+  const hasRegisteredRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "hasReg"));
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  const validation = groupContext?.validation ?? localValidation;
+  const [checked, setCheckedState] = (0, import_useControlled.useControlled)(
+    {
+      controlled: value && groupValue && !parent ? groupValue.includes(value) : groupChecked,
+      default: value && defaultGroupValue && !parent ? defaultGroupValue.includes(value) : defaultChecked,
+      name: "Checkbox",
+      state: "checked"
+    },
+    (0, import_internal.subSlot)(slot, "checked")
+  );
+  const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
+  const computedIndeterminate = isGroupedWithParent ? groupIndeterminate || indeterminate : indeterminate;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (registerControlId === import_noop.NOOP) {
+        return void 0;
+      }
+      hasRegisteredRef.current = true;
+      registerControlId(controlSourceRef.current, inputId);
+      return void 0;
+    },
+    [inputId, registerControlId, controlSourceRef],
+    (0, import_internal.subSlot)(slot, "e:regId")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const controlSource = controlSourceRef.current;
+      return () => {
+        if (!hasRegisteredRef.current || registerControlId === import_noop.NOOP) {
+          return;
+        }
+        hasRegisteredRef.current = false;
+        registerControlId(controlSource, void 0);
+      };
+    },
+    [registerControlId, controlSourceRef],
+    (0, import_internal.subSlot)(slot, "e:unregId")
+  );
+  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
+    controlRef,
+    id,
+    checked,
+    void 0,
+    !groupContext && !disabled,
+    nameProp,
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  const mergedInputRef = (0, import_composeRefs.useComposedRefs)(
+    inputRefProp,
+    inputRef,
+    validation.inputRef,
+    validation.registerInput,
+    (0, import_internal.subSlot)(slot, "mergedInputRef")
+  );
+  const ariaLabelledBy = (0, import_useAriaLabelledBy.useAriaLabelledBy)(
+    ariaLabelledByProp,
+    labelId,
+    inputRef,
+    !nativeButton,
+    inputId ?? void 0,
+    (0, import_internal.subSlot)(slot, "ariaLabelledBy")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.indeterminate = computedIndeterminate;
+      if (checked) {
+        setFilled(true);
+      }
+    },
+    [checked, computedIndeterminate, setFilled],
+    (0, import_internal.subSlot)(slot, "e:sync")
+  );
+  (0, import_useValueChanged.useValueChanged)(
+    checked,
+    () => {
+      if (groupContext) {
+        return;
+      }
+      clearErrors(name);
+      setFilled(checked);
+      setDirty(checked !== validityData.initialValue);
+      validation.change(checked);
+    },
+    (0, import_internal.subSlot)(slot, "valueChanged")
+  );
+  const inputProps = (0, import_mergeProps.mergeProps)(
+    {
+      checked,
+      disabled,
+      form,
+      name: parent ? void 0 : name,
+      id: nativeButton ? void 0 : inputId ?? void 0,
+      required,
+      ref: mergedInputRef,
+      style: name ? import_visuallyHidden.visuallyHiddenInput : import_visuallyHidden.visuallyHidden,
+      tabIndex: -1,
+      type: "checkbox",
+      "aria-hidden": true,
+      onChange(event) {
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (readOnly) {
+          event.preventDefault();
+          return;
+        }
+        const nextChecked = event.currentTarget.checked;
+        const details = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
+        onCheckedChange?.(nextChecked, details);
+        if (details.isCanceled) {
+          return;
+        }
+        groupOnChange?.(nextChecked, details);
+        if (details.isCanceled) {
+          return;
+        }
+        setCheckedState(nextChecked);
+        if (value && groupValue && setGroupValue && !parent && !isGroupedWithParent) {
+          const nextGroupValue = nextChecked ? [...groupValue, value] : groupValue.filter((item) => item !== value);
+          setGroupValue(nextGroupValue, details);
+        }
+      },
+      onFocus() {
+        controlRef.current?.focus();
+      }
+    },
+    valueProp !== void 0 ? { value: (groupContext ? checked && valueProp : valueProp) || "" } : {},
+    getDescriptionProps,
+    (p) => validation.getValidationProps(disabled, p)
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!parentContext || !value) {
+        return void 0;
+      }
+      const disabledStates = parentContext.disabledStatesRef.current;
+      disabledStates.set(value, disabled);
+      return () => {
+        disabledStates.delete(value);
+      };
+    },
+    [parentContext, disabled, value],
+    (0, import_internal.subSlot)(slot, "e:parentDisabled")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      ...fieldState,
+      checked: computedChecked,
+      disabled,
+      readOnly,
+      required,
+      indeterminate: computedIndeterminate
+    }),
+    [fieldState, computedChecked, disabled, readOnly, required, computedIndeterminate],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const stateAttributesMapping = useStateAttributesMapping(state);
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    {
+      state,
+      ref: [buttonRef, controlRef, ref, groupContext?.registerControlRef],
+      props: [
+        {
+          id: nativeButton ? inputId ?? void 0 : id,
+          role: "checkbox",
+          "aria-checked": computedIndeterminate ? "mixed" : computedChecked,
+          "aria-readonly": readOnly || void 0,
+          "aria-required": required || void 0,
+          "aria-labelledby": ariaLabelledBy,
+          [PARENT_CHECKBOX]: parent ? "" : void 0,
+          onFocus() {
+            if (!disabled) {
+              setFocused(true);
+            }
+          },
+          onBlur() {
+            const inputEl = inputRef.current;
+            if (!inputEl) {
+              return;
+            }
+            setTouched(true);
+            setFocused(false);
+            if (validationMode === "onBlur") {
+              validation.commit(groupContext ? groupValue : inputEl.checked);
+            }
+          },
+          onKeyDown(event) {
+            if (event.key !== "Enter") {
+              return;
+            }
+            (0, import_mergeProps.makeEventPreventable)(event);
+            event.preventBaseUIHandler?.();
+            if (event.defaultPrevented) {
+              return;
+            }
+            const formToSubmit = inputRef.current?.form ?? null;
+            const currentTarget = event.currentTarget;
+            const originalPreventDefault = event.preventDefault.bind(event);
+            let preventDefaultCalledAfterPropagation = false;
+            event.preventDefault = () => {
+              preventDefaultCalledAfterPropagation = true;
+              originalPreventDefault();
+            };
+            originalPreventDefault();
+            (0, import_owner.ownerWindow)(currentTarget).queueMicrotask(() => {
+              event.preventDefault = originalPreventDefault;
+              if (!preventDefaultCalledAfterPropagation) {
+                (0, import_getDefaultFormSubmitter.getDefaultFormSubmitter)(formToSubmit)?.click();
+              }
+            });
+          },
+          onClick(event) {
+            if (readOnly || disabled) {
+              return;
+            }
+            event.preventDefault();
+            const input = inputRef.current;
+            if (!input) {
+              return;
+            }
+            input.dispatchEvent(
+              new ((0, import_owner.ownerWindow)(input)).PointerEvent("click", {
+                bubbles: true,
+                shiftKey: event.shiftKey,
+                ctrlKey: event.ctrlKey,
+                altKey: event.altKey,
+                metaKey: event.metaKey
+              })
+            );
+          }
+        },
+        elementProps,
+        otherGroupProps,
+        getButtonProps,
+        getDescriptionProps,
+        (p) => validation.getValidationProps(disabled, p)
+      ],
+      stateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const hiddenValueInput = !checked && !groupContext && name && !parent && uncheckedValue !== void 0 ? (0, import_octane.createElement)("input", {
+    type: "hidden",
+    form,
+    name,
+    value: uncheckedValue,
+    disabled
+  }) : null;
+  return (0, import_octane.createElement)(CheckboxRootContext.Provider, {
+    value: state,
+    // Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+    // values that cannot be keyed in place go through a keyed Fragment.
+    children: [
+      (0, import_octane.createElement)(import_octane.Fragment, { key: "element", children: element }),
+      (0, import_octane.createElement)(import_octane.Fragment, { key: "hidden-value", children: hiddenValueInput }),
+      (0, import_octane.createElement)("input", { key: "input", ...inputProps })
+    ]
+  });
+}
+function CheckboxIndicator(props) {
+  const slot = (0, import_internal.S)("CheckboxIndicator");
+  const { render, className, style, keepMounted = false, ref, ...elementProps } = props;
+  const rootState = useCheckboxRootContext();
+  const rendered = rootState.checked || rootState.indeterminate;
+  const { mounted, transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    rendered,
+    (0, import_internal.subSlot)(slot, "ts")
+  );
+  const indicatorRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "indRef"));
+  const state = { ...rootState, transitionStatus };
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: rendered,
+      ref: indicatorRef,
+      onComplete() {
+        if (!rendered) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const baseStateAttributesMapping = useStateAttributesMapping(rootState);
+  const stateAttributesMapping = {
+    ...baseStateAttributesMapping,
+    ...import_useTransitionStatus.transitionStatusMapping,
+    ...import_constants.fieldValidityMapping
+  };
+  const shouldRender = keepMounted || mounted;
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    { ref: [ref, indicatorRef], state, stateAttributesMapping, props: elementProps },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+const Checkbox = {
+  Root: CheckboxRoot,
+  Indicator: CheckboxIndicator
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox,
+  PARENT_CHECKBOX
+});