@doist/reactist 28.5.3 → 28.6.0

package/es/text-area/text-area.js

@@ -107,7 +107,7 @@ function useAutoExpand({
     return () => textAreaElement.removeEventListener('input', handleInput);
   }, [autoExpand, containerRef, internalRef, isControlled]);
   React.useEffect(function setupAutoExpandWhenControlled() {
-    if (!isControlled) {
+    if (!isControlled || !autoExpand) {
       return;
     }
 
@@ -116,7 +116,7 @@ function useAutoExpand({
     if (containerElement) {
       containerElement.dataset.replicatedValue = value;
     }
-  }, [value, containerRef, isControlled]);
+  }, [value, containerRef, isControlled, autoExpand]);
 }
 
 export { TextArea };

package/es/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<\n            BaseFieldVariantProps,\n            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'\n        > {\n    /**\n     * The value of the text area.\n     *\n     * If this prop is not specified, the text area will be uncontrolled and the component will\n     * manage its own state.\n     */\n    value?: string\n\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    useAutoExpand({ value, autoExpand, containerRef, internalRef })\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction useAutoExpand({\n    value,\n    autoExpand,\n    containerRef,\n    internalRef,\n}: {\n    value: string | undefined\n    autoExpand: boolean\n    containerRef: React.RefObject<HTMLDivElement>\n    internalRef: React.RefObject<HTMLTextAreaElement>\n}) {\n    const isControlled = value !== undefined\n\n    React.useEffect(\n        function setupAutoExpandWhenUncontrolled() {\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand || isControlled) {\n                return undefined\n            }\n\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand, containerRef, internalRef, isControlled],\n    )\n\n    React.useEffect(\n        function setupAutoExpandWhenControlled() {\n            if (!isControlled) {\n                return\n            }\n\n            const containerElement = containerRef.current\n            if (containerElement) {\n                containerElement.dataset.replicatedValue = value\n            }\n        },\n        [value, containerRef, isControlled],\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","useAutoExpand","textAreaClassName","classNames","styles","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread","event","isControlled","undefined","useEffect","setupAutoExpandWhenUncontrolled","textAreaElement","current","containerElement","handleAutoExpand","dataset","replicatedValue","handleInput","currentTarget","addEventListener","removeEventListener","setupAutoExpandWhenControlled"],"mappings":"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"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<\n            BaseFieldVariantProps,\n            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'\n        > {\n    /**\n     * The value of the text area.\n     *\n     * If this prop is not specified, the text area will be uncontrolled and the component will\n     * manage its own state.\n     */\n    value?: string\n\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    useAutoExpand({ value, autoExpand, containerRef, internalRef })\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction useAutoExpand({\n    value,\n    autoExpand,\n    containerRef,\n    internalRef,\n}: {\n    value: string | undefined\n    autoExpand: boolean\n    containerRef: React.RefObject<HTMLDivElement>\n    internalRef: React.RefObject<HTMLTextAreaElement>\n}) {\n    const isControlled = value !== undefined\n\n    React.useEffect(\n        function setupAutoExpandWhenUncontrolled() {\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand || isControlled) {\n                return undefined\n            }\n\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand, containerRef, internalRef, isControlled],\n    )\n\n    React.useEffect(\n        function setupAutoExpandWhenControlled() {\n            if (!isControlled || !autoExpand) {\n                return\n            }\n\n            const containerElement = containerRef.current\n            if (containerElement) {\n                containerElement.dataset.replicatedValue = value\n            }\n        },\n        [value, containerRef, isControlled, autoExpand],\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","useAutoExpand","textAreaClassName","classNames","styles","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread","event","isControlled","undefined","useEffect","setupAutoExpandWhenUncontrolled","textAreaElement","current","containerElement","handleAutoExpand","dataset","replicatedValue","handleInput","currentTarget","addEventListener","removeEventListener","setupAutoExpandWhenControlled"],"mappings":"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"}

package/es/tooltip/tooltip.js

@@ -24,7 +24,7 @@ function TooltipProvider({
   }, children);
 }
 
-function Tooltip({
+const Tooltip = /*#__PURE__*/React.forwardRef(({
   children,
   content,
   position = 'top',
@@ -33,7 +33,7 @@ function Tooltip({
   showTimeout,
   hideTimeout,
   exceptionallySetClassName
-}) {
+}, ref) => {
   const {
     showTimeout: globalShowTimeout,
     hideTimeout: globalHideTimeout
@@ -43,6 +43,7 @@ function Tooltip({
     showTimeout: showTimeout != null ? showTimeout : globalShowTimeout,
     hideTimeout: hideTimeout != null ? hideTimeout : globalHideTimeout
   });
+  React.useImperativeHandle(ref, () => tooltip, [tooltip]);
   const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);
 
@@ -73,7 +74,8 @@ function Tooltip({
       textAlign: "center"
     })
   }, withArrow ? /*#__PURE__*/React.createElement(TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
-}
+});
+Tooltip.displayName = 'Tooltip';
 
 export { Tooltip, TooltipProvider };
 //# 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    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'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\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     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    showTimeout,\n    hideTimeout,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n        TooltipContext,\n    )\n    const tooltip = useTooltipStore({\n        placement: position,\n        showTimeout: showTimeout ?? globalShowTimeout,\n        hideTimeout: hideTimeout ?? globalHideTimeout,\n    })\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    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\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                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","children","value","useMemo","createElement","Provider","Tooltip","content","position","gapSize","withArrow","exceptionallySetClassName","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","isOpen","useState","child","Children","only","ref","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"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, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\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     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n            TooltipContext,\n        )\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\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        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\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                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","children","value","useMemo","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),r=require("use-callback-ref"),n=require("../base-field/base-field.js"),l=require("../box/box.js"),u=require("./text-area.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var s=o(t),d=i(a);const c=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","rows","autoExpand","disableResize","onChange"],f=["onChange"];exports.TextArea=s.forwardRef((function(t,a){let{variant:i="default",id:o,label:b,value:x,auxiliaryLabel:p,message:m,tone:v,maxWidth:h,maxLength:g,hidden:j,"aria-describedby":y,rows:E,autoExpand:R=!1,disableResize:L=!1,onChange:q}=t,C=e.objectWithoutProperties(t,c);const w=s.useRef(null),O=s.useRef(null),P=r.useMergeRefs([a,O]);!function({value:e,autoExpand:t,containerRef:a,internalRef:r}){const n=void 0!==e;s.useEffect((function(){const e=r.current;if(!e||!t||n)return;const l=a.current;function u(e){l&&(l.dataset.replicatedValue=e)}function i(e){u(e.currentTarget.value)}return u(e.value),e.addEventListener("input",i),()=>e.removeEventListener("input",i)}),[t,a,r,n]),s.useEffect((function(){if(!n)return;const t=a.current;t&&(t.dataset.replicatedValue=e)}),[e,a,n])}({value:x,autoExpand:R,containerRef:w,internalRef:O});const _=d.default([R?u.default.disableResize:null,L?u.default.disableResize:null]);return s.createElement(n.BaseField,{variant:i,id:o,label:b,value:x,auxiliaryLabel:p,message:m,tone:v,hidden:j,"aria-describedby":y,className:[u.default.textAreaContainer,"error"===v?u.default.error:null,"bordered"===i?u.default.bordered:null],maxWidth:h,maxLength:g},t=>{let{onChange:a}=t,r=e.objectWithoutProperties(t,f);return s.createElement(l.Box,{width:"full",display:"flex",className:u.default.innerContainer,ref:w},s.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},C),r),{},{ref:P,rows:E,className:_,maxLength:g,onChange:e=>{null==q||q(e),null==a||a(e)}})))})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),r=require("use-callback-ref"),n=require("../base-field/base-field.js"),l=require("../box/box.js"),u=require("./text-area.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var s=o(t),d=i(a);const c=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","rows","autoExpand","disableResize","onChange"],f=["onChange"];exports.TextArea=s.forwardRef((function(t,a){let{variant:i="default",id:o,label:b,value:x,auxiliaryLabel:p,message:m,tone:v,maxWidth:h,maxLength:g,hidden:j,"aria-describedby":y,rows:E,autoExpand:R=!1,disableResize:L=!1,onChange:q}=t,C=e.objectWithoutProperties(t,c);const w=s.useRef(null),O=s.useRef(null),P=r.useMergeRefs([a,O]);!function({value:e,autoExpand:t,containerRef:a,internalRef:r}){const n=void 0!==e;s.useEffect((function(){const e=r.current;if(!e||!t||n)return;const l=a.current;function u(e){l&&(l.dataset.replicatedValue=e)}function i(e){u(e.currentTarget.value)}return u(e.value),e.addEventListener("input",i),()=>e.removeEventListener("input",i)}),[t,a,r,n]),s.useEffect((function(){if(!n||!t)return;const r=a.current;r&&(r.dataset.replicatedValue=e)}),[e,a,n,t])}({value:x,autoExpand:R,containerRef:w,internalRef:O});const _=d.default([R?u.default.disableResize:null,L?u.default.disableResize:null]);return s.createElement(n.BaseField,{variant:i,id:o,label:b,value:x,auxiliaryLabel:p,message:m,tone:v,hidden:j,"aria-describedby":y,className:[u.default.textAreaContainer,"error"===v?u.default.error:null,"bordered"===i?u.default.bordered:null],maxWidth:h,maxLength:g},t=>{let{onChange:a}=t,r=e.objectWithoutProperties(t,f);return s.createElement(l.Box,{width:"full",display:"flex",className:u.default.innerContainer,ref:w},s.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},C),r),{},{ref:P,rows:E,className:_,maxLength:g,onChange:e=>{null==q||q(e),null==a||a(e)}})))})}));
 //# sourceMappingURL=text-area.js.map

package/lib/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<\n            BaseFieldVariantProps,\n            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'\n        > {\n    /**\n     * The value of the text area.\n     *\n     * If this prop is not specified, the text area will be uncontrolled and the component will\n     * manage its own state.\n     */\n    value?: string\n\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    useAutoExpand({ value, autoExpand, containerRef, internalRef })\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction useAutoExpand({\n    value,\n    autoExpand,\n    containerRef,\n    internalRef,\n}: {\n    value: string | undefined\n    autoExpand: boolean\n    containerRef: React.RefObject<HTMLDivElement>\n    internalRef: React.RefObject<HTMLTextAreaElement>\n}) {\n    const isControlled = value !== undefined\n\n    React.useEffect(\n        function setupAutoExpandWhenUncontrolled() {\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand || isControlled) {\n                return undefined\n            }\n\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand, containerRef, internalRef, isControlled],\n    )\n\n    React.useEffect(\n        function setupAutoExpandWhenControlled() {\n            if (!isControlled) {\n                return\n            }\n\n            const containerElement = containerRef.current\n            if (containerElement) {\n                containerElement.dataset.replicatedValue = value\n            }\n        },\n        [value, containerRef, isControlled],\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","isControlled","undefined","useEffect","textAreaElement","current","containerElement","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","addEventListener","removeEventListener","useAutoExpand","textAreaClassName","classNames","styles","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAkDiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,KAqD3C,UAAuBrB,MACnBA,EADmBU,WAEnBA,EAFmBS,aAGnBA,EAHmBE,YAInBA,IAOA,MAAMG,OAAyBC,IAAVzB,EAErBN,EAAMgC,WACF,WACI,MAAMC,EAAkBN,EAAYO,QACpC,IAAKD,IAAoBjB,GAAcc,EACnC,OAGJ,MAAMK,EAAmBV,EAAaS,QAEtC,SAASE,EAAiB9B,GAClB6B,IACAA,EAAiBE,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAMlE,OAFA8B,EAAiBH,EAAgB3B,OACjC2B,EAAgBS,iBAAiB,QAASH,GACnC,IAAMN,EAAgBU,oBAAoB,QAASJ,KAE9D,CAACvB,EAAYS,EAAcE,EAAaG,IAG5C9B,EAAMgC,WACF,WACI,IAAKF,EACD,OAGJ,MAAMK,EAAmBV,EAAaS,QAClCC,IACAA,EAAiBE,QAAQC,gBAAkBhC,KAGnD,CAACA,EAAOmB,EAAcK,IAtG1Bc,CAAc,CAAEtC,MAAAA,EAAOU,WAAAA,EAAYS,aAAAA,EAAcE,YAAAA,IAEjD,MAAMkB,EAAoBC,EAAAA,QAAW,CACjC9B,EAAa+B,EAAAA,QAAO9B,cAAgB,KACpCA,EAAgB8B,EAAM,QAAC9B,cAAgB,OAG3C,OACIjB,EAACgD,cAAAC,YACG,CAAA9C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBoC,UAAW,CACPH,EAAM,QAACI,kBACE,UAAT1C,EAAmBsC,EAAM,QAACK,MAAQ,KACtB,aAAZjD,EAAyB4C,EAAAA,QAAOM,SAAW,MAE/C3C,SAAUA,EACVC,UAAWA,GAEV2C,IAAA,IAACpC,SAAEA,GAAHoC,EAAgBC,EAAhBjC,EAAAC,wBAAA+B,EAAAE,GAAA,OACGxD,EAACgD,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWH,EAAM,QAACa,eAClB1D,IAAKuB,GAELzB,EACQgD,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQxC,GACAkC,GAFR,GAAA,CAGIrD,IAAK0B,EACLb,KAAMA,EACNmC,UAAWL,EACXlC,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<\n            BaseFieldVariantProps,\n            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'\n        > {\n    /**\n     * The value of the text area.\n     *\n     * If this prop is not specified, the text area will be uncontrolled and the component will\n     * manage its own state.\n     */\n    value?: string\n\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    useAutoExpand({ value, autoExpand, containerRef, internalRef })\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction useAutoExpand({\n    value,\n    autoExpand,\n    containerRef,\n    internalRef,\n}: {\n    value: string | undefined\n    autoExpand: boolean\n    containerRef: React.RefObject<HTMLDivElement>\n    internalRef: React.RefObject<HTMLTextAreaElement>\n}) {\n    const isControlled = value !== undefined\n\n    React.useEffect(\n        function setupAutoExpandWhenUncontrolled() {\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand || isControlled) {\n                return undefined\n            }\n\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand, containerRef, internalRef, isControlled],\n    )\n\n    React.useEffect(\n        function setupAutoExpandWhenControlled() {\n            if (!isControlled || !autoExpand) {\n                return\n            }\n\n            const containerElement = containerRef.current\n            if (containerElement) {\n                containerElement.dataset.replicatedValue = value\n            }\n        },\n        [value, containerRef, isControlled, autoExpand],\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","isControlled","undefined","useEffect","textAreaElement","current","containerElement","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","addEventListener","removeEventListener","useAutoExpand","textAreaClassName","classNames","styles","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAkDiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,KAqD3C,UAAuBrB,MACnBA,EADmBU,WAEnBA,EAFmBS,aAGnBA,EAHmBE,YAInBA,IAOA,MAAMG,OAAyBC,IAAVzB,EAErBN,EAAMgC,WACF,WACI,MAAMC,EAAkBN,EAAYO,QACpC,IAAKD,IAAoBjB,GAAcc,EACnC,OAGJ,MAAMK,EAAmBV,EAAaS,QAEtC,SAASE,EAAiB9B,GAClB6B,IACAA,EAAiBE,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAMlE,OAFA8B,EAAiBH,EAAgB3B,OACjC2B,EAAgBS,iBAAiB,QAASH,GACnC,IAAMN,EAAgBU,oBAAoB,QAASJ,KAE9D,CAACvB,EAAYS,EAAcE,EAAaG,IAG5C9B,EAAMgC,WACF,WACI,IAAKF,IAAiBd,EAClB,OAGJ,MAAMmB,EAAmBV,EAAaS,QAClCC,IACAA,EAAiBE,QAAQC,gBAAkBhC,KAGnD,CAACA,EAAOmB,EAAcK,EAAcd,IAtGxC4B,CAAc,CAAEtC,MAAAA,EAAOU,WAAAA,EAAYS,aAAAA,EAAcE,YAAAA,IAEjD,MAAMkB,EAAoBC,EAAAA,QAAW,CACjC9B,EAAa+B,EAAAA,QAAO9B,cAAgB,KACpCA,EAAgB8B,EAAM,QAAC9B,cAAgB,OAG3C,OACIjB,EAACgD,cAAAC,YACG,CAAA9C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBoC,UAAW,CACPH,EAAM,QAACI,kBACE,UAAT1C,EAAmBsC,EAAM,QAACK,MAAQ,KACtB,aAAZjD,EAAyB4C,EAAAA,QAAOM,SAAW,MAE/C3C,SAAUA,EACVC,UAAWA,GAEV2C,IAAA,IAACpC,SAAEA,GAAHoC,EAAgBC,EAAhBjC,EAAAC,wBAAA+B,EAAAE,GAAA,OACGxD,EAACgD,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWH,EAAM,QAACa,eAClB1D,IAAKuB,GAELzB,EACQgD,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQxC,GACAkC,GAFR,GAAA,CAGIrD,IAAK0B,EACLb,KAAMA,EACNmC,UAAWL,EACXlC,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}

package/lib/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TooltipStoreState } from '@ariakit/react';
+import type { TooltipStoreState, TooltipStore } from '@ariakit/react';
 import type { ObfuscatedClassName } from '../utils/common-types';
 declare function TooltipProvider({ showTimeout, hideTimeout, children, }: React.PropsWithChildren<{
     showTimeout?: number;
@@ -67,6 +67,6 @@ interface TooltipProps extends ObfuscatedClassName {
      */
     hideTimeout?: number;
 }
-declare function Tooltip({ children, content, position, gapSize, withArrow, showTimeout, hideTimeout, exceptionallySetClassName, }: TooltipProps): React.JSX.Element | null;
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipStore>>;
 export type { TooltipProps };
 export { Tooltip, TooltipProvider };

package/lib/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@ariakit/react"),o=require("../box/box.js"),r=require("./tooltip.module.css.js");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,t}var i=n(e);const u=i.createContext({showTimeout:500,hideTimeout:100});exports.Tooltip=function({children:e,content:n,position:l="top",gapSize:a=3,withArrow:s=!1,showTimeout:c,hideTimeout:d,exceptionallySetClassName:m}){const{showTimeout:p,hideTimeout:f}=i.useContext(u),h=t.useTooltipStore({placement:l,showTimeout:null!=c?c:p,hideTimeout:null!=d?d:f}),T=h.useState("open"),w=i.Children.only(e);if(!w)return w;if("string"==typeof w.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return i.createElement(i.Fragment,null,i.createElement(t.TooltipAnchor,{render:w,store:h,ref:w.ref}),T&&n?i.createElement(t.Tooltip,{store:h,gutter:a,render:i.createElement(o.Box,{className:[r.default.tooltip,m],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"})},s?i.createElement(t.TooltipArrow,null):null,"function"==typeof n?n():n):null)},exports.TooltipProvider=function({showTimeout:e=500,hideTimeout:t=100,children:o}){const r=i.useMemo(()=>({showTimeout:e,hideTimeout:t}),[e,t]);return i.createElement(u.Provider,{value:r},o)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@ariakit/react"),o=require("../box/box.js"),r=require("./tooltip.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,t}var n=i(e);const l=n.createContext({showTimeout:500,hideTimeout:100}),u=n.forwardRef(({children:e,content:i,position:u="top",gapSize:a=3,withArrow:s=!1,showTimeout:d,hideTimeout:c,exceptionallySetClassName:m},p)=>{const{showTimeout:f,hideTimeout:h}=n.useContext(l),T=t.useTooltipStore({placement:u,showTimeout:null!=d?d:f,hideTimeout:null!=c?c:h});n.useImperativeHandle(p,()=>T,[T]);const w=T.useState("open"),b=n.Children.only(e);if(!b)return b;if("string"==typeof b.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return n.createElement(n.Fragment,null,n.createElement(t.TooltipAnchor,{render:b,store:T,ref:b.ref}),w&&i?n.createElement(t.Tooltip,{store:T,gutter:a,render:n.createElement(o.Box,{className:[r.default.tooltip,m],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"})},s?n.createElement(t.TooltipArrow,null):null,"function"==typeof i?i():i):null)});u.displayName="Tooltip",exports.Tooltip=u,exports.TooltipProvider=function({showTimeout:e=500,hideTimeout:t=100,children:o}){const r=n.useMemo(()=>({showTimeout:e,hideTimeout:t}),[e,t]);return n.createElement(l.Provider,{value:r},o)};
 //# 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    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'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\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     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    showTimeout,\n    hideTimeout,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n        TooltipContext,\n    )\n    const tooltip = useTooltipStore({\n        placement: position,\n        showTimeout: showTimeout ?? globalShowTimeout,\n        hideTimeout: hideTimeout ?? globalHideTimeout,\n    })\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    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\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                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["TooltipContext","React","createContext","showTimeout","hideTimeout","children","content","position","gapSize","withArrow","exceptionallySetClassName","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","isOpen","useState","child","Children","only","ref","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","value","useMemo","Provider"],"mappings":"kdAeA,MAQMA,EAAiBC,EAAMC,cAAmC,CAC5DC,YATuB,IAUvBC,YATuB,sBA6F3B,UAAiBC,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCN,YAMbA,EANaC,YAObA,EAPaM,0BAQbA,IAEA,MAAQP,YAAaQ,EAAmBP,YAAaQ,GAAsBX,EAAMY,WAC7Eb,GAEEc,EAAUC,EAAAA,gBAAgB,CAC5BC,UAAWT,EACXJ,YAAaA,MAAAA,EAAAA,EAAeQ,EAC5BP,YAAaA,MAAAA,EAAAA,EAAeQ,IAE1BK,EAASH,EAAQI,SAAS,QAE1BC,EAAQlB,EAAMmB,SAASC,KACzBhB,GAGJ,IAAKc,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEAGpB,OACItB,EAAAuB,cAAAvB,EAAAwB,SAAA,KACIxB,EAAAuB,cAACE,gBAAa,CAACC,OAAQR,EAAOS,MAAOd,EAASQ,IAAKH,EAAMG,MACxDL,GAAUX,EACPL,EAACuB,cAAAK,EAAAA,QACG,CAAAD,MAAOd,EACPgB,OAAQtB,EACRmB,OACI1B,EAAAuB,cAACO,MAAG,CACAC,UAAW,CAACC,EAAAA,QAAOnB,QAASJ,GAC5BwB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,YAIjBhC,EAAYR,EAAAuB,cAACkB,EAADA,aAAgB,MAAG,KACZ,mBAAZpC,EAAyBA,IAAYA,GAEjD,+BAzIhB,UAAyBH,YACrBA,EAduB,IAaFC,YAErBA,EAduB,IAYFC,SAGrBA,IAKA,MAAMsC,EAAQ1C,EAAM2C,QAAQ,KAAO,CAAEzC,YAAAA,EAAaC,YAAAA,IAAgB,CAACD,EAAaC,IAChF,OAAOH,EAAAuB,cAACxB,EAAe6C,SAAQ,CAACF,MAAOA,GAAQtC"}
+{"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, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\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     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n            TooltipContext,\n        )\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\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        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\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                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["TooltipContext","React","createContext","showTimeout","hideTimeout","Tooltip","forwardRef","children","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName","value","useMemo","Provider"],"mappings":"kdAeA,MAQMA,EAAiBC,EAAMC,cAAmC,CAC5DC,YATuB,IAUvBC,YATuB,MA6FrBC,EAAUJ,EAAMK,WAClB,EAEQC,SAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,MACXC,QAAAA,EAAU,EACVC,UAAAA,GAAY,EACZR,YAAAA,EACAC,YAAAA,EACAQ,0BAAAA,GAEJC,KAEA,MAAQV,YAAaW,EAAmBV,YAAaW,GAAsBd,EAAMe,WAC7EhB,GAGEiB,EAAUC,EAAAA,gBAAgB,CAC5BC,UAAWV,EACXN,YAAaA,MAAAA,EAAAA,EAAeW,EAC5BV,YAAaA,MAAAA,EAAAA,EAAeW,IAGhCd,EAAMmB,oBAAoBP,EAAK,IAAMI,EAAS,CAACA,IAE/C,MAAMI,EAASJ,EAAQK,SAAS,QAE1BC,EAAQtB,EAAMuB,SAASC,KACzBlB,GAGJ,IAAKgB,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMV,IACb,MAAM,IAAIa,MAAM,mEAGpB,OACIzB,EAAA0B,cAAA1B,EAAA2B,SAAA,KACI3B,EAAA0B,cAACE,gBAAa,CAACC,OAAQP,EAAOQ,MAAOd,EAASJ,IAAKU,EAAMV,MACxDQ,GAAUb,EACPP,EAAC0B,cAAAK,EAAAA,QACG,CAAAD,MAAOd,EACPgB,OAAQvB,EACRoB,OACI7B,EAAA0B,cAACO,MAAG,CACAC,UAAW,CAACC,EAAAA,QAAOnB,QAASL,GAC5ByB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,YAIjBjC,EAAYV,EAAA0B,cAACkB,EAADA,aAAgB,MAAG,KACZ,mBAAZrC,EAAyBA,IAAYA,GAEjD,QAMpBH,EAAQyC,YAAc,oDAvJtB,UAAyB3C,YACrBA,EAduB,IAaFC,YAErBA,EAduB,IAYFG,SAGrBA,IAKA,MAAMwC,EAAQ9C,EAAM+C,QAAQ,KAAO,CAAE7C,YAAAA,EAAaC,YAAAA,IAAgB,CAACD,EAAaC,IAChF,OAAOH,EAAA0B,cAAC3B,EAAeiD,SAAQ,CAACF,MAAOA,GAAQxC"}

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "28.5.3",
+    "version": "28.6.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {