@doist/reactist 12.0.1 → 12.0.2

package/es/components/tooltip/tooltip.js

@@ -45,6 +45,8 @@ function Tooltip(_ref) {
 
 
   function handleFocus(event) {
+    var _child$props;
+
     // If focus is not followed by a key up event, does it mean that it's not
     // an intentional keyboard focus? Not sure but it seems to work.
     // This may be resolved soon in an upcoming version of reakit:
@@ -62,21 +64,16 @@ function Tooltip(_ref) {
     }); // Prevent tooltip.show from being called by TooltipReference
 
     event.preventDefault();
-    child.props.onFocus == null ? void 0 : child.props.onFocus(event);
+    child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipAnchor, {
-    state: state,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipAnchor, _objectSpread2(_objectSpread2({
+    state: state
+  }, child.props), {}, {
+    ref: child.ref,
     onFocus: handleFocus
-  }, anchorProps => {
-    const {
-      onFocus,
-      onBlur
-    } = anchorProps;
-    return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
-      onFocus,
-      onBlur
-    }));
+  }), anchorProps => {
+    return /*#__PURE__*/React__default.cloneElement(child, anchorProps);
   }), state.visible ? /*#__PURE__*/React__default.createElement(Tooltip$1, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     className: classNames('reactist_tooltip', className)

package/es/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only<React.FunctionComponentElement<TooltipAnchorProps>>(\n        children as React.FunctionComponentElement<TooltipAnchorProps>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child.props.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    const { onFocus, onBlur } = anchorProps\n                    return React.cloneElement(child, {\n                        ...anchorProps,\n                        // Ensure that the children's props can override TooltipAnchor's\n                        // props, as properties like `autoFocus` can get lost otherwise.\n                        // The focus and blur handlers however are the core functionality\n                        // the tooltip needs to provide, so they should not be overridden\n                        ...child.props,\n                        onFocus,\n                        onBlur,\n                    })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","Children","only","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","anchorProps","onBlur","cloneElement","visible","AriakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div'] | null>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} {...child.props} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    return React.cloneElement(child, anchorProps)\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","Children","only","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","ref","anchorProps","cloneElement","visible","AriakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}

package/lib/components/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=e(require("react")),n=e(require("classnames")),r=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:s,position:l="top",gapSize:a=3,className:i}=e,p=t.objectWithoutProperties(e,c);const d=function(e){const n=r.useTooltipState(e),c=function(){const e=o.useRef(),t=o.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return o.useEffect(()=>t,[t]),o.useCallback((function(o,n){return()=>{t(),e.current=setTimeout(o,n)}}),[t])}();return o.useMemo(()=>t.objectSpread2(t.objectSpread2({},n),{},{show:c(()=>n.show(),500),hide:c(()=>n.hide(),100)}),[c,n])}({placement:l,gutter:a}),f=o.Children.only(u);return s?o.createElement(o.Fragment,null,o.createElement(r.TooltipAnchor,{state:d,onFocus:function(e){e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&d.show()}),{once:!0}),e.preventDefault(),null==f.props.onFocus||f.props.onFocus(e)}},e=>{const{onFocus:n,onBlur:r}=e;return o.cloneElement(f,t.objectSpread2(t.objectSpread2(t.objectSpread2({},e),f.props),{},{onFocus:n,onBlur:r}))}),d.visible?o.createElement(r.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:d,className:n("reactist_tooltip",i)}),"function"==typeof s?s():s):null):f};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=e(require("react")),n=e(require("classnames")),r=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:l,position:s="top",gapSize:a=3,className:i}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const n=r.useTooltipState(e),c=function(){const e=o.useRef(),t=o.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return o.useEffect(()=>t,[t]),o.useCallback((function(o,n){return()=>{t(),e.current=setTimeout(o,n)}}),[t])}();return o.useMemo(()=>t.objectSpread2(t.objectSpread2({},n),{},{show:c(()=>n.show(),500),hide:c(()=>n.hide(),100)}),[c,n])}({placement:s,gutter:a}),d=o.Children.only(u);return l?o.createElement(o.Fragment,null,o.createElement(r.TooltipAnchor,t.objectSpread2(t.objectSpread2({state:f},d.props),{},{ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}}),e=>o.cloneElement(d,e)),f.visible?o.createElement(r.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:n("reactist_tooltip",i)}),"function"==typeof l?l():l):null):d};
 //# sourceMappingURL=tooltip.js.map

