@doist/reactist 21.0.0 → 21.0.2

package/es/tabs/tabs.js

@@ -86,7 +86,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
 function TabList(_ref2) {
   let {
     children,
-    space = 'xsmall'
+    space
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded2);
 

package/es/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":";;;;;;;;;;;;;AAqBA,MAAMA,WAAW,gBAAGC,aAAA,CAA6C,IAA7C,CAApB;AAyBA;;;;AAGA,SAASC,IAAT,CAAc;EACVC,QADU;EAEVC,UAFU;EAGVC,iBAHU;EAIVC,OAAO,GAAG,SAJA;EAKVC;AALU,CAAd;EAOI,MAAMC,QAAQ,GAAGC,WAAW,CAAC;IAAEL,UAAF;IAAcM,aAAa,EAAEH;GAA9B,CAA5B;EACA,MAAMI,yBAAyB,GAAGC,WAAW,CAACP,iBAAD,CAA7C;EACA,MAAM;IAAED,UAAU,EAAES,gBAAd;IAAgCC;MAAWN,QAAjD;EAEAP,SAAA,CACI,SAASc,gBAAT;IACI,IACI,CAACX,UAAD,IACAC,iBAAiB,KAAKM,yBADtB,IAEAN,iBAAiB,KAAKQ,gBAFtB,IAGAR,iBAAiB,KAAKW,SAJ1B,EAKE;MACEF,MAAM,CAACT,iBAAD,CAAN;;GARZ,EAWI,CAACD,UAAD,EAAaC,iBAAb,EAAgCQ,gBAAhC,EAAkDC,MAAlD,EAA0DH,yBAA1D,CAXJ;EAcA,MAAMM,gBAAgB,GAAGhB,OAAA,CACrB,SAASiB,eAAT;IACI,OAAO;MACHV,QADG;MAEHF;KAFJ;GAFiB,EAOrB,CAACA,OAAD,EAAUE,QAAV,CAPqB,CAAzB;EAUA,oBAAOP,aAAA,CAACD,WAAW,CAACmB,QAAb;IAAsBC,KAAK,EAAEH;GAA7B,EAAgDd,QAAhD,CAAP;AACH;AAUD;;;;;MAGMkB,GAAG,gBAAGC,oBAAoB,CAAqB,SAASD,GAAT,OAEjDE,GAFiD;MACjD;IAAEC,EAAF;IAAMrB,QAAN;IAAgBsB,EAAhB;IAAoBC;;MAA8BC;;EAGlD,MAAMC,eAAe,GAAG3B,UAAA,CAAiBD,WAAjB,CAAxB;;EAEA,IAAI,CAAC4B,eAAL,EAAsB;IAClB,OAAO,IAAP;;;EAGJ,MAAM;IAAEtB,OAAF;IAAWE;MAAaoB,eAA9B;EAEA,oBACI3B,aAAA,CAAC4B,KAAD,oCACQF,KADR;IAEIH,EAAE,EAAEA,EAFR;IAGIM,SAAS,EAAEC,UAAU,CAACL,yBAAD,EAA4BM,MAAM,CAACC,GAAnC,EAAwCD,MAAM,UAAQ1B,OAAR,CAA9C,CAHzB;IAIImB,EAAE,EAAEA,EAJR;IAKIS,KAAK,EAAE1B,QALX;IAMIe,GAAG,EAAEA;MAEJpB,QARL,CADJ;AAYH,CAxB+B;AAwDhC;;;;AAGA,SAASgC,OAAT;MAAiB;IACbhC,QADa;IAEbiC,KAAK,GAAG;;MACLT;;EAEH,MAAMC,eAAe,GAAG3B,UAAA,CAAiBD,WAAjB,CAAxB;;EAEA,IAAI,CAAC4B,eAAL,EAAsB;IAClB,OAAO,IAAP;;;EAGJ,MAAM;IAAEpB,QAAF;IAAYF;MAAYsB,eAA9B;EAEA;;;;IAGI3B,aAAA,CAACoC,GAAD,MAAA,eACIpC,aAAA,CAACqC,SAAD;MACIJ,KAAK,EAAE1B,QADX;MAEIgB,EAAE,EAAEa,GAFR;MAGIE,QAAQ,EAAC,UAHb;MAIIC,KAAK,EAAC;OACFb,KALR,gBAOI1B,aAAA,CAACoC,GAAD;MAAKP,SAAS,EAAE,CAACE,MAAM,CAACS,KAAR,EAAeT,MAAM,YAAU1B,OAAV,CAArB;KAAhB,CAPJ,eAQIL,aAAA,CAACyC,MAAD;MAAQN,KAAK,EAAEA;KAAf,EAAuBjC,QAAvB,CARJ,CADJ;;AAaP;AAiBD;;;;;MAGMwC,QAAQ,gBAAGrB,oBAAoB,CAAwC,SAASqB,QAAT,QAEzEpB,GAFyE;MACzE;IAAEpB,QAAF;IAAYsB,EAAZ;IAAgBD,EAAhB;IAAoBoB,MAAM,GAAG;;MAAajB;;EAG1C,MAAMC,eAAe,GAAG3B,UAAA,CAAiBD,WAAjB,CAAxB;EACA,MAAM,CAAC6C,WAAD,EAAcC,cAAd,IAAgC7C,QAAA,CAAe,KAAf,CAAtC;EACA,MAAM8C,WAAW,GAAG,CAAAnB,eAAe,QAAf,YAAAA,eAAe,CAAEpB,QAAjB,CAA0BJ,UAA1B,MAAyCqB,EAA7D;EAEAxB,SAAA,CACI,SAAS+C,qBAAT;IACI,IAAI,CAACH,WAAD,IAAgBE,WAApB,EAAiC;MAC7BD,cAAc,CAAC,IAAD,CAAd;;GAHZ,EAMI,CAACD,WAAD,EAAcE,WAAd,CANJ;;EASA,IAAI,CAACnB,eAAL,EAAsB;IAClB,OAAO,IAAP;;;EAGJ,MAAM;IAAEpB;MAAaoB,eAArB;EACA,MAAMqB,YAAY,GACdL,MAAM,KAAK,QAAX,IACCA,MAAM,KAAK,QAAX,IAAuBG,WADxB,IAECH,MAAM,KAAK,MAAX,KAAsBG,WAAW,IAAIF,WAArC,CAHL;EAKA,OAAOI,YAAY,gBACfhD,aAAA,CAACiD,UAAD;IAAcC,KAAK,EAAE1B;KAAQE,KAA7B;IAAoCO,KAAK,EAAE1B,QAA3C;IAAqDgB,EAAE,EAAEA,EAAzD;IAA6DD,GAAG,EAAEA;MAC7DpB,QADL,CADe,GAIf,IAJJ;AAKH,CAhCoC;AA0CrC;;;;;AAIA,SAASiD,YAAT,CAAsB;EAAEjD;AAAF,CAAtB;EACI,MAAMyB,eAAe,GAAG3B,UAAA,CAAiBD,WAAjB,CAAxB;EACA,OAAO4B,eAAe,GAAGzB,QAAQ,CAAC;IAAEC,UAAU,EAAEwB,eAAF,oBAAEA,eAAe,CAAEpB,QAAjB,CAA0BJ;GAAzC,CAAX,GAAoE,IAA1F;AACH;;;;"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

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

@@ -30,14 +30,24 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
   useEffect(function setupAutoExpand() {
     const containerElement = containerRef.current;
 
-    function handleInput(event) {
+    function handleAutoExpand(value) {
       if (containerElement) {
-        containerElement.dataset.replicatedValue = event.currentTarget.value;
+        containerElement.dataset.replicatedValue = value;
       }
     }
 
+    function handleInput(event) {
+      handleAutoExpand(event.currentTarget.value);
+    }
+
     const textAreaElement = internalRef.current;
-    if (!textAreaElement || !autoExpand) return undefined;
+
+    if (!textAreaElement || !autoExpand) {
+      return undefined;
+    } // Apply change initially, in case the text area has a non-empty initial value
+
+
+    handleAutoExpand(textAreaElement.value);
     textAreaElement.addEventListener('input', handleInput);
     return () => textAreaElement.removeEventListener('input', handleInput);
   }, [autoExpand]);

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 { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\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         * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n         */\n        autoExpand?: boolean\n    }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\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    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n            function handleInput(event: Event) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = (event.currentTarget as HTMLTextAreaElement).value\n                }\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) return undefined\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\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        >\n            {(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={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","setupAutoExpand","containerElement","current","handleInput","event","dataset","replicatedValue","currentTarget","value","textAreaElement","undefined","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer"],"mappings":";;;;;;;;MA2BMA,QAAQ,gBAAGC,UAAA,CAAqD,SAASD,QAAT,OAiBlEE,GAjBkE;MAClE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,MAVJ;IAWI,oBAAoBC,eAXxB;IAYIC,IAZJ;IAaIC,UAAU,GAAG;;MACVC;;EAIP,MAAMC,YAAY,GAAGhB,MAAA,CAA6B,IAA7B,CAArB;EACA,MAAMiB,WAAW,GAAGjB,MAAA,CAAkC,IAAlC,CAApB;EACA,MAAMkB,WAAW,GAAGC,YAAY,CAAC,CAAClB,GAAD,EAAMgB,WAAN,CAAD,CAAhC;EAEAjB,SAAA,CACI,SAASoB,eAAT;IACI,MAAMC,gBAAgB,GAAGL,YAAY,CAACM,OAAtC;;IACA,SAASC,WAAT,CAAqBC,KAArB;MACI,IAAIH,gBAAJ,EAAsB;QAClBA,gBAAgB,CAACI,OAAjB,CAAyBC,eAAzB,GAA4CF,KAAK,CAACG,aAAN,CAA4CC,KAAxF;;;;IAIR,MAAMC,eAAe,GAAGZ,WAAW,CAACK,OAApC;IACA,IAAI,CAACO,eAAD,IAAoB,CAACf,UAAzB,EAAqC,OAAOgB,SAAP;IACrCD,eAAe,CAACE,gBAAhB,CAAiC,OAAjC,EAA0CR,WAA1C;IACA,OAAO,MAAMM,eAAe,CAACG,mBAAhB,CAAoC,OAApC,EAA6CT,WAA7C,CAAb;GAZR,EAcI,CAACT,UAAD,CAdJ;EAiBA,oBACId,aAAA,CAACiC,SAAD;IACI/B,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,MAAM,EAAEA;wBACUC;IAClBsB,SAAS,EAAE,CACPC,MAAM,CAACC,iBADA,EAEP3B,IAAI,KAAK,OAAT,GAAmB0B,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnC,OAAO,KAAK,UAAZ,GAAyBiC,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKX5B,QAAQ,EAAEA;GAhBd,EAkBM6B,UAAD,iBACGvC,aAAA,CAACwC,GAAD;IACIC,KAAK,EAAC;IACNC,OAAO,EAAC;IACRR,SAAS,EAAEC,MAAM,CAACQ;IAClB1C,GAAG,EAAEe;GAJT,eAMIhB,aAAA,WAAA,mDACQe,KADR,GAEQwB,UAFR;IAGItC,GAAG,EAAEiB,WAHT;IAIIL,IAAI,EAAEA,IAJV;IAKIqB,SAAS,EAAEpB,UAAU,GAAGqB,MAAM,CAACrB,UAAV,GAAuBgB;KAXpD,CAnBR,CADJ;AAqCH,CA7EgB;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\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\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\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         * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n         */\n        autoExpand?: boolean\n    }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\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    React.useEffect(\n        function setupAutoExpand() {\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            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\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        >\n            {(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={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","setupAutoExpand","containerElement","current","handleAutoExpand","value","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer"],"mappings":";;;;;;;;MA2BMA,QAAQ,gBAAGC,UAAA,CAAqD,SAASD,QAAT,OAiBlEE,GAjBkE;MAClE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,MAVJ;IAWI,oBAAoBC,eAXxB;IAYIC,IAZJ;IAaIC,UAAU,GAAG;;MACVC;;EAIP,MAAMC,YAAY,GAAGhB,MAAA,CAA6B,IAA7B,CAArB;EACA,MAAMiB,WAAW,GAAGjB,MAAA,CAAkC,IAAlC,CAApB;EACA,MAAMkB,WAAW,GAAGC,YAAY,CAAC,CAAClB,GAAD,EAAMgB,WAAN,CAAD,CAAhC;EAEAjB,SAAA,CACI,SAASoB,eAAT;IACI,MAAMC,gBAAgB,GAAGL,YAAY,CAACM,OAAtC;;IAEA,SAASC,gBAAT,CAA0BC,KAA1B;MACI,IAAIH,gBAAJ,EAAsB;QAClBA,gBAAgB,CAACI,OAAjB,CAAyBC,eAAzB,GAA2CF,KAA3C;;;;IAIR,SAASG,WAAT,CAAqBC,KAArB;MACIL,gBAAgB,CAAEK,KAAK,CAACC,aAAN,CAA4CL,KAA9C,CAAhB;;;IAGJ,MAAMM,eAAe,GAAGb,WAAW,CAACK,OAApC;;IACA,IAAI,CAACQ,eAAD,IAAoB,CAAChB,UAAzB,EAAqC;MACjC,OAAOiB,SAAP;;;;IAIJR,gBAAgB,CAACO,eAAe,CAACN,KAAjB,CAAhB;IAEAM,eAAe,CAACE,gBAAhB,CAAiC,OAAjC,EAA0CL,WAA1C;IACA,OAAO,MAAMG,eAAe,CAACG,mBAAhB,CAAoC,OAApC,EAA6CN,WAA7C,CAAb;GAvBR,EAyBI,CAACb,UAAD,CAzBJ;EA4BA,oBACId,aAAA,CAACkC,SAAD;IACIhC,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,MAAM,EAAEA;wBACUC;IAClBuB,SAAS,EAAE,CACPC,MAAM,CAACC,iBADA,EAEP5B,IAAI,KAAK,OAAT,GAAmB2B,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPpC,OAAO,KAAK,UAAZ,GAAyBkC,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKX7B,QAAQ,EAAEA;GAhBd,EAkBM8B,UAAD,iBACGxC,aAAA,CAACyC,GAAD;IACIC,KAAK,EAAC;IACNC,OAAO,EAAC;IACRR,SAAS,EAAEC,MAAM,CAACQ;IAClB3C,GAAG,EAAEe;GAJT,eAMIhB,aAAA,WAAA,mDACQe,KADR,GAEQyB,UAFR;IAGIvC,GAAG,EAAEiB,WAHT;IAIIL,IAAI,EAAEA,IAJV;IAKIsB,SAAS,EAAErB,UAAU,GAAGsB,MAAM,CAACtB,UAAV,GAAuBiB;KAXpD,CAnBR,CADJ;AAqCH,CAxFgB;;;;"}

package/es/tooltip/tooltip.js

@@ -30,7 +30,7 @@ function Tooltip({
   });
   const child = Children.only(children);
 
-  if (!content || !child) {
+  if (!child) {
     return child;
   }
 
@@ -87,7 +87,7 @@ function Tooltip({
       onFocus: handleFocus,
       onBlur: handleBlur
     }));
-  }), state.open ? /*#__PURE__*/createElement(Box, {
+  }), state.open && content ? /*#__PURE__*/createElement(Box, {
     as: Tooltip$1,
     state: state,
     className: [styles.tooltip, exceptionallySetClassName],

package/es/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from 'ariakit/tooltip'\nimport { Box } from '../box'\n\nimport type {\n    TooltipStateProps as AriakitTooltipStateProps,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: PopoverState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        state.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} described>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...anchorProps,\n                        ...child.props,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n            </TooltipAnchor>\n            {state.open ? (\n                <Box\n                    as={AriakitTooltip}\n                    state={state}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","show","hide","Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","state","placement","gutter","child","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","currentTarget","addEventListener","once","preventDefault","props","onFocus","handleBlur","onBlur","TooltipAnchor","described","anchorProps","open","Box","as","AriakitTooltip","className","styles","tooltip","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","timeoutRef","clearTimeouts","current","clearTimeout","fn","setTimeout"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from 'ariakit/tooltip'\nimport { Box } from '../box'\n\nimport type {\n    TooltipStateProps as AriakitTooltipStateProps,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: PopoverState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        state.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} described>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...anchorProps,\n                        ...child.props,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n            </TooltipAnchor>\n            {state.open && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    state={state}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","show","hide","Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","state","placement","gutter","child","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","currentTarget","addEventListener","once","preventDefault","props","onFocus","handleBlur","onBlur","TooltipAnchor","described","anchorProps","open","Box","as","AriakitTooltip","className","styles","tooltip","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","timeoutRef","clearTimeouts","current","clearTimeout","fn","setTimeout"],"mappings":"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"}

package/lib/tabs/tabs.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"),a=require("react"),r=(e(a),e(require("classnames"))),n=require("../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:r,space:n="xsmall"}=e,i=t.objectWithoutProperties(e,d);const u=a.useContext(b);if(!u)return null;const{tabState:p,variant:f}=u;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:p,as:l.Box,position:"relative",width:"maxContent"},i),a.createElement(l.Box,{className:[c.default.track,c.default["track-"+f]]}),a.createElement(s.Inline,{space:n},r)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
+"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"),a=require("react"),r=(e(a),e(require("classnames"))),n=require("../utils/polymorphism.js"),s=require("../box/box.js"),l=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:s,children:l,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:s,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),l)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:s,as:l,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===s;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:s},c),{},{state:x,as:l,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:r,space:n}=e,i=t.objectWithoutProperties(e,d);const u=a.useContext(b);if(!u)return null;const{tabState:p,variant:f}=u;return a.createElement(s.Box,null,a.createElement(o.TabList,t.objectSpread2({state:p,as:s.Box,position:"relative",width:"maxContent"},i),a.createElement(s.Box,{className:[c.default.track,c.default["track-"+f]]}),a.createElement(l.Inline,{space:n},r)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:s}){const l=o.useTabState({selectedId:t,setSelectedId:s}),c=i.usePrevious(r),{selectedId:u,select:d}=l;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:l,variant:n}}),[n,l]);return a.createElement(b.Provider,{value:p},e)};
 //# sourceMappingURL=tabs.js.map

