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

package/AlertBanner/AlertBanner.d.ts

@@ -0,0 +1,93 @@
+import type { Key, MouseEvent, ReactElement } from 'react';
+import { AlertBannerSeverity } from '@mezzanine-ui/core/alert-banner';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { ButtonPropsBase } from '../Button';
+import { Notifier, NotifierConfig, NotifierData } from '../Notifier';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AlertBannerAction extends Omit<ButtonPropsBase, 'children'> {
+    /**
+     * The text content of the button.
+     */
+    content?: string;
+    /**
+     * Callback when the button is clicked.
+     */
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export type AlertBannerConfigProps = NotifierConfig;
+export interface AlertBannerData extends Omit<NotifierData, 'onClose'>, AlertBannerConfigProps {
+    /**
+     * The action buttons to be rendered on the right side of the banner.
+     * Maximum 2 actions, minimum 0 (will not display if empty).
+     */
+    actions?: AlertBannerAction[];
+    /**
+     * Whether to show the close button.
+     */
+    closable?: boolean;
+    /**
+     * @internal
+     */
+    createdAt?: number;
+    /**
+     * Custom icon. Defaults to severity icon when omitted.
+     */
+    icon?: IconDefinition;
+    /**
+     * Main message displayed in the banner.
+     */
+    message: string;
+    /**
+     * Callback when the banner is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The key of alert banner.
+     */
+    reference?: Key;
+    /**
+     * The severity of the banner.
+     */
+    severity: AlertBannerSeverity;
+}
+export interface AlertBannerProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'title'> {
+    /**
+     * The action buttons to be rendered on the right side of the banner.
+     * Maximum 2 actions, minimum 0 (will not display if empty).
+     */
+    actions?: AlertBannerAction[];
+    /**
+     * Whether to show the close button.
+     */
+    closable?: boolean;
+    /**
+     * Disable portal rendering. Only used internally by grouped rendering.
+     * @internal
+     */
+    disablePortal?: boolean;
+    /**
+     * Custom icon. Defaults to severity icon when omitted.
+     */
+    icon?: IconDefinition;
+    /**
+     * Main message displayed in the banner.
+     */
+    message: string;
+    /**
+     * Callback when the banner is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The severity of the banner.
+     */
+    severity: AlertBannerSeverity;
+}
+export type AlertBannerType = ((props: AlertBannerData) => ReactElement | null) & Notifier<AlertBannerData, AlertBannerConfigProps> & Record<string, (message: AlertBannerData['message'], props?: Omit<AlertBannerData, 'message' | 'severity' | 'icon'> & {
+    key?: Key;
+}) => Key>;
+/**
+ * The react component for `mezzanine` alert banner.
+ */
+export declare const AlertBannerComponent: import("react").ForwardRefExoticComponent<AlertBannerProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const AlertBanner: AlertBannerType;
+export default AlertBanner;

package/AlertBanner/AlertBanner.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, forwardRef, useState, useEffect } from 'react';
+import { alertBannerIcons, alertBannerClasses, alertBannerGroupClasses } from '@mezzanine-ui/core/alert-banner';
+import Button from '../Button/Button.js';
+import DismissButton from '../DismissButton/DismissButton.js';
+import Icon from '../Icon/Icon.js';
+import Portal from '../Portal/Portal.js';
+import cx from 'clsx';
+import { createNotifier } from '../Notifier/createNotifier.js';
+
+function getPriority(severity) {
+    if (severity === 'info') {
+        return 1;
+    }
+    return 0;
+}
+function sortAlertNotifiers(notifiers) {
+    return [...notifiers].sort((a, b) => {
+        const priorityDiff = getPriority(a.severity) - getPriority(b.severity);
+        if (priorityDiff !== 0) {
+            return priorityDiff;
+        }
+        if (a.createdAt !== b.createdAt) {
+            return b.createdAt - a.createdAt;
+        }
+        return 0;
+    });
+}
+/**
+ * The react component for `mezzanine` alert banner.
+ */
+const AlertBannerComponent = forwardRef(function AlertBanner(props, ref) {
+    var _a;
+    const { actions, className, closable = true, disablePortal = false, icon, message, onClose, severity, ...rest } = props;
+    const [visible, setVisible] = useState(true);
+    const handleClose = useCallback(() => {
+        setVisible(false);
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    useEffect(() => {
+        if (actions && actions.length > 2) {
+            console.warn('AlertBanner: actions maximum is 2');
+        }
+    }, [actions]);
+    if (!visible) {
+        return null;
+    }
+    const resolvedIcon = icon !== null && icon !== void 0 ? icon : alertBannerIcons[severity];
+    const showCloseButton = closable !== null && closable !== void 0 ? closable : Boolean(onClose);
+    const validActions = (_a = actions === null || actions === void 0 ? void 0 : actions.slice(0, 2)) !== null && _a !== void 0 ? _a : []; // Maximum support 2 actions
+    const hasActions = validActions.length > 0;
+    const actionsArea = hasActions ? (jsx("div", { className: alertBannerClasses.actions, children: validActions.map((action, index) => {
+            const { content, onClick, ...buttonProps } = action;
+            return (jsx(Button, { onClick: onClick, size: "minor", variant: "inverse", ...buttonProps, children: content }, index));
+        }) })) : null;
+    const dismissButtonArea = showCloseButton ? (jsx(DismissButton, { className: alertBannerClasses.close, onClick: handleClose, type: "standard", variant: "inverse" })) : null;
+    const { maxCount: _maxCount, instanceKey: _instanceKey, ...restProps } = rest;
+    const content = (jsxs("div", { ...restProps, ref: ref, "aria-live": "polite", className: cx(alertBannerClasses.host, alertBannerClasses.severity(severity), className), role: "status", children: [jsxs("div", { className: alertBannerClasses.body, children: [jsx(Icon, { className: alertBannerClasses.icon, icon: resolvedIcon }), jsx("span", { className: alertBannerClasses.message, children: message })] }), jsxs("div", { className: alertBannerClasses.controls, children: [actionsArea, dismissButtonArea] })] }));
+    if (disablePortal) {
+        return content;
+    }
+    return jsx(Portal, { layer: "alert", children: content });
+});
+const AlertBanner = ((props) => {
+    const { message, reference, onClose: onCloseProp, maxCount: _maxCount, createdAt: _createdAt, ...restProps } = props;
+    const onClose = useCallback(() => {
+        if (onCloseProp) {
+            onCloseProp();
+        }
+        if (reference) {
+            AlertBanner.remove(reference);
+        }
+    }, [onCloseProp, reference]);
+    return (jsx(AlertBannerComponent, { ...restProps, message: message, onClose: onClose }));
+});
+function initializeAlertBannerNotifier() {
+    const notifier = createNotifier({
+        maxCount: undefined,
+        render: (notifierProps) => {
+            const { key, reference: _reference, onClose: onCloseProp, createdAt: _createdAt, ...restProps } = notifierProps;
+            return (jsx(AlertBannerComponent, { ...restProps, disablePortal: true, onClose: () => {
+                    if (onCloseProp) {
+                        onCloseProp();
+                    }
+                    notifier.remove(key);
+                } }));
+        },
+        renderContainer: (children) => (jsx(Portal, { layer: "alert", children: jsx("div", { className: alertBannerGroupClasses.host, children: children }) })),
+        sortBeforeUpdate: sortAlertNotifiers,
+    });
+    return notifier;
+}
+const alertBannerNotifier = initializeAlertBannerNotifier();
+AlertBanner.add = (notifier) => {
+    var _a;
+    return alertBannerNotifier.add({
+        ...notifier,
+        createdAt: (_a = notifier.createdAt) !== null && _a !== void 0 ? _a : Date.now(),
+    });
+};
+AlertBanner.config = alertBannerNotifier.config;
+AlertBanner.destroy = alertBannerNotifier.destroy;
+AlertBanner.remove = alertBannerNotifier.remove;
+AlertBanner.getConfig = alertBannerNotifier.getConfig;
+const severities = [
+    // support severity: info, warning, error
+    {
+        key: 'info',
+        icon: alertBannerIcons.info,
+    },
+    {
+        key: 'warning',
+        icon: alertBannerIcons.warning,
+    },
+    {
+        key: 'error',
+        icon: alertBannerIcons.error,
+    },
+];
+const validSeverities = ['info', 'warning', 'error'];
+severities.forEach((severity) => {
+    AlertBanner[severity.key] = (message, props) => AlertBanner.add({
+        ...props,
+        message,
+        severity: validSeverities.includes(severity.key)
+            ? severity.key
+            : 'info',
+        icon: severity.icon,
+    });
+});
+
+export { AlertBannerComponent, AlertBanner as default };

package/AlertBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './AlertBanner';
+export type { AlertBannerProps } from './AlertBanner';

package/AlertBanner/index.js

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

package/{Overlay/Overlay.d.ts → Backdrop/Backdrop.d.ts}

@@ -1,22 +1,18 @@
 import { MouseEventHandler } from 'react';
+import { BackdropVariant } from '@mezzanine-ui/core/backdrop';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { PortalProps } from '../Portal';
-export interface OverlayProps extends Pick<PortalProps, 'children' | 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
+export interface BackdropProps extends Pick<PortalProps, 'children' | 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * Controls whether to disable closing element while backdrop clicked.
      * @default false
      */
     disableCloseOnBackdropClick?: boolean;
     /**
-     * Whether to hide backdrop.
+     * Controls whether to disable scroll locking when backdrop is open.
      * @default false
      */
-    hideBackdrop?: boolean;
-    /**
-     * Whether to set backdrop invisible
-     * @default false
-     */
-    invisibleBackdrop?: boolean;
+    disableScrollLock?: boolean;
     /**
      * Click handler for backdrop.
      */
@@ -25,19 +21,19 @@ export interface OverlayProps extends Pick<PortalProps, 'children' | 'container'
      * Callback fired while the element will be closed.
      */
     onClose?: VoidFunction;
-    /**
-     * Overlay is use on top of a component(surface)
-     * @default false
-     */
-    onSurface?: boolean;
     /**
      * Controls whether to show the element.
      * @default false
      */
     open?: boolean;
+    /**
+     * The variant of backdrop.
+     * @default 'dark'
+     */
+    variant?: BackdropVariant;
 }
 /**
- * The react component for `mezzanine` overlay.
+ * The react component for `mezzanine` backdrop.
  */
-declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Overlay;
+declare const Backdrop: import("react").ForwardRefExoticComponent<BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Backdrop;

package/Backdrop/Backdrop.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { backdropClasses } from '@mezzanine-ui/core/backdrop';
+import { useScrollLock } from '../hooks/useScrollLock.js';
+import Portal from '../Portal/Portal.js';
+import Fade from '../Transition/Fade.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` backdrop.
+ */
+const Backdrop = forwardRef(function Backdrop(props, ref) {
+    const { children, className, container, disableCloseOnBackdropClick = false, disablePortal, disableScrollLock = false, onBackdropClick, onClose, open = false, variant = 'dark', ...rest } = props;
+    // Lock body scroll when backdrop is open
+    useScrollLock({ enabled: open && !disableScrollLock });
+    // When using custom container or disablePortal, overlay should be absolutely positioned
+    // When using default Portal (to #mzn-portal-container), overlay uses relative positioning
+    const applyAbsolutePosition = Boolean(disablePortal || container);
+    return (jsx(Portal, { container: container, disablePortal: disablePortal, layer: "default", children: jsxs("div", { ...rest, ref: ref, "aria-hidden": !open, className: cx(backdropClasses.host, {
+                [backdropClasses.hostAbsolute]: applyAbsolutePosition,
+                [backdropClasses.hostOpen]: open,
+            }, className), role: "presentation", children: [jsx(Fade, { in: open, children: jsx("div", { "aria-hidden": "true", className: cx(backdropClasses.backdrop, backdropClasses.backdropVariant(variant)), onClick: (event) => {
+                            if (!disableCloseOnBackdropClick && onClose) {
+                                onClose();
+                            }
+                            if (onBackdropClick) {
+                                onBackdropClick(event);
+                            }
+                        } }) }), jsx("div", { className: backdropClasses.content, children: children })] }) }));
+});
+
+export { Backdrop as default };

package/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export type { BackdropProps } from './Backdrop';
+export { default } from './Backdrop';

package/Backdrop/index.js

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

package/Badge/Badge.d.ts

@@ -1,18 +1,24 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface BadgeProps extends Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'color'> {
-    /**
-     * It `true`, ignore passed children and display as a dot.
-     * @default false
-     */
-    dot?: boolean;
-    /**
-     * If the children is number and greater than overflowCount, it will show overflowCount suffixed with a "+".
-     * @default 99
-     */
-    overflowCount?: number;
-}
+import { BadgeCountVariant } from '@mezzanine-ui/core/badge';
 /**
  * The react component for `mezzanine` badge.
  */
-declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Badge: import("react").ForwardRefExoticComponent<(Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
+    children?: never;
+    count: number;
+    overflowCount?: number;
+    text?: never;
+    variant: BadgeCountVariant;
+}, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
+    children?: never;
+    count?: never;
+    overflowCount?: never;
+    text?: string;
+    variant: import("@mezzanine-ui/core/badge").BadgeDotVariant;
+}, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
+    children?: import("react").ReactNode;
+    count?: never;
+    overflowCount?: never;
+    text?: never;
+    variant: import("@mezzanine-ui/core/badge").BadgeDotVariant;
+}, "ref">) & import("react").RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/Badge/Badge.js

@@ -1,27 +1,25 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { badgeClasses } from '@mezzanine-ui/core/badge';
 import cx from 'clsx';
 
+const isCountVariant = (variant) => [
+    'count-alert',
+    'count-inactive',
+    'count-inverse',
+    'count-brand',
+    'count-info',
+].includes(variant);
 /**
  * The react component for `mezzanine` badge.
  */
 const Badge = forwardRef(function Badge(props, ref) {
-    const { children: childrenProp, className, dot = false, overflowCount = 99, ...rest } = props;
-    let children;
-    if (!dot) {
-        if (typeof childrenProp === 'number') {
-            const count = childrenProp;
-            children = count > overflowCount ? `${overflowCount}+` : count;
-        }
-        else {
-            children = childrenProp;
-        }
-    }
-    return (jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, {
-            [badgeClasses.dot]: dot,
-            [badgeClasses.hide]: !dot && children === 0,
-        }, className), children: children }));
+    const { children, count, className, overflowCount, text, variant, ...rest } = props;
+    return (jsxs("div", { className: badgeClasses.container(!!children), children: [jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
+                    ? overflowCount && count > overflowCount
+                        ? `${overflowCount}+`
+                        : count
+                    : text }), children] }));
 });
 
 export { Badge as default };

package/Badge/BadgeContainer.d.ts

