@wix/site-ui 1.30.0 → 1.31.0

package/dist/Tabs/index.d.ts

@@ -1,17 +1,246 @@
 import * as React_2 from 'react';
-import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
-import { TabsIndicatorProps } from '@base-ui/react/tabs';
-import { TabsPanelProps } from '@base-ui/react/tabs';
-import { TabsRootProps } from '@base-ui/react/tabs';
-import { TabsTabProps } from '@base-ui/react/tabs';
+import { TabsIndicatorProps as TabsIndicatorProps_2 } from '@base-ui/react/tabs';
+import { TabsPanelProps as TabsPanelProps_2 } from '@base-ui/react/tabs';
+import { TabsRootProps as TabsRootProps_2 } from '@base-ui/react/tabs';
+import { TabsTabProps as TabsTabProps_2 } from '@base-ui/react/tabs';
 
 declare type BaseListProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Tabs_2.List>>;
 
+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 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 interface ListProps extends BaseListProps {
     underline?: TabListUnderlineType;
     align?: TabListAlignType;
 }
 
+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 const scrub: "scrub";
+
+declare const siblingOpen: "sibling-open";
+
+declare const swipe: "swipe";
+
 export declare const TabListAlign: {
     readonly start: "start";
     readonly center: "center";
@@ -29,26 +258,308 @@ export declare const TabListUnderline: {
 declare type TabListUnderlineType = (typeof TabListUnderline)[keyof typeof TabListUnderline];
 
 export declare const Tabs: {
-    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Tab: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsTabProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    Tab: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsTabProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
-    Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
+    Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsPanelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     List: React_2.ForwardRefExoticComponent<ListProps & React_2.RefAttributes<HTMLDivElement>>;
 };
 
+export declare namespace Tabs_2 {
+    export {
+        TabsRoot as Root,
+        TabsTab as Tab,
+        TabsIndicator as Indicator,
+        TabsPanel as Panel,
+        TabsList as List
+    }
+}
+
+/**
+ * A visual indicator that can be styled to match the position of the currently active tab.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export declare const TabsIndicator: React_2.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare namespace TabsIndicator {
+    export type State = TabsIndicatorState;
+    export type Props = TabsIndicatorProps;
+}
+
+export declare interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicatorState> {
+    /**
+     * Whether to render itself before React hydrates.
+     * This minimizes the time that the indicator isn't visible after server-side rendering.
+     * @default false
+     */
+    renderBeforeHydration?: boolean | undefined;
+}
+
+export declare interface TabsIndicatorState extends TabsRootState {
+    /**
+     * The active tab position.
+     */
+    activeTabPosition: TabsTab.Position | null;
+    /**
+     * The active tab size.
+     */
+    activeTabSize: TabsTab.Size | null;
+    /**
+     * The component orientation.
+     */
+    orientation: TabsRoot.Orientation;
+}
+
+/**
+ * Groups the individual tab buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export declare const TabsList: React_2.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace TabsList {
+    export type State = TabsListState;
+    export type Props = TabsListProps;
+}
+
+export declare interface TabsListProps extends BaseUIComponentProps<'div', TabsListState> {
+    /**
+     * Whether to automatically change the active tab on arrow key focus.
+     * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
+     * @default false
+     */
+    activateOnFocus?: 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;
+}
+
+export declare interface TabsListState extends TabsRootState {}
+
+/**
+ * A panel displayed when the corresponding tab is active.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export declare const TabsPanel: React_2.ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace TabsPanel {
+    export type Metadata = TabsPanelMetadata;
+    export type State = TabsPanelState;
+    export type Props = TabsPanelProps;
+}
+
+export declare interface TabsPanelMetadata {
+    id?: string | undefined;
+    value: TabsTab.Value;
+}
+
+export declare interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanelState> {
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
+     */
+    value: TabsTab.Value;
+    /**
+     * Whether to keep the HTML element in the DOM while the panel is hidden.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+}
+
+export declare interface TabsPanelState extends TabsRootState {
+    /**
+     * Whether the component is hidden.
+     */
+    hidden: boolean;
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Groups the tabs and the corresponding panels.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export declare const TabsRoot: React_2.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace TabsRoot {
+    export type State = TabsRootState;
+    export type Props = TabsRootProps;
+    export type Orientation = TabsRootOrientation;
+    export type ChangeEventReason = TabsRootChangeEventReason;
+    export type ChangeEventDetails = TabsRootChangeEventDetails;
+}
+
+export declare type TabsRootChangeEventDetails = BaseUIChangeEventDetails<TabsRoot.ChangeEventReason, {
+    activationDirection: TabsTab.ActivationDirection;
+}>;
+
+export declare type TabsRootChangeEventReason = typeof REASONS.none | typeof REASONS.disabled | typeof REASONS.missing | typeof REASONS.initial;
+
+export declare type TabsRootOrientation = Orientation;
+
+export declare interface TabsRootProps extends BaseUIComponentProps<'div', TabsRootState> {
+    /**
+     * The value of the currently active `Tab`. Use when the component is controlled.
+     * When the value is `null`, no Tab will be active.
+     */
+    value?: TabsTab.Value | undefined;
+    /**
+     * The default value. Use when the component is not controlled.
+     * When the value is `null`, no Tab will be active.
+     * @default 0
+     */
+    defaultValue?: TabsTab.Value | undefined;
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation?: TabsRoot.Orientation | undefined;
+    /**
+     * Callback invoked when new value is being set.
+     *
+     * The event `reason` is `'none'` for user-initiated changes, such as a click
+     * or keyboard navigation; `'initial'` for the first automatic selection or
+     * fallback in uncontrolled roots when `defaultValue` is omitted or
+     * `undefined`, including when the implicit initial value is disabled or
+     * missing; `'disabled'` for automatic fallback when the selected tab becomes
+     * disabled in uncontrolled roots; or `'missing'` for automatic fallback when
+     * the selected tab is removed, or when an explicit `defaultValue` never
+     * matches a mounted tab in uncontrolled roots.
+     *
+     * For automatic changes, the selected value can be `null` when no enabled Tab
+     * is available as a fallback.
+     *
+     * Automatic changes cannot be canceled; calling `eventDetails.cancel()` for
+     * `'initial'`, `'disabled'`, or `'missing'` has no effect.
+     */
+    onValueChange?: ((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void) | undefined;
+}
+
+export declare interface TabsRootState {
+    /**
+     * The component orientation.
+     */
+    orientation: TabsRoot.Orientation;
+    /**
+     * The direction used for tab activation.
+     */
+    tabActivationDirection: TabsTab.ActivationDirection;
+}
+
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export declare const TabsTab: React_2.ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & React_2.RefAttributes<HTMLElement>>;
+
+export declare namespace TabsTab {
+    export type Value = TabsTabValue;
+    export type ActivationDirection = TabsTabActivationDirection;
+    export type Position = TabsTabPosition;
+    export type Size = TabsTabSize;
+    export type Metadata = TabsTabMetadata;
+    export type State = TabsTabState;
+    export type Props = TabsTabProps;
+}
+
+export declare type TabsTabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
+
+export declare interface TabsTabMetadata {
+    disabled: boolean;
+    id: string | undefined;
+    value: TabsTab.Value | undefined;
+}
+
+export declare interface TabsTabPosition {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+
+export declare interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTabState> {
+    /**
+     * The value of the Tab.
+     */
+    value: TabsTab.Value;
+    /**
+     * Whether the Tab is disabled.
+     *
+     * If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.
+     * Instead, the next enabled Tab will be selected.
+     * However, it does not work like this during server-side rendering, as it is not known
+     * during pre-rendering which Tabs are disabled.
+     * To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
+     */
+    disabled?: boolean | undefined;
+}
+
+export declare interface TabsTabSize {
+    width: number;
+    height: number;
+}
+
+export declare interface TabsTabState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the component is active.
+     */
+    active: boolean;
+    /**
+     * The component orientation.
+     */
+    orientation: TabsRoot.Orientation;
+}
+
+export declare type TabsTabValue = any | null;
+
+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 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/tabs";
-
 export { }