@wix/site-ui 1.30.0 → 1.31.0

package/dist/Checkbox/index.js

@@ -1,7 +1,47 @@
 import { jsx } from "react/jsx-runtime";
-import { Checkbox } from "@base-ui/react/checkbox";
 import clsx from "clsx";
+import { CheckboxRoot_CheckboxRoot, useCheckboxRootContext, useStateAttributesMapping } from "../3248.js";
+import { useOpenChangeComplete, transitionStatusMapping, useTransitionStatus } from "../880.js";
+import { fieldValidityMapping } from "../1477.js";
+import { useRenderElement } from "../8272.js";
 import * as __rspack_external_react from "react";
+const CheckboxIndicator_CheckboxIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
+    const rootState = useCheckboxRootContext();
+    const rendered = rootState.checked || rootState.indeterminate;
+    const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+    const indicatorRef = __rspack_external_react.useRef(null);
+    const state = {
+        ...rootState,
+        transitionStatus
+    };
+    useOpenChangeComplete({
+        open: rendered,
+        ref: indicatorRef,
+        onComplete () {
+            if (!rendered) setMounted(false);
+        }
+    });
+    const baseStateAttributesMapping = useStateAttributesMapping(rootState);
+    const stateAttributesMapping = {
+        ...baseStateAttributesMapping,
+        ...transitionStatusMapping,
+        ...fieldValidityMapping
+    };
+    const shouldRender = keepMounted || mounted;
+    const element = useRenderElement('span', componentProps, {
+        ref: [
+            forwardedRef,
+            indicatorRef
+        ],
+        state,
+        stateAttributesMapping,
+        props: elementProps
+    });
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) CheckboxIndicator_CheckboxIndicator.displayName = "CheckboxIndicator";
 const Checkbox_module = {
     root: "root-OrOWpu",
     indicator: "indicator-g_8JYy"
@@ -11,7 +51,7 @@ const CheckboxSize = {
     medium: 16,
     large: 20
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = CheckboxSize.medium, style, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = CheckboxSize.medium, style, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxRoot_CheckboxRoot, {
         ref: ref,
         className: clsx(Checkbox_module.root, className),
         style: {
@@ -20,13 +60,13 @@ const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size
         },
         ...props
     }));
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Indicator, {
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxIndicator_CheckboxIndicator, {
         ref: ref,
         className: clsx(Checkbox_module.indicator, className),
         ...props
     }));
