@wix/site-ui 1.30.0 → 1.32.0

package/dist/Collapsible/index.d.ts

@@ -1,21 +1,391 @@
-import { CollapsiblePanelProps } from '@base-ui/react/collapsible';
-import { CollapsibleRootProps } from '@base-ui/react/collapsible';
-import { CollapsibleTriggerProps } from '@base-ui/react/collapsible';
+import { CollapsiblePanelProps as CollapsiblePanelProps_2 } from '@base-ui/react/collapsible';
+import { CollapsibleRootProps as CollapsibleRootProps_2 } from '@base-ui/react/collapsible';
+import { CollapsibleTriggerProps as CollapsibleTriggerProps_2 } from '@base-ui/react/collapsible';
 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";
+
 export declare const Collapsible: {
-    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CollapsibleRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CollapsibleRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Trigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CollapsibleTriggerProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
+    Trigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CollapsibleTriggerProps_2, "ref"> & React_2.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLButtonElement>>;
-    Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CollapsiblePanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CollapsiblePanelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
 };
 
+/**
+ * A panel with the collapsible contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+export declare const CollapsiblePanel: React_2.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace CollapsiblePanel {
+    export type State = CollapsiblePanelState;
+    export type Props = CollapsiblePanelProps;
+}
+
+export declare interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanelState> {
+    /**
+     * Allows the browser's built-in page search to find and expand the panel contents.
+     *
+     * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+     * to hide the element without removing it from the DOM.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean | undefined;
+    /**
+     * Whether to keep the element in the DOM while the panel is hidden.
+     * This prop is ignored when `hiddenUntilFound` is used.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+}
+
+export declare interface CollapsiblePanelState extends CollapsibleRootState {
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Groups all parts of the collapsible.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+export declare const CollapsibleRoot: React_2.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace CollapsibleRoot {
+    export type State = CollapsibleRootState;
+    export type Props = CollapsibleRootProps;
+    export type ChangeEventReason = CollapsibleRootChangeEventReason;
+    export type ChangeEventDetails = CollapsibleRootChangeEventDetails;
+}
+
+export declare type CollapsibleRootChangeEventDetails = BaseUIChangeEventDetails<CollapsibleRootChangeEventReason>;
+
+export declare type CollapsibleRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+
+export declare interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRootState> {
+    /**
+     * Whether the collapsible panel is currently open.
+     *
+     * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the collapsible panel is initially open.
+     *
+     * To render a controlled collapsible, use the `open` prop instead.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Event handler called when the panel is opened or closed.
+     */
+    onOpenChange?: ((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void) | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+
+export declare interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled' | 'transitionStatus'> {}
+
+/**
+ * A button that opens and closes the collapsible panel.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+export declare const CollapsibleTrigger: React_2.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare namespace CollapsibleTrigger {
+    export type State = CollapsibleTriggerState;
+    export type Props = CollapsibleTriggerProps;
+}
+
+export declare interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleTriggerState> {}
+
+export declare interface CollapsibleTriggerState extends CollapsibleRootState {}
+
+/**
+ * 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 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 interface NativeButtonProps {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `false` if the rendered element is not a button (for example, `<div>`).
+     * @default true
+     */
+    nativeButton?: boolean | undefined;
+}
+
+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 type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
+
+declare const triggerFocus: "trigger-focus";
+
+declare const triggerHover: "trigger-hover";
+
+declare const triggerPress: "trigger-press";
+
+declare interface UseCollapsibleRootReturnValue {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    handleTrigger: (event: React_2.MouseEvent | React_2.KeyboardEvent) => void;
+    /**
+     * Whether the collapsible panel is mounted for transition and hidden-state
+     * purposes. This can be `false` while the element remains in the DOM when
+     * `keepMounted` or `hiddenUntilFound` is enabled.
+     */
+    mounted: boolean;
+    /**
+     * Whether the collapsible panel is currently open.
+     */
+    open: boolean;
+    panelId: React_2.HTMLAttributes<Element>['id'];
+    setMounted: (nextMounted: boolean) => void;
+    setOpen: (open: boolean) => void;
+    setPanelIdState: (id: string | undefined) => void;
+    transitionStatus: TransitionStatus;
+}
+
+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/collapsible";
+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/Collapsible/index.js

@@ -1,30 +1,184 @@
 import { jsx } from "react/jsx-runtime";
-import { Collapsible } from "@base-ui/react/collapsible";
 import clsx from "clsx";
+import { CollapsibleRootContext, useCollapsibleRootContext, collapsibleOpenStateMapping, triggerOpenStateMapping, useCollapsiblePanel, useCollapsibleRoot } from "../8052.js";
+import { transitionStatusMapping } from "../880.js";
+import { useStableCallback } from "../7541.js";
+import { resolveStyle, useRenderElement, warn } from "../8272.js";
+import { useButton } from "../9189.js";
+import { useIsoLayoutEffect } from "../6499.js";
 import * as __rspack_external_react from "react";
+const collapsibleStateAttributesMapping = {
+    ...collapsibleOpenStateMapping,
+    ...transitionStatusMapping
+};
+const CollapsibleRoot_CollapsibleRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, defaultOpen = false, disabled = false, onOpenChange: onOpenChangeProp, open, style, ...elementProps } = componentProps;
+    const onOpenChange = useStableCallback(onOpenChangeProp);
+    const collapsible = useCollapsibleRoot({
+        open,
+        defaultOpen,
+        onOpenChange,
+        disabled
+    });
+    const state = __rspack_external_react.useMemo(()=>({
+            open: collapsible.open,
+            disabled: collapsible.disabled,
+            transitionStatus: collapsible.transitionStatus
+        }), [
+        collapsible.open,
+        collapsible.disabled,
+        collapsible.transitionStatus
+    ]);
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            ...collapsible,
+            onOpenChange,
+            state
+        }), [
+        collapsible,
+        onOpenChange,
+        state
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: elementProps,
+        stateAttributesMapping: collapsibleStateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(CollapsibleRootContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) CollapsibleRoot_CollapsibleRoot.displayName = "CollapsibleRoot";
+const stateAttributesMapping = {
+    ...triggerOpenStateMapping,
+    ...transitionStatusMapping
+};
+const CollapsibleTrigger_CollapsibleTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { panelId, open, handleTrigger, state, disabled: contextDisabled } = useCollapsibleRootContext();
+    const { className, disabled = contextDisabled, id, render, nativeButton = true, style, ...elementProps } = componentProps;
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        focusableWhenDisabled: true,
+        native: nativeButton
+    });
+    const element = useRenderElement('button', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            buttonRef
+        ],
+        props: [
+            {
+                'aria-controls': open ? panelId : void 0,
+                'aria-expanded': open,
+                onClick: handleTrigger
+            },
+            elementProps,
+            getButtonProps
+        ],
+        stateAttributesMapping: stateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) CollapsibleTrigger_CollapsibleTrigger.displayName = "CollapsibleTrigger";
+let CollapsiblePanelCssVars_CollapsiblePanelCssVars = /*#__PURE__*/ function(CollapsiblePanelCssVars) {
+    CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
+    CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
+    return CollapsiblePanelCssVars;
+}({});
+const CollapsiblePanel_CollapsiblePanel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, hiddenUntilFound: hiddenUntilFoundProp, keepMounted: keepMountedProp, render, id: idProp, style, ...elementProps } = componentProps;
+    if ('production' !== process.env.NODE_ENV) useIsoLayoutEffect(()=>{
+        if (hiddenUntilFoundProp && false === keepMountedProp) warn('The `keepMounted={false}` prop on `Collapsible.Panel` is ignored when `hiddenUntilFound` is enabled, since the panel must remain mounted while closed.');
+    }, [
+        hiddenUntilFoundProp,
+        keepMountedProp
+    ]);
+    const { mounted, onOpenChange, open, panelId, setMounted, setPanelIdState, setOpen, state, transitionStatus } = useCollapsibleRootContext();
+    const hiddenUntilFound = hiddenUntilFoundProp ?? false;
+    const keepMounted = keepMountedProp ?? false;
+    useIsoLayoutEffect(()=>{
+        if (idProp) {
+            setPanelIdState(idProp);
+            return ()=>{
+                setPanelIdState(void 0);
+            };
+        }
+    }, [
+        idProp,
+        setPanelIdState
+    ]);
+    const { height, props, ref, shouldPreventOpenAnimation, shouldRender, transitionStatus: panelTransitionStatus, width } = useCollapsiblePanel({
+        externalRef: forwardedRef,
+        hiddenUntilFound,
+        id: panelId,
+        keepMounted,
+        mounted,
+        onOpenChange,
+        open,
+        setMounted,
+        setOpen,
+        transitionStatus
+    });
+    const panelState = {
+        ...state,
+        transitionStatus: panelTransitionStatus
+    };
+    const resolvedStyle = resolveStyle(style, panelState);
+    const element = useRenderElement('div', {
+        ...componentProps,
+        style: void 0
+    }, {
+        state: panelState,
+        ref,
+        props: [
+            props,
+            {
+                style: {
+                    [CollapsiblePanelCssVars_CollapsiblePanelCssVars.collapsiblePanelHeight]: void 0 === height ? 'auto' : `${height}px`,
+                    [CollapsiblePanelCssVars_CollapsiblePanelCssVars.collapsiblePanelWidth]: void 0 === width ? 'auto' : `${width}px`
+                }
+            },
+            elementProps,
+            resolvedStyle ? {
+                style: resolvedStyle
+            } : void 0,
+            shouldPreventOpenAnimation ? {
+                style: {
+                    animationName: 'none'
+                }
+            } : void 0
+        ],
+        stateAttributesMapping: collapsibleStateAttributesMapping
+    });
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) CollapsiblePanel_CollapsiblePanel.displayName = "CollapsiblePanel";
 const Collapsible_module = {
     root: "root-D02Wtj",
     trigger: "trigger-jzj48r",
     panel: "panel-TIli5f"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Collapsible.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CollapsibleRoot_CollapsibleRoot, {
         ref: ref,
         className: clsx(Collapsible_module.root, className),
         ...props
     }));
-const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Collapsible.Trigger, {
+const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CollapsibleTrigger_CollapsibleTrigger, {
         ref: ref,
         className: clsx(Collapsible_module.trigger, className),
         ...props
     }));
-const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Collapsible.Panel, {
+const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CollapsiblePanel_CollapsiblePanel, {
         ref: ref,
         className: clsx(Collapsible_module.panel, className),
         ...props
     }));
-const Collapsible_Collapsible = {
+const Collapsible = {
     Root: Root,
     Trigger: Trigger,
     Panel: Panel
 };
-export { Collapsible_Collapsible as Collapsible };
+export { Collapsible };