package/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only<React.FunctionComponentElement<TooltipAnchorProps>>(\n        children as React.FunctionComponentElement<TooltipAnchorProps>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child.props.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    const { onFocus, onBlur } = anchorProps\n                    return React.cloneElement(child, {\n                        ...anchorProps,\n                        // Ensure that the children's props can override TooltipAnchor's\n                        // props, as properties like `autoFocus` can get lost otherwise.\n                        // The focus and blur handlers however are the core functionality\n                        // the tooltip needs to provide, so they should not be overridden\n                        ...child.props,\n                        onFocus,\n                        onBlur,\n                    })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useDelay","useMemo","show","hide","useDelayedTooltipState","placement","gutter","child","Children","only","TooltipAnchor","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","onBlur","cloneElement","visible","AriakitTooltip","classNames"],"mappings":"wWAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAkGV,WACI,MAAMC,EAAaC,EAAMC,SAEnBC,EAAgBF,EAAMG,aAAY,WACV,MAAtBJ,EAAWK,SACXC,aAAaN,EAAWK,WAE7B,IAKH,OAFAJ,EAAMM,UAAU,IAAMJ,EAAe,CAACA,IAE/BF,EAAMG,aACT,SAAeI,EAAgBT,GAC3B,MAAO,KACHI,IACAH,EAAWK,QAAUI,WAAWD,EAAIT,MAG5C,CAACI,IArHSO,GACd,OAAOT,EAAMU,QACT,uCACOd,OACHe,KAAMb,EAAM,IAAMF,EAAae,OATjB,KAUdC,KAAMd,EAAM,IAAMF,EAAagB,OATjB,OAWlB,CAACd,EAAOF,IAYEiB,CAAuB,CAAEC,UAAWxB,EAAUyB,OAAQxB,IAE9DyB,EAAQhB,EAAMiB,SAASC,KACzB9B,GAEJ,OAAKC,EA4BDW,gCACIA,gBAACmB,iBAAczB,MAAOA,EAAO0B,QAnBrC,SAAqBC,GAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjD/B,EAAMiB,SAG6C,CAAEgB,MAAM,IAEnEN,EAAMO,uBACNZ,EAAMvB,MAAM2B,SAAZJ,EAAMvB,MAAM2B,QAAUC,KAMZQ,IACE,MAAMT,QAAEA,EAAFU,OAAWA,GAAWD,EAC5B,OAAO7B,EAAM+B,aAAaf,qDACnBa,GAKAb,EAAMvB,WACT2B,QAAAA,EACAU,OAAAA,OAIXpC,EAAMsC,QACHhC,gBAACiC,6CACOxC,OACJC,MAAOA,EACPF,UAAW0C,EAAW,mBAAoB1C,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MAnDD2B"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div'] | null>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} {...child.props} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    return React.cloneElement(child, anchorProps)\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useDelay","useMemo","show","hide","useDelayedTooltipState","placement","gutter","child","Children","only","TooltipAnchor","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","cloneElement","visible","AriakitTooltip","classNames"],"mappings":"wWAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAwFV,WACI,MAAMC,EAAaC,EAAMC,SAEnBC,EAAgBF,EAAMG,aAAY,WACV,MAAtBJ,EAAWK,SACXC,aAAaN,EAAWK,WAE7B,IAKH,OAFAJ,EAAMM,UAAU,IAAMJ,EAAe,CAACA,IAE/BF,EAAMG,aACT,SAAeI,EAAgBT,GAC3B,MAAO,KACHI,IACAH,EAAWK,QAAUI,WAAWD,EAAIT,MAG5C,CAACI,IA3GSO,GACd,OAAOT,EAAMU,QACT,uCACOd,OACHe,KAAMb,EAAM,IAAMF,EAAae,OATjB,KAUdC,KAAMd,EAAM,IAAMF,EAAagB,OATjB,OAWlB,CAACd,EAAOF,IAYEiB,CAAuB,CAAEC,UAAWxB,EAAUyB,OAAQxB,IAE9DyB,EAAQhB,EAAMiB,SAASC,KACzB9B,GAEJ,OAAKC,EA4BDW,gCACIA,gBAACmB,iDAAczB,MAAOA,GAAWsB,EAAMvB,WAAO2B,IAAKJ,EAAMI,IAAKC,QAnBtE,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDhC,EAAMiB,SAG6C,CAAEiB,MAAM,IAEnEN,EAAMO,uBACNb,YAAAA,EAAOvB,gBAAO4B,WAAAA,QAAUC,MAMdQ,GACS9B,EAAM+B,aAAaf,EAAOc,IAGxCpC,EAAMsC,QACHhC,gBAACiC,6CACOxC,OACJC,MAAOA,EACPF,UAAW0C,EAAW,mBAAoB1C,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MAzCD2B"}

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "12.0.1",
+    "version": "12.0.2",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",