@doist/reactist 22.3.3 → 23.0.1-beta

package/lib/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     * 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","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","useToasts","useContext","props","showToast","propsRef","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","_ref","key"],"mappings":"4bAsDMA,EAAgBC,EAAMC,YAA+C,UACvEC,QACIA,EADJC,YAEIA,EAFJC,KAGIA,EAHJC,OAIIA,EAJJC,iBAKIA,EALJC,aAMIA,EANJC,kBAOIA,GAAoB,EAPxBC,QAQIA,EARJC,UASIA,EATJC,cAUIA,GAEJC,GAEA,MAAOC,EAAgBC,GAAqBd,EAAMe,SAASC,QAAQV,IAC7DW,EAAajB,EAAMkB,SAEnBC,EAAenB,EAAMoB,aAAY,WACnCN,GAAkB,KACnB,IAEGO,EAAcrB,EAAMoB,aAAY,WAClCN,GAAkB,GAClBQ,aAAaL,EAAWM,SACxBN,EAAWM,aAAUC,IACtB,IAEGC,EAAczB,EAAMoB,aACtB,WACIT,EAAcF,SACdC,GAAAA,MAEJ,CAACA,EAAWC,EAAeF,IAG/BT,EAAM0B,WACF,WACI,GAAKb,GAAmBP,EAExB,OADAW,EAAWM,QAAUI,OAAOC,WAAWH,EAAgC,IAAnBnB,GAC7Ce,IAEX,CAACf,EAAkBmB,EAAaJ,EAAaR,IAQjD,MAAMgB,EAAgC7B,EAAM8B,QAAQ,IAC3CC,iBAAe1B,sCAKbA,OACH2B,QAAS,WACA3B,IAILA,EAAO2B,UACPP,QAXGpB,EAcZ,CAACA,EAAQoB,IAEZ,OACIzB,gBAACiC,eACGrB,IAAKA,EACLV,QAASA,EACTC,YAAaA,EACbC,KAAMA,EACNC,OAAQwB,EACRnB,UAAWF,EAAoBiB,OAAcD,EAC7CjB,aAAcA,EAEd2B,aAAcb,EACdc,aAAchB,OAapBiB,EAAgBpC,EAAMqC,cAA+B,IAAM,QAiJjE,SAASC,IACL,OAAOtC,EAAMuC,WAAWH,iBAgC5B,SAAeI,GACX,MAAMC,EAAYH,IACZI,EAAW1C,EAAMkB,OAAmBsB,GAK1C,OAJAxC,EAAM0B,UAAU,IACSe,EAAUC,EAASnB,SAEzC,CAACkB,IACG,6BAjIX,UAAwBE,SACpBA,EADoBC,QAEpBA,EAAU,QAFUC,wBAGpBA,EAA0B,uBAC1BC,EAAsB,QAJFC,mBAKpBA,IAEA,MAAOC,EAAQC,GAAajD,EAAMe,SAAqB,KACjDmC,UAAEA,EAAFC,cAAaA,GAAkBC,uBAE/B3B,EAAczB,EAAMoB,aACtB,SAAuBX,GACnB0C,EAAc1C,EAAS,KACnBwC,EAAWI,IACP,MAAMC,EAAQD,EAAKE,UAAWC,GAAMA,EAAE/C,UAAYA,GAClD,GAAI6C,EAAQ,EAAG,OAAOD,EACtB,MAAMI,EAAO,IAAIJ,GAEjB,OADAI,EAAKC,OAAOJ,EAAO,GACZG,QAInB,CAACN,IAGCV,EAAYzC,EAAMoB,aACpB,SAAmBoB,GACf,MAAM/B,EAAUkD,oBAAkB,SAC5BC,mCACFtD,iBAAkBuC,EAClBtC,aAAcuC,GACXN,OACH/B,QAAAA,IAGJ,OADAwC,EAAWI,GAAS,IAAIA,EAAMO,IACvB,IAAMnC,EAAYhB,KAE7B,CAACoC,EAAyBC,EAAqBrB,IAGnD,OACIzB,gBAACoC,EAAcyB,UAASC,MAAOrB,GAC1BE,EACD3C,gBAAC+D,cACsB,IAAlBf,EAAOgB,OAAe,KACnBhE,gBAACiE,OACGC,UAAW,CAACC,UAAOC,kBAAmBrB,GACtCsB,SAAS,QACTC,MAAM,OACNC,SAAU3B,EACV4B,cAAe5B,gBACH,oBAEZ5C,gBAACyE,SAAMC,MAAM,UACR1B,EAAO2B,IAAIC,IAAA,IAACnE,QAAEA,KAAY+B,iCAAf,OACRxC,gBAACD,mBACG8E,IAAKpE,EACLG,IAAKsC,EAAUzC,GACfA,QAASA,EACTE,cAAec,GACXe"}
+{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from '@ariakit/react'\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","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","useToasts","useContext","props","showToast","propsRef","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","_ref","key"],"mappings":"4bAsDMA,EAAgBC,EAAMC,YAA+C,UACvEC,QACIA,EADJC,YAEIA,EAFJC,KAGIA,EAHJC,OAIIA,EAJJC,iBAKIA,EALJC,aAMIA,EANJC,kBAOIA,GAAoB,EAPxBC,QAQIA,EARJC,UASIA,EATJC,cAUIA,GAEJC,GAEA,MAAOC,EAAgBC,GAAqBd,EAAMe,SAASC,QAAQV,IAC7DW,EAAajB,EAAMkB,SAEnBC,EAAenB,EAAMoB,aAAY,WACnCN,GAAkB,KACnB,IAEGO,EAAcrB,EAAMoB,aAAY,WAClCN,GAAkB,GAClBQ,aAAaL,EAAWM,SACxBN,EAAWM,aAAUC,IACtB,IAEGC,EAAczB,EAAMoB,aACtB,WACIT,EAAcF,SACdC,GAAAA,MAEJ,CAACA,EAAWC,EAAeF,IAG/BT,EAAM0B,WACF,WACI,GAAKb,GAAmBP,EAExB,OADAW,EAAWM,QAAUI,OAAOC,WAAWH,EAAgC,IAAnBnB,GAC7Ce,IAEX,CAACf,EAAkBmB,EAAaJ,EAAaR,IAQjD,MAAMgB,EAAgC7B,EAAM8B,QAAQ,IAC3CC,iBAAe1B,sCAKbA,OACH2B,QAAS,WACA3B,IAILA,EAAO2B,UACPP,QAXGpB,EAcZ,CAACA,EAAQoB,IAEZ,OACIzB,gBAACiC,eACGrB,IAAKA,EACLV,QAASA,EACTC,YAAaA,EACbC,KAAMA,EACNC,OAAQwB,EACRnB,UAAWF,EAAoBiB,OAAcD,EAC7CjB,aAAcA,EAEd2B,aAAcb,EACdc,aAAchB,OAapBiB,EAAgBpC,EAAMqC,cAA+B,IAAM,QAiJjE,SAASC,IACL,OAAOtC,EAAMuC,WAAWH,iBAgC5B,SAAeI,GACX,MAAMC,EAAYH,IACZI,EAAW1C,EAAMkB,OAAmBsB,GAK1C,OAJAxC,EAAM0B,UAAU,IACSe,EAAUC,EAASnB,SAEzC,CAACkB,IACG,6BAjIX,UAAwBE,SACpBA,EADoBC,QAEpBA,EAAU,QAFUC,wBAGpBA,EAA0B,uBAC1BC,EAAsB,QAJFC,mBAKpBA,IAEA,MAAOC,EAAQC,GAAajD,EAAMe,SAAqB,KACjDmC,UAAEA,EAAFC,cAAaA,GAAkBC,uBAE/B3B,EAAczB,EAAMoB,aACtB,SAAuBX,GACnB0C,EAAc1C,EAAS,KACnBwC,EAAWI,IACP,MAAMC,EAAQD,EAAKE,UAAWC,GAAMA,EAAE/C,UAAYA,GAClD,GAAI6C,EAAQ,EAAG,OAAOD,EACtB,MAAMI,EAAO,IAAIJ,GAEjB,OADAI,EAAKC,OAAOJ,EAAO,GACZG,QAInB,CAACN,IAGCV,EAAYzC,EAAMoB,aACpB,SAAmBoB,GACf,MAAM/B,EAAUkD,oBAAkB,SAC5BC,mCACFtD,iBAAkBuC,EAClBtC,aAAcuC,GACXN,OACH/B,QAAAA,IAGJ,OADAwC,EAAWI,GAAS,IAAIA,EAAMO,IACvB,IAAMnC,EAAYhB,KAE7B,CAACoC,EAAyBC,EAAqBrB,IAGnD,OACIzB,gBAACoC,EAAcyB,UAASC,MAAOrB,GAC1BE,EACD3C,gBAAC+D,cACsB,IAAlBf,EAAOgB,OAAe,KACnBhE,gBAACiE,OACGC,UAAW,CAACC,UAAOC,kBAAmBrB,GACtCsB,SAAS,QACTC,MAAM,OACNC,SAAU3B,EACV4B,cAAe5B,gBACH,oBAEZ5C,gBAACyE,SAAMC,MAAM,UACR1B,EAAO2B,IAAIC,IAAA,IAACnE,QAAEA,KAAY+B,iCAAf,OACRxC,gBAACD,mBACG8E,IAAKpE,EACLG,IAAKsC,EAAUzC,GACfA,QAASA,EACTE,cAAec,GACXe"}

package/lib/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PopoverState } from 'ariakit/popover';
+import type { TooltipStoreState } from '@ariakit/react';
 declare type TooltipProps = {
     /**
      * The element that triggers the tooltip. Generally a button or link.
@@ -37,7 +37,7 @@ declare type TooltipProps = {
      *
      * @default 'top'
      */
-    position?: PopoverState['placement'];
+    position?: TooltipStoreState['placement'];
     /**
      * The separation (in pixels) between the trigger element and the tooltip.
      * @default 3
@@ -54,8 +54,6 @@ declare type TooltipProps = {
      */
     exceptionallySetClassName?: string;
 };
