@doist/reactist 28.5.4 → 28.6.0

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/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.4",
+    "version": "28.6.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {