@wix/site-ui 1.30.0 → 1.32.0

package/dist/Accordion/index.d.ts

@@ -1,23 +1,22 @@
-import { Accordion as Accordion_2 } from '@base-ui/react/accordion';
-import { AccordionHeaderProps } from '@base-ui/react/accordion';
-import { AccordionItemProps } from '@base-ui/react/accordion';
-import { AccordionPanelProps } from '@base-ui/react/accordion';
-import { AccordionTriggerProps } from '@base-ui/react/accordion';
+import { AccordionHeaderProps as AccordionHeaderProps_2 } from '@base-ui/react/accordion';
+import { AccordionItemProps as AccordionItemProps_2 } from '@base-ui/react/accordion';
+import { AccordionPanelProps as AccordionPanelProps_2 } from '@base-ui/react/accordion';
+import { AccordionTriggerProps as AccordionTriggerProps_2 } from '@base-ui/react/accordion';
 import { ChevronDownProps } from '@wix/wix-ui-icons-common/dist/types/default/general/dist/components/ChevronDown';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
 export declare const Accordion: {
-    Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionItemProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Header: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionHeaderProps, "ref"> & React_2.RefAttributes<HTMLHeadingElement>, "ref">, "className"> & {
+    Header: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionHeaderProps_2, "ref"> & React_2.RefAttributes<HTMLHeadingElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLHeadingElement>>;
-    Trigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionTriggerProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    Trigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionTriggerProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
-    Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AccordionPanelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     Root: typeof Root;
@@ -35,23 +34,525 @@ export declare const Accordion: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare namespace Accordion_2 {
+    export {
+        AccordionRoot as Root,
+        AccordionItem as Item,
+        AccordionHeader as Header,
+        AccordionTrigger as Trigger,
+        AccordionPanel as Panel
+    }
+}
+
+/**
+ * A heading that labels the corresponding panel.
+ * Renders an `<h3>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionHeader: React_2.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
+
+export declare namespace AccordionHeader {
+    export type State = AccordionHeaderState;
+    export type Props = AccordionHeaderProps;
+}
+
+export declare interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionHeaderState> {}
+
+export declare interface AccordionHeaderState extends AccordionItemState {}
+
+/**
+ * Groups an accordion header with the corresponding panel.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionItem: React_2.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace AccordionItem {
+    export type State = AccordionItemState;
+    export type Props = AccordionItemProps;
+    export type ChangeEventReason = AccordionItemChangeEventReason;
+    export type ChangeEventDetails = AccordionItemChangeEventDetails;
+}
+
+export declare type AccordionItemChangeEventDetails = BaseUIChangeEventDetails<AccordionItem.ChangeEventReason>;
+
+export declare type AccordionItemChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+
+export declare interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItemState>, Partial<Pick<UseCollapsibleRootParameters, 'disabled'>> {
+    /**
+     * A unique value that identifies this accordion item.
+     * If no value is provided, a unique ID will be generated automatically.
+     * Use when controlling the accordion programmatically, or to set an initial
+     * open state.
+     * @example
+     * ```tsx
+     * <Accordion.Root value={['a']}>
+     *   <Accordion.Item value="a" /> // initially open
+     *   <Accordion.Item value="b" /> // initially closed
+     * </Accordion.Root>
+     * ```
+     */
+    value?: any;
+    /**
+     * Event handler called when the panel is opened or closed.
+     */
+    onOpenChange?: ((open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void) | undefined;
+}
+
+export declare interface AccordionItemState extends AccordionRootState {
+    /**
+     * Whether the accordion item's panel is currently hidden.
+     */
+    hidden: boolean;
+    /**
+     * The item index.
+     */
+    index: number;
+    /**
+     * Whether the component is open.
+     */
+    open: boolean;
+}
+
+/**
+ * A collapsible panel with the accordion item contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionPanel: React_2.ForwardRefExoticComponent<Omit<AccordionPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace AccordionPanel {
+    export type State = AccordionPanelState;
+    export type Props = AccordionPanelProps;
+}
+
+export declare interface AccordionPanelProps extends BaseUIComponentProps<'div', AccordionPanelState>, Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
+
+export declare interface AccordionPanelState extends AccordionItemState {
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Groups all parts of the accordion.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionRoot: {
+    <Value = any>(props: AccordionRoot.Props<Value>): React_2.JSX.Element;
+};
+
+export declare namespace AccordionRoot {
+    export type Value<TValue = any> = AccordionValue<TValue>;
+    export type State<TValue = any> = AccordionRootState<TValue>;
+    export type Props<TValue = any> = AccordionRootProps<TValue>;
+    export type ChangeEventReason = AccordionRootChangeEventReason;
+    export type ChangeEventDetails = AccordionRootChangeEventDetails;
+}
+
+export declare type AccordionRootChangeEventDetails = BaseUIChangeEventDetails<AccordionRoot.ChangeEventReason>;
+
+export declare type AccordionRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+
+export declare interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'div', AccordionRoot.State<Value>> {
+    /**
+     * The controlled value of the item(s) that should be expanded.
+     *
+     * To render an uncontrolled accordion, use the `defaultValue` prop instead.
+     */
+    value?: AccordionValue<Value> | undefined;
+    /**
+     * The uncontrolled value of the item(s) that should be initially expanded.
+     *
+     * To render a controlled accordion, use the `value` prop instead.
+     */
+    defaultValue?: AccordionValue<Value> | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * 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 closed.
+     * This prop is ignored when `hiddenUntilFound` is used.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+    /**
+     * Whether to loop keyboard focus back to the first item
+     * when the end of the list is reached while using the arrow keys.
+     * @default true
+     */
+    loopFocus?: boolean | undefined;
+    /**
+     * Event handler called when an accordion item is expanded or collapsed.
+     * Provides the new value as an argument.
+     */
+    onValueChange?: ((value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) => void) | undefined;
+    /**
+     * Whether multiple items can be open at the same time.
+     * @default false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * The visual orientation of the accordion.
+     * Controls whether roving focus uses left/right or up/down arrow keys.
+     * @default 'vertical'
+     */
+    orientation?: Orientation | undefined;
+}
+
+export declare interface AccordionRootState<Value = any> {
+    /**
+     * The current value.
+     */
+    value: AccordionValue<Value>;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * The component orientation.
+     */
+    orientation: Orientation;
+}
+
 export declare const AccordionSize: {
     readonly small: "small";
     readonly large: "large";
 };
 
+/**
+ * A button that opens and closes the corresponding panel.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionTrigger: React_2.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React_2.RefAttributes<HTMLElement>>;
+
+export declare namespace AccordionTrigger {
+    export type State = AccordionTriggerState;
+    export type Props = AccordionTriggerProps;
+}
+
+export declare interface AccordionTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', AccordionTriggerState> {}
+
+export declare interface AccordionTriggerState extends AccordionItemState {}
+
+export declare type AccordionValue<Value = any> = Value[];
+
 export declare const AccordionVariant: {
     readonly line: "line";
     readonly box: "box";
 };
 
+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";
+
+/**
+ * Groups all parts of the collapsible.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+declare const CollapsibleRoot: React_2.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+declare namespace CollapsibleRoot {
+    type State = CollapsibleRootState;
+    type Props = CollapsibleRootProps;
+    type ChangeEventReason = CollapsibleRootChangeEventReason;
+    type ChangeEventDetails = CollapsibleRootChangeEventDetails;
+}
+
+declare type CollapsibleRootChangeEventDetails = BaseUIChangeEventDetails<CollapsibleRootChangeEventReason>;
+
+declare type CollapsibleRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+
+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;
+}
+
+declare interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled' | 'transitionStatus'> {}
+
+/**
+ * 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 type Orientation = 'horizontal' | 'vertical';
+
+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 function Root<Value = any>({ className, size, variant, ...props }: WithStringClassName<Accordion_2.Root.Props<Value>> & {
     size?: Size;
     variant?: Variant;
 }): JSX_2.Element;
 
+declare const scrub: "scrub";
+
+declare const siblingOpen: "sibling-open";
+
 declare type Size = (typeof AccordionSize)[keyof typeof AccordionSize];
 
+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 TypographyProps extends React_2.HTMLAttributes<HTMLElement> {
     variant?: TypographyVariant;
     render?: React_2.ReactElement;
@@ -59,13 +560,69 @@ declare interface TypographyProps extends React_2.HTMLAttributes<HTMLElement> {
 
 declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
 
+declare interface UseCollapsibleRootParameters {
+    /**
+     * 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: CollapsibleRoot.ChangeEventDetails) => void;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled: boolean;
+}
+
+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 type Variant = (typeof AccordionVariant)[keyof typeof AccordionVariant];
 
+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]> };
+
+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;
+
 declare type WithStringClassName<P> = Omit<P, 'className'> & {
     className?: string;
 };
 
-
-export * from "@base-ui/react/accordion";
-
 export { }