@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/_internal/InputCheck/InputCheckGroup.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { InputCheckGroupOrientation } from '@mezzanine-ui/core/_internal/input-check';
+import { InputCheckGroupOrientation, InputCheckSize } from '@mezzanine-ui/core/_internal/input-check';
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
 export interface InputCheckGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
@@ -10,6 +10,16 @@ export interface InputCheckGroupProps extends NativeElementPropsWithoutKeyAndRef
      * The orientation of input check group.
      */
     orientation?: InputCheckGroupOrientation;
+    /**
+     * Whether the input check group use segment style.
+     * @default false
+     */
+    segmentedStyle?: boolean;
+    /**
+     * The size of input check group.
+     * @default 'main'
+     */
+    size?: InputCheckSize;
 }
 /**
  * The react component for `mezzanine` input check group.

package/_internal/InputCheck/InputCheckGroup.js

@@ -7,8 +7,10 @@ import cx from 'clsx';
  * The react component for `mezzanine` input check group.
  */
 const InputCheckGroup = forwardRef(function InputCheckGroup(props, ref) {
-    const { children, className, orientation = 'horizontal', ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, "aria-orientation": orientation, className: cx(inputCheckGroupClasses.host, inputCheckGroupClasses.orientation(orientation), className), children: children }));
+    const { children, className, orientation = 'horizontal', segmentedStyle = false, size = 'main', ...rest } = props;
+    return (jsx("div", { ...rest, ref: ref, "aria-orientation": orientation, className: cx(inputCheckGroupClasses.host, inputCheckGroupClasses.orientation(orientation), inputCheckGroupClasses.size(size), {
+            [inputCheckGroupClasses.segmented]: segmentedStyle,
+        }, className), children: children }));
 });
 
 export { InputCheckGroup as default };

package/_internal/InputCheck/index.d.ts

@@ -1,3 +1,5 @@
 export type { InputCheckSize, InputCheckGroupOrientation, } from '@mezzanine-ui/core/_internal/input-check';
-export { InputCheckProps, default } from './InputCheck';
-export { InputCheckGroupProps, default as InputCheckGroup, } from './InputCheckGroup';
+export { default } from './InputCheck';
+export type { InputCheckProps } from './InputCheck';
+export { default as InputCheckGroup } from './InputCheckGroup';
+export type { InputCheckGroupProps } from './InputCheckGroup';

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`;
-        },
-    };
-    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), 
+    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), disablePortal: true, 
             /** 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/InputTriggerPopper/index.d.ts

@@ -1 +1,2 @@
-export { InputTriggerPopperProps, default } from './InputTriggerPopper';
+export { default } from './InputTriggerPopper';
+export type { InputTriggerPopperProps } from './InputTriggerPopper';

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'
@@ -14,7 +14,7 @@ export interface SlideFadeOverlayProps extends Omit<NativeElementPropsWithoutKey
     disableCloseOnEscapeKeyDown?: boolean;
 }
 /**
- * The react component for slide fade + overlay compose
+ * @deprecated
  */
 declare const SlideFadeOverlay: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SlideFadeOverlay;

package/_internal/SlideFadeOverlay/SlideFadeOverlay.js

@@ -1,18 +1,17 @@
 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';
 
 /**
- * The react component for slide fade + overlay compose
+ * @deprecated
  */
 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/_internal/SlideFadeOverlay/index.d.ts

@@ -1 +1,2 @@
-export { SlideFadeOverlayProps, default } from './SlideFadeOverlay';
+export { default } from './SlideFadeOverlay';
+export type { SlideFadeOverlayProps } from './SlideFadeOverlay';

package/_internal/SlideFadeOverlay/useTopStack.js

@@ -4,6 +4,7 @@ let seedStack = [];
 let seed = 1;
 function useTopStack(open) {
     const modalSeed = useMemo(() => {
+        // eslint-disable-next-line react-hooks/globals
         seed += 1;
         return seed;
     }, []);

package/dayjs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Dayjs-specific entry point for Mezzanine UI React
+ * Import from this path to use Dayjs without loading other date libraries
+ *
+ * @example
+ * ```tsx
+ * import { CalendarConfigProviderDayjs, CalendarLocale } from '@mezzanine-ui/react/dayjs';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <CalendarConfigProviderDayjs locale={CalendarLocale.ZH_TW}>
+ *       {children}
+ *     </CalendarConfigProviderDayjs>
+ *   );
+ * }
+ * ```
+ */
+export { CalendarLocale } from '@mezzanine-ui/core/calendar';
+export type { CalendarLocaleValue } from '@mezzanine-ui/core/calendar';
+export { default as CalendarConfigProviderDayjs } from './Calendar/CalendarConfigProviderDayjs';
+export type { CalendarConfigProviderDayjsProps } from './Calendar/CalendarConfigProviderDayjs';

package/dayjs.js

@@ -0,0 +1,2 @@
+export { CalendarLocale } from '@mezzanine-ui/core/calendar';
+export { CalendarConfigProviderDayjs } from './Calendar/CalendarConfigProviderDayjs.js';

package/hooks/useComposeRefs.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { composeRefs } from '../utils/composeRefs.js';
 
 function useComposeRefs(refs) {
-    return useMemo(() => composeRefs(refs), refs);
+    return useMemo(() => composeRefs(refs), [refs]);
 }
 
 export { useComposeRefs };

package/hooks/useLastCallback.js

@@ -5,7 +5,9 @@ function useLastCallback(callback) {
     const lastCallback = useLastValue(callback);
     return useCallback(
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    (...args) => lastCallback.current(...args), []);
+    (...args) => lastCallback.current(...args), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
 }
 
 export { useLastCallback };

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 {};

package/hooks/useScrollLock.js

@@ -0,0 +1,134 @@
+import { useRef, useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+
+// Keep track of multiple scroll locks (for nested modals/overlays)
+let lockCount = 0;
+let originalStyles = {
+    overflow: '',
+    paddingRight: '',
+};
+let scrollPosition = 0;
+function getScrollbarWidth() {
+    if (typeof window === 'undefined')
+        return 0;
+    // Check if there's actually a scrollbar
+    if (document.documentElement.scrollHeight <= window.innerHeight) {
+        return 0;
+    }
+    // Use window.innerWidth - documentElement.clientWidth for more accurate measurement
+    return window.innerWidth - document.documentElement.clientWidth;
+}
+function lock(reserveScrollBarGap = true) {
+    if (typeof document === 'undefined')
+        return;
+    const body = document.body;
+    const scrollbarWidth = reserveScrollBarGap ? getScrollbarWidth() : 0;
+    // Save original styles only on first lock
+    if (lockCount === 0) {
+        originalStyles = {
+            overflow: body.style.overflow,
+            paddingRight: body.style.paddingRight,
+            position: body.style.position,
+            top: body.style.top,
+            width: body.style.width,
+        };
+        scrollPosition = window.scrollY || window.pageYOffset;
+    }
+    lockCount += 1;
+    // Apply lock styles
+    body.style.overflow = 'hidden';
+    // Reserve scrollbar space to prevent layout shift
+    if (reserveScrollBarGap && scrollbarWidth > 0) {
+        const currentPaddingRight = parseInt(window.getComputedStyle(body).paddingRight, 10) || 0;
+        body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
+    }
+    // For iOS Safari - prevent rubber band scrolling
+    // Use position fixed to lock the scroll position
+    if (isIOS()) {
+        body.style.position = 'fixed';
+        body.style.top = `-${scrollPosition}px`;
+        body.style.width = '100%';
+    }
+}
+function unlock() {
+    if (typeof document === 'undefined')
+        return;
+    lockCount = Math.max(lockCount - 1, 0);
+    // Only restore when all locks are released
+    if (lockCount === 0) {
+        const body = document.body;
+        // Restore original styles
+        body.style.overflow = originalStyles.overflow;
+        body.style.paddingRight = originalStyles.paddingRight;
+        if (originalStyles.position !== undefined) {
+            body.style.position = originalStyles.position;
+        }
+        if (originalStyles.top !== undefined) {
+            body.style.top = originalStyles.top;
+        }
+        if (originalStyles.width !== undefined) {
+            body.style.width = originalStyles.width;
+        }
+        // Restore scroll position for iOS
+        if (isIOS() && scrollPosition > 0) {
+            window.scrollTo(0, scrollPosition);
+        }
+        scrollPosition = 0;
+    }
+}
+function isIOS() {
+    if (typeof window === 'undefined')
+        return false;
+    // Modern approach using userAgentData API (when available)
+    if ('userAgentData' in navigator) {
+        const userAgentData = navigator.userAgentData;
+        if (userAgentData === null || userAgentData === void 0 ? void 0 : userAgentData.platform) {
+            return userAgentData.platform === 'iOS';
+        }
+    }
+    // Fallback to userAgent string parsing
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOSDevice = /iphone|ipad|ipod/.test(userAgent);
+    const isSafariOnMac = /macintosh/.test(userAgent) && navigator.maxTouchPoints > 1;
+    return isIOSDevice || isSafariOnMac;
+}
+/**
+ * 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>;
+ * }
+ * ```
+ */
+function useScrollLock(options = {}) {
+    const { enabled = false, reserveScrollBarGap = true } = options;
+    const lockedRef = useRef(false);
+    // Use layout effect to apply scroll lock before paint
+    useIsomorphicLayoutEffect(() => {
+        if (enabled && !lockedRef.current) {
+            lock(reserveScrollBarGap);
+            lockedRef.current = true;
+        }
+        else if (!enabled && lockedRef.current) {
+            unlock();
+            lockedRef.current = false;
+        }
+    }, [enabled, reserveScrollBarGap]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (lockedRef.current) {
+                unlock();
+                lockedRef.current = false;
+            }
+        };
+    }, []);
+}
+
+export { useScrollLock };