@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/radio.cjs

@@ -0,0 +1,327 @@
+"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 radio_exports = {};
+__export(radio_exports, {
+  Radio: () => Radio
+});
+module.exports = __toCommonJS(radio_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_composeRefs = require("./utils/composeRefs.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_noop = require("./utils/noop.cjs");
+var import_serializeValue = require("./utils/serializeValue.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_LabelableContext = require("./utils/field/LabelableContext.cjs");
+var import_useAriaLabelledBy = require("./utils/field/useAriaLabelledBy.cjs");
+var import_useLabelableId = require("./utils/field/useLabelableId.cjs");
+var import_RadioGroupContext = require("./utils/RadioGroupContext.cjs");
+var import_keys = require("./utils/composite/keys.cjs");
+var import_CompositeItem = require("./utils/composite/CompositeItem.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+const stateAttributesMapping = {
+  checked(value) {
+    if (value) {
+      return { "data-checked": "" };
+    }
+    return { "data-unchecked": "" };
+  },
+  ...import_useTransitionStatus.transitionStatusMapping,
+  ...import_constants.fieldValidityMapping
+};
+const RadioRootContext = (0, import_octane.createContext)(void 0);
+function useRadioRootContext() {
+  const value = (0, import_octane.useContext)(RadioRootContext);
+  if (value === void 0) {
+    throw new Error(
+      "Base UI: RadioRootContext is missing. Radio parts must be placed within <Radio.Root>."
+    );
+  }
+  return value;
+}
+function RadioRoot(props) {
+  const slot = (0, import_internal.S)("RadioRoot");
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    readOnly: readOnlyProp = false,
+    required: requiredProp = false,
+    "aria-labelledby": ariaLabelledByProp,
+    value,
+    inputRef: inputRefProp,
+    nativeButton = false,
+    id: idProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const groupContext = (0, import_RadioGroupContext.useRadioGroupContext)();
+  const {
+    disabled: disabledGroup,
+    readOnly: readOnlyGroup,
+    required: requiredGroup,
+    form: formGroup,
+    checkedValue,
+    touched = false,
+    validation,
+    name
+  } = groupContext ?? {};
+  const setCheckedValue = groupContext?.setCheckedValue ?? import_noop.NOOP;
+  const setTouched = groupContext?.setTouched ?? import_noop.NOOP;
+  const registerControlRef = groupContext?.registerControlRef ?? import_noop.NOOP;
+  const registerInputRef = groupContext?.registerInputRef ?? import_noop.NOOP;
+  const {
+    setTouched: setFieldTouched,
+    setFilled,
+    state: fieldState,
+    disabled: fieldDisabled
+  } = (0, import_FieldRootContext.useFieldRootContext)();
+  const fieldItemContext = (0, import_FieldItemContext.useFieldItemContext)();
+  const { labelId, getDescriptionProps } = (0, import_LabelableContext.useLabelableContext)();
+  const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
+  const readOnly = readOnlyGroup || readOnlyProp;
+  const required = requiredGroup || requiredProp;
+  const form = formGroup;
+  const checked = groupContext ? checkedValue === value : value === "";
+  const radioRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "radioRef"));
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  const handleControlRef = (0, import_useStableCallback.useStableCallback)(
+    (element2) => {
+      if (!element2) {
+        return;
+      }
+      registerControlRef(element2, disabled);
+    },
+    (0, import_internal.subSlot)(slot, "handleControlRef")
+  );
+  const mergedInputRef = (0, import_composeRefs.useComposedRefs)(
+    inputRefProp,
+    inputRef,
+    registerInputRef,
+    (0, import_internal.subSlot)(slot, "mergedInputRef")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (inputRef.current?.checked) {
+        setFilled(true);
+      }
+    },
+    [setFilled],
+    (0, import_internal.subSlot)(slot, "e:filled")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!inputRef.current) {
+        return;
+      }
+      if (disabled && checked) {
+        registerInputRef(null);
+        return;
+      }
+      if (radioRef.current) {
+        registerControlRef(radioRef.current, disabled);
+      }
+      registerInputRef(inputRef.current);
+    },
+    [checked, disabled, registerControlRef, registerInputRef],
+    (0, import_internal.subSlot)(slot, "e:registerInput")
+  );
+  const id = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "id"));
+  const inputId = (0, import_useLabelableId.useLabelableId)(
+    { id: idProp, implicit: false, controlRef: radioRef },
+    (0, import_internal.subSlot)(slot, "inputId")
+  );
+  const hiddenInputId = nativeButton ? void 0 : inputId;
+  const ariaLabelledBy = (0, import_useAriaLabelledBy.useAriaLabelledBy)(
+    ariaLabelledByProp,
+    labelId,
+    inputRef,
+    !nativeButton,
+    hiddenInputId,
+    (0, import_internal.subSlot)(slot, "ariaLabelledBy")
+  );
+  const rootProps = {
+    role: "radio",
+    "aria-checked": checked,
+    "aria-required": required || void 0,
+    "aria-readonly": readOnly || void 0,
+    "aria-labelledby": ariaLabelledBy,
+    [import_keys.ACTIVE_COMPOSITE_ITEM]: checked ? "" : void 0,
+    id: nativeButton ? inputId : id,
+    onKeyDown(event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+    },
+    onClick(event) {
+      if (event.defaultPrevented || disabled || readOnly) {
+        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
+        })
+      );
+    },
+    onFocus(event) {
+      if (event.defaultPrevented || disabled || readOnly || !touched) {
+        return;
+      }
+      inputRef.current?.click();
+      setTouched(false);
+    }
+  };
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton, composite: false },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  const inputProps = {
+    type: "radio",
+    ref: mergedInputRef,
+    form,
+    id: hiddenInputId,
+    name,
+    tabIndex: -1,
+    style: name ? import_visuallyHidden.visuallyHiddenInput : import_visuallyHidden.visuallyHidden,
+    "aria-hidden": true,
+    ...value !== void 0 ? { value: (0, import_serializeValue.serializeValue)(value) } : {},
+    disabled,
+    checked,
+    required,
+    readOnly,
+    onChange(event) {
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (disabled || readOnly || value === void 0) {
+        return;
+      }
+      const details = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
+      setCheckedValue(value, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setFieldTouched(true);
+    },
+    onFocus() {
+      radioRef.current?.focus();
+    }
+  };
+  const state = (0, import_octane.useMemo)(
+    () => ({ ...fieldState, required, disabled, readOnly, checked }),
+    [fieldState, disabled, readOnly, checked, required],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const isRadioGroup = groupContext !== void 0;
+  const refs = [ref, radioRef, buttonRef, handleControlRef];
+  const renderProps = [
+    rootProps,
+    elementProps,
+    getButtonProps,
+    getDescriptionProps,
+    validation ? (validationProps) => validation.getValidationProps(disabled, validationProps) : {}
+  ];
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    { enabled: !isRadioGroup, state, ref: refs, props: renderProps, stateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const rendered = isRadioGroup ? (0, import_octane.createElement)(import_CompositeItem.CompositeItem, {
+    tag: "span",
+    render,
+    className,
+    style,
+    state,
+    refs,
+    props: renderProps,
+    stateAttributesMapping
+  }) : element;
+  return (0, import_octane.createElement)(RadioRootContext.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: "rendered", children: rendered }),
+      (0, import_octane.createElement)("input", { key: "input", ...inputProps })
+    ]
+  });
+}
+function RadioIndicator(props) {
+  const slot = (0, import_internal.S)("RadioIndicator");
+  const { render, className, style, keepMounted = false, ref, ...elementProps } = props;
+  const rootState = useRadioRootContext();
+  const rendered = rootState.checked;
+  const { mounted, transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    rendered,
+    (0, import_internal.subSlot)(slot, "ts")
+  );
+  const state = { ...rootState, transitionStatus };
+  const indicatorRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "indRef"));
+  const shouldRender = keepMounted || mounted;
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    { ref: [ref, indicatorRef], state, props: elementProps, stateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: rendered,
+      ref: indicatorRef,
+      onComplete() {
+        if (!rendered) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+const Radio = {
+  Root: RadioRoot,
+  Indicator: RadioIndicator
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio
+});

package/dist/cjs/separator.cjs

@@ -0,0 +1,44 @@
+"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 separator_exports = {};
+__export(separator_exports, {
+  Separator: () => Separator
+});
+module.exports = __toCommonJS(separator_exports);
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+function Separator(props) {
+  const slot = (0, import_internal.S)("Separator");
+  const { className, render, orientation = "horizontal", style, ref, ...elementProps } = props;
+  const state = { orientation };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { className, render, style },
+    {
+      state,
+      ref,
+      props: [{ role: "separator", "aria-orientation": orientation }, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Separator
+});