package/lib/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"6jBAqBMA,EAAcC,gBAA6C,MA6E3DC,EAAMC,wBAAyC,WAEjDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MAuFPa,EAAWhB,wBAA4D,WAEzEC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMI,EAAkBT,aAAiBD,GACzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sBAjG9F,gBAAiBlB,SACbA,EADaqB,MAEbA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OAAId,UAAW,CAACE,UAAOgB,MAAOhB,mBAAgBL,MAC/CV,gBAACgC,UAAON,MAAOA,GAAQrB,sCArIvC,UAAcA,SACVA,EADUkB,WAEVA,EAFUU,kBAGVA,EAHUvB,QAIVA,EAAU,UAJAwB,mBAKVA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"6jBAqBMA,EAAcC,gBAA6C,MA6E3DC,EAAMC,wBAAyC,WAEjDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MAmFPa,EAAWhB,wBAA4D,WAEzEC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMI,EAAkBT,aAAiBD,GACzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sBA7F9F,gBAAiBlB,SAAEA,EAAFqB,MAAYA,KAAUlB,iCACnC,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OAAId,UAAW,CAACE,UAAOgB,MAAOhB,mBAAgBL,MAC/CV,gBAACgC,UAAON,MAAOA,GAAQrB,sCAjIvC,UAAcA,SACVA,EADUkB,WAEVA,EAFUU,kBAGVA,EAHUvB,QAIVA,EAAU,UAJAwB,mBAKVA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}

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"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("use-callback-ref"),l=require("./text-area.module.css.js");const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=a.forwardRef((function(d,s){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,maxWidth:h,hidden:v,"aria-describedby":y,rows:j,autoExpand:E=!1}=d,L=e.objectWithoutProperties(d,n);const g=a.useRef(null),q=a.useRef(null),w=i.useMergeRefs([s,q]);return a.useEffect((function(){const e=g.current;function a(a){e&&(e.dataset.replicatedValue=a.currentTarget.value)}const r=q.current;if(r&&E)return r.addEventListener("input",a),()=>r.removeEventListener("input",a)}),[E]),a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,hidden:v,"aria-describedby":y,className:[l.default.textAreaContainer,"error"===m?l.default.error:null,"bordered"===u?l.default.bordered:null],maxWidth:h},t=>a.createElement(r.Box,{width:"full",display:"flex",className:l.default.innerContainer,ref:g},a.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{ref:w,rows:j,className:E?l.default.autoExpand:void 0}))))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("use-callback-ref"),l=require("./text-area.module.css.js");const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=a.forwardRef((function(d,s){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,maxWidth:v,hidden:h,"aria-describedby":y,rows:j,autoExpand:E=!1}=d,L=e.objectWithoutProperties(d,n);const g=a.useRef(null),q=a.useRef(null),w=i.useMergeRefs([s,q]);return a.useEffect((function(){const e=g.current;function a(a){e&&(e.dataset.replicatedValue=a)}function r(e){a(e.currentTarget.value)}const t=q.current;if(t&&E)return a(t.value),t.addEventListener("input",r),()=>t.removeEventListener("input",r)}),[E]),a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,hidden:h,"aria-describedby":y,className:[l.default.textAreaContainer,"error"===m?l.default.error:null,"bordered"===u?l.default.bordered:null],maxWidth:v},t=>a.createElement(r.Box,{width:"full",display:"flex",className:l.default.innerContainer,ref:g},a.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{ref:w,rows:j,className:E?l.default.autoExpand:void 0}))))}));
 //# 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 { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\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         * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n         */\n        autoExpand?: boolean\n    }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\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    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n            function handleInput(event: Event) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = (event.currentTarget as HTMLTextAreaElement).value\n                }\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) return undefined\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\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        >\n            {(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={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","containerElement","current","handleInput","event","dataset","replicatedValue","currentTarget","value","textAreaElement","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","undefined"],"mappings":"icA2BiBA,cAAqD,WAiBlEC,OAhBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,KACVC,iCAIP,MAAMC,EAAejB,SAA6B,MAC5CkB,EAAclB,SAAkC,MAChDmB,EAAcC,eAAa,CAACnB,EAAKiB,IAmBvC,OAjBAlB,aACI,WACI,MAAMqB,EAAmBJ,EAAaK,QACtC,SAASC,EAAYC,GACbH,IACAA,EAAiBI,QAAQC,gBAAmBF,EAAMG,cAAsCC,OAIhG,MAAMC,EAAkBX,EAAYI,QACpC,GAAKO,GAAoBd,EAEzB,OADAc,EAAgBC,iBAAiB,QAASP,GACnC,IAAMM,EAAgBE,oBAAoB,QAASR,KAE9D,CAACR,IAIDf,gBAACgC,aACG9B,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClBoB,UAAW,CACPC,UAAOC,kBACE,UAAT1B,EAAmByB,UAAOE,MAAQ,KACtB,aAAZlC,EAAyBgC,UAAOG,SAAW,MAE/C3B,SAAUA,GAER4B,GACEtC,gBAACuC,OACGC,MAAM,OACNC,QAAQ,OACRR,UAAWC,UAAOQ,eAClBzC,IAAKgB,GAELjB,8EACQgB,GACAsB,OACJrC,IAAKkB,EACLL,KAAMA,EACNmB,UAAWlB,EAAamB,UAAOnB,gBAAa4B"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\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\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\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         * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n         */\n        autoExpand?: boolean\n    }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\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    React.useEffect(\n        function setupAutoExpand() {\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            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\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        >\n            {(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={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","containerElement","current","handleAutoExpand","value","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","undefined"],"mappings":"icA2BiBA,cAAqD,WAiBlEC,OAhBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,KACVC,iCAIP,MAAMC,EAAejB,SAA6B,MAC5CkB,EAAclB,SAAkC,MAChDmB,EAAcC,eAAa,CAACnB,EAAKiB,IA8BvC,OA5BAlB,aACI,WACI,MAAMqB,EAAmBJ,EAAaK,QAEtC,SAASC,EAAiBC,GAClBH,IACAA,EAAiBI,QAAQC,gBAAkBF,GAInD,SAASG,EAAYC,GACjBL,EAAkBK,EAAMC,cAAsCL,OAGlE,MAAMM,EAAkBZ,EAAYI,QACpC,GAAKQ,GAAoBf,EAQzB,OAHAQ,EAAiBO,EAAgBN,OAEjCM,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAACZ,IAIDf,gBAACiC,aACG/B,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClBqB,UAAW,CACPC,UAAOC,kBACE,UAAT3B,EAAmB0B,UAAOE,MAAQ,KACtB,aAAZnC,EAAyBiC,UAAOG,SAAW,MAE/C5B,SAAUA,GAER6B,GACEvC,gBAACwC,OACGC,MAAM,OACNC,QAAQ,OACRR,UAAWC,UAAOQ,eAClB1C,IAAKgB,GAELjB,8EACQgB,GACAuB,OACJtC,IAAKkB,EACLL,KAAMA,EACNoB,UAAWnB,EAAaoB,UAAOpB,gBAAa6B"}

package/lib/tooltip/tooltip.js

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

package/lib/tooltip/tooltip.js.map

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

package/package.json

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