@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.3

package/Tag/Tag.d.ts

@@ -1,29 +1,6 @@
-import { MouseEventHandler } from 'react';
-import { TagSize } from '@mezzanine-ui/core/tag';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TagProps extends NativeElementPropsWithoutKeyAndRef<'span'> {
-    /**
-     * Whether the tag can be closed.
-     * @default false
-     */
-    closable?: boolean;
-    /**
-     * Whether the tag disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback executed while tag closed.
-     */
-    onClose?: MouseEventHandler;
-    /**
-     * The size of the tag.
-     * @default 'medium'
-     */
-    size?: TagSize;
-}
+import { TagProps } from './typings';
 /**
  * The react component for `mezzanine` tag.
  */
-declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLButtonElement | HTMLSpanElement>>;
 export default Tag;

package/Tag/Tag.js

@@ -1,25 +1,26 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { tagClasses } from '@mezzanine-ui/core/tag';
-import { TimesIcon } from '@mezzanine-ui/icons';
-import { MezzanineConfig } from '../Provider/context.js';
+import { PlusIcon, CloseIcon } from '@mezzanine-ui/icons';
 import Icon from '../Icon/Icon.js';
+import Badge from '../Badge/Badge.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` tag.
  */
 const Tag = forwardRef(function Tag(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { children, className, closable = false, disabled = false, onClose, size = globalSize, ...rest } = props;
-    return (jsxs("span", { ...rest, ref: ref, "aria-disabled": disabled, className: cx(tagClasses.host, tagClasses.size(size), {
-            [tagClasses.disabled]: disabled,
-        }, className), children: [jsx("span", { className: tagClasses.label, children: children }), closable && (jsx(Icon, { className: tagClasses.closeIcon, icon: TimesIcon, onClick: (event) => {
-                    if (!disabled && onClose) {
-                        onClose(event);
-                    }
-                }, tabIndex: -1 }))] }));
+    const { active, className, count, disabled, label, onAdd, onClose, readOnly, size = 'main', type, ...rest } = props;
+    const commonClassName = cx(tagClasses.host, tagClasses.size(size), tagClasses.type(type), {
+        [tagClasses.disabled]: disabled,
+        [tagClasses.active]: active,
+        [tagClasses.readOnly]: readOnly,
+    }, className);
+    if (type === 'addable') {
+        return (jsxs("button", { ...rest, ref: ref, type: "button", onClick: onAdd, disabled: disabled, className: commonClassName, children: [jsx(Icon, { className: tagClasses.icon, icon: PlusIcon, size: 16 }), jsx("span", { className: tagClasses.label, children: label })] }));
+    }
+    return (jsxs("span", { ...rest, ref: ref, "aria-disabled": disabled, className: commonClassName, children: [type === 'static' && jsx("span", { className: tagClasses.label, children: label }), type === 'counter' && (jsxs(Fragment, { children: [jsx("span", { className: tagClasses.label, children: label }), jsx(Badge, { variant: "count-info", count: count })] })), type === 'overflow-counter' && (jsxs(Fragment, { children: [jsx(Icon, { className: tagClasses.icon, icon: PlusIcon, size: 16 }), jsx("span", { className: tagClasses.label, children: count })] })), type === 'dismissable' && (jsxs(Fragment, { children: [jsx("span", { className: tagClasses.label, children: label }), !readOnly && (jsx("button", { className: tagClasses.closeButton, type: "button", onClick: onClose, "aria-label": "Dismiss tag", disabled: disabled, children: jsx(Icon, { className: tagClasses.icon, icon: CloseIcon, size: 16 }) }))] }))] }));
 });
 
 export { Tag as default };

package/Tag/index.d.ts

@@ -1,3 +1,3 @@
 export type { TagSize } from '@mezzanine-ui/core/tag';
-export type { TagProps } from './Tag';
+export type { TagProps } from './typings';
 export { default } from './Tag';

package/Tag/typings.d.ts

