@wix/site-ui 1.30.0 → 1.32.0

package/dist/Menubar/index.js

@@ -1,11 +1,113 @@
 import { jsx } from "react/jsx-runtime";
-import { Menubar } from "@base-ui/react/menubar";
 import clsx from "clsx";
+import { useBaseUiId } from "../6046.js";
+import { MenubarContext, useMenubarContext } from "../7564.js";
+import { FloatingTree, FloatingNode, useFloatingTree, useFloatingNodeId } from "../285.js";
+import { CompositeRoot } from "../9087.js";
 import * as __rspack_external_react from "react";
+let MenubarDataAttributes_MenubarDataAttributes = /*#__PURE__*/ function(MenubarDataAttributes) {
+    MenubarDataAttributes["modal"] = "data-modal";
+    MenubarDataAttributes["orientation"] = "data-orientation";
+    MenubarDataAttributes["hasSubmenuOpen"] = "data-has-submenu-open";
+    return MenubarDataAttributes;
+}({});
+const menubarStateAttributesMapping = {
+    hasSubmenuOpen (value) {
+        return value ? {
+            [MenubarDataAttributes_MenubarDataAttributes.hasSubmenuOpen]: ''
+        } : null;
+    }
+};
+const Menubar_Menubar = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
+    const { orientation = 'horizontal', loopFocus = true, render, className, modal = true, disabled = false, id: idProp, style, ...elementProps } = props;
+    const [contentElement, setContentElement] = __rspack_external_react.useState(null);
+    const [hasSubmenuOpen, setHasSubmenuOpen] = __rspack_external_react.useState(false);
+    const id = useBaseUiId(idProp);
+    const state = {
+        orientation,
+        modal,
+        hasSubmenuOpen
+    };
+    const contentRef = __rspack_external_react.useRef(null);
+    const allowMouseUpTriggerRef = __rspack_external_react.useRef(false);
+    const context = __rspack_external_react.useMemo(()=>({
+            contentElement,
+            setContentElement,
+            setHasSubmenuOpen,
+            hasSubmenuOpen,
+            modal,
+            disabled,
+            orientation,
+            allowMouseUpTriggerRef,
+            rootId: id
+        }), [
+        contentElement,
+        hasSubmenuOpen,
+        modal,
+        disabled,
+        orientation,
+        id
+    ]);
+    return /*#__PURE__*/ jsx(MenubarContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(FloatingTree, {
+            children: /*#__PURE__*/ jsx(MenubarContent, {
+                children: /*#__PURE__*/ jsx(CompositeRoot, {
+                    render: render,
+                    className: className,
+                    style: style,
+                    state: state,
+                    stateAttributesMapping: menubarStateAttributesMapping,
+                    refs: [
+                        forwardedRef,
+                        setContentElement,
+                        contentRef
+                    ],
+                    props: [
+                        {
+                            role: 'menubar',
+                            id
+                        },
+                        elementProps
+                    ],
+                    orientation: orientation,
+                    loopFocus: loopFocus,
+                    highlightItemOnHover: hasSubmenuOpen
+                })
+            })
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) Menubar_Menubar.displayName = "Menubar";
+function MenubarContent(props) {
+    const nodeId = useFloatingNodeId();
+    const { events: menuEvents } = useFloatingTree();
+    const rootContext = useMenubarContext();
+    __rspack_external_react.useEffect(()=>{
+        function onSubmenuOpenChange(details) {
+            if (!details.nodeId || details.parentNodeId !== nodeId) return;
+            if (details.open) {
+                if (!rootContext.hasSubmenuOpen) rootContext.setHasSubmenuOpen(true);
+            } else if ('sibling-open' !== details.reason && 'list-navigation' !== details.reason) rootContext.setHasSubmenuOpen(false);
+        }
+        menuEvents.on('menuopenchange', onSubmenuOpenChange);
+        return ()=>{
+            menuEvents.off('menuopenchange', onSubmenuOpenChange);
+        };
+    }, [
+        menuEvents,
+        nodeId,
+        rootContext
+    ]);
+    return /*#__PURE__*/ jsx(FloatingNode, {
+        id: nodeId,
+        children: props.children
+    });
+}
 const Menubar_module = {};
-const Menubar_Menubar = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menubar, {
+const Menubar_Menubar_Menubar = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menubar_Menubar, {
         ref: ref,
         className: clsx(Menubar_module.root, className),
         ...props
     }));
-export { Menubar_Menubar as Menubar };
+export { Menubar_Menubar_Menubar as Menubar };

package/dist/Meter/index.d.ts

@@ -1,29 +1,193 @@
-import { MeterIndicatorProps } from '@base-ui/react/meter';
-import { MeterLabelProps } from '@base-ui/react/meter';
-import { MeterRootProps } from '@base-ui/react/meter';
-import { MeterTrackProps } from '@base-ui/react/meter';
-import { MeterValueProps } from '@base-ui/react/meter';
+import { MeterIndicatorProps as MeterIndicatorProps_2 } from '@base-ui/react/meter';
+import { MeterLabelProps as MeterLabelProps_2 } from '@base-ui/react/meter';
+import { MeterRootProps as MeterRootProps_2 } from '@base-ui/react/meter';
+import { MeterTrackProps as MeterTrackProps_2 } from '@base-ui/react/meter';
+import { MeterValueProps as MeterValueProps_2 } from '@base-ui/react/meter';
 import * as React_2 from 'react';
 
+/**
+ * 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;
+};
+
+/**
+ * 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 type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
 export declare const Meter: {
-    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Track: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterTrackProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Track: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterTrackProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterIndicatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Value: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterValueProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
+    Value: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterValueProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterLabelProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
+    Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MeterLabelProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+/**
+ * Visualizes the position of the value along the range.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export declare const MeterIndicator: React_2.ForwardRefExoticComponent<Omit<MeterIndicatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace MeterIndicator {
+    export type State = MeterIndicatorState;
+    export type Props = MeterIndicatorProps;
+}
+
+export declare interface MeterIndicatorProps extends BaseUIComponentProps<'div', MeterIndicatorState> {}
+
+export declare interface MeterIndicatorState extends MeterRootState {}
+
+/**
+ * An accessible label for the meter.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export declare const MeterLabel: React_2.ForwardRefExoticComponent<Omit<MeterLabelProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare namespace MeterLabel {
+    export type State = MeterLabelState;
+    export type Props = MeterLabelProps;
+}
+
+export declare interface MeterLabelProps extends BaseUIComponentProps<'span', MeterLabelState> {}
+
+export declare interface MeterLabelState extends MeterRootState {}
+
+/**
+ * Groups all parts of the meter and provides the value for screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export declare const MeterRoot: React_2.ForwardRefExoticComponent<Omit<MeterRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace MeterRoot {
+    export type State = MeterRootState;
+    export type Props = MeterRootProps;
+}
+
+export declare interface MeterRootProps extends BaseUIComponentProps<'div', MeterRootState> {
+    /**
+     * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
+     */
+    'aria-valuetext'?: React_2.AriaAttributes['aria-valuetext'] | undefined;
+    /**
+     * Options to format the value.
+     */
+    format?: Intl.NumberFormatOptions | undefined;
+    /**
+     * A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter.
+     */
+    getAriaValueText?: ((formattedValue: string, value: number) => string) | undefined;
+    /**
+     * The locale used by `Intl.NumberFormat` when formatting the value.
+     * Defaults to the user's runtime locale.
+     */
+    locale?: Intl.LocalesArgument | undefined;
+    /**
+     * The maximum value
+     * @default 100
+     */
+    max?: number | undefined;
+    /**
+     * The minimum value
+     * @default 0
+     */
+    min?: number | undefined;
+    /**
+     * The current value.
+     */
+    value: number;
+}
+
+export declare interface MeterRootState {}
+
+/**
+ * Contains the meter indicator and represents the entire range of the meter.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export declare const MeterTrack: React_2.ForwardRefExoticComponent<Omit<MeterTrackProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare namespace MeterTrack {
+    export type State = MeterTrackState;
+    export type Props = MeterTrackProps;
+}
+
+export declare interface MeterTrackProps extends BaseUIComponentProps<'div', MeterTrackState> {}
+
+export declare interface MeterTrackState extends MeterRootState {}
+
+/**
+ * A text element displaying the current value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
+ */
+export declare const MeterValue: React_2.ForwardRefExoticComponent<Omit<MeterValueProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare namespace MeterValue {
+    export type State = MeterValueState;
+    export type Props = MeterValueProps;
+}
+
+export declare interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterValueState>, 'children'> {
+    children?: null | ((formattedValue: string, value: number) => React_2.ReactNode) | undefined;
+}
+
+export declare interface MeterValueState extends MeterRootState {}
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
 
