@doist/reactist 25.0.0-beta → 25.0.0-beta.1

package/lib/tabs/tabs.d.ts

@@ -1,15 +1,18 @@
 import * as React from 'react';
-import type { Space } from '../utils/common-types';
-declare type TabsProps = {
-    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */
+import { TabPanelProps as BaseTabPanelProps, RoleProps } from '@ariakit/react';
+import type { ObfuscatedClassName, Space } from '../utils/common-types';
+interface TabsProps {
+    /**
+     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`
+     * components
+     */
     children: React.ReactNode;
     /**
-     * Determines the look and feel of the tabs.
+     * Determines the look and feel of the tabs
      */
     variant?: 'themed' | 'neutral';
     /**
-     * The id of the selected tab. Assigning a value makes this a
-     * controlled component
+     * The id of the selected tab. Assigning a value makes this a controlled component
      */
     selectedId?: string | null;
     /**
@@ -21,21 +24,26 @@ declare type TabsProps = {
      * Called with the tab id when a tab is selected
      */
     onSelectedIdChange?: (selectedId: string | null | undefined) => void;
-};
+}
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
  */
 declare function Tabs({ children, selectedId, defaultSelectedId, variant, onSelectedIdChange, }: TabsProps): React.ReactElement;
-declare type TabProps = {
-    /** The content to render inside of the tab button */
+interface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {
+    /**
+     * The content to render inside of the tab button
+     */
     children: React.ReactNode;
-    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */
+    /**
+     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
+     */
     id: string;
-};
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
-declare const Tab: import("../utils/polymorphism").PolymorphicComponent<"button", TabProps, "obfuscateClassName">;
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
 declare type TabListProps = ({
     /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
     'aria-label': string;
@@ -64,7 +72,7 @@ declare type TabListProps = ({
  * A component used to group `<Tab>` elements together.
  */
 declare function TabList({ children, space, ...props }: TabListProps): React.ReactElement | null;
-declare type TabPanelProps = {
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BaseTabPanelProps, 'render'> {
     /** The content to be rendered inside the tab */
     children?: React.ReactNode;
     /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */
@@ -75,13 +83,13 @@ declare type TabPanelProps = {
      * meaning while inactive tab panels will not be rendered initially, they will remain mounted
      * once they are active until the entire Tabs tree is unmounted.
      */
-    render?: 'always' | 'active' | 'lazy';
-};
+    renderMode?: 'always' | 'active' | 'lazy';
+}
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
  * corresponding `<Tab>` component.
  */
-declare const TabPanel: import("../utils/polymorphism").PolymorphicComponent<"div", TabPanelProps, "omitClassName">;
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
 declare type TabAwareSlotProps = {
     /**
      * Render prop used to provide the content to be rendered inside the slot. The render prop will

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"),r=require("react"),a=(e(r),e(require("classnames"))),l=require("../utils/polymorphism.js"),n=require("../box/box.js"),o=require("../inline/inline.js"),s=require("@ariakit/react"),c=require("./tabs.module.css.js");const i=["as","children","id","exceptionallySetClassName"],u=["children","space"],d=["children","id","as","render"],b=r.createContext(null),p=l.polymorphicComponent((function(e,l){let{as:n,children:o,id:u,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,i);const f=r.useContext(b);if(!f)return null;const{variant:S,tabStore:m}=f,x=a(d,c.default.tab,c.default["tab-"+S]);return r.createElement(s.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:n,className:x,id:u,store:m,ref:l}),o)})),f=l.polymorphicComponent((function(e,a){let{children:l,id:n,as:o,render:c="always"}=e,i=t.objectWithoutProperties(e,d);const u=r.useContext(b),[p,f]=r.useState(!1),S=(null==u?void 0:u.tabStore.useState("selectedId"))===n;if(r.useEffect((function(){!p&&S&&f(!0)}),[p,S]),!u)return null;const{tabStore:m}=u;return"always"===c||"active"===c&&S||"lazy"===c&&(S||p)?r.createElement(s.TabPanel,t.objectSpread2(t.objectSpread2({},i),{},{tabId:n,store:m,as:o,ref:a}),l):null}));exports.Tab=p,exports.TabAwareSlot=function({children:e}){const t=r.useContext(b),a=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:a}):null},exports.TabList=function(e){let{children:a,space:l}=e,i=t.objectWithoutProperties(e,u);const d=r.useContext(b);if(!d)return null;const{tabStore:p,variant:f}=d;return r.createElement(n.Box,null,r.createElement(s.TabList,t.objectSpread2({store:p,as:n.Box,position:"relative",width:"maxContent"},i),r.createElement(n.Box,{className:[c.default.track,c.default["track-"+f]]}),r.createElement(o.Inline,{space:l},a)))},exports.TabPanel=f,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:a,variant:l="neutral",onSelectedIdChange:n}){const o=s.useTabStore({defaultSelectedId:a,selectedId:t,setSelectedId:n}),c=o.useState("selectedId"),i=r.useMemo(()=>{var e;return{tabStore:o,variant:l,selectedId:null!=(e=null!=t?t:c)?e:null}},[l,o,t,c]);return r.createElement(b.Provider,{value:i},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"),r=require("react"),n=(e(r),e(require("classnames"))),a=require("../box/box.js"),l=require("../inline/inline.js"),o=require("@ariakit/react"),s=require("./tabs.module.css.js");const u=["children","space"],c=["children","id","renderMode"],d=r.createContext(null),i=r.forwardRef((function({children:e,id:t,exceptionallySetClassName:a,render:l},u){const c=r.useContext(d);if(!c)return null;const{variant:i,tabStore:b}=c,f=n(a,s.default.tab,s.default["tab-"+i]);return r.createElement(o.Tab,{render:l,className:f,id:t,store:b,ref:u},e)})),b=r.forwardRef((function(e,n){let{children:a,id:l,renderMode:s="always"}=e,u=t.objectWithoutProperties(e,c);const i=r.useContext(d),[b,f]=r.useState(!1),p=(null==i?void 0:i.tabStore.useState("selectedId"))===l;if(r.useEffect((function(){!b&&p&&f(!0)}),[b,p]),!i)return null;const{tabStore:S}=i;return"always"===s||"active"===s&&p||"lazy"===s&&(p||b)?r.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({},u),{},{tabId:l,store:S,ref:n}),a):null}));exports.Tab=i,exports.TabAwareSlot=function({children:e}){const t=r.useContext(d),n=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:n}):null},exports.TabList=function(e){let{children:n,space:c}=e,i=t.objectWithoutProperties(e,u);const b=r.useContext(d);if(!b)return null;const{tabStore:f,variant:p}=b;return r.createElement("div",null,r.createElement(o.TabList,t.objectSpread2({store:f,render:r.createElement(a.Box,{position:"relative",width:"maxContent"})},i),r.createElement(a.Box,{className:[s.default.track,s.default["track-"+p]]}),r.createElement(l.Inline,{space:c},n)))},exports.TabPanel=b,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:n,variant:a="neutral",onSelectedIdChange:l}){const s=o.useTabStore({defaultSelectedId:n,selectedId:t,setSelectedId:l}),u=s.useState("selectedId"),c=r.useMemo(()=>{var e;return{tabStore:s,variant:a,selectedId:null!=(e=null!=t?t:u)?e:null}},[a,s,t,u]);return r.createElement(d.Provider,{value:c},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    useTabStore,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabStore,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\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 = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\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 tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\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    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab {...props} as={as} className={className} id={id} store={tabStore} ref={ref}>\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 { tabStore, 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                store={tabStore}\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\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * 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\n * 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 selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = 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 { tabStore } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} 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\n     * be 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\n * TabPanel 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    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabStore","className","classNames","styles","tab","BaseTab","store","TabPanel","render","tabRendered","setTabRendered","tabIsActive","useState","BaseTabPanel","tabId","selectedId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","Provider","value"],"mappings":"6gBAoBMA,EAAcC,gBAA6C,MA4D3DC,EAAMC,wBAAyC,WAEjDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GACzC,IAAKU,EAAiB,OAAO,KAE7B,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EACxBG,EAAYC,EAAWN,EAA2BO,UAAOC,IAAKD,iBAAcJ,IAElF,OACIV,gBAACgB,yCAAYR,OAAOJ,GAAIA,EAAIQ,UAAWA,EAAWN,GAAIA,EAAIW,MAAON,EAAUR,IAAKA,IAC3EE,MAqFPa,EAAWhB,wBAA4D,WAEzEC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAE/CsB,SADab,SAAAA,EAAiBE,SAASY,SAAS,iBACnBjB,EAWnC,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,8CAAiBhB,OAAOiB,MAAOnB,EAAIW,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMI,EAAkBT,aAAiBD,GACnC2B,QAAajB,SAAAA,EAAiBE,SAASY,SAAS,cACtD,OAAOd,EAAkBJ,EAAS,CAAEqB,WAAAA,IAAgB,sBAjGxD,gBAAiBrB,SAAEA,EAAFsB,MAAYA,KAAUnB,iCACnC,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC4B,WACG5B,gBAAC6B,2BACGZ,MAAON,EACPP,GAAIwB,MACJE,SAAS,WACTC,MAAM,cACFvB,GAEJR,gBAAC4B,OAAIhB,UAAW,CAACE,UAAOkB,MAAOlB,mBAAgBJ,MAC/CV,gBAACiC,UAAON,MAAOA,GAAQtB,sCAvGvC,UAAcA,SACVA,EADUqB,WAEVA,EAFUQ,kBAGVA,EAHUxB,QAIVA,EAAU,UAJAyB,mBAKVA,IAEA,MAAMxB,EAAWyB,cAAY,CACzBF,kBAAAA,EACAR,WAAAA,EACAW,cAAeF,IAEbG,EAAmB3B,EAASY,SAAS,cAErCgB,EAAmBvC,UACrB,KAAA,MAAA,MAAO,CAAEW,SAAAA,EAAUD,QAAAA,EAASgB,0BAAYA,EAAAA,EAAcY,KAAoB,OAC1E,CAAC5B,EAASC,EAAUe,EAAYY,IAEpC,OAAOtC,gBAACD,EAAYyC,UAASC,MAAOF,GAAmBlC"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n    RoleProps,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\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    /**\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 tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, exceptionallySetClassName, render },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab render={render} className={className} id={id} store={tabStore} ref={ref}>\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 { tabStore, variant } = tabContextValue\n\n    return (\n        // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <div>\n            <BaseTabList\n                store={tabStore}\n                render={<Box position=\"relative\" width=\"maxContent\" />}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </div>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\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\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: '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\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = 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 { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} 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\n     * be 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\n * TabPanel 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    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","children","id","exceptionallySetClassName","render","ref","tabContextValue","variant","tabStore","className","classNames","styles","tab","BaseTab","store","TabPanel","renderMode","props","tabRendered","setTabRendered","tabIsActive","useState","BaseTabPanel","tabId","selectedId","space","BaseTabList","Box","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","Provider","value"],"mappings":"ibAqBMA,EAAcC,gBAA6C,MAwE3DC,EAAMD,cAA8C,UACtDE,SAAEA,EAAFC,GAAYA,EAAZC,0BAAgBA,EAAhBC,OAA2CA,GAC3CC,GAEA,MAAMC,EAAkBP,aAAiBD,GACzC,IAAKQ,EAAiB,OAAO,KAE7B,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EACxBG,EAAYC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcJ,IAElF,OACIR,gBAACc,OAAQT,OAAQA,EAAQK,UAAWA,EAAWP,GAAIA,EAAIY,MAAON,EAAUH,IAAKA,GACxEJ,MAqFPc,EAAWhB,cAAgD,WAE7DM,OADAJ,SAAEA,EAAFC,GAAYA,EAAZc,WAAgBA,EAAa,YAAaC,iCAG1C,MAAMX,EAAkBP,aAAiBD,IAClCoB,EAAaC,GAAkBpB,YAAe,GAE/CqB,SADad,SAAAA,EAAiBE,SAASa,SAAS,iBACnBnB,EAWnC,GATAH,aACI,YACSmB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbd,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJmB,WAAfU,GACgB,WAAfA,GAA2BI,GACZ,SAAfJ,IAA0BI,GAAeF,GAG1CnB,gBAACuB,8CAAiBL,OAAOM,MAAOrB,EAAIY,MAAON,EAAUH,IAAKA,IACrDJ,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMK,EAAkBP,aAAiBD,GACnC0B,QAAalB,SAAAA,EAAiBE,SAASa,SAAS,cACtD,OAAOf,EAAkBL,EAAS,CAAEuB,WAAAA,IAAgB,sBAjGxD,gBAAiBvB,SAAEA,EAAFwB,MAAYA,KAAUR,iCACnC,MAAMX,EAAkBP,aAAiBD,GAEzC,IAAKQ,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIP,2BACIA,gBAAC2B,2BACGZ,MAAON,EACPJ,OAAQL,gBAAC4B,OAAIC,SAAS,WAAWC,MAAM,gBACnCZ,GAEJlB,gBAAC4B,OAAIlB,UAAW,CAACE,UAAOmB,MAAOnB,mBAAgBJ,MAC/CR,gBAACgC,UAAON,MAAOA,GAAQxB,sCA3GvC,UAAcA,SACVA,EADUuB,WAEVA,EAFUQ,kBAGVA,EAHUzB,QAIVA,EAAU,UAJA0B,mBAKVA,IAEA,MAAMzB,EAAW0B,cAAY,CACzBF,kBAAAA,EACAR,WAAAA,EACAW,cAAeF,IAEbG,EAAmB5B,EAASa,SAAS,cAErCgB,EAAmBtC,UACrB,KAAA,MAAA,MAAO,CAAES,SAAAA,EAAUD,QAAAA,EAASiB,0BAAYA,EAAAA,EAAcY,KAAoB,OAC1E,CAAC7B,EAASC,EAAUgB,EAAYY,IAEpC,OAAOrC,gBAACD,EAAYwC,UAASC,MAAOF,GAAmBpC"}

package/lib/text-area/text-area.d.ts

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-/**
- * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.
- * Once we upgrade Reactist to the newest React types, we should be able to remove these.
- */
-declare type DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture';
-declare type TextAreaProps = Omit<FieldComponentProps<HTMLTextAreaElement>, DeprecatedProps> & BaseFieldVariantProps & {
+interface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {
     /**
      * The number of visible text lines for the text area.
      *
@@ -23,7 +18,7 @@ declare type TextAreaProps = Omit<FieldComponentProps<HTMLTextAreaElement>, Depr
      * If `true`, the textarea will auto-expand or shrink vertically to fit the content.
      */
     autoExpand?: boolean;
-};
-declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "rows" | "autoExpand"> & React.RefAttributes<HTMLTextAreaElement>>;
+}
+declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };
 export type { TextAreaProps };

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\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype TextAreaProps = Omit<FieldComponentProps<HTMLTextAreaElement>, DeprecatedProps> &\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":"icAiCiBA,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"}
+{"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\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, 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    /**\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/text-field/text-field.d.ts

@@ -1,17 +1,12 @@
 import * as React from 'react';
 import { BaseFieldVariantProps } from '../base-field';
 import type { FieldComponentProps } from '../base-field';
-/**
- * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.
- * Once we upgrade Reactist to the newest React types, we should be able to remove these.
- */
-declare type DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture';
 declare type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url';
-declare type TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type' | DeprecatedProps> & BaseFieldVariantProps & {
+interface TextFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>, BaseFieldVariantProps {
     type?: TextFieldType;
-    startSlot?: React.ReactChild;
-    endSlot?: React.ReactChild;
-};
-declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "startSlot" | "endSlot"> & React.RefAttributes<HTMLInputElement>>;
+    startSlot?: React.ReactElement | string | number;
+    endSlot?: React.ReactElement | string | number;
+}
+declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { TextField };
 export type { TextFieldProps, TextFieldType };

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type' | DeprecatedProps> &\n    BaseFieldVariantProps & {\n        type?: TextFieldType\n        startSlot?: React.ReactChild\n        endSlot?: React.ReactChild\n    }\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\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            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","props","internalRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","slot","marginRight","marginLeft"],"mappings":"4cAsBkBA,cAAmD,WAkBjEC,OAjBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,KASIA,EAAO,OATXC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,KACGC,iCAIP,MAAMC,EAAclB,SAA+B,MAC7CmB,EAAcC,eAAa,CAACnB,EAAKiB,IAEvC,SAASG,EAAYC,SACbA,EAAMC,gBAAkBJ,EAAYK,mBACxCN,EAAYM,YAASC,SAGzB,OACIzB,gBAAC0B,aACGxB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,qBACUE,GAEhBa,GACE3B,gBAAC4B,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACE,UAATxB,EAAmBuB,UAAOE,MAAQ,KACtB,aAAZhC,EAAyB8B,UAAOG,SAAW,MAE/CC,QAASf,GAERN,EACGf,gBAAC4B,OACGG,UAAWC,UAAOK,KAClBR,QAAQ,OACRS,YAAyB,aAAZpC,EAAyB,SAAW,UACjDqC,WAAwB,aAAZrC,EAAyB,UAAY,UAEhDa,GAEL,KACJf,2EAAWiB,GAAWU,OAAYjB,KAAMA,EAAMT,IAAKkB,KAClDH,EACGhB,gBAAC4B,OACGG,UAAWC,UAAOK,KAClBR,QAAQ,OACRS,YAAyB,aAAZpC,EAAyB,UAAY,SAClDqC,WAAwB,aAAZrC,EAAyB,SAAW,WAE/Cc,GAEL"}
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\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            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","props","internalRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","slot","marginRight","marginLeft"],"mappings":"4cAiBkBA,cAAmD,WAkBjEC,OAjBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,KASIA,EAAO,OATXC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,KACGC,iCAIP,MAAMC,EAAclB,SAA+B,MAC7CmB,EAAcC,eAAa,CAACnB,EAAKiB,IAEvC,SAASG,EAAYC,SACbA,EAAMC,gBAAkBJ,EAAYK,mBACxCN,EAAYM,YAASC,SAGzB,OACIzB,gBAAC0B,aACGxB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,qBACUE,GAEhBa,GACE3B,gBAAC4B,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACE,UAATxB,EAAmBuB,UAAOE,MAAQ,KACtB,aAAZhC,EAAyB8B,UAAOG,SAAW,MAE/CC,QAASf,GAERN,EACGf,gBAAC4B,OACGG,UAAWC,UAAOK,KAClBR,QAAQ,OACRS,YAAyB,aAAZpC,EAAyB,SAAW,UACjDqC,WAAwB,aAAZrC,EAAyB,UAAY,UAEhDa,GAEL,KACJf,2EAAWiB,GAAWU,OAAYjB,KAAMA,EAAMT,IAAKkB,KAClDH,EACGhB,gBAAC4B,OACGG,UAAWC,UAAOK,KAClBR,QAAQ,OACRS,YAAyB,aAAZpC,EAAyB,UAAY,SAClDqC,WAAwB,aAAZrC,EAAyB,SAAW,WAE/Cc,GAEL"}

package/lib/toast/use-toasts.d.ts

@@ -78,7 +78,7 @@ declare type ToastsProviderProps = {
  *
  * @see useToasts
  */
-declare function ToastsProvider({ children, padding, defaultAutoDismissDelay, defaultDismissLabel, containerClassName, }: ToastsProviderProps): JSX.Element;
+declare function ToastsProvider({ children, padding, defaultAutoDismissDelay, defaultDismissLabel, containerClassName, }: ToastsProviderProps): React.JSX.Element;
 /**
  * Provides a function `showToast` that shows a new toast every time you call it.
  *

package/lib/tooltip/tooltip.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { TooltipStoreState } from '@ariakit/react';
-declare type TooltipProps = {
+import type { ObfuscatedClassName } from '../utils/common-types';
+interface TooltipProps extends ObfuscatedClassName {
     /**
      * The element that triggers the tooltip. Generally a button or link.
      *
@@ -49,11 +50,7 @@ declare type TooltipProps = {
      * @default false
      */
     withArrow?: boolean;
-    /**
-     * An escape hatch, in case you need to provide a custom class name to the tooltip.
-     */
-    exceptionallySetClassName?: string;
-};
-declare function Tooltip({ children, content, position, gapSize, withArrow, exceptionallySetClassName, }: TooltipProps): JSX.Element | null;
+}
+declare function Tooltip({ children, content, position, gapSize, withArrow, exceptionallySetClassName, }: TooltipProps): React.JSX.Element | null;
 export type { TooltipProps };
 export { Tooltip };

package/lib/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../box/box.js"),r=require("@ariakit/react"),o=require("./tooltip.module.css.js");exports.Tooltip=function({children:n,content:i,position:l="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:u}){const d=r.useTooltipStore({placement:l,showTimeout:500,hideTimeout:100}),c=d.useState("open"),p=e.Children.only(n);if(!p)return p;if("string"==typeof p.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return e.createElement(e.Fragment,null,e.createElement(r.TooltipAnchor,{render:p,store:d,ref:p.ref}),c&&i?e.createElement(t.Box,{as:r.Tooltip,gutter:a,store:d,className:[o.default.tooltip,u],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?e.createElement(r.TooltipArrow,null):null,"function"==typeof i?i():i):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../box/box.js"),r=require("@ariakit/react"),o=require("./tooltip.module.css.js");exports.Tooltip=function({children:n,content:i,position:l="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:d}){const u=r.useTooltipStore({placement:l,showTimeout:500,hideTimeout:100}),c=u.useState("open"),p=e.Children.only(n);if(!p)return p;if("string"==typeof p.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return e.createElement(e.Fragment,null,e.createElement(r.TooltipAnchor,{render:p,store:u,ref:p.ref}),c&&i?e.createElement(r.Tooltip,{store:u,gutter:a,render:e.createElement(t.Box,{className:[o.default.tooltip,d],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"})},s?e.createElement(r.TooltipArrow,null):null,"function"==typeof i?i():i):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    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    gutter={gapSize}\n                    store={tooltip}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","TooltipAnchor","render","store","Box","as","AriakitTooltip","gutter","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"uMA0EA,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EAAUC,kBAAgB,CAAEC,UAAWN,EAAUO,YAAa,IAAKC,YAAa,MAChFC,EAASL,EAAQM,SAAS,QAE1BC,EAAQC,WAAeC,KACzBf,GAGJ,IAAKa,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEAGpB,OACIH,gCACIA,gBAACI,iBAAcC,OAAQN,EAAOO,MAAOd,EAASU,IAAKH,EAAMG,MACxDL,GAAUV,EACPa,gBAACO,OACGC,GAAIC,UACJC,OAAQrB,EACRiB,MAAOd,EACPmB,UAAW,CAACC,UAAOpB,QAASD,GAC5BsB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,UAET9B,EAAYU,gBAACqB,qBAAkB,KACZ,mBAAZlC,EAAyBA,IAAYA,GAEjD"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <AriakitTooltip\n                    store={tooltip}\n                    gutter={gapSize}\n                    render={\n                        <Box\n                            className={[styles.tooltip, exceptionallySetClassName]}\n                            background=\"toast\"\n                            borderRadius=\"standard\"\n                            paddingX=\"small\"\n                            paddingY=\"xsmall\"\n                            maxWidth=\"medium\"\n                            width=\"fitContent\"\n                            overflow=\"hidden\"\n                            textAlign=\"center\"\n                        />\n                    }\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"uMAsEA,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EAAUC,kBAAgB,CAAEC,UAAWN,EAAUO,YAAa,IAAKC,YAAa,MAChFC,EAASL,EAAQM,SAAS,QAE1BC,EAAQC,WAAeC,KACzBf,GAGJ,IAAKa,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEAGpB,OACIH,gCACIA,gBAACI,iBAAcC,OAAQN,EAAOO,MAAOd,EAASU,IAAKH,EAAMG,MACxDL,GAAUV,EACPa,gBAACO,WACGD,MAAOd,EACPgB,OAAQnB,EACRgB,OACIL,gBAACS,OACGC,UAAW,CAACC,UAAOnB,QAASD,GAC5BqB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,YAIjB7B,EAAYU,gBAACoB,qBAAkB,KACZ,mBAAZjC,EAAyBA,IAAYA,GAEjD"}

package/lib/utils/polymorphism.d.ts

@@ -113,6 +113,8 @@ interface ForwardRefFunction<ComponentType extends React.ElementType, OwnProps,
  * This behaviour can be customized via an optional second generic argument that allows to disable
  * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop
  * name.
+ *
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 interface PolymorphicComponent<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'> {
     <TT extends React.ElementType = ComponentType>(props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>): React.ReactElement | null;
@@ -126,8 +128,8 @@ interface PolymorphicComponent<ComponentType extends React.ElementType, OwnProps
  * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
  * value to be typed using `as PolymorphicComponent<…>`.
  *
- * @see PolymorphicComponent for details about what this type does
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 declare function polymorphicComponent<ComponentType extends React.ElementType = 'div', OwnProps = EmptyObject, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>): PolymorphicComponent<ComponentType, OwnProps, ShouldObfuscateClassName>;
-export type { PolymorphicComponent, ObfuscatedClassName };
+export type { PolymorphicComponent };
 export { polymorphicComponent };

package/lib/utils/polymorphism.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @see PolymorphicComponent for details about what this type does\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, ObfuscatedClassName }\nexport { polymorphicComponent }\n"],"names":["render","React"],"mappings":"wHAyLA,SAIEA,GACE,OAAOC,aAAiBD"}
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent }\nexport { polymorphicComponent }\n"],"names":["render","React"],"mappings":"wHA2LA,SAIEA,GACE,OAAOC,aAAiBD"}

package/lib/utils/test-helpers.d.ts

@@ -17,6 +17,6 @@ declare function runSpaceTests<Props extends PropsWithSpace>(Component: React.Co
  * @see https://twitter.com/diegohaz/status/1560525455383461888
  * @see https://github.com/ariakit/ariakit/issues/1800#issuecomment-1227862399
  */
-declare function flushMicrotasks(): Promise<undefined>;
-declare function TestIcon(): JSX.Element;
+declare function flushMicrotasks(): Promise<void>;
+declare function TestIcon(): React.JSX.Element;
 export { runSpaceTests, flushMicrotasks, TestIcon };

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "25.0.0-beta",
+    "version": "25.0.0-beta.1",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
@@ -90,8 +90,8 @@
         "@types/jest": "28.1.8",
         "@types/jest-axe": "^3.5.3",
         "@types/marked": "^4.0.8",
-        "@types/react": "^17.0.45",
-        "@types/react-dom": "^17.0.17",
+        "@types/react": "18.3.1",
+        "@types/react-dom": "18.3.0",
         "@typescript-eslint/eslint-plugin": "^5.25.0",
         "@typescript-eslint/parser": "^5.25.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",