@@ -0,0 +1,79 @@
+import { TagSize, TagType } from '@mezzanine-ui/core/tag';
+import { MouseEventHandler } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+/**
+ * Props for the Tag component covering static, counter, overflow, dismissable, and addable variants.
+ */
+export type TagProps = TagPropsShared & (TagPropsStatic | TagPropsCounter | TagPropsOverflowCounter | TagPropsDismissable | TagPropsAddable);
+type TagPropsShared = NativeElementPropsWithoutKeyAndRef<'span'> & {
+    /** Custom class names on the host element. */
+    className?: string;
+    /** Active state. Only available on dismissable/addable tags. */
+    active?: boolean;
+    /** Disabled state. Only available on dismissable/addable tags. */
+    disabled?: boolean;
+    /** Text rendered inside label-based tags. */
+    label?: string;
+    /** Numeric value displayed by counter and overflow-counter variants. */
+    count?: number;
+    /** Handler fired when the addable tag is clicked. */
+    onAdd?: () => void;
+    /** Handler fired when the close button is clicked. */
+    onClose?: MouseEventHandler;
+    /** Applies read-only styling for dismissable tags. */
+    readOnly?: boolean;
+    /**
+     * Size of the tag.
+     * @default main
+     */
+    size?: TagSize;
+    /**
+     * Type of the tag.
+     */
+    type: TagType;
+};
+type TagPropsStatic = {
+    active?: never;
+    count?: never;
+    disabled?: never;
+    onAdd?: never;
+    onClose?: never;
+    readOnly?: never;
+    label: string;
+    type: 'static';
+};
+type TagPropsCounter = {
+    active?: never;
+    disabled?: never;
+    onAdd?: never;
+    onClose?: never;
+    readOnly?: never;
+    label: string;
+    count: number;
+    type: 'counter';
+};
+type TagPropsOverflowCounter = {
+    active?: never;
+    disabled?: never;
+    label?: never;
+    onAdd?: never;
+    onClose?: never;
+    readOnly?: never;
+    count: number;
+    type: 'overflow-counter';
+};
+type TagPropsDismissable = {
+    count?: never;
+    onAdd?: never;
+    label: string;
+    onClose: MouseEventHandler;
+    type: 'dismissable';
+};
+type TagPropsAddable = {
+    count?: never;
+    onClose?: never;
+    readOnly?: never;
+    label: string;
+    type: 'addable';
+};
+export {};

package/Toggle/Toggle.d.ts

@@ -0,0 +1,46 @@
+import { ChangeEventHandler } from 'react';
+import { ToggleSize } from '@mezzanine-ui/core/toggle';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ToggleProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * Whether the toggle is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the toggle is checked by default.
+     * Only used for uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the toggle is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     * If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    /**
+     * The label text displayed beside the toggle.
+     */
+    label?: string;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The size of toggle.
+     * @default 'main'
+     */
+    size?: ToggleSize;
+    /**
+     * Supporting text displayed below the label.
+     */
+    supportingText?: string;
+}
+/**
+ * The react component for `mezzanine` toggle.
+ */
+declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Toggle;