-const Checkbox_Checkbox = {
+const Checkbox = {
     Root: Root,
     Indicator: Indicator
 };
-export { CheckboxSize, Checkbox_Checkbox as Checkbox };
+export { Checkbox, CheckboxSize };

package/dist/CheckboxGroup/index.d.ts

@@ -1,11 +1,326 @@
-import { CheckboxGroupProps } from '@base-ui/react/checkbox-group';
+import { CheckboxGroupProps as CheckboxGroupProps_2 } from '@base-ui/react/checkbox-group';
 import * as React_2 from 'react';
 
-export declare const CheckboxGroup: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxGroupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+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";
+
+export declare const CheckboxGroup: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxGroupProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Provides a shared state to a series of checkboxes.
+ *
+ * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
+ */
+declare const CheckboxGroup_2: React_2.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+declare namespace CheckboxGroup_2 {
+    type State = CheckboxGroupState;
+    type Props = CheckboxGroupProps;
+    type ChangeEventReason = CheckboxGroupChangeEventReason;
+    type ChangeEventDetails = CheckboxGroupChangeEventDetails;
+}
+
+export declare type CheckboxGroupChangeEventDetails = BaseUIChangeEventDetails<CheckboxGroup_2.ChangeEventReason>;
+
+export declare type CheckboxGroupChangeEventReason = typeof REASONS.none;
+
+export declare interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroupState> {
+    /**
+     * Names of the checkboxes in the group that should be ticked.
+     *
+     * To render an uncontrolled checkbox group, use the `defaultValue` prop instead.
+     */
+    value?: string[] | undefined;
+    /**
+     * Names of the checkboxes in the group that should be initially ticked.
+     *
+     * To render a controlled checkbox group, use the `value` prop instead.
+     */
+    defaultValue?: string[] | undefined;
+    /**
+     * Event handler called when a checkbox in the group is ticked or unticked.
+     * Provides the new value as an argument.
+     */
+    onValueChange?: ((value: string[], eventDetails: CheckboxGroupChangeEventDetails) => void) | undefined;
+    /**
+     * Names of all checkboxes in the group. Use this when creating a parent checkbox.
+     */
+    allValues?: string[] | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+
+export declare interface CheckboxGroupState extends FieldRootState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+}
+
+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";
+
+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/checkbox-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 { }

package/dist/CheckboxGroup/index.js

@@ -1,13 +1,176 @@
 import { jsx } from "react/jsx-runtime";
-import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 import clsx from "clsx";
+import { useBaseUiId } from "../6046.js";
+import { useStableCallback } from "../7541.js";
+import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "../1477.js";
+import { useFormContext } from "../5085.js";
+import { useControlled } from "../8527.js";
+import { PARENT_CHECKBOX } from "../3248.js";
+import { useRegisterFieldControl } from "../4281.js";
+import { EMPTY_ARRAY, useRenderElement } from "../8272.js";
+import { useValueChanged } from "../2801.js";
+import { areArraysEqual } from "../5659.js";
+import { CheckboxGroupContext } from "../8979.js";
 import * as __rspack_external_react from "react";
+const EMPTY = [];
+function useCheckboxGroupParent(params) {
+    const { allValues = EMPTY, value = EMPTY, onValueChange: onValueChangeProp } = params;
+    const uncontrolledStateRef = __rspack_external_react.useRef(value);
+    const disabledStatesRef = __rspack_external_react.useRef(new Map());
+    const [status, setStatus] = __rspack_external_react.useState('mixed');
+    const id = useBaseUiId();
+    const checked = value.length === allValues.length;
+    const indeterminate = value.length !== allValues.length && value.length > 0;
+    const onValueChange = useStableCallback(onValueChangeProp);
+    const getParentProps = __rspack_external_react.useCallback(()=>({
+            id,
+            indeterminate,
+            checked,
+            'aria-controls': allValues.map((v)=>`${id}-${v}`).join(' '),
+            onCheckedChange (_, eventDetails) {
+                const uncontrolledState = uncontrolledStateRef.current;
+                const none = allValues.filter((v)=>disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
+                const all = allValues.filter((v)=>!disabledStatesRef.current.get(v) || disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
+                const allOnOrOff = uncontrolledState.length === all.length || 0 === uncontrolledState.length;
+                if (allOnOrOff) return void (value.length === all.length ? onValueChange(none, eventDetails) : onValueChange(all, eventDetails));
+                if ('mixed' === status) {
+                    onValueChange(all, eventDetails);
+                    setStatus('on');
+                } else if ('on' === status) {
+                    onValueChange(none, eventDetails);
+                    setStatus('off');
+                } else if ('off' === status) {
+                    onValueChange(uncontrolledState, eventDetails);
+                    setStatus('mixed');
+                }
+            }
+        }), [
+        allValues,
+        checked,
+        id,
+        indeterminate,
+        onValueChange,
+        status,
+        value.length
+    ]);
+    const getChildProps = __rspack_external_react.useCallback((childValue)=>({
+            checked: value.includes(childValue),
+            onCheckedChange (nextChecked, eventDetails) {
+                const newValue = value.slice();
+                if (nextChecked) newValue.push(childValue);
+                else newValue.splice(newValue.indexOf(childValue), 1);
+                uncontrolledStateRef.current = newValue;
+                onValueChange(newValue, eventDetails);
+                setStatus('mixed');
+            }
+        }), [
+        onValueChange,
+        value
+    ]);
+    return __rspack_external_react.useMemo(()=>({
+            id,
+            indeterminate,
+            getParentProps,
+            getChildProps,
+            disabledStatesRef
+        }), [
+        id,
+        indeterminate,
+        getParentProps,
+        getChildProps
+    ]);
+}
+const CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { allValues, className, defaultValue: defaultValueProp, disabled: disabledProp = false, id: idProp, onValueChange, render, value: externalValue, style, ...elementProps } = componentProps;
+    const { disabled: fieldDisabled, name: fieldName, state: fieldState, validation, setFilled, setDirty, shouldValidateOnChange, validityData } = useFieldRootContext();
+    const { labelId, getDescriptionProps } = useLabelableContext();
+    const { clearErrors } = useFormContext();
+    const disabled = fieldDisabled || disabledProp;
+    const defaultValue = __rspack_external_react.useMemo(()=>{
+        if (void 0 === externalValue) return defaultValueProp ?? [];
+    }, [
+        externalValue,
+        defaultValueProp
+    ]);
+    const [value, setValueUnwrapped] = useControlled({
+        controlled: externalValue,
+        default: defaultValue,
+        name: 'CheckboxGroup',
+        state: 'value'
+    });
+    const setValue = useStableCallback((v, eventDetails)=>{
+        onValueChange?.(v, eventDetails);
+        if (eventDetails.isCanceled) return;
+        setValueUnwrapped(v);
+    });
+    const parent = useCheckboxGroupParent({
+        allValues,
+        value,
+        onValueChange: setValue
+    });
+    const id = useBaseUiId(idProp);
+    const controlRef = __rspack_external_react.useRef(null);
+    const registerControlRef = __rspack_external_react.useCallback((element)=>{
+        if (null == controlRef.current && null != element && !element.hasAttribute(PARENT_CHECKBOX)) controlRef.current = element;
+    }, []);
+    useRegisterFieldControl(controlRef, id, value, void 0, !!fieldName);
+    const resolvedValue = value ?? EMPTY_ARRAY;
+    useValueChanged(resolvedValue, ()=>{
+        if (fieldName) clearErrors(fieldName);
+        const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : EMPTY_ARRAY;
+        setFilled(resolvedValue.length > 0);
+        setDirty(!areArraysEqual(resolvedValue, initialValue));
+        if (shouldValidateOnChange()) validation.commit(resolvedValue);
+        else validation.commit(resolvedValue, true);
+    });
+    const state = {
+        ...fieldState,
+        disabled
+    };
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            allValues,
+            value,
+            defaultValue,
+            setValue,
+            parent,
+            disabled,
+            validation,
+            registerControlRef
+        }), [
+        allValues,
+        value,
+        defaultValue,
+        setValue,
+        parent,
+        disabled,
+        validation,
+        registerControlRef
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            {
+                role: 'group',
+                'aria-labelledby': labelId
+            },
+            getDescriptionProps,
+            elementProps
+        ],
+        stateAttributesMapping: fieldValidityMapping
+    });
+    return /*#__PURE__*/ jsx(CheckboxGroupContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) CheckboxGroup_CheckboxGroup.displayName = "CheckboxGroup";
 const CheckboxGroup_module = {
     root: "root-ZCRH6j"
 };
-const CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxGroup, {
+const CheckboxGroup_CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxGroup_CheckboxGroup, {
         ref: ref,
         className: clsx(CheckboxGroup_module.root, className),
         ...props
     }));
-export { CheckboxGroup_CheckboxGroup as CheckboxGroup };
+export { CheckboxGroup_CheckboxGroup_CheckboxGroup as CheckboxGroup };