-export * from "@base-ui/react/meter";
+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/Meter/index.js

@@ -1,7 +1,127 @@
-import { jsx } from "react/jsx-runtime";
-import { Meter } from "@base-ui/react/meter";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { formatNumberValue } from "../6914.js";
+import { visuallyHidden } from "../8225.js";
+import { valueToPercent } from "../3395.js";
+import { useRegisteredLabelId } from "../6706.js";
 import * as __rspack_external_react from "react";
+const MeterRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) MeterRootContext.displayName = "MeterRootContext";
+function useMeterRootContext() {
+    const context = __rspack_external_react.useContext(MeterRootContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: MeterRootContext is missing. Meter parts must be placed within <Meter.Root>.' : esm_formatErrorMessage(38));
+    return context;
+}
+const MeterRoot_MeterRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { format, getAriaValueText, locale, max = 100, min = 0, value: valueProp, render, className, children, style, ...elementProps } = componentProps;
+    const [labelId, setLabelId] = __rspack_external_react.useState();
+    const formattedValue = formatNumberValue(valueProp, locale, format);
+    let ariaValuetext = `${valueProp}%`;
+    if (getAriaValueText) ariaValuetext = getAriaValueText(formattedValue, valueProp);
+    else if (format) ariaValuetext = formattedValue;
+    const defaultProps = {
+        'aria-labelledby': labelId,
+        'aria-valuemax': max,
+        'aria-valuemin': min,
+        'aria-valuenow': valueProp,
+        'aria-valuetext': ariaValuetext,
+        role: 'meter',
+        children: /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+            children: [
+                children,
+                /*#__PURE__*/ jsx("span", {
+                    role: "presentation",
+                    style: visuallyHidden,
+                    children: "x"
+                })
+            ]
+        })
+    };
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            formattedValue,
+            max,
+            min,
+            setLabelId,
+            value: valueProp
+        }), [
+        formattedValue,
+        max,
+        min,
+        setLabelId,
+        valueProp
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        ref: forwardedRef,
+        props: [
+            defaultProps,
+            elementProps
+        ]
+    });
+    return /*#__PURE__*/ jsx(MeterRootContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) MeterRoot_MeterRoot.displayName = "MeterRoot";
+const MeterTrack_MeterTrack = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    return useRenderElement('div', componentProps, {
+        ref: forwardedRef,
+        props: elementProps
+    });
+});
+if ("production" !== process.env.NODE_ENV) MeterTrack_MeterTrack.displayName = "MeterTrack";
+const MeterIndicator_MeterIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const context = useMeterRootContext();
+    const percentageWidth = valueToPercent(context.value, context.min, context.max);
+    return useRenderElement('div', componentProps, {
+        ref: forwardedRef,
+        props: [
+            {
+                style: {
+                    insetInlineStart: 0,
+                    height: 'inherit',
+                    width: `${percentageWidth}%`
+                }
+            },
+            elementProps
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) MeterIndicator_MeterIndicator.displayName = "MeterIndicator";
+const MeterValue_MeterValue = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, children, style, ...elementProps } = componentProps;
+    const { value, formattedValue } = useMeterRootContext();
+    return useRenderElement('span', componentProps, {
+        ref: forwardedRef,
+        props: [
+            {
+                'aria-hidden': true,
+                children: 'function' == typeof children ? children(formattedValue, value) : (formattedValue || value) ?? ''
+            },
+            elementProps
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) MeterValue_MeterValue.displayName = "MeterValue";
+const MeterLabel_MeterLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, id: idProp, ...elementProps } = componentProps;
+    const { setLabelId } = useMeterRootContext();
+    const id = useRegisteredLabelId(idProp, setLabelId);
+    return useRenderElement('span', componentProps, {
+        ref: forwardedRef,
+        props: [
+            {
+                id,
+                role: 'presentation'
+            },
+            elementProps
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) MeterLabel_MeterLabel.displayName = "MeterLabel";
 const Meter_module = {
     root: "root-bc9hfF",
     track: "track-BJK3T1",
@@ -9,36 +129,36 @@ const Meter_module = {
     value: "value-Uz_0kH",
     label: "label-yJGBDG"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Meter.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MeterRoot_MeterRoot, {
         ref: ref,
         className: clsx(Meter_module.root, className),
         ...props
     }));
-const Track = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Meter.Track, {
+const Track = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MeterTrack_MeterTrack, {
         ref: ref,
         className: clsx(Meter_module.track, className),
         ...props
     }));
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Meter.Indicator, {
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MeterIndicator_MeterIndicator, {
         ref: ref,
         className: clsx(Meter_module.indicator, className),
         ...props
     }));
-const Value = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Meter.Value, {
+const Value = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MeterValue_MeterValue, {
         ref: ref,
         className: clsx(Meter_module.value, className),
         ...props
     }));
-const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Meter.Label, {
+const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MeterLabel_MeterLabel, {
         ref: ref,
         className: clsx(Meter_module.label, className),
         ...props
     }));
-const Meter_Meter = {
+const Meter = {
     Root: Root,
     Track: Track,
     Indicator: Indicator,
     Value: Value,
     Label: Label
 };
-export { Meter_Meter as Meter };
+export { Meter };