package/Toggle/Toggle.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { toggleClasses } from '@mezzanine-ui/core/toggle';
+import { useSwitchControlValue } from '../Form/useSwitchControlValue.js';
+import Typography from '../Typography/Typography.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` toggle.
+ */
+const Toggle = forwardRef(function Toggle(props, ref) {
+    const { disabled: disabledFromFormControl } = useContext(FormControlContext) || {};
+    const { checked: checkedProp, className, defaultChecked, disabled = disabledFromFormControl, inputProps, label, onChange: onChangeProp, size = 'main', supportingText, ...rest } = props;
+    const [checked, onChange] = useSwitchControlValue({
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+    });
+    return (jsxs("div", { ref: ref, ...rest, className: cx(toggleClasses.host, {
+            [toggleClasses.checked]: checked,
+            [toggleClasses.disabled]: disabled,
+            [toggleClasses.main]: size === 'main',
+            [toggleClasses.sub]: size === 'sub',
+        }, className), children: [jsxs("div", { className: toggleClasses.inputContainer, children: [jsx("span", { className: toggleClasses.knob }), jsx("input", { ...inputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: toggleClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" })] }), label && (jsxs("div", { className: toggleClasses.textContainer, children: [jsx(Typography, { color: "text-neutral-solid", variant: "label-primary", children: label }), supportingText && (jsx(Typography, { color: "text-neutral", variant: "caption", children: supportingText }))] }))] }));
+});
+
+export { Toggle as default };

package/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+export type { ToggleSize } from '@mezzanine-ui/core/toggle';
+export type { ToggleProps } from './Toggle';
+export { default } from './Toggle';

package/Toggle/index.js

@@ -0,0 +1 @@
+export { default } from './Toggle.js';

package/Tooltip/Tooltip.d.ts

@@ -1,13 +1,24 @@
 import { ReactElement, MouseEventHandler, ReactNode } from 'react';
 import { PopperProps } from '../Popper';
-export interface TooltipProps extends Omit<PopperProps, 'children' | 'title'> {
+export interface TooltipProps extends Omit<PopperProps, 'arrow' | 'children' | 'disablePortal' | 'title'> {
     /**
-     * child function that can receive events
+     * show arrow or not
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * child function that can receive events and ref
      */
     children(opt: {
         onMouseEnter: MouseEventHandler;
         onMouseLeave: MouseEventHandler;
+        ref: React.RefCallback<HTMLElement>;
     }): ReactElement<any>;
+    /**
+     * Whether to disable portal. If true, it will be a normal component.
+     * @default true
+     */
+    disablePortal?: boolean;
     /**
      * delay time to hide when mouse leave. unit: s.
      * @default 0.1

package/Tooltip/Tooltip.js

@@ -1,28 +1,66 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useState, useCallback } from 'react';
 import { tooltipClasses } from '@mezzanine-ui/core/tooltip';
+import { offset, flip, shift } from '@floating-ui/react-dom';
+import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useDelayMouseEnterLeave } from './useDelayMouseEnterLeave.js';
+import { getCSSVariableValue } from '../utils/get-css-variable-value.js';
 import Popper from '../Popper/Popper.js';
 import cx from 'clsx';
 
-const offsetModifier = {
-    name: 'offset',
-    options: { offset: [0, 8] },
-};
 /**
  * The react component for `mezzanine` tooltip.
  */
 const Tooltip = forwardRef(function Tooltip(props, ref) {
-    const { anchor: anchorProp, children, className, mouseLeaveDelay = 0.1, open = false, options = {}, title, ...rest } = props;
-    const { modifiers = [] } = options;
+    const { anchor: anchorProp, arrow: showArrow = true, children, className, disablePortal = true, mouseLeaveDelay = 0.1, open = false, options = {}, title, ...rest } = props;
+    const { middleware: middlewareProp = [] } = options;
     const tooltipRef = useRef(null);
+    const [targetRef, _setTargetRef] = useState({
+        current: null,
+    });
     const composedRef = useComposeRefs([ref, tooltipRef]);
-    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible } = useDelayMouseEnterLeave({ mouseLeaveDelay });
+    const { onLeave, onPopperEnter, onTargetEnter, visible } = useDelayMouseEnterLeave({ mouseLeaveDelay });
     /** tooltip shown only when title existed && visible is true */
     const isTooltipVisible = open || (visible && Boolean(title));
-    return (jsxs(Fragment, { children: [jsx(Popper, { ...rest, ref: composedRef, anchor: anchorProp || anchor, className: cx(tooltipClasses.host, className), onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: { ...options, modifiers: [...modifiers, offsetModifier] }, children: title }), typeof children === 'function' &&
-                children({ onMouseEnter: onTargetEnter, onMouseLeave: onLeave })] }));
+    const offsetValue = Number(getCSSVariableValue(`--${spacingPrefix}-gap-base`).replace('rem', '')) * 16;
+    const placement = options.placement || 'top';
+    const isPlacementAtEdge = placement.endsWith('-start') || placement.endsWith('-end');
+    // 設置 target element，並重新渲染
+    const setTargetRef = useCallback((element) => {
+        _setTargetRef({ current: element });
+    }, []);
+    // middleware (shift, flip 會衝突，所以依照官方推薦設定 https://floating-ui.com/docs/flip#combining-with-shift)
+    const middleware = [offset({ mainAxis: offsetValue })];
+    const flipMiddleware = flip({
+        crossAxis: 'alignment',
+        fallbackAxisSideDirection: 'end',
+    });
+    const shiftMiddleware = shift();
+    if (placement.includes('-')) {
+        middleware.push(flipMiddleware, shiftMiddleware);
+    }
+    else {
+        middleware.push(shiftMiddleware, flipMiddleware);
+    }
+    return (jsxs(Fragment, { children: [jsx(Popper, { ...rest, ref: composedRef, anchor: anchorProp || targetRef.current, arrow: showArrow
+                    ? {
+                        className: tooltipClasses.arrow,
+                        enabled: true,
+                        padding: isPlacementAtEdge
+                            ? Number(getCSSVariableValue(`--${spacingPrefix}-padding-horizontal-comfort`).replace('rem', '')) * 16
+                            : 0,
+                    }
+                    : undefined, className: cx(tooltipClasses.host, className), disablePortal: disablePortal, onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: {
+                    ...options,
+                    placement,
+                    middleware: [...middleware, ...middlewareProp],
+                }, children: title }), typeof children === 'function' &&
+                children({
+                    onMouseEnter: onTargetEnter,
+                    onMouseLeave: onLeave,
+                    ref: setTargetRef,
+                })] }));
 });
 
 export { Tooltip as default };

package/Tooltip/useDelayMouseEnterLeave.d.ts

@@ -2,10 +2,9 @@ export interface UseDelayMouseEnterLeave {
     mouseLeaveDelay?: number;
 }
 export interface DelayMouseEnterLeave {
-    anchor: HTMLButtonElement | null;
     onLeave(v: any): void;
     onPopperEnter(v: any): void;
-    onTargetEnter(v: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    onTargetEnter(v: React.MouseEvent<HTMLElement, MouseEvent>): void;
     visible: boolean;
 }
 export declare function useDelayMouseEnterLeave(opt: UseDelayMouseEnterLeave): DelayMouseEnterLeave;

package/Tooltip/useDelayMouseEnterLeave.js

@@ -4,8 +4,6 @@ function useDelayMouseEnterLeave(opt) {
     const { mouseLeaveDelay = 0.1 } = opt || {};
     /** state that control tooltip visible/invisible */
     const [visible, setVisible] = useState(false);
-    /** tooltip reference anchor */
-    const [anchor, setAnchor] = useState(null);
     /** timer for mouse leaving delay - use ref to persist across renders */
     const timerRef = useRef(null);
     const clearVisibilityDelayTimeout = useCallback(() => {
@@ -26,12 +24,10 @@ function useDelayMouseEnterLeave(opt) {
     }, [clearVisibilityDelayTimeout]);
     const onTargetEnter = useCallback((event) => {
         event.stopPropagation();
-        setAnchor(event.currentTarget);
         clearVisibilityDelayTimeout();
         setVisible(true);
     }, [clearVisibilityDelayTimeout]);
     return {
-        anchor,
         onLeave,
         onPopperEnter,
         onTargetEnter,

package/Tree/TreeNode.js

@@ -5,7 +5,7 @@ import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
@@ -19,12 +19,12 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
     const { children, className, disabled, dynamicNodesFetching, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
     const variant = useMemo(() => {
         if (size === 'small') {
-            return 'input3';
+            return 'input';
         }
         if (size === 'large') {
-            return 'input1';
+            return 'input';
         }
-        return 'input2';
+        return 'input';
     }, [size]);
     const onExpand = onExpandProp
         ? () => {
@@ -44,7 +44,7 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
                             [treeClasses.nodeLabelIndeterminate]: indeterminate,
                             [treeClasses.nodeLabelActive]: selected,
                             [treeClasses.nodeLabelDisabled]: disabled,
-                        }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Loading, { loading: true, iconProps: { size: 16 } }) }))] }));
+                        }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Spin, { loading: true, iconProps: { size: 16 } }) }))] }));
 });
 
 export { TreeNode as default };

package/_internal/InputTriggerPopper/InputTriggerPopper.js

@@ -1,44 +1,34 @@
 import { jsx } from 'react/jsx-runtime';
 import { inputTriggerPopperClasses } from '@mezzanine-ui/core/_internal/input-trigger-popper';
+import { offset, size } from '@floating-ui/react-dom';
 import { forwardRef } from 'react';
 import Fade from '../../Transition/Fade.js';
 import Popper from '../../Popper/Popper.js';
 import cx from 'clsx';
 
+// Middleware to make the popper have the same min-width as the reference element
+const sameWidthMiddleware = size({
+    apply({ rects, elements }) {
+        Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+        });
+    },
+});
 /**
  * The react component for `mezzanine` input popper.
  */
 const InputTriggerPopper = forwardRef(function InputTriggerPopper(props, ref) {
     const { anchor, children, className, fadeProps, open, options, sameWidth, ...restPopperProps } = props;
-    const { modifiers = [], ...restPopperOptions } = options || {};
-    const sameWidthModifier = {
-        name: 'sameWidth',
-        enabled: true,
-        phase: 'beforeWrite',
-        requires: ['computeStyles'],
-        fn: ({ state }) => {
-            const reassignState = state;
-            reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-            const reassignState = state;
-            reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
-        },
-    };
+    const { middleware = [], ...restPopperOptions } = options || {};
     return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), 
             /** Prevent event bubble (Because popper may use portal, then click away function would be buggy) */
             onClick: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onTouchMove: (e) => e.stopPropagation(), onTouchEnd: (e) => e.stopPropagation(), options: {
                 placement: 'bottom-start',
                 ...restPopperOptions,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, 4],
-                        },
-                    },
-                    ...(sameWidth ? [sameWidthModifier] : []),
-                    ...modifiers,
+                middleware: [
+                    offset({ mainAxis: 4 }),
+                    ...(sameWidth ? [sameWidthMiddleware] : []),
+                    ...middleware,
                 ],
             }, children: children }) }));
 });

