@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/switch.cjs

@@ -0,0 +1,306 @@
+"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 switch_exports = {};
+__export(switch_exports, {
+  Switch: () => Switch
+});
+module.exports = __toCommonJS(switch_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_visuallyHidden = require("./utils/visuallyHidden.cjs");
+var import_owner = require("./utils/owner.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_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_useLabelableId = require("./utils/field/useLabelableId.cjs");
+var import_useValueChanged = require("./utils/useValueChanged.cjs");
+const stateAttributesMapping = {
+  ...import_constants.fieldValidityMapping,
+  checked(value) {
+    if (value) {
+      return { "data-checked": "" };
+    }
+    return { "data-unchecked": "" };
+  }
+};
+const SwitchRootContext = (0, import_octane.createContext)(void 0);
+function useSwitchRootContext() {
+  const context = (0, import_octane.useContext)(SwitchRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>."
+    );
+  }
+  return context;
+}
+function SwitchRoot(props) {
+  const slot = (0, import_internal.S)("SwitchRoot");
+  const {
+    checked: checkedProp,
+    className,
+    defaultChecked,
+    "aria-labelledby": ariaLabelledByProp,
+    form,
+    id: idProp,
+    inputRef: externalInputRef,
+    name: nameProp,
+    nativeButton = false,
+    onCheckedChange,
+    readOnly = false,
+    required = false,
+    disabled: disabledProp = false,
+    render,
+    uncheckedValue,
+    value,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const {
+    state: fieldState,
+    setTouched,
+    setDirty,
+    validityData,
+    setFilled,
+    setFocused,
+    validationMode,
+    disabled: fieldDisabled,
+    name: fieldName,
+    validation
+  } = (0, import_FieldRootContext.useFieldRootContext)();
+  const { labelId } = (0, import_LabelableContext.useLabelableContext)();
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  const handleInputRef = (0, import_composeRefs.useComposedRefs)(
+    inputRef,
+    externalInputRef,
+    validation.inputRef,
+    (0, import_internal.subSlot)(slot, "handleInputRef")
+  );
+  const switchRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "switchRef"));
+  const id = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "id"));
+  const controlId = (0, import_useLabelableId.useLabelableId)(
+    { id: idProp, implicit: false, controlRef: switchRef },
+    (0, import_internal.subSlot)(slot, "controlId")
+  );
+  const hiddenInputId = nativeButton ? void 0 : controlId;
+  const [checked, setCheckedState] = (0, import_useControlled.useControlled)(
+    {
+      controlled: checkedProp,
+      default: Boolean(defaultChecked),
+      name: "Switch",
+      state: "checked"
+    },
+    (0, import_internal.subSlot)(slot, "checked")
+  );
+  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
+    switchRef,
+    id,
+    checked,
+    void 0,
+    !disabled,
+    nameProp,
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (inputRef.current) {
+        setFilled(inputRef.current.checked);
+      }
+    },
+    [inputRef, setFilled],
+    (0, import_internal.subSlot)(slot, "e:filled")
+  );
+  (0, import_useValueChanged.useValueChanged)(
+    checked,
+    () => {
+      clearErrors(name);
+      setDirty(checked !== validityData.initialValue);
+      setFilled(checked);
+      validation.change(checked);
+    },
+    (0, import_internal.subSlot)(slot, "valueChanged")
+  );
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  const ariaLabelledBy = (0, import_useAriaLabelledBy.useAriaLabelledBy)(
+    ariaLabelledByProp,
+    labelId,
+    inputRef,
+    !nativeButton,
+    hiddenInputId,
+    (0, import_internal.subSlot)(slot, "ariaLabelledBy")
+  );
+  const rootProps = {
+    id: nativeButton ? controlId : id,
+    role: "switch",
+    "aria-checked": checked,
+    "aria-readonly": readOnly || void 0,
+    "aria-required": required || void 0,
+    "aria-labelledby": ariaLabelledBy,
+    onFocus() {
+      if (!disabled) {
+        setFocused(true);
+      }
+    },
+    onBlur() {
+      const element2 = inputRef.current;
+      if (!element2 || disabled) {
+        return;
+      }
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === "onBlur") {
+        validation.commit(element2.checked);
+      }
+    },
+    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
+        })
+      );
+    }
+  };
+  const inputProps = (0, import_mergeProps.mergeProps)(
+    {
+      checked,
+      disabled,
+      form,
+      id: hiddenInputId,
+      name,
+      required,
+      style: name ? import_visuallyHidden.visuallyHiddenInput : import_visuallyHidden.visuallyHidden,
+      tabIndex: -1,
+      type: "checkbox",
+      "aria-hidden": true,
+      ref: handleInputRef,
+      onChange(event) {
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (readOnly) {
+          event.preventDefault();
+          return;
+        }
+        const nextChecked = event.currentTarget.checked;
+        const eventDetails = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
+        onCheckedChange?.(nextChecked, eventDetails);
+        if (eventDetails.isCanceled) {
+          return;
+        }
+        setCheckedState(nextChecked);
+      },
+      onFocus() {
+        switchRef.current?.focus();
+      }
+    },
+    (p) => validation.getValidationProps(disabled, p),
+    value !== void 0 ? { value } : {}
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      ...fieldState,
+      checked,
+      disabled,
+      readOnly,
+      required
+    }),
+    [fieldState, checked, disabled, readOnly, required],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, switchRef, buttonRef],
+      props: [
+        rootProps,
+        elementProps,
+        getButtonProps,
+        (p) => validation.getValidationProps(disabled, p)
+      ],
+      stateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const hiddenValueInput = !checked && name && uncheckedValue !== void 0 ? (0, import_octane.createElement)("input", {
+    type: "hidden",
+    form,
+    name,
+    value: uncheckedValue,
+    disabled
+  }) : null;
+  return (0, import_octane.createElement)(SwitchRootContext.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 SwitchThumb(props) {
+  const slot = (0, import_internal.S)("SwitchThumb");
+  const { render, className, style, ref, ...elementProps } = props;
+  const state = useSwitchRootContext();
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    { state, ref, props: elementProps, stateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Switch = {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch
+});