@wix/site-ui 1.29.0 → 1.31.0

package/dist/RadioGroup/index.js

@@ -1,13 +1,164 @@
 import { jsx } from "react/jsx-runtime";
-import { RadioGroup } from "@base-ui/react/radio-group";
 import clsx from "clsx";
+import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "../1477.js";
+import { useFormContext } from "../5085.js";
+import { useFieldsetRootContext } from "../353.js";
+import { useBaseUiId } from "../6046.js";
+import { useControlled } from "../8527.js";
+import { useStableCallback } from "../7541.js";
+import { useRegisterFieldControl } from "../4281.js";
+import { useValueChanged } from "../2801.js";
+import { contains } from "../4549.js";
+import { RadioGroupContext } from "../1279.js";
+import { CompositeRoot } from "../9087.js";
 import * as __rspack_external_react from "react";
+const MODIFIER_KEYS = [
+    "Shift"
+];
+const RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, disabled: disabledProp, readOnly, required, onValueChange: onValueChangeProp, value: externalValue, defaultValue, form, name: nameProp, inputRef: inputRefProp, id: idProp, style, ...elementProps } = componentProps;
+    const { setTouched: setFieldTouched, setFocused, shouldValidateOnChange, validationMode, name: fieldName, disabled: fieldDisabled, state: fieldState, validation, setDirty, setFilled, validityData } = useFieldRootContext();
+    const { labelId } = useLabelableContext();
+    const { clearErrors } = useFormContext();
+    const fieldsetContext = useFieldsetRootContext(true);
+    const disabled = fieldDisabled || disabledProp;
+    const name = fieldName ?? nameProp;
+    const id = useBaseUiId(idProp);
+    const [checkedValue, setCheckedValueUnwrapped] = useControlled({
+        controlled: externalValue,
+        default: defaultValue,
+        name: 'RadioGroup',
+        state: 'value'
+    });
+    const [touched, setTouched] = __rspack_external_react.useState(false);
+    const setCheckedValue = useStableCallback((value, eventDetails)=>{
+        onValueChangeProp?.(value, eventDetails);
+        if (eventDetails.isCanceled) return;
+        setCheckedValueUnwrapped(value);
+    });
+    const controlRef = __rspack_external_react.useRef(null);
+    const groupInputRef = __rspack_external_react.useRef(null);
+    const firstEnabledInputRef = __rspack_external_react.useRef(null);
+    function setInputRef(hiddenInput) {
+        let cleanup;
+        if (inputRefProp) if ('function' == typeof inputRefProp) cleanup = inputRefProp(hiddenInput);
+        else inputRefProp.current = hiddenInput;
+        groupInputRef.current = hiddenInput;
+        validation.inputRef.current = hiddenInput;
+        return cleanup;
+    }
+    const registerControlRef = useStableCallback((element, isDisabled = false)=>{
+        if (!element) return;
+        if (isDisabled) {
+            if (controlRef.current === element) controlRef.current = null;
+            return;
+        }
+        if (null == controlRef.current) controlRef.current = element;
+    });
+    const registerInputRef = useStableCallback((input)=>{
+        if (!input || input.disabled) return;
+        if (!firstEnabledInputRef.current) firstEnabledInputRef.current = input;
+        const currentInput = groupInputRef.current;
+        if (input.checked || null == currentInput || currentInput.disabled) return setInputRef(input);
+    });
+    useRegisterFieldControl(controlRef, id, checkedValue ?? null);
+    useValueChanged(checkedValue, ()=>{
+        clearErrors(name);
+        setDirty(checkedValue !== validityData.initialValue);
+        setFilled(null != checkedValue);
+        if (shouldValidateOnChange()) validation.commit(checkedValue);
+        else validation.commit(checkedValue, true);
+        const fallbackInput = firstEnabledInputRef.current;
+        if (null == checkedValue && fallbackInput && !fallbackInput.disabled) setInputRef(fallbackInput);
+    });
+    const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
+    const state = {
+        ...fieldState,
+        disabled: disabled ?? false,
+        required: required ?? false,
+        readOnly: readOnly ?? false
+    };
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            ...fieldState,
+            checkedValue,
+            disabled,
+            form,
+            validation,
+            name,
+            readOnly,
+            registerControlRef,
+            registerInputRef,
+            required,
+            setCheckedValue,
+            setTouched,
+            touched
+        }), [
+        checkedValue,
+        disabled,
+        form,
+        validation,
+        fieldState,
+        name,
+        readOnly,
+        registerControlRef,
+        registerInputRef,
+        required,
+        setCheckedValue,
+        setTouched,
+        touched
+    ]);
+    const defaultProps = {
+        role: 'radiogroup',
+        'aria-required': required || void 0,
+        'aria-disabled': disabled || void 0,
+        'aria-readonly': readOnly || void 0,
+        'aria-labelledby': ariaLabelledby,
+        onFocus () {
+            setFocused(true);
+        },
+        onBlur (event) {
+            if (!contains(event.currentTarget, event.relatedTarget)) {
+                setFieldTouched(true);
+                setFocused(false);
+                if ('onBlur' === validationMode) validation.commit(checkedValue);
+            }
+        },
+        onKeyDownCapture (event) {
+            if (event.key.startsWith('Arrow')) {
+                setFieldTouched(true);
+                setTouched(true);
+                setFocused(true);
+            }
+        }
+    };
+    return /*#__PURE__*/ jsx(RadioGroupContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(CompositeRoot, {
+            render: render,
+            className: className,
+            style: style,
+            state: state,
+            props: [
+                defaultProps,
+                validation.getValidationProps,
+                elementProps
+            ],
+            refs: [
+                forwardedRef
+            ],
+            stateAttributesMapping: fieldValidityMapping,
+            enableHomeAndEndKeys: false,
+            modifierKeys: MODIFIER_KEYS
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) RadioGroup_RadioGroup.displayName = "RadioGroup";
 const RadioGroup_module = {
     root: "root-kKvIZ_"
 };
-const RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioGroup, {
+const RadioGroup_RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioGroup_RadioGroup, {
         ref: ref,
         className: clsx(RadioGroup_module.root, className),
         ...props
     }));
-export { RadioGroup_RadioGroup as RadioGroup };
+export { RadioGroup_RadioGroup_RadioGroup as RadioGroup };

package/dist/ScrollArea/index.d.ts

@@ -1,33 +1,285 @@
 import * as React_2 from 'react';
-import { ScrollAreaContentProps } from '@base-ui/react/scroll-area';
-import { ScrollAreaCornerProps } from '@base-ui/react/scroll-area';
-import { ScrollAreaRootProps } from '@base-ui/react/scroll-area';
-import { ScrollAreaScrollbarProps } from '@base-ui/react/scroll-area';
-import { ScrollAreaThumbProps } from '@base-ui/react/scroll-area';
-import { ScrollAreaViewportProps } from '@base-ui/react/scroll-area';
+import { ScrollAreaContentProps as ScrollAreaContentProps_2 } from '@base-ui/react/scroll-area';
+import { ScrollAreaCornerProps as ScrollAreaCornerProps_2 } from '@base-ui/react/scroll-area';
+import { ScrollAreaRootProps as ScrollAreaRootProps_2 } from '@base-ui/react/scroll-area';
+import { ScrollAreaScrollbarProps as ScrollAreaScrollbarProps_2 } from '@base-ui/react/scroll-area';
+import { ScrollAreaThumbProps as ScrollAreaThumbProps_2 } from '@base-ui/react/scroll-area';
+import { ScrollAreaViewportProps as ScrollAreaViewportProps_2 } from '@base-ui/react/scroll-area';
+
+/**
+ * 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;
+};
+
+/**
+ * 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>;
+
+export declare type Coords = typeof DEFAULT_COORDS;
+
+declare const DEFAULT_COORDS: {
+    x: number;
+    y: number;
+};
+
+declare const DEFAULT_HIDDEN_STATE: {
+    x: boolean;
+    y: boolean;
+    corner: boolean;
+};
+
+declare const DEFAULT_OVERFLOW_EDGES: {
+    xStart: boolean;
+    xEnd: boolean;
+    yStart: boolean;
+    yEnd: boolean;
+};
+
+declare const DEFAULT_SIZE: {
+    width: number;
+    height: number;
+};
+
+export declare type HiddenState = typeof DEFAULT_HIDDEN_STATE;
+
+declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
+export declare type OverflowEdges = typeof DEFAULT_OVERFLOW_EDGES;
 
 export declare const ScrollArea: {
-    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Viewport: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaViewportProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Viewport: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaViewportProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Scrollbar: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaScrollbarProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Scrollbar: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaScrollbarProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Content: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaContentProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Content: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaContentProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Thumb: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaThumbProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Thumb: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaThumbProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Corner: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaCornerProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Corner: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ScrollAreaCornerProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
 };
 
+/**
+ * A container for the content of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaContent: React_2.ForwardRefExoticComponent<Omit<ScrollAreaContentProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace ScrollAreaContent {
+    export type State = ScrollAreaContentState;
+    export type Props = ScrollAreaContentProps;
+}
+
+export declare interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContentState> {}
+
+export declare interface ScrollAreaContentState extends ScrollAreaRootState {}
+
+/**
+ * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaCorner: React_2.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace ScrollAreaCorner {
+    export type State = ScrollAreaCornerState;
+    export type Props = ScrollAreaCornerProps;
+}
+
+export declare interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCornerState> {}
+
+export declare interface ScrollAreaCornerState {}
+
+/**
+ * Groups all parts of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaRoot: React_2.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace ScrollAreaRoot {
+    export type State = ScrollAreaRootState;
+    export type Props = ScrollAreaRootProps;
+}
+
+export declare interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollAreaRootState> {
+    /**
+     * The threshold in pixels that must be passed before the overflow edge attributes are applied.
+     * Accepts a single number for all edges or an object to configure them individually.
+     * @default 0
+     */
+    overflowEdgeThreshold?: number | Partial<{
+        xStart: number;
+        xEnd: number;
+        yStart: number;
+        yEnd: number;
+    }> | undefined;
+}
+
+export declare interface ScrollAreaRootState {
+    /**
+     * Whether the scroll area is being scrolled.
+     */
+    scrolling: boolean;
+    /**
+     * Whether horizontal overflow is present.
+     */
+    hasOverflowX: boolean;
+    /**
+     * Whether vertical overflow is present.
+     */
+    hasOverflowY: boolean;
+    /**
+     * Whether there is overflow on the inline start side for the horizontal axis.
+     */
+    overflowXStart: boolean;
+    /**
+     * Whether there is overflow on the inline end side for the horizontal axis.
+     */
+    overflowXEnd: boolean;
+    /**
+     * Whether there is overflow on the block start side.
+     */
+    overflowYStart: boolean;
+    /**
+     * Whether there is overflow on the block end side.
+     */
+    overflowYEnd: boolean;
+    /**
+     * Whether the scrollbar corner is hidden.
+     */
+    cornerHidden: boolean;
+}
+
+/**
+ * A vertical or horizontal scrollbar for the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaScrollbar: React_2.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace ScrollAreaScrollbar {
+    export type State = ScrollAreaScrollbarState;
+    export type Props = ScrollAreaScrollbarProps;
+}
+
+export declare interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbarState> {
+    /**
+     * Whether the scrollbar controls vertical or horizontal scroll.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+}
+
+export declare interface ScrollAreaScrollbarState extends ScrollAreaRootState {
+    /**
+     * Whether the scroll area is being hovered.
+     */
+    hovering: boolean;
+    /**
+     * Whether the scroll area is being scrolled.
+     */
+    scrolling: boolean;
+    /**
+     * The orientation of the scrollbar.
+     */
+    orientation: 'vertical' | 'horizontal';
+}
+
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaThumb: React_2.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace ScrollAreaThumb {
+    export type State = ScrollAreaThumbState;
+    export type Props = ScrollAreaThumbProps;
+}
+
+export declare interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumbState> {}
+
+export declare interface ScrollAreaThumbState {
+    /**
+     * The component orientation.
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+}
+
+/**
+ * The actual scrollable container of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+export declare const ScrollAreaViewport: React_2.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace ScrollAreaViewport {
+    export type Props = ScrollAreaViewportProps;
+    export type State = ScrollAreaViewportState;
+}
+
+export declare interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewportState> {}
+
+export declare interface ScrollAreaViewportState extends ScrollAreaRootState {}
+
+export declare type Size = typeof DEFAULT_SIZE;
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
 
-export * from "@base-ui/react/scroll-area";
+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 { }