@doist/reactist 22.0.0-beta → 22.0.0

package/es/toast/use-toasts.js

@@ -92,7 +92,8 @@ function ToastsProvider({
   defaultAutoDismissDelay = 10
   /* seconds */
   ,
-  defaultDismissLabel = 'Close'
+  defaultDismissLabel = 'Close',
+  containerClassName
 }) {
   const [toasts, setToasts] = React__default.useState([]);
   const {
@@ -126,11 +127,12 @@ function ToastsProvider({
   return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
     value: showToast
   }, children, /*#__PURE__*/React__default.createElement(Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
-    className: styles.stackedToastsView,
+    className: [styles.stackedToastsView, containerClassName],
     position: "fixed",
     width: "full",
     paddingX: padding,
-    paddingBottom: padding
+    paddingBottom: padding,
+    "data-testid": "toasts-container"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     space: "medium"
   }, toasts.map(_ref => {

package/es/toast/use-toasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, removeToast, stopTimeout, timeoutRunning],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n                removeToast()\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={styles.stackedToastsView}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","removeToast","useEffect","setupAutoDismiss","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","handleActionClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}
+{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, removeToast, stopTimeout, timeoutRunning],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n                removeToast()\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n\n    /**\n     * Custom classname for the toasts container, if you need to fine-tune the position or other styles\n     */\n    containerClassName?: string\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n    containerClassName,\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={[styles.stackedToastsView, containerClassName]}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                        data-testid=\"toasts-container\"\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","removeToast","useEffect","setupAutoDismiss","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","handleActionClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}

package/lib/index.d.ts

@@ -38,4 +38,3 @@ export { default as DeprecatedButton } from './components/deprecated-button';
 export { default as DeprecatedDropdown } from './components/deprecated-dropdown';
 export { default as DeprecatedInput } from './components/deprecated-input';
 export { default as DeprecatedSelect } from './components/deprecated-select';
-export * from './deprecated-modal';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),t=require("./columns/columns.js"),r=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),d=require("./tooltip/tooltip.js"),n=require("./button/button.js"),p=require("./alert/alert.js"),u=require("./banner/banner.js"),l=require("./loading/loading.js"),x=require("./notice/notice.js"),c=require("./text/text.js"),M=require("./toast/static-toast.js"),j=require("./toast/use-toasts.js"),q=require("./heading/heading.js"),b=require("./prose/prose.js"),T=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),S=require("./text-field/text-field.js"),B=require("./password-field/password-field.js"),D=require("./select-field/select-field.js"),f=require("./switch-field/switch-field.js"),g=require("./text-area/text-area.js"),h=require("./avatar/avatar.js"),C=require("./badge/badge.js"),y=require("./modal/modal.js"),P=require("./tabs/tabs.js"),v=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),L=require("./components/deprecated-dropdown/index.js"),I=require("./components/color-picker/color-picker.js"),w=require("./components/color-picker/index.js"),A=require("./components/keyboard-shortcut/index.js"),H=require("./components/key-capturer/key-capturer.js"),O=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),G=require("./components/time/index.js"),K=require("./components/deprecated-input/index.js"),R=require("./components/deprecated-select/index.js"),_=require("./deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=t.Column,exports.Columns=t.Columns,exports.Divider=r.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=d.Tooltip,exports.Button=n.Button,exports.Alert=p.Alert,exports.Banner=u.Banner,exports.Loading=l.Loading,exports.Notice=x.Notice,exports.Text=c.Text,exports.StaticToast=M.StaticToast,exports.Toast=j.Toast,exports.ToastsProvider=j.ToastsProvider,exports.useToasts=j.useToasts,exports.Heading=q.Heading,exports.Prose=b.Prose,exports.ButtonLink=T.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=S.TextField,exports.PasswordField=B.PasswordField,exports.SelectField=D.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=g.TextArea,exports.Avatar=h.Avatar,exports.Badge=C.Badge,exports.Modal=y.Modal,exports.ModalActions=y.ModalActions,exports.ModalBody=y.ModalBody,exports.ModalCloseButton=y.ModalCloseButton,exports.ModalFooter=y.ModalFooter,exports.ModalHeader=y.ModalHeader,exports.Tab=P.Tab,exports.TabAwareSlot=P.TabAwareSlot,exports.TabList=P.TabList,exports.TabPanel=P.TabPanel,exports.Tabs=P.Tabs,exports.ContextMenuTrigger=v.ContextMenuTrigger,exports.IconMenuItem=v.IconMenuItem,exports.IconsMenuGroup=v.IconsMenuGroup,exports.Menu=v.Menu,exports.MenuButton=v.MenuButton,exports.MenuGroup=v.MenuGroup,exports.MenuItem=v.MenuItem,exports.MenuList=v.MenuList,exports.SubMenu=v.SubMenu,exports.SubMenuItem=v.SubMenuItem,exports.SubMenuList=v.SubMenuList,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=L.default,exports.COLORS=I.COLORS,exports.ColorPicker=w.default,exports.KeyboardShortcut=A.default,exports.SUPPORTED_KEYS=H.SUPPORTED_KEYS,exports.KeyCapturer=O.default,exports.ProgressBar=E.default,exports.Time=G.default,exports.DeprecatedInput=K.default,exports.DeprecatedSelect=R.default,exports.DeprecatedModal=_.DeprecatedModal,exports.DeprecatedModalActions=_.DeprecatedModalActions,exports.DeprecatedModalBody=_.DeprecatedModalBody,exports.DeprecatedModalCloseButton=_.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=_.DeprecatedModalFooter,exports.DeprecatedModalHeader=_.DeprecatedModalHeader;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),r=require("./columns/columns.js"),t=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),n=require("./tooltip/tooltip.js"),d=require("./button/button.js"),u=require("./alert/alert.js"),p=require("./banner/banner.js"),x=require("./loading/loading.js"),l=require("./notice/notice.js"),c=require("./text/text.js"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),b=require("./heading/heading.js"),T=require("./prose/prose.js"),M=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),f=require("./text-field/text-field.js"),S=require("./password-field/password-field.js"),g=require("./select-field/select-field.js"),B=require("./switch-field/switch-field.js"),h=require("./text-area/text-area.js"),P=require("./avatar/avatar.js"),v=require("./badge/badge.js"),C=require("./modal/modal.js"),y=require("./tabs/tabs.js"),w=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),L=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),D=require("./components/color-picker/index.js"),H=require("./components/keyboard-shortcut/index.js"),O=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),K=require("./components/time/index.js"),R=require("./components/deprecated-input/index.js"),_=require("./components/deprecated-select/index.js");exports.Box=e.Box,exports.Column=r.Column,exports.Columns=r.Columns,exports.Divider=t.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=n.Tooltip,exports.Button=d.Button,exports.Alert=u.Alert,exports.Banner=p.Banner,exports.Loading=x.Loading,exports.Notice=l.Notice,exports.Text=c.Text,exports.StaticToast=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=b.Heading,exports.Prose=T.Prose,exports.ButtonLink=M.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=f.TextField,exports.PasswordField=S.PasswordField,exports.SelectField=g.SelectField,exports.SwitchField=B.SwitchField,exports.TextArea=h.TextArea,exports.Avatar=P.Avatar,exports.Badge=v.Badge,exports.Modal=C.Modal,exports.ModalActions=C.ModalActions,exports.ModalBody=C.ModalBody,exports.ModalCloseButton=C.ModalCloseButton,exports.ModalFooter=C.ModalFooter,exports.ModalHeader=C.ModalHeader,exports.Tab=y.Tab,exports.TabAwareSlot=y.TabAwareSlot,exports.TabList=y.TabList,exports.TabPanel=y.TabPanel,exports.Tabs=y.Tabs,exports.ContextMenuTrigger=w.ContextMenuTrigger,exports.Menu=w.Menu,exports.MenuButton=w.MenuButton,exports.MenuGroup=w.MenuGroup,exports.MenuItem=w.MenuItem,exports.MenuList=w.MenuList,exports.SubMenu=w.SubMenu,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=L.default,exports.COLORS=A.COLORS,exports.ColorPicker=D.default,exports.KeyboardShortcut=H.default,exports.SUPPORTED_KEYS=O.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=E.default,exports.Time=K.default,exports.DeprecatedInput=R.default,exports.DeprecatedSelect=_.default;
 //# sourceMappingURL=index.js.map

package/lib/menu/index.d.ts

@@ -1 +1,2 @@
-export * from './menu';
+export { Menu, MenuButton, ContextMenuTrigger, MenuList, MenuItem, SubMenu, MenuGroup, } from './menu';
+export type { MenuItemProps, MenuGroupProps } from './menu';

package/lib/menu/menu.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as Ariakit from 'ariakit/menu';
+import './menu.less';
 declare type NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>;
 declare type MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {
     /**
@@ -16,102 +17,33 @@ declare type MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {
      */
     onItemSelect?: (value: string | null | undefined) => void;
 };
-declare type MenuHandle = {
-    open: () => void;
-};
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
  */
-declare const Menu: React.ForwardRefExoticComponent<Omit<Ariakit.MenuStateProps<{
-    [x: string]: string | number | boolean | (string | number)[];
-}>, "visible"> & {
-    /**
-     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a
-     * `MenuButton` that triggers the menu to be opened or closed.
-     */
-    children: React.ReactNode;
-    /**
-     * An optional callback that will be called back whenever a menu item is selected. It receives
-     * the `value` of the selected `MenuItem`.
-     *
-     * If you pass down this callback, it is recommended that you properly memoize it so it does not
-     * change on every render.
-     */
-    onItemSelect?: ((value: string | null | undefined) => void) | undefined;
-} & React.RefAttributes<MenuHandle>>;
+declare function Menu({ children, onItemSelect, ...props }: MenuProps): JSX.Element;
 declare type MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>;
 /**
  * A button to toggle a dropdown menu open or closed.
  */
 declare const MenuButton: import("../utils/polymorphism").PolymorphicComponent<"button", MenuButtonProps, "obfuscateClassName">;
-declare type SubMenuItemProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as' | 'children'> & Pick<MenuItemProps, 'label' | 'icon'>;
-/**
- * A menu item to toggle a sub-menu open or closed.
- */
-declare const SubMenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", SubMenuItemProps, "obfuscateClassName">;
 declare const ContextMenuTrigger: import("../utils/polymorphism").PolymorphicComponent<"div", unknown, "obfuscateClassName">;
 declare type MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>;
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
 declare const MenuList: import("../utils/polymorphism").PolymorphicComponent<"div", MenuListProps, "obfuscateClassName">;
-/**
- * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.
- */
-declare const SubMenuList: import("../utils/polymorphism").PolymorphicComponent<"div", MenuListProps, "obfuscateClassName">;
 declare type MenuItemProps = {
     /**
-     * An optional value given to this menu item.
-     *
-     * It is passed on to the parent `Menu`'s `onItemSelect` when you provide that instead of (or
-     * alongside) providing individual `onSelect` callbacks to each menu item.
+     * An optional value given to this menu item. It is passed on to the parent `Menu`'s
+     * `onItemSelect` when you provide that instead of (or alongside) providing individual
+     * `onSelect` callbacks to each menu item.
      */
     value?: string;
     /**
-     * The menu item's content.
-     *
-     * Prefer using `label` instead. In addition to `label`, you can also use `description`, `icon`
-     * and `shortcut`, to provide richer content inside the menu item.
-     *
-     * However, you can still use `children` to provide arbitrary content inside the menu item. You
-     * can even combine `children` with the other props to provide a richer menu item. The
-     * `children` content will be rendered first, followed by the regular menu item content
-     * generated using the `label`, `description`, `icon` and `shortcut` props (if the `label` is
-     * present).
-     */
-    children?: React.ReactNode;
-    /**
-     * The menu item's label.
-     */
-    label?: NonNullable<React.ReactNode>;
-    /**
-     * The menu item's description, typically used to provide additional information about what the
-     * menu item does.
-     *
-     * When used, it is rendered below the label. The label is also shown more prominently (e.g.
-     * using bold text), while the description is rendered using text in secondary tone.
-     *
-     * Therefore, for the description to be rendered, you must also provide a `label`.
-     */
-    description?: React.ReactNode;
-    /**
-     * An optional icon to render next to the menu item's label.
-     *
-     * For the icon to be rendered, you must also provide a `label`.
-     */
-    icon?: NonNullable<React.ReactNode>;
-    /**
-     * An optional element to render to the right of the menu item's label. It is often used to
-     * show a keyboard shortcut for the menu item.
-     *
-     * For the shortcut to be rendered, you must also provide a `label`.
-     */
-    shortcut?: React.ReactNode;
-    /**
-     * The tone to use for the menu item.
+     * The content inside the menu item.
      */
-    tone?: 'normal' | 'destructive';
+    children: React.ReactNode;
     /**
      * When `true` the menu item is disabled and won't be selectable or be part of the keyboard
      * navigation across the menu options.
@@ -158,71 +90,32 @@ declare type MenuItemProps = {
 declare const MenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", MenuItemProps, "obfuscateClassName">;
 declare type SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>;
 /**
- * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a
- * sub-menu.
- *
- * Its children are expected to be exactly two elements, in the following order:
+ * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
+ * a sub-menu.
  *
- * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.
- * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.
- *
- * ## Usage
+ * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
+ * `MenuList`).
  *
  * ```jsx
- * <Menu>
- *   <MenuButton>Menu</MenuButton>
+ * <MenuItem label="Edit profile" />
+ * <SubMenu>
+ *   <MenuButton>More options</MenuButton>
  *   <MenuList>
- *     <MenuItem label="Item 1" />
- *     <MenuItem label="Item 2" />
- *     <SubMenu>
- *       <SubMenuItem label="Submenu" />
- *       <SubMenuList>
- *         <MenuItem label="Submenu Item 1" />
- *         <MenuItem label="Submenu Item 2" />
- *       </SubMenuList>
- *     </SubMenu>
+ *     <MenuItem label="Preferences" />
+ *     <MenuItem label="Sign out" />
  *   </MenuList>
- * </Menu>
+ * </SubMenu>
  * ```
+ *
+ * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
+ * opening a sub-menu with the menu items list below it.
  */
 declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>>;
 declare type MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {
     /**
      * A label to be shown visually and also used to semantically label the group.
      */
-    label: NonNullable<React.ReactNode>;
-    /**
-     * An optional info element to be shown to the right of the label.
-     *
-     * This is useful and often used to:
-     * - Provide a link to any documentation related to the menu items in the group
-     * - Show a keyboard shortcut that triggers the menu items in the group
-     *
-     * It is strongly recommended that this should be a icon-only element. It is also strongly
-     * recommended that, when using it to provide a link, you use the very `IconMenuItem` component
-     * to make the link be yet another menu item accessible in the menu via keyboard navigation.
-     * Here's an example of how to do that:
-     *
-     * ```jsx
-     * <MenuGroup
-     *   label="A group of related options"
-     *   info={
-     *     <IconMenuItem
-     *       label="Help about this group of options"
-     *       icon="ℹ️"
-     *       as="a"
-     *       href="http://help.example.com"
-     *       target="_blank"
-     *       rel="noreferrer noopener"
-     *     />
-     *   }
-     * >
-     *   <MenuItem label="First option" icon={<FirstIcon />} />
-     *   <MenuItem label="Second option" icon={<SecondIcon />} />
-     * </MenuGroup>
-     * ```
-     */
-    info?: React.ReactNode;
+    label: string;
 };
 /**
  * A way to semantically group some menu items.
@@ -231,38 +124,5 @@ declare type MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {
  * before and/or after the group if you so wish.
  */
 declare const MenuGroup: import("../utils/polymorphism").PolymorphicComponent<"div", MenuGroupProps, "obfuscateClassName">;
-declare type IconMenuItemProps = Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onSelect' | 'onClick'> & {
-    /**
-     * A label for assistive technologies to describe the menu item.
-     *
-     * When not provided, the `label` is used. But this is useful when you want the tooltip label
-     * to be different from the label for assistive technologies.
-     */
-    'aria-label'?: string;
-    /**
-     * The menu item's label, which is not shown visually on the menu item, but it is used to
-     * show a tooltip for the menu item when hovered or focused.
-     *
-     * It is also used as the semantic label for assistive technologies, unless you provide an
-     * `aria-label` as well.
-     */
-    label: string;
-    /**
-     * A description for assistive technologies to describe the menu item.
-     */
-    description?: React.ReactNode;
-    /**
-     * The icon to show on the menu item.
-     */
-    icon: NonNullable<React.ReactNode>;
-};
-/**
- * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.
- */
-declare const IconMenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", IconMenuItemProps, "obfuscateClassName">;
-/**
- * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.
- */
-declare const IconsMenuGroup: import("../utils/polymorphism").PolymorphicComponent<"div", MenuGroupProps, "obfuscateClassName">;
-export { ContextMenuTrigger, IconMenuItem, IconsMenuGroup, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu, SubMenuItem, SubMenuList, };
-export type { IconMenuItemProps, MenuButtonProps, MenuGroupProps, MenuHandle, MenuItemProps, MenuListProps, MenuProps, SubMenuItemProps, SubMenuProps, };
+export { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup };
+export type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps };

package/lib/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=(e(l),e(require("classnames"))),o=require("../utils/polymorphism.js"),a=require("../box/box.js"),r=require("../tooltip/tooltip.js"),c=require("../utils/common-helpers.js"),i=require("../text/text.js"),s=require("ariakit/portal"),u=require("ariakit/menu"),d=require("./menu.module.css.js");const m=["children","onItemSelect"],p=["exceptionallySetClassName"],b=["exceptionallySetClassName","label","icon"],f=["as"],h=["exceptionallySetClassName","modal"],x=["exceptionallySetClassName","modal"],S=["value","label","description","icon","shortcut","tone","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],C=["label","info","children","exceptionallySetClassName"],y=["value","label","description","icon","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],j=["children"],v=l.createContext({}),E=l.forwardRef((function(e,n){let{children:o,onItemSelect:a}=e,r=t.objectWithoutProperties(e,m);const[c,i]=l.useState(null),s=l.useMemo(()=>c?()=>c:void 0,[c]),d=u.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:s},r));l.useEffect(()=>{d.open||i(null)},[d.open]),l.useImperativeHandle(n,()=>({open:d.show}));const p=l.useCallback((function(e){a&&a(e)}),[a]),b=l.useMemo(()=>({state:d,handleItemSelect:p,handleAnchorRectChange:i}),[d,p]);return l.createElement(v.Provider,{value:b},o)})),I=o.polymorphicComponent((function(e,n){let{exceptionallySetClassName:o}=e,a=t.objectWithoutProperties(e,p);const{state:r}=l.useContext(v);return l.createElement(u.MenuButton,t.objectSpread2(t.objectSpread2({},a),{},{state:r,ref:n,className:o}))}));function M({label:e,description:t,icon:n,shortcut:o,id:r}){return e?l.createElement(a.Box,{display:"flex",gap:"small",alignItems:"center",width:"full","aria-hidden":!0},n?l.createElement("div",{className:d.default.menuItemIcon},n):null,l.createElement(a.Box,{display:"inlineFlex",flexDirection:"column",gap:"xsmall",paddingY:"xsmall",alignItems:"flexStart",overflow:"hidden",flexGrow:1},l.createElement(i.Text,{id:r+"-label",weight:t?"semibold":"regular",size:"copy",lineClamp:1,exceptionallySetClassName:d.default.menuItemLabel},e),t?l.createElement(i.Text,{id:r+"-description",size:"copy",tone:"secondary",exceptionallySetClassName:d.default.menuItemDescription},t):null),o?l.createElement("div",null,o):null):null}function N(){return l.createElement("svg",{width:"24",height:"24"},l.createElement("path",{d:"M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z",fill:"currentColor",fillRule:"evenodd"}))}const g=o.polymorphicComponent((function(e,o){let{exceptionallySetClassName:a,label:r,icon:i}=e,s=t.objectWithoutProperties(e,b);const m=c.useId(s.id),{state:p}=l.useContext(v);return l.createElement(u.MenuButton,t.objectSpread2(t.objectSpread2({"aria-labelledby":r&&!s["aria-label"]?m+"-label":void 0},s),{},{state:p,ref:o,className:n(d.default.menuItem,a)}),l.createElement(M,{id:m,icon:i,label:r,shortcut:l.createElement(N,null)}))})),k=o.polymorphicComponent((function(e,n){let{as:o="div"}=e,a=t.objectWithoutProperties(e,f);const{handleAnchorRectChange:r,state:c}=l.useContext(v),i=l.useCallback(e=>{e.preventDefault(),r({x:e.clientX,y:e.clientY}),c.show()},[r,c]);return l.createElement(o,t.objectSpread2(t.objectSpread2({},a),{},{onContextMenu:i,ref:n}))})),P=o.polymorphicComponent((function(e,o){let{exceptionallySetClassName:a,modal:r=!0}=e,c=t.objectWithoutProperties(e,h);const{state:i}=l.useContext(v);return i.open?l.createElement(s.Portal,{preserveTabOrder:!0},l.createElement(u.Menu,t.objectSpread2(t.objectSpread2({},c),{},{state:i,ref:o,className:n(d.default.menuList,a),modal:r}))):null})),O=o.polymorphicComponent((function(e,o){let{exceptionallySetClassName:a,modal:r=!0}=e,c=t.objectWithoutProperties(e,x);const{state:i}=l.useContext(v);return i.open?l.createElement(s.Portal,{preserveTabOrder:!0},l.createElement(u.Menu,t.objectSpread2(t.objectSpread2({},c),{},{state:i,ref:o,className:n(d.default.menuList,d.default.subMenuList,a),modal:r}))):null}));function q({value:e,hideOnSelect:t,onClick:n,onSelect:o}){const{handleItemSelect:a,state:r}=l.useContext(v),{hide:c}=r;return l.useCallback((function(l){null==n||n(l);const r=!1!==(o&&!l.defaultPrevented?o():void 0)&&t;a(e),r&&c()}),[o,n,a,t,c,e])}const w=o.polymorphicComponent((function(e,o){let{value:r,label:i,description:s,icon:m,shortcut:p,tone:b,children:f,onSelect:h,hideOnSelect:x=!0,onClick:C,exceptionallySetClassName:y,as:j="button"}=e,E=t.objectWithoutProperties(e,S);const I=c.useId(E.id),{state:N}=l.useContext(v),g=q({value:r,onSelect:h,onClick:C,hideOnSelect:x});return l.createElement(u.MenuItem,t.objectSpread2(t.objectSpread2({"aria-labelledby":i&&!E["aria-label"]?I+"-label":void 0,"aria-describedby":i&&s?I+"-description":void 0},E),{},{as:j,state:N,ref:o,onClick:g,className:n(d.default.menuItem,"destructive"===b?d.default.destructive:null,y),hideOnClick:!1}),f?l.createElement(a.Box,{width:"full",className:i?void 0:d.default.legacyLayout},f):null,l.createElement(M,{id:I,icon:m,label:i,description:s,shortcut:p}))})),L=l.forwardRef((function({children:e,onItemSelect:t},n){const{handleItemSelect:o,state:a}=l.useContext(v),{hide:r}=a,c=l.useCallback((function(e){t&&t(e),o(e),r()}),[r,o,t]),[i,s]=l.Children.toArray(e),m=l.useCallback((function(e){return l.cloneElement(i,e)}),[i]);return l.createElement(E,{onItemSelect:c},l.createElement(u.MenuItem,{as:"div",state:a,ref:n,hideOnClick:!1},m),l.createElement("div",{className:d.default.subMenuContainer},s))})),W=o.polymorphicComponent((function(e,n){let{label:o,info:r,children:s,exceptionallySetClassName:m}=e,p=t.objectWithoutProperties(e,C);const b=c.useId(p.id),{state:f}=l.useContext(v);return l.createElement(u.MenuGroup,t.objectSpread2(t.objectSpread2({"aria-labelledby":"menugroup-label-"+b},p),{},{id:b,ref:n,state:f,className:m}),l.createElement(a.Box,{display:"flex",alignItems:"center",gap:"small",className:d.default.menuGroupLabel},l.createElement(i.Text,{id:"menugroup-label-"+b,size:"copy",weight:"semibold"},o),r?l.createElement(a.Box,{flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",className:d.default.menuGroupInfo},r):null),s)})),B=o.polymorphicComponent((function(e,o){let{value:a,label:i,icon:s,onSelect:m,hideOnSelect:p=!0,onClick:b,exceptionallySetClassName:f,as:h="button"}=e,x=t.objectWithoutProperties(e,y);const S=c.useId(x.id),{state:C}=l.useContext(v),j=q({value:a,onSelect:m,onClick:b,hideOnSelect:p});return l.createElement(r.Tooltip,{content:i},l.createElement(u.MenuItem,t.objectSpread2(t.objectSpread2({"aria-label":i,"aria-describedby":S+"-description"},x),{},{as:h,state:C,ref:o,onClick:j,className:n(d.default.iconMenuItem,f),hideOnClick:!1}),s))})),G=o.polymorphicComponent((function(e,n){let{children:o}=e,a=t.objectWithoutProperties(e,j);return l.createElement(W,t.objectSpread2(t.objectSpread2({},a),{},{ref:n}),l.createElement("div",{className:d.default.iconsMenuGroup},o))}));exports.ContextMenuTrigger=k,exports.IconMenuItem=B,exports.IconsMenuGroup=G,exports.Menu=E,exports.MenuButton=I,exports.MenuGroup=W,exports.MenuItem=w,exports.MenuList=P,exports.SubMenu=L,exports.SubMenuItem=g,exports.SubMenuList=O;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../utils/polymorphism.js"),r=require("ariakit/portal"),a=require("ariakit/menu");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["as"],i=["exceptionallySetClassName","modal"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],d=n.createContext({});function h(e){let{children:o,onItemSelect:l}=e,r=t.objectWithoutProperties(e,c);const[s,u]=n.useState(null),i=n.useMemo(()=>s?()=>s:void 0,[s]),p=a.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:i},r));n.useEffect(()=>{p.open||u(null)},[p.open]);const m=n.useCallback((function(e){l&&l(e)}),[l]),h=n.useMemo(()=>({state:p,handleItemSelect:m,handleAnchorRectChange:u}),[p,m]);return n.createElement(d.Provider,{value:h},o)}const C=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:r}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(d);return n.createElement(a.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",r)}))})),S=l.polymorphicComponent((function(e,o){let{as:l="div"}=e,r=t.objectWithoutProperties(e,u);const{handleAnchorRectChange:a,state:c}=n.useContext(d),s=n.useCallback(e=>{e.preventDefault(),a({x:e.clientX,y:e.clientY}),c.show()},[a,c]);return n.createElement(l,t.objectSpread2(t.objectSpread2({},r),{},{onContextMenu:s,ref:o}))})),b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c,modal:s=!0}=e,u=t.objectWithoutProperties(e,i);const{state:p}=n.useContext(d);return p.open?n.createElement(r.Portal,{preserveTabOrder:!0},n.createElement(a.Menu,t.objectSpread2(t.objectSpread2({},u),{},{state:p,ref:l,className:o("reactist_menulist",c),modal:s}))):null})),f=l.polymorphicComponent((function(e,o){let{value:l,children:r,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:i,as:m="button"}=e,h=t.objectWithoutProperties(e,p);const{handleItemSelect:C,state:S}=n.useContext(d),{hide:b}=S,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;C(l),t&&b()}),[c,u,C,s,b,l]);return n.createElement(a.MenuItem,t.objectSpread2(t.objectSpread2({},h),{},{as:m,state:S,ref:o,onClick:f,className:i,hideOnClick:!1}),r)})),x=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:l,state:r}=n.useContext(d),{hide:c}=r,s=n.useCallback((function(e){t&&t(e),l(e),c()}),[c,l,t]),[u,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(u,e)}),[u]);return n.createElement(h,{onItemSelect:s},n.createElement(a.MenuItem,{as:"div",state:r,ref:o,hideOnClick:!1},p),i)})),j=l.polymorphicComponent((function(e,o){let{label:l,children:r,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,m);const{state:u}=n.useContext(d);return n.createElement(a.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,r)}));exports.ContextMenuTrigger=S,exports.Menu=h,exports.MenuButton=C,exports.MenuGroup=j,exports.MenuItem=f,exports.MenuList=b,exports.SubMenu=x;
 //# sourceMappingURL=menu.js.map

package/lib/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './menu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\ntype MenuHandle = {\n    open: () => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nconst Menu = React.forwardRef<MenuHandle, MenuProps>(function Menu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    React.useImperativeHandle(ref, () => ({ open: state.show }))\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n})\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={exceptionallySetClassName}\n        />\n    )\n})\n\n//\n// MenuItemContent\n//\n\ntype MenuItemContentProps = {\n    id: string\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n}\n\n/**\n * Renders the content inside a standard MenuItem. It is extracted into a component for reuse in\n * the SubMenuItem, which is a MenuItem visually, but semantically it's closer to be a MenuButton.\n * @private\n */\nfunction MenuItemContent({ label, description, icon, shortcut, id }: MenuItemContentProps) {\n    if (!label) return null\n    return (\n        <Box\n            display=\"flex\"\n            gap=\"small\"\n            alignItems=\"center\"\n            width=\"full\"\n            aria-hidden // the menu item is labelled via aria-labelledby and aria-describedby\n        >\n            {icon ? <div className={styles.menuItemIcon}>{icon}</div> : null}\n            <Box\n                display=\"inlineFlex\"\n                flexDirection=\"column\"\n                gap=\"xsmall\"\n                paddingY=\"xsmall\"\n                alignItems=\"flexStart\"\n                overflow=\"hidden\"\n                flexGrow={1}\n            >\n                <Text\n                    id={`${id}-label`}\n                    weight={description ? 'semibold' : 'regular'}\n                    size=\"copy\"\n                    lineClamp={1}\n                    exceptionallySetClassName={styles.menuItemLabel}\n                >\n                    {label}\n                </Text>\n                {description ? (\n                    <Text\n                        id={`${id}-description`}\n                        size=\"copy\"\n                        tone=\"secondary\"\n                        exceptionallySetClassName={styles.menuItemDescription}\n                    >\n                        {description}\n                    </Text>\n                ) : null}\n            </Box>\n            {shortcut ? <div>{shortcut}</div> : null}\n        </Box>\n    )\n}\n\n//\n// SubMenuItem\n//\n\nfunction ArrowRightIcon() {\n    return (\n        <svg width=\"24\" height=\"24\">\n            <path\n                d=\"M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z\"\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\ntype SubMenuItemProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as' | 'children'> &\n    Pick<MenuItemProps, 'label' | 'icon'>\n\n/**\n * A menu item to toggle a sub-menu open or closed.\n */\nconst SubMenuItem = polymorphicComponent<'button', SubMenuItemProps>(function SubMenuItem(\n    { exceptionallySetClassName, label, icon, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames(styles.menuItem, exceptionallySetClassName)}\n        >\n            <MenuItemContent id={id} icon={icon} label={label} shortcut={<ArrowRightIcon />} />\n        </Ariakit.MenuButton>\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList and SubMenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(styles.menuList, exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n/**\n * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.\n */\nconst SubMenuList = polymorphicComponent<'div', MenuListProps>(function SubMenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(\n                    styles.menuList,\n                    styles.subMenuList,\n                    exceptionallySetClassName,\n                )}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n//\n// MenuItem\n//\n\nfunction useMenuItemClickHandler({\n    value,\n    hideOnSelect,\n    onClick,\n    onSelect,\n}: Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onClick' | 'onSelect'>) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    return React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n}\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item.\n     *\n     * It is passed on to the parent `Menu`'s `onItemSelect` when you provide that instead of (or\n     * alongside) providing individual `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The menu item's content.\n     *\n     * Prefer using `label` instead. In addition to `label`, you can also use `description`, `icon`\n     * and `shortcut`, to provide richer content inside the menu item.\n     *\n     * However, you can still use `children` to provide arbitrary content inside the menu item. You\n     * can even combine `children` with the other props to provide a richer menu item. The\n     * `children` content will be rendered first, followed by the regular menu item content\n     * generated using the `label`, `description`, `icon` and `shortcut` props (if the `label` is\n     * present).\n     */\n    children?: React.ReactNode\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: NonNullable<React.ReactNode>\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n\n    /**\n     * The tone to use for the menu item.\n     */\n    tone?: 'normal' | 'destructive'\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        shortcut,\n        tone,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Ariakit.MenuItem\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            aria-describedby={label && description ? `${id}-description` : undefined}\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={classNames(\n                styles.menuItem,\n                tone === 'destructive' ? styles.destructive : null,\n                exceptionallySetClassName,\n            )}\n            hideOnClick={false}\n        >\n            {children ? (\n                <Box width=\"full\" className={label ? undefined : styles.legacyLayout}>\n                    {children}\n                </Box>\n            ) : null}\n\n            <MenuItemContent\n                id={id}\n                icon={icon}\n                label={label}\n                description={description}\n                shortcut={shortcut}\n            />\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a\n * sub-menu.\n *\n * Its children are expected to be exactly two elements, in the following order:\n *\n * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.\n * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.\n *\n * ## Usage\n *\n * ```jsx\n * <Menu>\n *   <MenuButton>Menu</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Item 1\" />\n *     <MenuItem label=\"Item 2\" />\n *     <SubMenu>\n *       <SubMenuItem label=\"Submenu\" />\n *       <SubMenuList>\n *         <MenuItem label=\"Submenu Item 1\" />\n *         <MenuItem label=\"Submenu Item 2\" />\n *       </SubMenuList>\n *     </SubMenu>\n *   </MenuList>\n * </Menu>\n * ```\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            <div className={styles.subMenuContainer}>{list}</div>\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: NonNullable<React.ReactNode>\n\n    /**\n     * An optional info element to be shown to the right of the label.\n     *\n     * This is useful and often used to:\n     * - Provide a link to any documentation related to the menu items in the group\n     * - Show a keyboard shortcut that triggers the menu items in the group\n     *\n     * It is strongly recommended that this should be a icon-only element. It is also strongly\n     * recommended that, when using it to provide a link, you use the very `IconMenuItem` component\n     * to make the link be yet another menu item accessible in the menu via keyboard navigation.\n     * Here's an example of how to do that:\n     *\n     * ```jsx\n     * <MenuGroup\n     *   label=\"A group of related options\"\n     *   info={\n     *     <IconMenuItem\n     *       label=\"Help about this group of options\"\n     *       icon=\"ℹ️\"\n     *       as=\"a\"\n     *       href=\"http://help.example.com\"\n     *       target=\"_blank\"\n     *       rel=\"noreferrer noopener\"\n     *     />\n     *   }\n     * >\n     *   <MenuItem label=\"First option\" icon={<FirstIcon />} />\n     *   <MenuItem label=\"Second option\" icon={<SecondIcon />} />\n     * </MenuGroup>\n     * ```\n     */\n    info?: React.ReactNode\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, info, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup\n            aria-labelledby={`menugroup-label-${id}`}\n            {...props}\n            id={id}\n            ref={ref}\n            state={state}\n            className={exceptionallySetClassName}\n        >\n            <Box display=\"flex\" alignItems=\"center\" gap=\"small\" className={styles.menuGroupLabel}>\n                <Text id={`menugroup-label-${id}`} size=\"copy\" weight=\"semibold\">\n                    {label}\n                </Text>\n                {info ? (\n                    <Box\n                        flexShrink={0}\n                        display=\"flex\"\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        className={styles.menuGroupInfo}\n                    >\n                        {info}\n                    </Box>\n                ) : null}\n            </Box>\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\n//\n// IconMenuItem & IconsMenuGroup\n//\n\ntype IconMenuItemProps = Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onSelect' | 'onClick'> & {\n    /**\n     * A label for assistive technologies to describe the menu item.\n     *\n     * When not provided, the `label` is used. But this is useful when you want the tooltip label\n     * to be different from the label for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * The menu item's label, which is not shown visually on the menu item, but it is used to\n     * show a tooltip for the menu item when hovered or focused.\n     *\n     * It is also used as the semantic label for assistive technologies, unless you provide an\n     * `aria-label` as well.\n     */\n    label: string\n\n    /**\n     * A description for assistive technologies to describe the menu item.\n     */\n    description?: React.ReactNode\n\n    /**\n     * The icon to show on the menu item.\n     */\n    icon: NonNullable<React.ReactNode>\n}\n\n/**\n * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.\n */\nconst IconMenuItem = polymorphicComponent<'button', IconMenuItemProps>(function IconMenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Tooltip content={label}>\n            <Ariakit.MenuItem\n                aria-label={label}\n                aria-describedby={`${id}-description`}\n                {...props}\n                as={as}\n                state={state}\n                ref={ref}\n                onClick={handleClick}\n                className={classNames(styles.iconMenuItem, exceptionallySetClassName)}\n                hideOnClick={false}\n            >\n                {icon}\n            </Ariakit.MenuItem>\n        </Tooltip>\n    )\n})\n\n/**\n * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.\n */\nconst IconsMenuGroup = polymorphicComponent<'div', MenuGroupProps>(function IconsMenuGroup(\n    { children, ...props },\n    ref,\n) {\n    return (\n        <MenuGroup {...props} ref={ref}>\n            <div className={styles.iconsMenuGroup}>{children}</div>\n        </MenuGroup>\n    )\n})\n\nexport {\n    ContextMenuTrigger,\n    IconMenuItem,\n    IconsMenuGroup,\n    Menu,\n    MenuButton,\n    MenuGroup,\n    MenuItem,\n    MenuList,\n    SubMenu,\n    SubMenuItem,\n    SubMenuList,\n}\n\nexport type {\n    IconMenuItemProps,\n    MenuButtonProps,\n    MenuGroupProps,\n    MenuHandle,\n    MenuItemProps,\n    MenuListProps,\n    MenuProps,\n    SubMenuItemProps,\n    SubMenuProps,\n}\n"],"names":["MenuContext","React","Menu","ref","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","show","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","exceptionallySetClassName","className","MenuItemContent","label","description","icon","shortcut","id","Box","display","gap","alignItems","width","styles","menuItemIcon","flexDirection","paddingY","overflow","flexGrow","Text","weight","size","lineClamp","menuItemLabel","tone","menuItemDescription","ArrowRightIcon","height","d","fill","fillRule","SubMenuItem","useId","classNames","menuItem","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","onContextMenu","MenuList","modal","Portal","preserveTabOrder","menuList","SubMenuList","subMenuList","useMenuItemClickHandler","hideOnSelect","onClick","onSelect","hide","shouldClose","defaultPrevented","MenuItem","handleClick","destructive","hideOnClick","legacyLayout","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","subMenuContainer","MenuGroup","info","menuGroupLabel","flexShrink","justifyContent","menuGroupInfo","IconMenuItem","Tooltip","content","iconMenuItem","IconsMenuGroup","iconsMenuGroup"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n\n    return state.open ? (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"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"}

package/lib/text-area/text-area.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"fdc243b3",innerContainer:"_5c1dd8bc",bordered:"_269f9e63",error:"d1e4b585",autoExpand:"_10c6f2ef"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"_29503131",innerContainer:"_6ea894ce",bordered:"e1e8b6a7",error:"_1b94ff46",autoExpand:"e82223c4"};
 //# sourceMappingURL=text-area.module.css.js.map

package/lib/toast/use-toasts.d.ts

@@ -66,6 +66,10 @@ declare type ToastsProviderProps = {
      * The app wrapped by the provider.
      */
     children: NonNullable<React.ReactNode>;
+    /**
+     * Custom classname for the toasts container, if you need to fine-tune the position or other styles
+     */
+    containerClassName?: string;
 };
 /**
  * Provides the state management and rendering of the toasts currently active.
@@ -74,7 +78,7 @@ declare type ToastsProviderProps = {
  *
  * @see useToasts
  */
-declare function ToastsProvider({ children, padding, defaultAutoDismissDelay, defaultDismissLabel, }: ToastsProviderProps): JSX.Element;
+declare function ToastsProvider({ children, padding, defaultAutoDismissDelay, defaultDismissLabel, containerClassName, }: ToastsProviderProps): JSX.Element;
 /**
  * Provides a function `showToast` that shows a new toast every time you call it.
  *

package/lib/toast/use-toasts.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),n=require("../utils/common-helpers.js"),i=require("./toast.module.css.js"),r=require("./static-toast.js"),u=require("ariakit/portal"),c=require("./toast-animation.js");const l=["toastId"],d=s.forwardRef((function({message:e,description:o,icon:a,action:n,autoDismissDelay:i,dismissLabel:u,showDismissButton:c=!0,toastId:l,onDismiss:d,onRemoveToast:m},f){const[p,b]=s.useState(Boolean(i)),j=s.useRef(),k=s.useCallback((function(){b(!0)}),[]),v=s.useCallback((function(){b(!1),clearTimeout(j.current),j.current=void 0}),[]),x=s.useCallback((function(){m(l),null==d||d()}),[d,m,l]);s.useEffect((function(){if(p&&i)return j.current=window.setTimeout(x,1e3*i),v}),[i,x,v,p]);const C=s.useMemo(()=>r.isActionObject(n)?t.objectSpread2(t.objectSpread2({},n),{},{onClick:function(){n&&(n.onClick(),x())}}):n,[n,x]);return s.createElement(r.StaticToast,{ref:f,message:e,description:o,icon:a,action:C,onDismiss:c?x:void 0,dismissLabel:u,onMouseEnter:v,onMouseLeave:k})})),m=s.createContext(()=>()=>{});function f(){return s.useContext(m)}exports.Toast=function(e){const t=f(),o=s.useRef(e);return s.useEffect(()=>t(o.current),[t]),null},exports.ToastsProvider=function({children:e,padding:r="large",defaultAutoDismissDelay:f=10,defaultDismissLabel:p="Close"}){const[b,j]=s.useState([]),{mappedRef:k,animateRemove:v}=c.useToastsAnimation(),x=s.useCallback((function(e){v(e,()=>{j(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const o=[...t];return o.splice(s,1),o})})}),[v]),C=s.useCallback((function(e){const s=n.generateElementId("toast"),o=t.objectSpread2(t.objectSpread2({autoDismissDelay:f,dismissLabel:p},e),{},{toastId:s});return j(e=>[...e,o]),()=>x(s)}),[f,p,x]);return s.createElement(m.Provider,{value:C},e,s.createElement(u.Portal,null,0===b.length?null:s.createElement(o.Box,{className:i.default.stackedToastsView,position:"fixed",width:"full",paddingX:r,paddingBottom:r},s.createElement(a.Stack,{space:"medium"},b.map(e=>{let{toastId:o}=e,a=t.objectWithoutProperties(e,l);return s.createElement(d,t.objectSpread2({key:o,ref:k(o),toastId:o,onRemoveToast:x},a))})))))},exports.useToasts=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),n=require("../utils/common-helpers.js"),i=require("./toast.module.css.js"),r=require("./static-toast.js"),u=require("ariakit/portal"),c=require("./toast-animation.js");const l=["toastId"],d=s.forwardRef((function({message:e,description:o,icon:a,action:n,autoDismissDelay:i,dismissLabel:u,showDismissButton:c=!0,toastId:l,onDismiss:d,onRemoveToast:m},f){const[p,b]=s.useState(Boolean(i)),j=s.useRef(),k=s.useCallback((function(){b(!0)}),[]),v=s.useCallback((function(){b(!1),clearTimeout(j.current),j.current=void 0}),[]),x=s.useCallback((function(){m(l),null==d||d()}),[d,m,l]);s.useEffect((function(){if(p&&i)return j.current=window.setTimeout(x,1e3*i),v}),[i,x,v,p]);const C=s.useMemo(()=>r.isActionObject(n)?t.objectSpread2(t.objectSpread2({},n),{},{onClick:function(){n&&(n.onClick(),x())}}):n,[n,x]);return s.createElement(r.StaticToast,{ref:f,message:e,description:o,icon:a,action:C,onDismiss:c?x:void 0,dismissLabel:u,onMouseEnter:v,onMouseLeave:k})})),m=s.createContext(()=>()=>{});function f(){return s.useContext(m)}exports.Toast=function(e){const t=f(),o=s.useRef(e);return s.useEffect(()=>t(o.current),[t]),null},exports.ToastsProvider=function({children:e,padding:r="large",defaultAutoDismissDelay:f=10,defaultDismissLabel:p="Close",containerClassName:b}){const[j,k]=s.useState([]),{mappedRef:v,animateRemove:x}=c.useToastsAnimation(),C=s.useCallback((function(e){x(e,()=>{k(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const o=[...t];return o.splice(s,1),o})})}),[x]),D=s.useCallback((function(e){const s=n.generateElementId("toast"),o=t.objectSpread2(t.objectSpread2({autoDismissDelay:f,dismissLabel:p},e),{},{toastId:s});return k(e=>[...e,o]),()=>C(s)}),[f,p,C]);return s.createElement(m.Provider,{value:D},e,s.createElement(u.Portal,null,0===j.length?null:s.createElement(o.Box,{className:[i.default.stackedToastsView,b],position:"fixed",width:"full",paddingX:r,paddingBottom:r,"data-testid":"toasts-container"},s.createElement(a.Stack,{space:"medium"},j.map(e=>{let{toastId:o}=e,a=t.objectWithoutProperties(e,l);return s.createElement(d,t.objectSpread2({key:o,ref:v(o),toastId:o,onRemoveToast:C},a))})))))},exports.useToasts=f;
 //# sourceMappingURL=use-toasts.js.map