package/_internal/SlideFadeOverlay/SlideFadeOverlay.d.ts

@@ -1,7 +1,7 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-import { OverlayProps } from '../../Overlay';
+import { BackdropProps } from '../../Backdrop';
 import { SlideFadeProps, SlideFadeDirection } from '../../Transition';
-export interface SlideFadeOverlayProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'invisibleBackdrop' | 'hideBackdrop' | 'onBackdropClick' | 'onClose' | 'open'>, Pick<SlideFadeProps, 'children'> {
+export interface SlideFadeOverlayProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Pick<BackdropProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'>, Pick<SlideFadeProps, 'children'> {
     /**
      * Control slide fade in direction
      * @default 'down'

package/_internal/SlideFadeOverlay/SlideFadeOverlay.js

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { overlayWithSlideFadeClasses } from '@mezzanine-ui/core/_internal/overlay-with-slide-fade';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState } from 'react';
 import { useDocumentEscapeKeyDown } from '../../hooks/useDocumentEscapeKeyDown.js';
-import { lockBodyScroll, allowBodyScroll } from '../../utils/scroll-lock.js';
 import useTopStack from './useTopStack.js';
-import Overlay from '../../Overlay/Overlay.js';
+import Backdrop from '../../Backdrop/Backdrop.js';
 import SlideFade from '../../Transition/SlideFade.js';
 import cx from 'clsx';
 
@@ -12,7 +11,7 @@ import cx from 'clsx';
  * The react component for slide fade + overlay compose
  */
 const SlideFadeOverlay = forwardRef(function SlideFadeOverlay(props, ref) {
-    const { children, className, container, direction = 'down', disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, hideBackdrop = false, invisibleBackdrop = false, onBackdropClick, onClose, open, } = props;
+    const { children, className, container, direction = 'down', disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, onBackdropClick, onClose, open, } = props;
     const [exited, setExited] = useState(true);
     /**
      * Escape keydown close: escape will only close the top modal
@@ -29,32 +28,10 @@ const SlideFadeOverlay = forwardRef(function SlideFadeOverlay(props, ref) {
             }
         };
     }, [disableCloseOnEscapeKeyDown, checkIsOnTheTop, open, onClose]);
-    /** lock body scroll */
-    useEffect(() => {
-        if (open) {
-            lockBodyScroll();
-        }
-    }, [open]);
-    /** unlock body scroll */
-    useEffect(() => {
-        function checkAndAllowScroll() {
-            // wait until dom element unmount, and check if other modal existed
-            const allStacks = document.querySelectorAll('.mzn-overlay-with-slide-fade');
-            if (!allStacks.length) {
-                allowBodyScroll();
-            }
-        }
-        if (!open && exited) {
-            checkAndAllowScroll();
-        }
-        return () => {
-            requestAnimationFrame(checkAndAllowScroll);
-        };
-    }, [open, exited]);
     if (!open && exited) {
         return null;
     }
-    return (jsx(Overlay, { className: cx(overlayWithSlideFadeClasses.host, className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(SlideFade, { ref: ref, in: open, direction: direction, onEntered: () => setExited(false), onExited: () => setExited(true), children: children }) }));
+    return (jsx(Backdrop, { className: cx(overlayWithSlideFadeClasses.host, className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(SlideFade, { ref: ref, in: open, direction: direction, onEntered: () => setExited(false), onExited: () => setExited(true), children: children }) }));
 });
 
 export { SlideFadeOverlay as default };

package/hooks/useScrollLock.d.ts

@@ -0,0 +1,28 @@
+interface ScrollLockOptions {
+    /**
+     * Whether the scroll lock is enabled
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Whether to reserve scrollbar width to prevent layout shift
+     * @default true
+     */
+    reserveScrollBarGap?: boolean;
+}
+/**
+ * Hook to lock/unlock body scroll
+ * Handles multiple concurrent locks (nested modals/overlays)
+ * Prevents layout shift by reserving scrollbar width
+ * Handles iOS rubber band scrolling
+ *
+ * @example
+ * ```tsx
+ * function Modal({ open }) {
+ *   useScrollLock({ enabled: open });
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export declare function useScrollLock(options?: ScrollLockOptions): void;
+export {};