@wix/site-ui 1.30.0 → 1.31.0

package/dist/Toggle/index.d.ts

@@ -1,11 +1,314 @@
 import * as React_2 from 'react';
-import { Toggle as Toggle_2 } from '@base-ui/react/toggle';
+
+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 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";
 
 export declare const Toggle: React_2.ForwardRefExoticComponent<Omit<Omit<Toggle_2.Props<string> & React_2.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * A two-state button that can be on or off.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Toggle](https://base-ui.com/react/components/toggle)
+ */
+declare const Toggle_2: {
+    <Value extends string>(props: Toggle_2.Props<Value> & React_2.RefAttributes<HTMLButtonElement>): React_2.JSX.Element;
+};
+
+declare namespace Toggle_2 {
+    type State = ToggleState;
+    type Props<TValue extends string = string> = ToggleProps<TValue>;
+    type ChangeEventReason = ToggleChangeEventReason;
+    type ChangeEventDetails = ToggleChangeEventDetails;
+}
+
+export declare type ToggleChangeEventDetails = BaseUIChangeEventDetails<Toggle_2.ChangeEventReason>;
+
+export declare type ToggleChangeEventReason = typeof REASONS.none;
+
+export declare interface ToggleProps<Value extends string> extends NativeButtonProps, BaseUIComponentProps<'button', ToggleState> {
+    /**
+     * Whether the toggle button is currently pressed.
+     * This is the controlled counterpart of `defaultPressed`.
+     */
+    pressed?: boolean | undefined;
+    /**
+     * Whether the toggle button is currently pressed.
+     * This is the uncontrolled counterpart of `pressed`.
+     * @default false
+     */
+    defaultPressed?: boolean | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Callback fired when the pressed state is changed.
+     */
+    onPressedChange?: ((pressed: boolean, eventDetails: Toggle_2.ChangeEventDetails) => void) | undefined;
+    /**
+     * A unique string that identifies the toggle when used
+     * inside a toggle group.
+     */
+    value?: Value | undefined;
+}
+
+export declare interface ToggleState {
+    /**
+     * Whether the toggle is currently pressed.
+     */
+    pressed: boolean;
+    /**
+     * Whether the toggle should ignore user interaction.
+     */
+    disabled: boolean;
+}
+
+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/toggle";
+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/Toggle/index.js

@@ -1,15 +1,88 @@
 import { jsx } from "react/jsx-runtime";
-import { Toggle } from "@base-ui/react/toggle";
 import clsx from "clsx";
+import { useBaseUiId } from "../6046.js";
+import { useToggleGroupContext } from "../7725.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { error } from "../4026.js";
+import { useControlled } from "../8527.js";
+import { useButton } from "../9189.js";
+import { createChangeEventDetails } from "../4768.js";
+import { useRenderElement } from "../8272.js";
+import { CompositeItem } from "../951.js";
 import * as __rspack_external_react from "react";
+const Toggle_Toggle = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, defaultPressed: defaultPressedProp = false, disabled: disabledProp = false, form, onPressedChange, pressed: pressedProp, render, type, value: valueProp, nativeButton = true, style, ...elementProps } = componentProps;
+    const value = useBaseUiId(valueProp || void 0);
+    const groupContext = useToggleGroupContext();
+    const groupValue = groupContext?.value ?? [];
+    const defaultPressed = groupContext ? void 0 : defaultPressedProp;
+    const disabled = (disabledProp || groupContext?.disabled) ?? false;
+    if ('production' !== process.env.NODE_ENV) useIsoLayoutEffect(()=>{
+        if (groupContext && void 0 === valueProp && groupContext.isValueInitialized) error('A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.', 'This will cause issues between the Toggle Group and Toggle values.', 'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.');
+    }, [
+        groupContext,
+        valueProp,
+        groupContext?.isValueInitialized
+    ]);
+    const [pressed, setPressedState] = useControlled({
+        controlled: groupContext ? void 0 !== value && groupValue.indexOf(value) > -1 : pressedProp,
+        default: defaultPressed,
+        name: 'Toggle',
+        state: 'pressed'
+    });
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        native: nativeButton
+    });
+    const state = {
+        disabled,
+        pressed
+    };
+    const refs = [
+        buttonRef,
+        forwardedRef
+    ];
+    const props = [
+        {
+            'aria-pressed': pressed,
+            onClick (event) {
+                const nextPressed = !pressed;
+                const details = createChangeEventDetails("none", event.nativeEvent);
+                if (value) groupContext?.setGroupValue?.(value, nextPressed, details);
+                onPressedChange?.(nextPressed, details);
+                if (details.isCanceled) return;
+                setPressedState(nextPressed);
+            }
+        },
+        elementProps,
+        getButtonProps
+    ];
+    const element = useRenderElement('button', componentProps, {
+        enabled: !groupContext,
+        state,
+        ref: refs,
+        props
+    });
+    if (groupContext) return /*#__PURE__*/ jsx(CompositeItem, {
+        tag: "button",
+        render: render,
+        className: className,
+        style: style,
+        state: state,
+        refs: refs,
+        props: props
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) Toggle_Toggle.displayName = "Toggle";
 const Toggle_module = {
     root: "root-b5XZrV",
     "toggle-pop-in": "toggle-pop-in-YeDB_9",
     togglePopIn: "toggle-pop-in-YeDB_9"
 };
-const Toggle_Toggle = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Toggle, {
+const Toggle_Toggle_Toggle = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Toggle_Toggle, {
         ref: ref,
         className: clsx(Toggle_module.root, className),
         ...props
     }));
-export { Toggle_Toggle as Toggle };
+export { Toggle_Toggle_Toggle as Toggle };