-export declare const SHOW_DELAY = 1000;
-export declare const HIDE_DELAY = 100;
 declare function Tooltip({ children, content, position, gapSize, withArrow, exceptionallySetClassName, }: TooltipProps): JSX.Element | null;
 export type { TooltipProps };
 export { Tooltip };

package/lib/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../box/box.js"),o=require("ariakit/tooltip"),n=require("./tooltip.module.css.js");exports.HIDE_DELAY=100,exports.SHOW_DELAY=1e3,exports.Tooltip=function({children:l,content:u,position:i="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:c}){const p=function(r){const n=o.useTooltipState(r),l=function(){const e=t.useRef(),r=t.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return t.useEffect(()=>r,[r]),t.useCallback((function(t,o){return()=>{r(),e.current=setTimeout(t,o)}}),[r])}();return t.useMemo(()=>e.objectSpread2(e.objectSpread2({},n),{},{show:l(()=>n.show(),1e3),hide:l(()=>n.hide(),100)}),[l,n])}({placement:i,gutter:a}),d=t.Children.only(l);if(!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");function f(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&p.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}function m(e){var t;p.hide(),null==d||null==(t=d.props)||null==t.onBlur||t.onBlur(e)}return t.createElement(t.Fragment,null,t.createElement(o.TooltipAnchor,{state:p,ref:d.ref,described:!0},r=>t.cloneElement(d,e.objectSpread2(e.objectSpread2(e.objectSpread2({},r),d.props),{},{onFocus:f,onBlur:m}))),p.open&&u?t.createElement(r.Box,{as:o.Tooltip,state:p,className:[n.default.tooltip,c],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?t.createElement(o.TooltipArrow,null):null,"function"==typeof u?u():u):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../box/box.js"),r=require("@ariakit/react"),n=require("./tooltip.module.css.js");exports.Tooltip=function({children:l,content:i,position:u="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:c}){const p=r.useTooltipStore({placement:u,showTimeout:500,hideTimeout:100}),d=p.useState("open"),f=t.Children.only(l);if(!f)return f;if("string"==typeof f.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");function m(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&p.show()}),{once:!0}),e.preventDefault(),null==f||null==(t=f.props)||null==t.onFocus||t.onFocus(e)}function h(e){var t;p.hide(),null==f||null==(t=f.props)||null==t.onBlur||t.onBlur(e)}return t.createElement(t.Fragment,null,t.createElement(r.TooltipAnchor,{render:o=>t.cloneElement(f,e.objectSpread2(e.objectSpread2(e.objectSpread2({},f.props),o),{},{onFocus:m,onBlur:h})),store:p,ref:f.ref}),d&&i?t.createElement(o.Box,{as:r.Tooltip,gutter:a,store:p,className:[n.default.tooltip,c],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?t.createElement(r.TooltipArrow,null):null,"function"==typeof i?i():i):null)};
 //# sourceMappingURL=tooltip.js.map