@@ -1,7 +1,7 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export type BadgeContainerProps = NativeElementPropsWithoutKeyAndRef<'span'>;
 /**
- * The react component for `mezzanine` badge container.
+ * @deprecated Use `Badge` component instead.
  */
 declare const BadgeContainer: import("react").ForwardRefExoticComponent<BadgeContainerProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default BadgeContainer;

package/Badge/BadgeContainer.js

@@ -4,7 +4,7 @@ import { badgeClasses } from '@mezzanine-ui/core/badge';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` badge container.
+ * @deprecated Use `Badge` component instead.
  */
 const BadgeContainer = forwardRef(function BadgeContainer(props, ref) {
     const { children, className, ...rest } = props;

package/Badge/index.d.ts

@@ -1,4 +1,3 @@
-export type { BadgeProps } from './Badge';
+export type { BadgeProps } from './typings';
 export { default } from './Badge';
 export { default as BadgeContainer } from './BadgeContainer';
-export type { BadgeContainerProps } from './BadgeContainer';

package/Badge/typings.d.ts

@@ -0,0 +1,42 @@
+import { BadgeCountVariant, BadgeDotVariant } from '@mezzanine-ui/core/badge';
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from 'react/src/utils/jsx-types';
+export type BadgeProps = Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'children'> & BadgeVariantProps;
+type BadgeVariantProps = BadgeCountProps | BadgeDotWithTextProps | BadgeDotProps;
+type BadgeCountProps = {
+    /** Badge renders internally, so children is disabled for count badges. */
+    children?: never;
+    /** Base number rendered inside the badge when using the count variant. */
+    count: number;
+    /**
+     * If the children is number and greater than overflowCount, it will show overflowCount suffixed with a "+".
+     * Only available on count badge.
+     */
+    overflowCount?: number;
+    /** Additional label is not supported for count badges. */
+    text?: never;
+    /** Controls the visual style (dot vs count variants) and enables the related overflow/hide rules. */
+    variant: BadgeCountVariant;
+};
+type BadgeDotWithTextProps = {
+    /** Dot badges with text do not render children content. */
+    children?: never;
+    /** Count is disabled when rendering dot badges. */
+    count?: never;
+    /** Overflow handling is only meaningful in count mode. */
+    overflowCount?: never;
+    /** Optional string displayed next to the dot badge. */
+    text?: string;
+    variant: BadgeDotVariant;
+};
+type BadgeDotProps = {
+    /** Content rendered next to the dot badge, commonly an anchor or icon. */
+    children?: ReactNode;
+    /** Count is disabled when rendering dot badges. */
+    count?: never;
+    /** Overflow handling is only meaningful in count mode. */
+    overflowCount?: never;
+    text?: never;
+    variant: BadgeDotVariant;
+};
+export {};

package/Button/Button.js

@@ -17,14 +17,14 @@ const Button = forwardRef(function Button(props, ref) {
     const hasLeadingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'leading' && !isIconOnly;
     const hasTrailingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'trailing' && !isIconOnly;
     // Loading 狀態下的 icon
-    const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true });
+    const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true, size: 16 });
     // 渲染 icon 內容
     const renderIcon = () => {
         if (loading) {
             return loadingIcon;
         }
         if (icon) {
-            return jsx(Icon, { icon: icon.src });
+            return jsx(Icon, { icon: icon.src, size: 16 });
         }
         return null;
     };

package/Calendar/CalendarContext.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 
 const CalendarContext = createContext(undefined);
 function useCalendarContext() {

package/DismissButton/DismissButton.d.ts

@@ -0,0 +1,34 @@
+import { DismissButtonEmbeddedVariant, DismissButtonStandardVariant } from '@mezzanine-ui/core/dismiss-button';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type DismissButtonCommonProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'onClick' | 'type'> & {
+    /**
+     * Called when user clicks or activates the button (via mouse or keyboard).
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+type DismissButtonStandardProps = DismissButtonCommonProps & {
+    /**
+     * Dismiss Button Contextual type.
+     */
+    type?: 'standard';
+    /**
+     * Visual variant for standard type.
+     */
+    variant?: DismissButtonStandardVariant;
+};
+type DismissButtonEmbeddedProps = DismissButtonCommonProps & {
+    /**
+     * Dismiss Button Contextual type.
+     */
+    type: 'embedded';
+    /**
+     * Visual variant for embedded type.
+     */
+    variant?: DismissButtonEmbeddedVariant;
+};
+export type DismissButtonProps = DismissButtonEmbeddedProps | DismissButtonStandardProps;
+/**
+ * Mezzanine dismiss/close button.
+ */
+declare const DismissButton: import("react").ForwardRefExoticComponent<DismissButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default DismissButton;

package/DismissButton/DismissButton.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CloseIcon } from '@mezzanine-ui/icons';
+import { dismissButtonClasses } from '@mezzanine-ui/core/dismiss-button';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * Mezzanine dismiss/close button.
+ */
+const DismissButton = forwardRef(function DismissButton(props, ref) {
+    const { className, onClick, type: typeProp, variant, ...rest } = props;
+    const type = typeProp !== null && typeProp !== void 0 ? typeProp : 'standard';
+    const resolvedVariant = variant !== null && variant !== void 0 ? variant : (type === 'standard' ? 'base' : 'contrast');
+    return (jsx("button", { ...rest, ref: ref, "aria-label": "Close", className: cx(dismissButtonClasses.host, dismissButtonClasses.type(type), dismissButtonClasses.variant(resolvedVariant), className), onClick: onClick, type: "button", children: jsx(Icon, { className: dismissButtonClasses.icon, icon: CloseIcon }) }));
+});
+
+export { DismissButton as default };

package/DismissButton/index.d.ts

@@ -0,0 +1,3 @@
+import DismissButton from './DismissButton';
+export type { DismissButtonProps } from './DismissButton';
+export default DismissButton;

package/DismissButton/index.js

@@ -0,0 +1,5 @@
+import DismissButton from './DismissButton.js';
+
+
+
+export { DismissButton as default };

package/Drawer/Drawer.js

@@ -5,14 +5,14 @@ import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js'
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
+    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
     const slideFadeDirection = useMemo(() => ({
         top: 'down',
         left: 'right',
         right: 'left',
         bottom: 'up',
     }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
 });
 
 export { Drawer as default };

package/Dropdown/Dropdown.js

@@ -1,29 +1,19 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
+import { size } from '@floating-ui/react-dom';
 import { useClickAway } from '../hooks/useClickAway.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Popper from '../Popper/Popper.js';
 
-const popperOptions = {
-    modifiers: [
-        {
-            name: 'sameWidth',
-            enabled: true,
-            phase: 'beforeWrite',
-            requires: ['computeStyles'],
-            fn: ({ state }) => {
-                const reassignState = state;
-                reassignState.styles.popper.width = 'auto';
-                reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
-            },
-            effect: ({ state }) => {
-                const reassignState = state;
-                reassignState.elements.popper.style.width = 'auto';
-                reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
-            },
-        },
-    ],
-};
+// Middleware to make the dropdown menu have the same width as the reference element
+const sameWidthMiddleware = size({
+    apply({ rects, elements }) {
+        Object.assign(elements.floating.style, {
+            width: 'auto',
+            minWidth: `${rects.reference.width}px`,
+        });
+    },
+});
 const Dropdown = forwardRef(function Dropdown(props, ref) {
     var _a;
     const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
@@ -31,7 +21,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     const popperRef = useRef(null);
     const composedRef = useComposeRefs([ref, popperRef]);
     const open = popperProps === null || popperProps === void 0 ? void 0 : popperProps.open;
-    const modifiers = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.modifiers) || [];
+    const middleware = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.middleware) || [];
     useClickAway(() => {
         if (!open || disableClickAway || !onClose) {
             return;
@@ -45,7 +35,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, { ...popperProps, ref: composedRef, ...rest, anchor: anchor, options: {
                     placement: 'top-start',
                     ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
-                    modifiers: [...(popperOptions.modifiers || []), ...modifiers],
+                    middleware: [sameWidthMiddleware, ...middleware],
                 }, children: menu })] }));
 });