@wix/site-ui 1.30.0 → 1.32.0

package/dist/ToggleGroup/index.d.ts

@@ -1,11 +1,325 @@
 import * as React_2 from 'react';
-import { ToggleGroup as ToggleGroup_2 } from '@base-ui/react/toggle-group';
+
+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 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 ToggleGroup: React_2.ForwardRefExoticComponent<Omit<Omit<ToggleGroup_2.Props<string> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Provides a shared state to a series of toggle buttons.
+ *
+ * Documentation: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
+ */
+declare const ToggleGroup_2: {
+    <Value extends string>(props: ToggleGroup_2.Props<Value> & React_2.RefAttributes<HTMLDivElement>): React_2.JSX.Element;
+};
+
+declare namespace ToggleGroup_2 {
+    type State = ToggleGroupState;
+    type Props<Value extends string = string> = ToggleGroupProps<Value>;
+    type ChangeEventReason = ToggleGroupChangeEventReason;
+    type ChangeEventDetails = ToggleGroupChangeEventDetails;
+}
+
+export declare type ToggleGroupChangeEventDetails = BaseUIChangeEventDetails<ToggleGroup_2.ChangeEventReason>;
+
+export declare type ToggleGroupChangeEventReason = typeof REASONS.none;
+
+export declare interface ToggleGroupProps<Value extends string> extends BaseUIComponentProps<'div', ToggleGroupState> {
+    /**
+     * The pressed state of the toggle group represented by an array of
+     * the values of all pressed toggle buttons.
+     * This is the controlled counterpart of `defaultValue`.
+     */
+    value?: readonly Value[] | undefined;
+    /**
+     * The pressed state of the toggle group represented by an array of
+     * the values of all pressed toggle buttons.
+     * This is the uncontrolled counterpart of `value`.
+     */
+    defaultValue?: readonly Value[] | undefined;
+    /**
+     * Callback fired when the pressed states of the toggle group changes.
+     */
+    onValueChange?: ((groupValue: Value[], eventDetails: ToggleGroup_2.ChangeEventDetails) => void) | undefined;
+    /**
+     * Whether the toggle group should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * @default 'horizontal'
+     */
+    orientation?: Orientation | 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;
+    /**
+     * When `false` only one item in the group can be pressed. If any item in
+     * the group becomes pressed, the others will become unpressed.
+     * When `true` multiple items can be pressed.
+     * @default false
+     */
+    multiple?: boolean | undefined;
+}
+
+export declare interface ToggleGroupState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * When `false` only one item in the group can be pressed. If any item in
+     * the group becomes pressed, the others will become unpressed.
+     * When `true` multiple items can be pressed.
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * The orientation of the toggle group.
+     */
+    orientation: Orientation;
+}
+
+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-group";
+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/ToggleGroup/index.js

@@ -1,13 +1,112 @@
 import { jsx } from "react/jsx-runtime";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
 import clsx from "clsx";
+import { useToolbarRootContext } from "../6107.js";
+import { useControlled } from "../8527.js";
+import { EMPTY_ARRAY, useRenderElement } from "../8272.js";
+import { useStableCallback } from "../7541.js";
+import { ToggleGroupContext } from "../7725.js";
+import { CompositeRoot } from "../9087.js";
 import * as __rspack_external_react from "react";
+let ToggleGroupDataAttributes_ToggleGroupDataAttributes = /*#__PURE__*/ function(ToggleGroupDataAttributes) {
+    ToggleGroupDataAttributes["disabled"] = "data-disabled";
+    ToggleGroupDataAttributes["orientation"] = "data-orientation";
+    ToggleGroupDataAttributes["multiple"] = "data-multiple";
+    return ToggleGroupDataAttributes;
+}({});
+const stateAttributesMapping = {
+    multiple (value) {
+        if (value) return {
+            [ToggleGroupDataAttributes_ToggleGroupDataAttributes.multiple]: ''
+        };
+        return null;
+    }
+};
+const ToggleGroup_ToggleGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { defaultValue: defaultValueProp, disabled: disabledProp = false, loopFocus = true, onValueChange, orientation = 'horizontal', multiple = false, value: valueProp, className, render, style, ...elementProps } = componentProps;
+    const toolbarContext = useToolbarRootContext(true);
+    const isValueInitialized = __rspack_external_react.useMemo(()=>void 0 !== valueProp || void 0 !== defaultValueProp, [
+        valueProp,
+        defaultValueProp
+    ]);
+    const disabled = (toolbarContext?.disabled ?? false) || disabledProp;
+    const [groupValue, setValueState] = useControlled({
+        controlled: valueProp,
+        default: void 0 === valueProp ? defaultValueProp ?? EMPTY_ARRAY : void 0,
+        name: 'ToggleGroup',
+        state: 'value'
+    });
+    const setGroupValue = useStableCallback((newValue, nextPressed, eventDetails)=>{
+        let newGroupValue;
+        if (multiple) {
+            newGroupValue = groupValue.slice();
+            if (nextPressed) newGroupValue.push(newValue);
+            else newGroupValue.splice(groupValue.indexOf(newValue), 1);
+        } else newGroupValue = nextPressed ? [
+            newValue
+        ] : [];
+        onValueChange?.(newGroupValue, eventDetails);
+        if (eventDetails.isCanceled) return;
+        setValueState(newGroupValue);
+    });
+    const state = {
+        disabled,
+        multiple,
+        orientation
+    };
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            disabled,
+            orientation,
+            setGroupValue,
+            value: groupValue,
+            isValueInitialized
+        }), [
+        disabled,
+        orientation,
+        setGroupValue,
+        groupValue,
+        isValueInitialized
+    ]);
+    const defaultProps = {
+        role: 'group'
+    };
+    const element = useRenderElement('div', componentProps, {
+        enabled: Boolean(toolbarContext),
+        state,
+        ref: forwardedRef,
+        props: [
+            defaultProps,
+            elementProps
+        ],
+        stateAttributesMapping: stateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
+        value: contextValue,
+        children: toolbarContext ? element : /*#__PURE__*/ jsx(CompositeRoot, {
+            render: render,
+            className: className,
+            style: style,
+            state: state,
+            refs: [
+                forwardedRef
+            ],
+            props: [
+                defaultProps,
+                elementProps
+            ],
+            stateAttributesMapping: stateAttributesMapping,
+            loopFocus: loopFocus,
+            enableHomeAndEndKeys: true,
+            orientation: orientation
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) ToggleGroup_ToggleGroup.displayName = "ToggleGroup";
 const ToggleGroup_module = {
     root: "root-JZaWem"
 };
-const ToggleGroup_ToggleGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToggleGroup, {
+const ToggleGroup_ToggleGroup_ToggleGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToggleGroup_ToggleGroup, {
         ref: ref,
         className: clsx(ToggleGroup_module.root, className),
         ...props
     }));
-export { ToggleGroup_ToggleGroup as ToggleGroup };
+export { ToggleGroup_ToggleGroup_ToggleGroup as ToggleGroup };