@doist/reactist 22.0.0-beta → 22.0.1-beta

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/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/**\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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"}

package/es/tooltip/tooltip.js

@@ -1,21 +1,9 @@
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useMemo, Children, createElement, Fragment, cloneElement, useCallback, useRef, useEffect } from 'react';
+import { Children, createElement, Fragment, cloneElement } from 'react';
 import { Box } from '../box/box.js';
-import { TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow, useTooltipState } from 'ariakit/tooltip';
+import { useTooltipStore, TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow } from '@ariakit/react';
 import styles from './tooltip.module.css.js';
 
-const SHOW_DELAY = 500;
-const HIDE_DELAY = 100;
-
-function useDelayedTooltipState(initialState) {
-  const tooltipState = useTooltipState(initialState);
-  const delay = useDelay();
-  return useMemo(() => _objectSpread2(_objectSpread2({}, tooltipState), {}, {
-    show: delay(() => tooltipState.show(), SHOW_DELAY),
-    hide: delay(() => tooltipState.hide(), HIDE_DELAY)
-  }), [delay, tooltipState]);
-}
-
 function Tooltip({
   children,
   content,
@@ -24,10 +12,12 @@ function Tooltip({
   withArrow = false,
   exceptionallySetClassName
 }) {
-  const state = useDelayedTooltipState({
+  const tooltip = useTooltipStore({
     placement: position,
-    gutter: gapSize
+    showTimeout: 500,
+    hideTimeout: 100
   });
+  const isOpen = tooltip.useState('open');
   const child = Children.only(children);
 
   if (!child) {
@@ -56,7 +46,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        state.show();
+        tooltip.show();
       }
     }
 
@@ -71,25 +61,23 @@ function Tooltip({
   function handleBlur(event) {
     var _child$props2;
 
-    state.hide();
+    tooltip.hide();
     child == null ? void 0 : (_child$props2 = child.props) == null ? void 0 : _child$props2.onBlur == null ? void 0 : _child$props2.onBlur(event);
   }
 
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
-    state: state,
-    ref: child.ref,
-    described: true
-  }, anchorProps => {
-    // Let child props override anchor props so user can specify attributes like tabIndex
-    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
-    // by applying the replacement component/element twice
-    return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    }));
-  }), state.open && content ? /*#__PURE__*/createElement(Box, {
+    render: anchorProps => {
+      return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, child.props), anchorProps), {}, {
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      }));
+    },
+    store: tooltip,
+    ref: child.ref
+  }), isOpen && content ? /*#__PURE__*/createElement(Box, {
     as: Tooltip$1,
-    state: state,
+    gutter: gapSize,
+    store: tooltip,
     className: [styles.tooltip, exceptionallySetClassName],
     background: "toast",
     borderRadius: "standard",
@@ -101,36 +89,6 @@ function Tooltip({
     textAlign: "center"
   }, withArrow ? /*#__PURE__*/createElement(TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
-// Internal helpers
-//
-
-/**
- * Returns a function offering the same interface as setTimeout, but cleans up on unmount.
- *
- * The timeout state is shared, and only one delayed function can be active at any given time. If
- * a new delayed function is called while another one was waiting for its time to run, that older
- * invocation is cleared and it never runs.
- *
- * This is suitable for our use case here, but probably not the most intuitive thing in general.
- * That's why this is not made a shared util or something like it.
- */
-
-function useDelay() {
-  const timeoutRef = useRef();
-  const clearTimeouts = useCallback(function clearTimeouts() {
-    if (timeoutRef.current != null) {
-      clearTimeout(timeoutRef.current);
-    }
-  }, []); // Runs clearTimeouts when the component is unmounted
-
-  useEffect(() => clearTimeouts, [clearTimeouts]);
-  return useCallback(function delay(fn, delay) {
-    return () => {
-      clearTimeouts();
-      timeoutRef.current = setTimeout(fn, delay);
-    };
-  }, [clearTimeouts]);
-}
 
-export { HIDE_DELAY, SHOW_DELAY, Tooltip };
+export { Tooltip };
 //# sourceMappingURL=tooltip.js.map

package/es/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 = 500\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":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","show","hide","Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","state","placement","gutter","child","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","currentTarget","addEventListener","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","timeoutRef","clearTimeouts","current","clearTimeout","fn","setTimeout"],"mappings":"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"}
+{"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                    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":["Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","show","currentTarget","addEventListener","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":";;;;;;AA0EA,SAASA,OAAT,CAAiB;EACbC,QADa;EAEbC,OAFa;EAGbC,QAAQ,GAAG,KAHE;EAIbC,OAAO,GAAG,CAJG;EAKbC,SAAS,GAAG,KALC;EAMbC;AANa,CAAjB;EAQI,MAAMC,OAAO,GAAGC,eAAe,CAAC;IAAEC,SAAS,EAAEN,QAAb;IAAuBO,WAAW,EAAE,GAApC;IAAyCC,WAAW,EAAE;GAAvD,CAA/B;EACA,MAAMC,MAAM,GAAGL,OAAO,CAACM,QAAR,CAAiB,MAAjB,CAAf;EAEA,MAAMC,KAAK,GAAGC,QAAA,CAAeC,IAAf,CACVf,QADU,CAAd;;EAIA,IAAI,CAACa,KAAL,EAAY;IACR,OAAOA,KAAP;;;EAGJ,IAAI,OAAOA,KAAK,CAACG,GAAb,KAAqB,QAAzB,EAAmC;IAC/B,MAAM,IAAIC,KAAJ,CAAU,iEAAV,CAAN;;;;;;;;;;EASJ,SAASC,WAAT,CAAqBC,KAArB;;;;;;;IAKI,SAASC,WAAT,CAAqBD,KAArB;MACI,MAAME,QAAQ,GAAIF,KAAuB,CAACG,GAA1C;;MACA,IAAID,QAAQ,KAAK,QAAb,IAAyBA,QAAQ,KAAK,OAAtC,IAAiDA,QAAQ,KAAK,OAAlE,EAA2E;QACvEf,OAAO,CAACiB,IAAR;;;;IAGRJ,KAAK,CAACK,aAAN,CAAoBC,gBAApB,CAAqC,OAArC,EAA8CL,WAA9C,EAA2D;MAAEM,IAAI,EAAE;KAAnE;IACAP,KAAK,CAACQ,cAAN;;IACAd,KAAK,QAAL,4BAAAA,KAAK,CAAEe,KAAP,kCAAcC,OAAd,iCAAcA,OAAd,CAAwBV,KAAxB;;;EAGJ,SAASW,UAAT,CAAoBX,KAApB;;;IACIb,OAAO,CAACyB,IAAR;IACAlB,KAAK,QAAL,6BAAAA,KAAK,CAAEe,KAAP,mCAAcI,MAAd,kCAAcA,MAAd,CAAuBb,KAAvB;;;EAGJ,oBACIL,aAAA,SAAA,MAAA,eACIA,aAAA,CAACmB,aAAD;IACIC,MAAM,EAAGC,WAAD;MACJ,oBAAOrB,YAAA,CAAmBD,KAAnB,mDACAA,KAAK,CAACe,KADN,GAEAO,WAFA;QAGHN,OAAO,EAAEX,WAHN;QAIHc,MAAM,EAAEF;SAJZ;;IAOJM,KAAK,EAAE9B;IACPU,GAAG,EAAEH,KAAK,CAACG;GAVf,CADJ,EAaKL,MAAM,IAAIV,OAAV,gBACGa,aAAA,CAACuB,GAAD;IACIC,EAAE,EAAEC;IACJC,MAAM,EAAErC;IACRiC,KAAK,EAAE9B;IACPmC,SAAS,EAAE,CAACC,MAAM,CAACpC,OAAR,EAAiBD,yBAAjB;IACXsC,UAAU,EAAC;IACXC,YAAY,EAAC;IACbC,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,KAAK,EAAC;IACNC,QAAQ,EAAC;IACTC,SAAS,EAAC;GAZd,EAcK9C,SAAS,gBAAGU,aAAA,CAACqC,YAAD,MAAA,CAAH,GAAsB,IAdpC,EAeK,OAAOlD,OAAP,KAAmB,UAAnB,GAAgCA,OAAO,EAAvC,GAA4CA,OAfjD,CADH,GAkBG,IA/BR,CADJ;AAmCH;;;;"}

package/lib/checkbox-field/checkbox-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=require("../box/box.js"),a=require("../text/text.js"),t=require("ariakit-react-utils"),r=require("./checkbox-icon.js"),c=require("./checkbox-field.module.css.js");const o=["label","icon","disabled","indeterminate","defaultChecked","onChange"];exports.CheckboxField=l.forwardRef((function(u,d){var i,s,b;let{label:f,icon:h,disabled:x,indeterminate:k,defaultChecked:p,onChange:m}=u,y=e.objectWithoutProperties(u,o);"boolean"!=typeof k||"boolean"==typeof y.checked||(console.warn("Cannot use indeterminate on an uncontrolled checkbox"),k=void 0),f||y["aria-label"]||y["aria-labelledby"]||console.warn("A Checkbox needs a label");const[j,C]=l.useState(!1),[q,B]=l.useState(null!=(i=null!=(s=y.checked)?s:p)&&i),E=null!=(b=y.checked)?b:q,g=l.useRef(null),v=t.useForkRef(g,d);return l.useEffect((function(){g.current&&"boolean"==typeof k&&(g.current.indeterminate=k)}),[k]),l.createElement(n.Box,{as:"label",display:"flex",alignItems:"center",className:[c.default.container,x?c.default.disabled:null,E?c.default.checked:null,j?c.default.keyFocused:null]},l.createElement("input",e.objectSpread2(e.objectSpread2({},y),{},{ref:v,type:"checkbox","aria-checked":k?"mixed":E,checked:E,disabled:x,onChange:e=>{null==m||m(e),e.defaultPrevented||B(e.currentTarget.checked)},onBlur:e=>{C(!1),null==y||null==y.onBlur||y.onBlur(e)},onKeyUp:e=>{C(!0),null==y||null==y.onKeyUp||y.onKeyUp(e)}})),l.createElement(r.CheckboxIcon,{checked:E,disabled:x,indeterminate:k,"aria-hidden":!0}),h?l.createElement(n.Box,{display:"flex",className:c.default.icon,"aria-hidden":!0},h):null,f?l.createElement(n.Box,{display:"flex",className:c.default.label},l.createElement(a.Text,null,f)):null)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=require("../box/box.js"),a=require("../text/text.js"),t=require("./checkbox-icon.js"),r=require("./checkbox-field.module.css.js"),c=require("./use-fork-ref.js");const o=["label","icon","disabled","indeterminate","defaultChecked","onChange"];exports.CheckboxField=l.forwardRef((function(u,d){var i,s,b;let{label:f,icon:h,disabled:x,indeterminate:k,defaultChecked:p,onChange:m}=u,y=e.objectWithoutProperties(u,o);"boolean"!=typeof k||"boolean"==typeof y.checked||(console.warn("Cannot use indeterminate on an uncontrolled checkbox"),k=void 0),f||y["aria-label"]||y["aria-labelledby"]||console.warn("A Checkbox needs a label");const[j,C]=l.useState(!1),[q,B]=l.useState(null!=(i=null!=(s=y.checked)?s:p)&&i),E=null!=(b=y.checked)?b:q,g=l.useRef(null),v=c.useForkRef(g,d);return l.useEffect((function(){g.current&&"boolean"==typeof k&&(g.current.indeterminate=k)}),[k]),l.createElement(n.Box,{as:"label",display:"flex",alignItems:"center",className:[r.default.container,x?r.default.disabled:null,E?r.default.checked:null,j?r.default.keyFocused:null]},l.createElement("input",e.objectSpread2(e.objectSpread2({},y),{},{ref:v,type:"checkbox","aria-checked":k?"mixed":E,checked:E,disabled:x,onChange:e=>{null==m||m(e),e.defaultPrevented||B(e.currentTarget.checked)},onBlur:e=>{C(!1),null==y||null==y.onBlur||y.onBlur(e)},onKeyUp:e=>{C(!0),null==y||null==y.onKeyUp||y.onKeyUp(e)}})),l.createElement(t.CheckboxIcon,{checked:E,disabled:x,indeterminate:k,"aria-hidden":!0}),h?l.createElement(n.Box,{display:"flex",className:r.default.icon,"aria-hidden":!0},h):null,f?l.createElement(n.Box,{display:"flex",className:r.default.label},l.createElement(a.Text,null,f)):null)}));
 //# sourceMappingURL=checkbox-field.js.map

package/lib/checkbox-field/checkbox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"4ZAqCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,KAASA,EAATC,SAAeA,EAAfC,cAAyBA,EAAzBC,eAAwCA,EAAxCC,SAAwDA,KAAaC,iCAIxC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfV,GAAUM,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBd,YAAe,IAC5Ce,EAAcC,GAAchB,6BAAeQ,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAclB,SAA+B,MAC7CmB,EAAcC,aAAWF,EAAajB,GAU5C,OATAD,aACI,WACQkB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDL,gBAACsB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCb,2DACQQ,OACJP,IAAKkB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB9B,gBAACmC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EACGH,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOxB,uBACjCA,GAEL,KACHD,EACGF,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOzB,OAClCF,gBAACoC,YAAMlC,IAEX"}
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"0ZAqCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,KAASA,EAATC,SAAeA,EAAfC,cAAyBA,EAAzBC,eAAwCA,EAAxCC,SAAwDA,KAAaC,iCAIxC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfV,GAAUM,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBd,YAAe,IAC5Ce,EAAcC,GAAchB,6BAAeQ,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAclB,SAA+B,MAC7CmB,EAAcC,aAAWF,EAAajB,GAU5C,OATAD,aACI,WACQkB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDL,gBAACsB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCb,2DACQQ,OACJP,IAAKkB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB9B,gBAACmC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EACGH,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOxB,uBACjCA,GAEL,KACHD,EACGF,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOzB,OAClCF,gBAACoC,YAAMlC,IAEX"}

package/lib/checkbox-field/use-fork-ref.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * Merges React Refs into a single memoized function ref so you can pass it to an element.
+ * @example
+ * const Component = React.forwardRef((props, ref) => {
+ *   const internalRef = React.useRef();
+ *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
+ * });
+ */
+declare function useForkRef(...refs: Array<React.Ref<unknown> | undefined>): ((value: unknown) => void) | undefined;
+export { useForkRef };

package/lib/checkbox-field/use-fork-ref.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useForkRef=function(...r){return e.useMemo(()=>{if(r.some(Boolean))return e=>{r.forEach(r=>function(e,r){"function"==typeof e?e(r):e&&(e.current=r)}(r,e))}},r)};
+//# sourceMappingURL=use-fork-ref.js.map

package/lib/checkbox-field/use-fork-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fork-ref.js","sources":["../../src/checkbox-field/use-fork-ref.ts"],"sourcesContent":["import { useMemo } from 'react'\n\n/**\n * Sets both a function and object React ref.\n */\nfunction setRef<T>(\n    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,\n    value: T,\n) {\n    if (typeof ref === 'function') {\n        ref(value)\n    } else if (ref) {\n        ref.current = value\n    }\n}\n\n/**\n * Merges React Refs into a single memoized function ref so you can pass it to an element.\n * @example\n * const Component = React.forwardRef((props, ref) => {\n *   const internalRef = React.useRef();\n *   return <div {...props} ref={useForkRef(internalRef, ref)} />;\n * });\n */\nfunction useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {\n    return useMemo(\n        () => {\n            if (!refs.some(Boolean)) return\n            return (value: unknown) => {\n                refs.forEach((ref) => setRef(ref, value))\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        refs,\n    )\n}\n\nexport { useForkRef }\n"],"names":["refs","useMemo","some","Boolean","value","forEach","ref","current","setRef"],"mappings":"8GAwBA,YAAuBA,GACnB,OAAOC,UACH,KACI,GAAKD,EAAKE,KAAKC,SACf,OAAQC,IACJJ,EAAKK,QAASC,GAxB9B,SACIA,EACAF,GAEmB,mBAARE,EACPA,EAAIF,GACGE,IACPA,EAAIC,QAAUH,GAiBgBI,CAAOF,EAAKF,MAI1CJ"}

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"),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"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),M=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"),B=require("./text-field/text-field.js"),D=require("./password-field/password-field.js"),f=require("./select-field/select-field.js"),S=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"),w=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),L=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"),G=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=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=M.Heading,exports.Prose=b.Prose,exports.ButtonLink=T.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=B.TextField,exports.PasswordField=D.PasswordField,exports.SelectField=f.SelectField,exports.SwitchField=S.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.Menu=v.Menu,exports.MenuButton=v.MenuButton,exports.MenuGroup=v.MenuGroup,exports.MenuItem=v.MenuItem,exports.MenuList=v.MenuList,exports.SubMenu=v.SubMenu,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=w.default,exports.COLORS=A.COLORS,exports.ColorPicker=L.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,exports.DeprecatedModal=G.DeprecatedModal,exports.DeprecatedModalActions=G.DeprecatedModalActions,exports.DeprecatedModalBody=G.DeprecatedModalBody,exports.DeprecatedModalCloseButton=G.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=G.DeprecatedModalFooter,exports.DeprecatedModalHeader=G.DeprecatedModalHeader;
 //# 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,7 +1,8 @@
 import * as React from 'react';
-import * as Ariakit from 'ariakit/menu';
+import { MenuStoreProps, MenuProps as AriakitMenuProps, MenuButtonProps as AriakitMenuButtonProps } from '@ariakit/react';
+import './menu.less';
 declare type NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>;
-declare type MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {
+declare type MenuProps = Omit<MenuStoreProps, '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.
@@ -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 type MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>;
+declare function Menu({ children, onItemSelect, ...props }: MenuProps): JSX.Element;
+declare type MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | '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'>;
+declare type MenuListProps = Omit<AriakitMenuProps, 'store' | '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 };