@wix/site-ui 1.30.0 → 1.32.0

package/dist/Radio/index.js

@@ -1,7 +1,254 @@
-import { jsx } from "react/jsx-runtime";
-import { Radio } from "@base-ui/react/radio";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { NOOP, EMPTY_OBJECT, useMergedRefs, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
+import { useLabelableContext, fieldValidityMapping, useFieldRootContext } from "../1477.js";
+import { useRadioGroupContext } from "../1279.js";
+import { useFieldItemContext } from "../1457.js";
+import { useStableCallback } from "../7541.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { useBaseUiId } from "../6046.js";
+import { useLabelableId } from "../9048.js";
+import { useAriaLabelledBy } from "../4490.js";
+import { ACTIVE_COMPOSITE_ITEM } from "../4346.js";
+import { getWindow } from "../3829.js";
+import { useButton } from "../9189.js";
+import { visuallyHiddenInput, visuallyHidden } from "../8225.js";
+import { serializeValue } from "../5778.js";
+import { createChangeEventDetails } from "../4768.js";
+import { CompositeItem } from "../951.js";
 import * as __rspack_external_react from "react";
+const RadioRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) RadioRootContext.displayName = "RadioRootContext";
+function useRadioRootContext() {
+    const value = __rspack_external_react.useContext(RadioRootContext);
+    if (void 0 === value) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: RadioRootContext is missing. Radio parts must be placed within <Radio.Root>.' : esm_formatErrorMessage(52));
+    return value;
+}
+let RadioRootDataAttributes_RadioRootDataAttributes = /*#__PURE__*/ function(RadioRootDataAttributes) {
+    RadioRootDataAttributes["checked"] = "data-checked";
+    RadioRootDataAttributes["unchecked"] = "data-unchecked";
+    RadioRootDataAttributes["disabled"] = "data-disabled";
+    RadioRootDataAttributes["readonly"] = "data-readonly";
+    RadioRootDataAttributes["required"] = "data-required";
+    RadioRootDataAttributes["valid"] = "data-valid";
+    RadioRootDataAttributes["invalid"] = "data-invalid";
+    RadioRootDataAttributes["touched"] = "data-touched";
+    RadioRootDataAttributes["dirty"] = "data-dirty";
+    RadioRootDataAttributes["filled"] = "data-filled";
+    RadioRootDataAttributes["focused"] = "data-focused";
+    return RadioRootDataAttributes;
+}({});
+const stateAttributesMapping = {
+    checked (value) {
+        if (value) return {
+            [RadioRootDataAttributes_RadioRootDataAttributes.checked]: ''
+        };
+        return {
+            [RadioRootDataAttributes_RadioRootDataAttributes.unchecked]: ''
+        };
+    },
+    ...transitionStatusMapping,
+    ...fieldValidityMapping
+};
+const RadioIndicator_RadioIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
+    const rootState = useRadioRootContext();
+    const rendered = rootState.checked;
+    const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+    const state = {
+        ...rootState,
+        transitionStatus
+    };
+    const indicatorRef = __rspack_external_react.useRef(null);
+    const shouldRender = keepMounted || mounted;
+    const element = useRenderElement('span', componentProps, {
+        ref: [
+            forwardedRef,
+            indicatorRef
+        ],
+        state,
+        props: elementProps,
+        stateAttributesMapping: stateAttributesMapping
+    });
+    useOpenChangeComplete({
+        open: rendered,
+        ref: indicatorRef,
+        onComplete () {
+            if (!rendered) setMounted(false);
+        }
+    });
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) RadioIndicator_RadioIndicator.displayName = "RadioIndicator";
+const RadioRoot_RadioRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, disabled: disabledProp = false, readOnly: readOnlyProp = false, required: requiredProp = false, 'aria-labelledby': ariaLabelledByProp, value, inputRef: inputRefProp, nativeButton = false, id: idProp, style, ...elementProps } = componentProps;
+    const groupContext = useRadioGroupContext();
+    const { disabled: disabledGroup, readOnly: readOnlyGroup, required: requiredGroup, form: formGroup, checkedValue, touched = false, validation, name } = groupContext ?? {};
+    const setCheckedValue = groupContext?.setCheckedValue ?? NOOP;
+    const setTouched = groupContext?.setTouched ?? NOOP;
+    const registerControlRef = groupContext?.registerControlRef ?? NOOP;
+    const registerInputRef = groupContext?.registerInputRef ?? NOOP;
+    const { setDirty, validityData, setTouched: setFieldTouched, setFilled, state: fieldState, disabled: fieldDisabled } = useFieldRootContext();
+    const fieldItemContext = useFieldItemContext();
+    const { labelId, getDescriptionProps } = 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 = __rspack_external_react.useRef(null);
+    const inputRef = __rspack_external_react.useRef(null);
+    const handleControlRef = useStableCallback((element)=>{
+        if (!element) return;
+        registerControlRef(element, disabled);
+    });
+    const mergedInputRef = useMergedRefs(inputRefProp, inputRef, registerInputRef);
+    useIsoLayoutEffect(()=>{
+        if (inputRef.current?.checked) setFilled(true);
+    }, [
+        setFilled
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (!inputRef.current) return;
+        if (disabled && checked) return void registerInputRef(null);
+        if (radioRef.current) registerControlRef(radioRef.current, disabled);
+        registerInputRef(inputRef.current);
+    }, [
+        checked,
+        disabled,
+        registerControlRef,
+        registerInputRef
+    ]);
+    const id = useBaseUiId();
+    const inputId = useLabelableId({
+        id: idProp,
+        implicit: false,
+        controlRef: radioRef
+    });
+    const hiddenInputId = nativeButton ? void 0 : inputId;
+    const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
+    const rootProps = {
+        role: 'radio',
+        'aria-checked': checked,
+        'aria-required': required || void 0,
+        'aria-readonly': readOnly || void 0,
+        'aria-labelledby': ariaLabelledBy,
+        [ACTIVE_COMPOSITE_ITEM]: checked ? '' : void 0,
+        id: nativeButton ? inputId : id,
+        onKeyDown (event) {
+            if ('Enter' === event.key) event.preventDefault();
+        },
+        onClick (event) {
+            if (event.defaultPrevented || disabled || readOnly) return;
+            event.preventDefault();
+            const input = inputRef.current;
+            if (!input) return;
+            input.dispatchEvent(new (getWindow(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 } = useButton({
+        disabled,
+        native: nativeButton
+    });
+    const inputProps = {
+        type: 'radio',
+        ref: mergedInputRef,
+        form,
+        id: hiddenInputId,
+        name,
+        tabIndex: -1,
+        style: name ? visuallyHiddenInput : visuallyHidden,
+        'aria-hidden': true,
+        ...void 0 !== value ? {
+            value: serializeValue(value)
+        } : EMPTY_OBJECT,
+        disabled,
+        checked,
+        required,
+        readOnly,
+        onChange (event) {
+            if (event.nativeEvent.defaultPrevented) return;
+            if (disabled || readOnly || void 0 === value) return;
+            const details = createChangeEventDetails("none", event.nativeEvent);
+            if (details.isCanceled) return;
+            setFieldTouched(true);
+            setDirty(value !== validityData.initialValue);
+            setFilled(true);
+            setCheckedValue(value, details);
+        },
+        onFocus () {
+            radioRef.current?.focus();
+        }
+    };
+    const state = __rspack_external_react.useMemo(()=>({
+            ...fieldState,
+            required,
+            disabled,
+            readOnly,
+            checked
+        }), [
+        fieldState,
+        disabled,
+        readOnly,
+        checked,
+        required
+    ]);
+    const contextValue = state;
+    const isRadioGroup = void 0 !== groupContext;
+    const refs = [
+        forwardedRef,
+        radioRef,
+        buttonRef,
+        handleControlRef
+    ];
+    const props = [
+        rootProps,
+        getDescriptionProps,
+        validation?.getValidationProps ?? EMPTY_OBJECT,
+        elementProps,
+        getButtonProps
+    ];
+    const element = useRenderElement('span', componentProps, {
+        enabled: !isRadioGroup,
+        state,
+        ref: refs,
+        props,
+        stateAttributesMapping: stateAttributesMapping
+    });
+    return /*#__PURE__*/ jsxs(RadioRootContext.Provider, {
+        value: contextValue,
+        children: [
+            isRadioGroup ? /*#__PURE__*/ jsx(CompositeItem, {
+                tag: "span",
+                render: render,
+                className: className,
+                style: style,
+                state: state,
+                refs: refs,
+                props: props,
+                stateAttributesMapping: stateAttributesMapping
+            }) : element,
+            /*#__PURE__*/ jsx("input", {
+                ...inputProps,
+                suppressHydrationWarning: true
+            })
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) RadioRoot_RadioRoot.displayName = "RadioRoot";
 const Radio_module = {
     root: "root-Lal8hj",
     indicator: "indicator-YyFvol"
@@ -11,13 +258,13 @@ const RadioSize = {
     medium: 16,
     large: 20
 };
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Radio.Indicator, {
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioIndicator_RadioIndicator, {
         ref: ref,
         className: clsx(Radio_module.indicator, className),
         ...props
     }));
 function Root({ className, size = RadioSize.medium, style, ...props }) {
-    return /*#__PURE__*/ jsx(Radio.Root, {
+    return /*#__PURE__*/ jsx(RadioRoot_RadioRoot, {
         ...props,
         className: clsx(Radio_module.root, className),
         style: {
@@ -26,8 +273,8 @@ function Root({ className, size = RadioSize.medium, style, ...props }) {
         }
     });
 }
-const Radio_Radio = {
+const Radio = {
     Indicator: Indicator,
     Root: Root
 };
-export { RadioSize, Radio_Radio as Radio };
+export { Radio, RadioSize };

package/dist/RadioGroup/index.d.ts

@@ -1,11 +1,350 @@
-import { RadioGroup as RadioGroup_2 } from '@base-ui/react/radio-group';
 import * as React_2 from 'react';
 
+declare type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends object> = {
+    /**
+     * The reason for the event.
+     */
+    reason: Reason;
+    /**
+     * The native event associated with the custom event.
+     */
+    event: ReasonToEvent<Reason>;
+    /**
+     * Cancels Base UI from handling the event.
+     */
+    cancel: () => void;
+    /**
+     * Allows the event to propagate in cases where Base UI will stop the propagation.
+     */
+    allowPropagation: () => void;
+    /**
+     * Indicates whether the event has been canceled.
+     */
+    isCanceled: boolean;
+    /**
+     * Indicates whether the event is allowed to propagate.
+     */
+    isPropagationAllowed: boolean;
+    /**
+     * The element that triggered the event, if applicable.
+     */
+    trigger: Element | undefined;
+} & CustomProperties;
+
+/**
+ * Details of custom change events emitted by Base UI components.
+ */
+declare type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
+
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
+    /**
+     * CSS class applied to the element, or a function that
+     * returns a class based on the component's state.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+    /**
+     * Style applied to the element, or a function that
+     * returns a style object based on the component's state.
+     */
+    style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
+};
+
+declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+declare const cancelOpen: "cancel-open";
+
+declare const chipRemovePress: "chip-remove-press";
+
+declare const clearPress: "clear-press";
+
+declare const closePress: "close-press";
+
+declare const closeWatcher: "close-watcher";
+
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
+
+declare const decrementPress: "decrement-press";
+
+declare const disabled: "disabled";
+
+declare const drag: "drag";
+
+declare const escapeKey: "escape-key";
+
+declare interface FieldRootState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Whether the field value has changed from its initial value.
+     */
+    dirty: boolean;
+    /**
+     * Whether the field is valid.
+     */
+    valid: boolean | null;
+    /**
+     * Whether the field has a value.
+     */
+    filled: boolean;
+    /**
+     * Whether the field is focused.
+     */
+    focused: boolean;
+}
+
+declare const focusOut: "focus-out";
+
+declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
+declare const imperativeAction: "imperative-action";
+
+declare const incrementPress: "increment-press";
+
+declare const initial: "initial";
+
+declare const inputBlur: "input-blur";
+
+declare const inputChange: "input-change";
+
+declare const inputClear: "input-clear";
+
+declare const inputPaste: "input-paste";
+
+declare const inputPress: "input-press";
+
+declare const itemPress: "item-press";
+
+declare const keyboard: "keyboard";
+
+declare const linkPress: "link-press";
+
+declare const listNavigation: "list-navigation";
+
+declare const missing: "missing";
+
+declare const none: "none";
+
+declare const outsidePress: "outside-press";
+
+declare const pointer: "pointer";
+
 export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<Omit<RadioGroup_2.Props<unknown>, "ref">, "className"> & {
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Provides a shared state to a series of radio buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Radio Group](https://base-ui.com/react/components/radio)
+ */
+declare const RadioGroup_2: {
+    <Value>(props: RadioGroup_2.Props<Value>): React_2.JSX.Element;
+};
+
+declare namespace RadioGroup_2 {
+    type State = RadioGroupState;
+    type Props<TValue = any> = RadioGroupProps<TValue>;
+    type ChangeEventReason = RadioGroupChangeEventReason;
+    type ChangeEventDetails = RadioGroupChangeEventDetails;
+}
+
+export declare type RadioGroupChangeEventDetails = BaseUIChangeEventDetails<RadioGroup_2.ChangeEventReason>;
+
+export declare type RadioGroupChangeEventReason = typeof REASONS.none;
+
+export declare interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroupState>, 'value'> {
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the user should be unable to select a different radio button in the group.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the user must choose a value before submitting a form.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Identifies the field when a form is submitted.
+     */
+    name?: string | undefined;
+    /**
+     * Identifies the form that owns the radio inputs.
+     * Useful when the radio group is rendered outside the form.
+     */
+    form?: string | undefined;
+    /**
+     * The controlled value of the radio item that should be currently selected.
+     *
+     * To render an uncontrolled radio group, use the `defaultValue` prop instead.
+     */
+    value?: Value | undefined;
+    /**
+     * The uncontrolled value of the radio button that should be initially selected.
+     *
+     * To render a controlled radio group, use the `value` prop instead.
+     */
+    defaultValue?: Value | undefined;
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: ((value: Value, eventDetails: RadioGroup_2.ChangeEventDetails) => void) | undefined;
+    /**
+     * A ref to access the hidden input element.
+     */
+    inputRef?: React_2.Ref<HTMLInputElement> | undefined;
+}
+
+export declare interface RadioGroupState extends FieldRootState {
+    /**
+     * Whether the user should be unable to select a different radio button in the group.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the user must tick a radio button within the group before submitting a form.
+     */
+    required: boolean;
+}
+
+declare namespace REASONS {
+    export {
+        none,
+        triggerPress,
+        triggerHover,
+        triggerFocus,
+        outsidePress,
+        itemPress,
+        closePress,
+        linkPress,
+        clearPress,
+        chipRemovePress,
+        trackPress,
+        incrementPress,
+        decrementPress,
+        inputChange,
+        inputClear,
+        inputBlur,
+        inputPaste,
+        inputPress,
+        focusOut,
+        escapeKey,
+        closeWatcher,
+        listNavigation,
+        keyboard,
+        pointer,
+        drag,
+        wheel,
+        scrub,
+        cancelOpen,
+        siblingOpen,
+        disabled,
+        missing,
+        initial,
+        imperativeAction,
+        swipe,
+        windowResize
+    }
+}
+
+/**
+ * Maps a change `reason` string to the corresponding native event type.
+ */
+declare type ReasonToEvent<Reason extends string> = Reason extends keyof ReasonToEventMap ? ReasonToEventMap[Reason] : Event;
+
+declare interface ReasonToEventMap {
+    [REASONS.none]: Event;
+    [REASONS.triggerPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
+    [REASONS.triggerHover]: MouseEvent;
+    [REASONS.triggerFocus]: FocusEvent;
+    [REASONS.outsidePress]: MouseEvent | PointerEvent | TouchEvent;
+    [REASONS.itemPress]: MouseEvent | KeyboardEvent | PointerEvent;
+    [REASONS.closePress]: MouseEvent | KeyboardEvent | PointerEvent;
+    [REASONS.linkPress]: MouseEvent | PointerEvent;
+    [REASONS.clearPress]: PointerEvent | MouseEvent | KeyboardEvent;
+    [REASONS.chipRemovePress]: PointerEvent | MouseEvent | KeyboardEvent;
+    [REASONS.trackPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.incrementPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.decrementPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.inputChange]: InputEvent | Event;
+    [REASONS.inputClear]: InputEvent | FocusEvent | Event;
+    [REASONS.inputBlur]: FocusEvent;
+    [REASONS.inputPaste]: ClipboardEvent;
+    [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
+    [REASONS.focusOut]: FocusEvent | KeyboardEvent;
+    [REASONS.escapeKey]: KeyboardEvent;
+    [REASONS.closeWatcher]: Event;
+    [REASONS.listNavigation]: KeyboardEvent;
+    [REASONS.keyboard]: KeyboardEvent;
+    [REASONS.pointer]: PointerEvent;
+    [REASONS.drag]: PointerEvent | TouchEvent;
+    [REASONS.swipe]: PointerEvent | TouchEvent;
+    [REASONS.wheel]: WheelEvent;
+    [REASONS.scrub]: PointerEvent;
+    [REASONS.cancelOpen]: MouseEvent;
+    [REASONS.siblingOpen]: Event;
+    [REASONS.disabled]: Event;
+    [REASONS.missing]: Event;
+    [REASONS.initial]: Event;
+    [REASONS.imperativeAction]: Event;
+    [REASONS.windowResize]: UIEvent;
+}
+
+declare const scrub: "scrub";
+
+declare const siblingOpen: "sibling-open";
+
+declare const swipe: "swipe";
+
+declare const trackPress: "track-press";
+
+declare const triggerFocus: "trigger-focus";
+
+declare const triggerHover: "trigger-hover";
+
+declare const triggerPress: "trigger-press";
+
+declare const wheel: "wheel";
+
+declare const windowResize: "window-resize";
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
 
-export * from "@base-ui/react/radio-group";
+declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 
 export { }