@doist/reactist 28.1.0 → 28.1.2

package/es/tabs/tabs.js

@@ -83,35 +83,63 @@ function TabList(_ref2) {
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
+  const tabListRef = React.useRef(null);
+  const tabListPrevWidthRef = React.useRef(0);
   const tabContextValue = React.useContext(TabsContext);
   const [selectedTabElement, setSelectedTabElement] = React.useState(null);
   const [selectedTabStyle, setSelectedTabStyle] = React.useState({});
-  const tabListRef = React.useRef(null);
   const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
-  React.useLayoutEffect(() => {
-    function updateSelectedTabStyle() {
-      if (!selectedId || !tabListRef.current) {
-        return;
-      }
+  const updateSelectedTabPosition = React.useCallback(function updateSelectedTabPositionCallback() {
+    if (!selectedId || !tabListRef.current) {
+      return;
+    }
 
-      const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
-      const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+    const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+    const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
 
-      if (selectedTab) {
-        setSelectedTabElement(selectedTab);
-        setSelectedTabStyle({
-          left: selectedTab.offsetLeft + "px",
-          width: selectedTab.offsetWidth + "px"
+    if (selectedTab) {
+      setSelectedTabElement(selectedTab);
+      setSelectedTabStyle({
+        left: selectedTab.offsetLeft + "px",
+        width: selectedTab.offsetWidth + "px"
+      });
+    }
+  }, [selectedId]);
+  React.useEffect(function updateSelectedTabPositionOnTabChange() {
+    updateSelectedTabPosition();
+  }, // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
+  [selectedId, updateSelectedTabPosition]);
+  React.useEffect(function observeTabListWidthChange() {
+    let animationFrameId = null;
+    const tabListObserver = new ResizeObserver(([entry]) => {
+      const width = entry == null ? void 0 : entry.contentRect.width;
+
+      if (width && tabListPrevWidthRef.current !== width) {
+        tabListPrevWidthRef.current = width;
+
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+        }
+
+        animationFrameId = requestAnimationFrame(() => {
+          updateSelectedTabPosition();
+          animationFrameId = null;
         });
       }
+    });
+
+    if (tabListRef.current) {
+      tabListObserver.observe(tabListRef.current);
     }
 
-    updateSelectedTabStyle();
-    window.addEventListener('resize', updateSelectedTabStyle);
-    return function cleanupEventListener() {
-      window.removeEventListener('resize', updateSelectedTabStyle);
+    return function cleanupResizeObserver() {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+
+      tabListObserver.disconnect();
     };
-  }, [selectedId]);
+  }, [updateSelectedTabPosition]);
 
   if (!tabContextValue) {
     return null;

package/es/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\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\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\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    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\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, disabled, exceptionallySetClassName, render, onClick },\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\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n    const tabListRef = React.useRef<HTMLDivElement>(null)\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    React.useLayoutEffect(() => {\n        function updateSelectedTabStyle() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        }\n\n        updateSelectedTabStyle()\n\n        window.addEventListener('resize', updateSelectedTabStyle)\n\n        return function cleanupEventListener() {\n            window.removeEventListener('resize', updateSelectedTabStyle)\n        }\n    }, [selectedId])\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\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","createContext","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","useMemo","createElement","Provider","value","Tab","forwardRef","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","className","classNames","styles","tab","BaseTab","store","TabList","space","width","align","props","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","tabListRef","useRef","useLayoutEffect","updateSelectedTabStyle","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","window","addEventListener","cleanupEventListener","removeEventListener","justifyContentAlignMap","start","end","center","Box","display","justifyContent","BaseTabList","_objectSpread","position","track","selected","style","Inline","fullTabList","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","useEffect","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
+{"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    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\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\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\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    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\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, disabled, exceptionallySetClassName, render, onClick },\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\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabListRef = React.useRef<HTMLDivElement | null>(null)\n    const tabListPrevWidthRef = React.useRef(0)\n\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    const updateSelectedTabPosition = React.useCallback(\n        function updateSelectedTabPositionCallback() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        },\n        [selectedId],\n    )\n\n    React.useEffect(\n        function updateSelectedTabPositionOnTabChange() {\n            updateSelectedTabPosition()\n        },\n        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n        [selectedId, updateSelectedTabPosition],\n    )\n\n    React.useEffect(\n        function observeTabListWidthChange() {\n            let animationFrameId: number | null = null\n\n            const tabListObserver = new ResizeObserver(([entry]) => {\n                const width = entry?.contentRect.width\n\n                if (width && tabListPrevWidthRef.current !== width) {\n                    tabListPrevWidthRef.current = width\n\n                    if (animationFrameId !== null) {\n                        cancelAnimationFrame(animationFrameId)\n                    }\n\n                    animationFrameId = requestAnimationFrame(() => {\n                        updateSelectedTabPosition()\n                        animationFrameId = null\n                    })\n                }\n            })\n\n            if (tabListRef.current) {\n                tabListObserver.observe(tabListRef.current)\n            }\n\n            return function cleanupResizeObserver() {\n                if (animationFrameId) {\n                    cancelAnimationFrame(animationFrameId)\n                }\n\n                tabListObserver.disconnect()\n            }\n        },\n        [updateSelectedTabPosition],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\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","createContext","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","useMemo","createElement","Provider","value","Tab","forwardRef","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","className","classNames","styles","tab","BaseTab","store","TabList","space","width","align","props","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","updateSelectedTabPositionCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","useEffect","updateSelectedTabPositionOnTabChange","observeTabListWidthChange","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","cleanupResizeObserver","disconnect","justifyContentAlignMap","start","end","center","Box","display","justifyContent","BaseTabList","_objectSpread","position","track","selected","style","Inline","fullTabList","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

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

@@ -31,31 +31,13 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
   const combinedRef = useMergeRefs([ref, internalRef]);
+  useAutoExpand({
+    value,
+    autoExpand,
+    containerRef,
+    internalRef
+  });
   const textAreaClassName = classNames([autoExpand ? modules_2728c236.disableResize : null, disableResize ? modules_2728c236.disableResize : null]);
-  React.useEffect(function setupAutoExpand() {
-    const containerElement = containerRef.current;
-
-    function handleAutoExpand(value) {
-      if (containerElement) {
-        containerElement.dataset.replicatedValue = value;
-      }
-    }
-
-    function handleInput(event) {
-      handleAutoExpand(event.currentTarget.value);
-    }
-
-    const textAreaElement = internalRef.current;
-
-    if (!textAreaElement || !autoExpand) {
-      return undefined;
-    } // Apply change initially, in case the text area has a non-empty initial value
-
-
-    handleAutoExpand(textAreaElement.value);
-    textAreaElement.addEventListener('input', handleInput);
-    return () => textAreaElement.removeEventListener('input', handleInput);
-  }, [autoExpand]);
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
     id: id,
@@ -93,5 +75,49 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   });
 });
 
+function useAutoExpand({
+  value,
+  autoExpand,
+  containerRef,
+  internalRef
+}) {
+  const isControlled = value !== undefined;
+  React.useEffect(function setupAutoExpandWhenUncontrolled() {
+    const textAreaElement = internalRef.current;
+
+    if (!textAreaElement || !autoExpand || isControlled) {
+      return undefined;
+    }
+
+    const containerElement = containerRef.current;
+
+    function handleAutoExpand(value) {
+      if (containerElement) {
+        containerElement.dataset.replicatedValue = value;
+      }
+    }
+
+    function handleInput(event) {
+      handleAutoExpand(event.currentTarget.value);
+    } // Apply change initially, in case the text area has a non-empty initial value
+
+
+    handleAutoExpand(textAreaElement.value);
+    textAreaElement.addEventListener('input', handleInput);
+    return () => textAreaElement.removeEventListener('input', handleInput);
+  }, [autoExpand, containerRef, internalRef, isControlled]);
+  React.useEffect(function setupAutoExpandWhenControlled() {
+    if (!isControlled) {
+      return;
+    }
+
+    const containerElement = containerRef.current;
+
+    if (containerElement) {
+      containerElement.dataset.replicatedValue = value;
+    }
+  }, [value, containerRef, isControlled]);
+}
+
 export { TextArea };
 //# sourceMappingURL=text-area.js.map

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

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

package/lib/tabs/tabs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),l=require("@ariakit/react"),n=require("../box/box.js"),a=require("../inline/inline.js"),s=require("./tabs.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var c=o(t),i=u(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=c.createContext(null),p=c.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:n,render:a,onClick:u},o){const d=c.useContext(b);if(!d)return null;const{variant:f,tabStore:p}=d,S=i.default(n,s.default.tab,s.default["tab-"+f]);return c.createElement(l.Tab,{id:t,ref:o,disabled:r,store:p,render:a,className:S,onClick:u},e)})),S=c.forwardRef((function(t,r){let{children:n,id:a,renderMode:s="always"}=t,u=e.objectWithoutProperties(t,f);const o=c.useContext(b),[i,d]=c.useState(!1),p=(null==o?void 0:o.tabStore.useState("selectedId"))===a;if(c.useEffect((function(){!i&&p&&d(!0)}),[i,p]),!o)return null;const{tabStore:S}=o;return"always"===s||"active"===s&&p||"lazy"===s&&(p||i)?c.createElement(l.TabPanel,e.objectSpread2(e.objectSpread2({},u),{},{tabId:a,store:S,ref:r}),n):null}));exports.Tab=p,exports.TabAwareSlot=function({children:e}){const t=c.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:u,width:o="maxContent",align:f="start",exceptionallySetClassName:p}=t,S=e.objectWithoutProperties(t,d);const x=c.useContext(b),[m,v]=c.useState(null),[y,h]=c.useState({}),j=c.useRef(null),E=null==x?void 0:x.tabStore.useState("selectedId");if(c.useLayoutEffect(()=>{function e(){if(!E||!j.current)return;const e=j.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(v(t),h({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}},[E]),!x)return null;const{tabStore:w,variant:C}=x;return c.createElement(n.Box,{display:"flex",justifyContent:"full"===o?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},c.createElement(l.TabList,e.objectSpread2({store:w,render:c.createElement(n.Box,{position:"relative",width:o,className:p}),ref:j},S),c.createElement(n.Box,{className:[s.default.track,s.default["track-"+C]]}),m?c.createElement(n.Box,{className:[s.default.selected,s.default["selected-"+C]],style:y}):null,c.createElement(a.Inline,{space:u,exceptionallySetClassName:i.default("full"===o?s.default.fullTabList:null)},r)))},exports.TabPanel=S,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:a}){const s=l.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),u=s.useState("selectedId"),o=c.useMemo(()=>{var e;return{tabStore:s,variant:n,selectedId:null!=(e=null!=t?t:u)?e:null}},[n,s,t,u]);return c.createElement(b.Provider,{value:o},e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react"),l=require("../box/box.js"),a=require("../inline/inline.js"),u=require("./tabs.module.css.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=s(t),i=c(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=o.createContext(null),m=o.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:l,render:a,onClick:c},s){const d=o.useContext(b);if(!d)return null;const{variant:f,tabStore:m}=d,p=i.default(l,u.default.tab,u.default["tab-"+f]);return o.createElement(n.Tab,{id:t,ref:s,disabled:r,store:m,render:a,className:p,onClick:c},e)})),p=o.forwardRef((function(t,r){let{children:l,id:a,renderMode:u="always"}=t,c=e.objectWithoutProperties(t,f);const s=o.useContext(b),[i,d]=o.useState(!1),m=(null==s?void 0:s.tabStore.useState("selectedId"))===a;if(o.useEffect((function(){!i&&m&&d(!0)}),[i,m]),!s)return null;const{tabStore:p}=s;return"always"===u||"active"===u&&m||"lazy"===u&&(m||i)?o.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},c),{},{tabId:a,store:p,ref:r}),l):null}));exports.Tab=m,exports.TabAwareSlot=function({children:e}){const t=o.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:c,width:s="maxContent",align:f="start",exceptionallySetClassName:m}=t,p=e.objectWithoutProperties(t,d);const S=o.useRef(null),x=o.useRef(0),v=o.useContext(b),[h,y]=o.useState(null),[j,C]=o.useState({}),E=null==v?void 0:v.tabStore.useState("selectedId"),I=o.useCallback((function(){if(!E||!S.current)return;const e=S.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(y(t),C({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}),[E]);if(o.useEffect((function(){I()}),[E,I]),o.useEffect((function(){let e=null;const t=new ResizeObserver(([t])=>{const r=null==t?void 0:t.contentRect.width;r&&x.current!==r&&(x.current=r,null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{I(),e=null}))});return S.current&&t.observe(S.current),function(){e&&cancelAnimationFrame(e),t.disconnect()}}),[I]),!v)return null;const{tabStore:w,variant:T}=v;return o.createElement(l.Box,{display:"flex",justifyContent:"full"===s?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},o.createElement(n.TabList,e.objectSpread2({store:w,render:o.createElement(l.Box,{position:"relative",width:s,className:m}),ref:S},p),o.createElement(l.Box,{className:[u.default.track,u.default["track-"+T]]}),h?o.createElement(l.Box,{className:[u.default.selected,u.default["selected-"+T]],style:j}):null,o.createElement(a.Inline,{space:c,exceptionallySetClassName:i.default("full"===s?u.default.fullTabList:null)},r)))},exports.TabPanel=p,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:l="neutral",onSelectedIdChange:a}){const u=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),c=u.useState("selectedId"),s=o.useMemo(()=>{var e;return{tabStore:u,variant:l,selectedId:null!=(e=null!=t?t:c)?e:null}},[l,u,t,c]);return o.createElement(b.Provider,{value:s},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    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\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\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\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    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\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, disabled, exceptionallySetClassName, render, onClick },\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\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n    const tabListRef = React.useRef<HTMLDivElement>(null)\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    React.useLayoutEffect(() => {\n        function updateSelectedTabStyle() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        }\n\n        updateSelectedTabStyle()\n\n        window.addEventListener('resize', updateSelectedTabStyle)\n\n        return function cleanupEventListener() {\n            window.removeEventListener('resize', updateSelectedTabStyle)\n        }\n    }, [selectedId])\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\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","createContext","Tab","forwardRef","children","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref3","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref2","space","width","align","_excluded","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","tabListRef","useRef","useLayoutEffect","updateSelectedTabStyle","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","window","addEventListener","removeEventListener","Box","display","justifyContent","start","end","center","BaseTabList","TabList","_objectSpread","position","track","selected","style","Inline","fullTabList","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"mappings":"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"}
+{"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    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\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\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\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    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\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, disabled, exceptionallySetClassName, render, onClick },\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\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabListRef = React.useRef<HTMLDivElement | null>(null)\n    const tabListPrevWidthRef = React.useRef(0)\n\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    const updateSelectedTabPosition = React.useCallback(\n        function updateSelectedTabPositionCallback() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        },\n        [selectedId],\n    )\n\n    React.useEffect(\n        function updateSelectedTabPositionOnTabChange() {\n            updateSelectedTabPosition()\n        },\n        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n        [selectedId, updateSelectedTabPosition],\n    )\n\n    React.useEffect(\n        function observeTabListWidthChange() {\n            let animationFrameId: number | null = null\n\n            const tabListObserver = new ResizeObserver(([entry]) => {\n                const width = entry?.contentRect.width\n\n                if (width && tabListPrevWidthRef.current !== width) {\n                    tabListPrevWidthRef.current = width\n\n                    if (animationFrameId !== null) {\n                        cancelAnimationFrame(animationFrameId)\n                    }\n\n                    animationFrameId = requestAnimationFrame(() => {\n                        updateSelectedTabPosition()\n                        animationFrameId = null\n                    })\n                }\n            })\n\n            if (tabListRef.current) {\n                tabListObserver.observe(tabListRef.current)\n            }\n\n            return function cleanupResizeObserver() {\n                if (animationFrameId) {\n                    cancelAnimationFrame(animationFrameId)\n                }\n\n                tabListObserver.disconnect()\n            }\n        },\n        [updateSelectedTabPosition],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\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","createContext","Tab","forwardRef","children","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref3","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref2","space","width","align","_excluded","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","disconnect","Box","display","justifyContent","start","end","center","BaseTabList","TabList","_objectSpread","position","track","selected","style","Inline","fullTabList","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"mappings":"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"}

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {
+interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'> {
+    /**
+     * The value of the text area.
+     *
+     * If this prop is not specified, the text area will be uncontrolled and the component will
+     * manage its own state.
+     */
+    value?: string;
     /**
      * The number of visible text lines for the text area.
      *

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

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

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

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

package/package.json

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

package/styles/index.css

@@ -4,5 +4,4 @@
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
-.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}
-.reactist_dropdown .trigger{cursor:pointer;display:block}.reactist_dropdown .body{border-radius:3px;border:1px solid #dcdcdc;overflow:hidden;box-shadow:0 1px 8px 0 rgba(0,0,0,.08);z-index:1;background-color:#fff}.reactist_dropdown hr{border:none;height:1px;background-color:#dcdcdc;margin:0 5px}.reactist_dropdown .with_arrow:after,.reactist_dropdown .with_arrow:before{z-index:1;content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-width:6px;right:14px}.reactist_dropdown .with_arrow:after{top:-11px;border-color:transparent transparent #fff}.reactist_dropdown .with_arrow:before{top:-12px;border-color:transparent transparent #dcdcdc}.reactist_dropdown .with_arrow.top:after{top:-1px;border-color:#fff transparent transparent}.reactist_dropdown .with_arrow.top:before{top:-1px;right:13px;border-width:7px;border-color:#dcdcdc transparent transparent}
+.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}