package/lib/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from 'ariakit/tooltip'\nimport { Box } from '../box'\n\nimport type {\n    TooltipStateProps as AriakitTooltipStateProps,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: PopoverState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 1000\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        state.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} described>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...anchorProps,\n                        ...child.props,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n            </TooltipAnchor>\n            {state.open && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    state={state}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","clearTimeouts","current","clearTimeout","fn","setTimeout","useDelay","show","hide","useDelayedTooltipState","placement","gutter","child","only","ref","Error","handleFocus","event","currentTarget","addEventListener","eventKey","key","once","preventDefault","props","onFocus","handleBlur","onBlur","TooltipAnchor","described","anchorProps","open","Box","as","AriakitTooltip","className","styles","tooltip","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"iQAgF0B,uBADA,oBAgB1B,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAkHV,WACI,MAAMC,EAAaC,WAEbC,EAAgBD,eAAkB,WACV,MAAtBD,EAAWG,SACXC,aAAaJ,EAAWG,WAE7B,IAKH,OAFAF,YAAgB,IAAMC,EAAe,CAACA,IAE/BD,eACH,SAAeI,EAAgBN,GAC3B,MAAO,KACHG,IACAF,EAAWG,QAAUG,WAAWD,EAAIN,MAG5C,CAACG,IArISK,GACd,OAAON,UACH,uCACOJ,OACHW,KAAMT,EAAM,IAAMF,EAAaW,OATjB,KAUdC,KAAMV,EAAM,IAAMF,EAAaY,OATjB,OAWlB,CAACV,EAAOF,IAYEa,CAAuB,CAAEC,UAAWpB,EAAUqB,OAAQpB,IAE9DqB,EAAQZ,WAAea,KACzBzB,GAGJ,IAAKwB,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAME,IACb,MAAM,IAAIC,MAAM,mEASpB,SAASC,EAAYC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBF,GACjB,MAAMG,EAAYH,EAAwBI,IACzB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjD1B,EAAMa,SAG6C,CAAEe,MAAM,IACnEL,EAAMM,uBACNX,YAAAA,EAAOY,gBAAOC,WAAAA,QAAUR,GAG5B,SAASS,EAAWT,SAChBvB,EAAMc,aACNI,YAAAA,EAAOY,gBAAOG,UAAAA,OAASV,GAG3B,OACIjB,gCACIA,gBAAC4B,iBAAclC,MAAOA,EAAOoB,IAAKF,EAAME,IAAKe,cACvCC,GAIS9B,eAAmBY,qDACnBkB,GACAlB,EAAMY,WACTC,QAAST,EACTW,OAAQD,MAInBhC,EAAMqC,MAAQ1C,EACXW,gBAACgC,OACGC,GAAIC,UACJxC,MAAOA,EACPyC,UAAW,CAACC,UAAOC,QAAS5C,GAC5B6C,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,UAETrD,EAAYQ,gBAAC8C,qBAAkB,KACZ,mBAAZzD,EAAyBA,IAAYA,GAEjD"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        tooltip.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor\n                render={(anchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...child.props,\n                        ...anchorProps,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n                store={tooltip}\n                ref={child.ref}\n            />\n            {isOpen && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    gutter={gapSize}\n                    store={tooltip}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","handleFocus","event","currentTarget","addEventListener","eventKey","key","show","once","preventDefault","props","onFocus","handleBlur","hide","onBlur","TooltipAnchor","render","anchorProps","store","Box","as","AriakitTooltip","gutter","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"6PA0EA,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EAAUC,kBAAgB,CAAEC,UAAWN,EAAUO,YAAa,IAAKC,YAAa,MAChFC,EAASL,EAAQM,SAAS,QAE1BC,EAAQC,WAAeC,KACzBf,GAGJ,IAAKa,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEASpB,SAASC,EAAYC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBF,GACjB,MAAMG,EAAYH,EAAwBI,IACzB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDhB,EAAQkB,SAG2C,CAAEC,MAAM,IACnEN,EAAMO,uBACNb,YAAAA,EAAOc,gBAAOC,WAAAA,QAAUT,GAG5B,SAASU,EAAWV,SAChBb,EAAQwB,aACRjB,YAAAA,EAAOc,gBAAOI,UAAAA,OAASZ,GAG3B,OACIL,gCACIA,gBAACkB,iBACGC,OAASC,GAIEpB,eAAmBD,qDACnBA,EAAMc,OACNO,OACHN,QAASV,EACTa,OAAQF,KAGhBM,MAAO7B,EACPU,IAAKH,EAAMG,MAEdL,GAAUV,EACPa,gBAACsB,OACGC,GAAIC,UACJC,OAAQpC,EACRgC,MAAO7B,EACPkC,UAAW,CAACC,UAAOnC,QAASD,GAC5BqC,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,UAET7C,EAAYU,gBAACoC,qBAAkB,KACZ,mBAAZjD,EAAyBA,IAAYA,GAEjD"}

package/lib/utils/test-helpers.d.ts

@@ -6,6 +6,17 @@ declare type PropsWithSpace = {
     'data-testid'?: string;
 };
 declare function runSpaceTests<Props extends PropsWithSpace>(Component: React.ComponentType<Props>): void;
-declare function flushPromises(): Promise<void>;
+/**
+ * Solves some issues with unwanted warnings in tests of ariakit components due to its internal
+ * usage of the event queue for asynchronous side-effects.
+ *
+ * Think of it as a special version of `act` that we need to call to make sure some async (but
+ * immediate) actions are taken care of. Mostly around the ariakit popover and combobox elements'
+ * state management.
+ *
+ * @see https://twitter.com/diegohaz/status/1560525455383461888
+ * @see https://github.com/ariakit/ariakit/issues/1800#issuecomment-1227862399
+ */
+declare function flushMicrotasks(): Promise<undefined>;
 declare function TestIcon(): JSX.Element;
-export { runSpaceTests, flushPromises, TestIcon };
+export { runSpaceTests, flushMicrotasks, TestIcon };

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "22.3.3",
+    "version": "23.0.1-beta",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
@@ -143,10 +143,8 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
+        "@ariakit/react": "^0.3.14",
         "aria-hidden": "^1.2.1",
-        "ariakit": "2.0.0-next.43",
-        "ariakit-react-utils": "0.17.0-next.27",
-        "ariakit-utils": "0.17.0-next.27",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",
         "react-focus-lock": "^2.9.1",

package/es/hooks/use-previous/use-previous.js

@@ -1,26 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-/**
- * usePrevious tracks the change of the given value -
- * when a given value has been changed from a previous call,
- * it will return the value prior to the change.
- *
- * Example:
- *
- * const [x, setX] = useState(1)
- * const prevX = usePrevious(x)
- *
- * Suppose `setX(2)` is called, then in the next component render
- * x = 2 and prevX = 1
- */
-
-function usePrevious(value) {
-  const ref = useRef(null);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-export { usePrevious };
-//# sourceMappingURL=use-previous.js.map

package/es/hooks/use-previous/use-previous.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n    const ref = React.useRef<T | null>(null)\n\n    React.useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport { usePrevious }\n"],"names":["usePrevious","value","ref","React","current"],"mappings":";;AAEA;;;;;;;;;;;;;;AAaA,SAASA,WAAT,CAAwBC,KAAxB;EACI,MAAMC,GAAG,GAAGC,MAAA,CAAuB,IAAvB,CAAZ;EAEAA,SAAA,CAAgB;IACZD,GAAG,CAACE,OAAJ,GAAcH,KAAd;GADJ,EAEG,CAACA,KAAD,CAFH;EAIA,OAAOC,GAAG,CAACE,OAAX;AACH;;;;"}

package/lib/hooks/use-previous/use-previous.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePrevious=function(r){const t=e.useRef(null);return e.useEffect(()=>{t.current=r},[r]),t.current};
-//# sourceMappingURL=use-previous.js.map

package/lib/hooks/use-previous/use-previous.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n    const ref = React.useRef<T | null>(null)\n\n    React.useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport { usePrevious }\n"],"names":["value","ref","React","current"],"mappings":"+GAeA,SAAwBA,GACpB,MAAMC,EAAMC,SAAuB,MAMnC,OAJAA,YAAgB,KACZD,EAAIE,QAAUH,GACf,CAACA,IAEGC,EAAIE"}