@react-spectrum/s2 0.10.1 → 0.11.0

package/dist/Tabs.cjs

@@ -53,7 +53,8 @@ const $b27519d6a701105b$var$InternalTabsContext = /*#__PURE__*/ (0, $5oxdw$react
 const $b27519d6a701105b$var$CollapseContext = /*#__PURE__*/ (0, $5oxdw$react.createContext)({
     showTabs: true,
     menuId: '',
-    valueId: ''
+    valueId: '',
+    tabs: []
 });
 const $b27519d6a701105b$var$tabs = function anonymous(props, overrides) {
     let rules = " ";
@@ -155,48 +156,89 @@ const $b27519d6a701105b$var$tablist = function anonymous(props) {
     rules += ' Nq11';
     return rules;
 };
+const $b27519d6a701105b$var$tablistWrapper = function anonymous(props, overrides) {
+    let rules = " ";
+    let position = false;
+    let minWidth = false;
+    let flexShrink = false;
+    let flexGrow = false;
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    for (let p of matches){
+        if (p[1] === "_P") position = true;
+        if (p[1] === "N") minWidth = true;
+        if (p[1] === "_v") flexShrink = true;
+        if (p[1] === "_u") flexGrow = true;
+        rules += p[0];
+    }
+    if (!position) rules += ' _Pc11';
+    if (!minWidth) rules += ' Na11';
+    if (!flexShrink) rules += ' _va11';
+    if (!flexGrow) rules += ' _ua11';
+    return rules;
+};
 function $b27519d6a701105b$export$e51a686c67fdaa2d(props) {
-    let { showTabs: showTabs } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$CollapseContext) ?? {};
+    let { showTabs: showTabs, menuId: menuId, valueId: valueId, tabs: tabs, listRef: listRef, onSelectionChange: onSelectionChange, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$CollapseContext) ?? {};
+    let { density: density, orientation: orientation, labelBehavior: labelBehavior } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext);
     if (showTabs) return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabListInner, {
         ...props
     });
-    return null;
+    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)("div", {
+        className: $b27519d6a701105b$var$tablistWrapper(null, props.styles),
+        children: [
+            listRef && /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
+                className: $b27519d6a701105b$var$tablist({
+                    orientation: orientation,
+                    labelBehavior: labelBehavior,
+                    density: density
+                }),
+                children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabs, {
+                    items: tabs,
+                    density: density,
+                    listRef: listRef
+                })
+            }),
+            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabsMenu, {
+                id: menuId,
+                valueId: valueId,
+                items: tabs,
+                onSelectionChange: onSelectionChange,
+                "aria-label": ariaLabel,
+                "aria-describedby": ariaDescribedBy
+            })
+        ]
+    });
 }
-function $b27519d6a701105b$var$TabListInner(props1) {
-    let { tablistRef: tablistRef, density: density, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
-    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
-        style: props1.UNSAFE_style,
-        className: (props1.UNSAFE_className || '') + function anonymous(props, overrides) {
-            let rules = " ";
-            let position = false;
-            let flexGrow = false;
-            let flexShrink = false;
-            let minWidth = false;
-            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
-            for (let p of matches){
-                if (p[1] === "_P") position = true;
-                if (p[1] === "_u") flexGrow = true;
-                if (p[1] === "_v") flexShrink = true;
-                if (p[1] === "N") minWidth = true;
-                rules += p[0];
-            }
-            if (!position) rules += ' _Pc11';
-            if (!flexGrow) rules += ' _ua11';
-            if (!flexShrink) rules += ' _va11';
-            if (!minWidth) rules += ' Nq11';
-            return rules;
-        }(null, props1.styles),
-        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.TabList), {
-            ...props1,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            ref: tablistRef,
-            className: (renderProps)=>$b27519d6a701105b$var$tablist({
-                    ...renderProps,
+function $b27519d6a701105b$var$TabListInner(props) {
+    let { tablistRef: tablistRef, orientation: orientation, density: density, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
+    let { tabs: tabs, listRef: listRef } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$CollapseContext) ?? {};
+    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)("div", {
+        style: props.UNSAFE_style,
+        className: (props.UNSAFE_className || '') + $b27519d6a701105b$var$tablistWrapper(null, props.styles),
+        children: [
+            listRef && /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
+                className: $b27519d6a701105b$var$tablist({
+                    orientation: orientation,
                     labelBehavior: labelBehavior,
                     density: density
+                }),
+                children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabs, {
+                    items: tabs,
+                    density: density,
+                    listRef: listRef
                 })
-        })
+            }),
+            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.TabList), {
+                ...props,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                ref: tablistRef,
+                className: (renderProps)=>$b27519d6a701105b$var$tablist({
+                        ...renderProps,
+                        labelBehavior: labelBehavior,
+                        density: density
+                    })
+            })
+        ]
     });
 }
 const $b27519d6a701105b$var$selectedIndicator = function anonymous(props) {
@@ -464,7 +506,7 @@ function $b27519d6a701105b$var$isEveryTabDisabled(collection, disabledKeys) {
     return false;
 }
 let $b27519d6a701105b$var$HiddenTabs = function(props) {
-    let { listRef: listRef, items: items, size: size, density: density } = props;
+    let { listRef: listRef, items: items = [], size: size, density: density } = props;
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
         // @ts-ignore
         inert: (0, $5oxdw$reactariautils.inertValue)(true),
@@ -546,7 +588,7 @@ let $b27519d6a701105b$var$TabsMenu = (props1)=>{
     });
 };
 let $b27519d6a701105b$var$CollapsingTabs = ({ collection: collection, containerRef: containerRef, ...props })=>{
-    let { density: density = 'regular', orientation: orientation = 'horizontal', labelBehavior: labelBehavior = 'show', onSelectionChange: onSelectionChange } = props;
+    let { orientation: orientation = 'horizontal', onSelectionChange: onSelectionChange } = props;
     let [showItems, _setShowItems] = (0, $5oxdw$react.useState)(true);
     showItems = orientation === 'vertical' ? true : showItems;
     let setShowItems = (0, $5oxdw$react.useCallback)((value)=>{
@@ -608,54 +650,37 @@ let $b27519d6a701105b$var$CollapsingTabs = ({ collection: collection, containerR
         },
         children: props.children
     });
-    else contents = /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)((0, $5oxdw$reactjsxruntime.Fragment), {
-        children: [
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabsMenu, {
-                id: menuId,
+    else contents = /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactjsxruntime.Fragment), {
+        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
+            value: {
+                showTabs: false,
+                tabs: children,
+                menuId: menuId,
                 valueId: valueId,
-                items: children,
+                listRef: listRef,
                 onSelectionChange: onSelectionChange,
-                "aria-label": props['aria-label'],
-                "aria-describedby": props['aria-labelledby']
-            }),
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
-                value: {
-                    showTabs: false,
-                    menuId: menuId,
-                    valueId: valueId
-                },
-                children: props.children
-            })
-        ]
+                ariaLabel: props['aria-label'],
+                ariaDescribedBy: props['aria-labelledby']
+            },
+            children: props.children
+        })
     });
-    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)("div", {
+    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
         style: props.UNSAFE_style,
         className: (props.UNSAFE_className || '') + $b27519d6a701105b$var$tabs({
             orientation: orientation
         }, props.styles),
         ref: containerRef,
-        children: [
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
-                className: $b27519d6a701105b$var$tablist({
-                    orientation: orientation,
-                    labelBehavior: labelBehavior,
-                    density: density
-                }),
-                children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabs, {
-                    items: children,
-                    density: density,
-                    listRef: listRef
-                })
-            }),
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
-                value: {
-                    showTabs: true,
-                    menuId: menuId,
-                    valueId: valueId
-                },
-                children: contents
-            })
-        ]
+        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
+            value: {
+                showTabs: true,
+                menuId: menuId,
+                valueId: valueId,
+                tabs: children,
+                listRef: listRef
+            },
+            children: contents
+        })
     });
 };
 

package/dist/Tabs.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  ContextValue,\n  Group,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext,\n  TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular',\n  /**\n   * Defines if the text within the tabs should be hidden and only the icon should be shown.\n   * The text is always visible when the item is collapsed into a picker.\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps> & {\n  tablistRef?: RefObject<HTMLDivElement | null>,\n  prevRef?: RefObject<DOMRect | null>,\n  selectedKey?: Key | null\n}>({});\nconst CollapseContext = createContext({\n  showTabs: true,\n  menuId: '',\n  valueId: ''\n});\n\nconst tabs = style({\n  position: 'relative',\n  display: 'flex',\n  flexShrink: 0,\n  font: 'ui',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal',\n    labelBehavior = 'show'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  let tablistRef = useRef<HTMLDivElement | null>(null);\n  let prevRef = useRef<DOMRect | null>(null);\n\n  let onChange = useEffectEvent((val: Key) => {\n    if (tablistRef.current) {\n      prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;\n    }\n    setValue(val);\n  });\n\n  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          tablistRef,\n          prevRef,\n          onSelectionChange: onChange,\n          labelBehavior,\n          'aria-label': props['aria-label'],\n          'aria-labelledby': props['aria-labelledby']\n        }]\n      ]}>\n      <CollectionBuilder content={props.children}>\n        {collection => (\n          <CollapsingTabs\n            {...props}\n            selectedKey={value}\n            onSelectionChange={onChange}\n            collection={collection}\n            containerRef={domRef} />\n        )}\n      </CollectionBuilder>\n    </Provider>\n  );\n});\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        },\n        labelBehavior: {\n          hide: {\n            density: {\n              compact: 16,\n              regular: 24\n            }\n          }\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  marginEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  marginStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  minWidth: 'min'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext) ?? {};\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n  return null;\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {\n    tablistRef,\n    density,\n    labelBehavior,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = useContext(InternalTabsContext) ?? {};\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        style({\n          position: 'relative',\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: 'min'\n        }, getAllowedOverrides())(null, props.styles)}>\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n    </div>\n  );\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    default: 'full',\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    default: 'full',\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    default: 0\n  },\n  top: {\n    orientation: {\n      vertical: 0\n    }\n  },\n  left: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  insetStart: {\n    orientation: {\n      vertical: -12\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full'\n});\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide', orientation?: Orientation}>({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  minHeight: {\n    orientation: {\n      vertical: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default',\n  paddingX: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n  let {density, orientation, labelBehavior, prevRef} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior, orientation}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu,\n          isSelected,\n          isDisabled\n        }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [TextContext, {\n                  id: contentId,\n                  styles:\n                    style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                }],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: icon\n                }]\n              ]}>\n              <TabInner\n                isSelected={isSelected}\n                orientation={orientation!}\n                isDisabled={isDisabled}\n                prevRef={prevRef}>\n                {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n              </TabInner>\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nfunction TabInner({isSelected, isDisabled, orientation, children, prevRef}: {\n  isSelected: boolean,\n  isDisabled: boolean,\n  orientation: Orientation,\n  children: ReactNode,\n  prevRef?: RefObject<DOMRect | null>\n}) {\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  let ref = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {\n      let currentItem = ref?.current.getBoundingClientRect();\n\n      if (orientation === 'horizontal') {\n        let deltaX = prevRef.current.left - currentItem.left;\n        ref.current.animate(\n          [\n            {transform: `translateX(${deltaX}px)`, width: `${prevRef.current.width}px`},\n            {transform: 'translateX(0px)', width: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      } else {\n        let deltaY = prevRef.current.top - currentItem.top;\n        ref.current.animate(\n          [\n            {transform: `translateY(${deltaY}px)`, height: `${prevRef.current.height}px`},\n            {transform: 'translateY(0px)', height: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      }\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion, prevRef, orientation]);\n\n  return (\n    <>\n      {isSelected && <div ref={ref} className={selectedIndicator({isDisabled, orientation})} />}\n      {children}\n    </>\n  );\n}\n\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  minHeight: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;\n  let {menuId, valueId} = useContext(CollapseContext);\n  let ref = useRef(null);\n  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n  return (\n    <Group\n      {...otherProps}\n      ref={ref}\n      aria-labelledby={menuId + ' ' + valueId}\n      tabIndex={tabIndex}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n  );\n}\n\nfunction isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\nlet HiddenTabs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>,\n  items: Array<Node<any>>,\n  size?: string,\n  density?: 'compact' | 'regular'\n}) {\n  let {listRef, items, size, density} = props;\n\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n        flexWrap: 'inherit',\n        position: 'absolute',\n        inset: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-tab\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, density})}>\n            {item.props.children({size, density})}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let onSelectionChange = useCallback((key: Key | null) => {\n    if (key != null) {\n      _onSelectionChange?.(key);\n    }\n  }, [_onSelectionChange]);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }})({density})}>\n      <Picker\n        id={id}\n        valueId={valueId}\n        {...labelProps}\n        aria-describedby={props['aria-describedby']}\n        aria-details={props['aria-details']}\n        isDisabled={isDisabled || allKeysDisabled}\n        density={density!}\n        labelBehavior={labelBehavior}\n        items={items}\n        disabledKeys={disabledKeys}\n        selectedKey={selectedKey}\n        onSelectionChange={onSelectionChange}>\n        {(item: Node<any>) => {\n          return (\n            <PickerItem\n              {...item.props.originalProps}\n              isDisabled={isDisabled || allKeysDisabled}\n              key={item.key}>\n              {item.props.children({density, isMenu: true})}\n            </PickerItem>\n          );\n        }}\n      </Picker>\n    </div>\n  );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback((value: boolean) => {\n    if (orientation === 'vertical') {\n      // if orientation is vertical, we always show the items\n      _setShowItems(true);\n    } else {\n      _setShowItems(value);\n    }\n  }, [orientation]);\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useEffectEvent(() => {\n    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n      return;\n    }\n    let container = listRef.current;\n    let containerRect = container.getBoundingClientRect();\n    let tabs = container.querySelectorAll('[data-hidden-tab]');\n    let lastTab = tabs[tabs.length - 1];\n    let lastTabRect = lastTab.getBoundingClientRect();\n    if (direction === 'ltr') {\n      setShowItems?.(lastTabRect.right <= containerRect.right);\n    } else {\n      setShowItems?.(lastTabRect.left >= containerRect.left);\n    }\n  });\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  // start with null so that the first render won't have a flicker\n  let prevOrientation = useRef<Orientation | null>(null);\n  useLayoutEffect(() => {\n    if (collection.size > 0 && prevOrientation.current !== orientation) {\n      updateOverflow();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, updateOverflow, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let menuId = useId();\n  let valueId = useId();\n\n  let contents: ReactNode;\n  if (showItems) {\n    contents = (\n      <RACTabs\n        {...props}\n        style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <TabsMenu\n          id={menuId}\n          valueId={valueId}\n          items={children}\n          onSelectionChange={onSelectionChange}\n          aria-label={props['aria-label']}\n          aria-describedby={props['aria-labelledby']} />\n        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n      <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={children} density={density} listRef={listRef} />\n      </div>\n      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  ContextValue,\n  Group,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext,\n  TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular',\n  /**\n   * Defines if the text within the tabs should be hidden and only the icon should be shown.\n   * The text is always visible when the item is collapsed into a picker.\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps> & {\n  tablistRef?: RefObject<HTMLDivElement | null>,\n  prevRef?: RefObject<DOMRect | null>,\n  selectedKey?: Key | null\n}>({});\n\ninterface CollapseContextType {\n  showTabs: boolean,\n  menuId: string,\n  valueId: string,\n  ariaLabel?: string | undefined,\n  ariaDescribedBy?: string | undefined,\n  tabs: Array<Node<any>>,\n  listRef?: RefObject<HTMLDivElement | null>,\n  onSelectionChange?: (key: Key) => void\n}\n\nconst CollapseContext = createContext<CollapseContextType>({\n  showTabs: true,\n  menuId: '',\n  valueId: '',\n  tabs: []\n});\n\nconst tabs = style({\n  position: 'relative',\n  display: 'flex',\n  flexShrink: 0,\n  font: 'ui',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal',\n    labelBehavior = 'show'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  let tablistRef = useRef<HTMLDivElement | null>(null);\n  let prevRef = useRef<DOMRect | null>(null);\n\n  let onChange = useEffectEvent((val: Key) => {\n    if (tablistRef.current) {\n      prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;\n    }\n    setValue(val);\n  });\n\n  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          tablistRef,\n          prevRef,\n          onSelectionChange: onChange,\n          labelBehavior,\n          'aria-label': props['aria-label'],\n          'aria-labelledby': props['aria-labelledby']\n        }]\n      ]}>\n      <CollectionBuilder content={props.children}>\n        {collection => (\n          <CollapsingTabs\n            {...props}\n            selectedKey={value}\n            onSelectionChange={onChange}\n            collection={collection}\n            containerRef={domRef} />\n        )}\n      </CollectionBuilder>\n    </Provider>\n  );\n});\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        },\n        labelBehavior: {\n          hide: {\n            density: {\n              compact: 16,\n              regular: 24\n            }\n          }\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  marginEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  marginStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  minWidth: 'min'\n});\n\nconst tablistWrapper = style({\n  position: 'relative',\n  minWidth: 0,\n  flexShrink: 0,\n  flexGrow: 0\n}, getAllowedOverrides());\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};\n  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n  \n  return (\n    <div className={tablistWrapper(null, props.styles)}>\n      {listRef && <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={tabs} density={density} listRef={listRef} />\n      </div>}\n      <TabsMenu\n        id={menuId}\n        valueId={valueId}\n        items={tabs}\n        onSelectionChange={onSelectionChange}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy} />\n    </div>\n  );\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {\n    tablistRef,\n    orientation,\n    density,\n    labelBehavior,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = useContext(InternalTabsContext) ?? {};\n  let {tabs, listRef} = useContext(CollapseContext) ?? {};\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        tablistWrapper(null, props.styles)}>\n      {listRef && <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={tabs} density={density} listRef={listRef} />\n      </div>}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n    </div>\n  );\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    default: 'full',\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    default: 'full',\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    default: 0\n  },\n  top: {\n    orientation: {\n      vertical: 0\n    }\n  },\n  left: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  insetStart: {\n    orientation: {\n      vertical: -12\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full'\n});\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide', orientation?: Orientation}>({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  minHeight: {\n    orientation: {\n      vertical: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default',\n  paddingX: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n  let {density, orientation, labelBehavior, prevRef} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior, orientation}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu,\n          isSelected,\n          isDisabled\n        }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [TextContext, {\n                  id: contentId,\n                  styles:\n                    style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                }],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: icon\n                }]\n              ]}>\n              <TabInner\n                isSelected={isSelected}\n                orientation={orientation!}\n                isDisabled={isDisabled}\n                prevRef={prevRef}>\n                {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n              </TabInner>\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nfunction TabInner({isSelected, isDisabled, orientation, children, prevRef}: {\n  isSelected: boolean,\n  isDisabled: boolean,\n  orientation: Orientation,\n  children: ReactNode,\n  prevRef?: RefObject<DOMRect | null>\n}) {\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  let ref = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {\n      let currentItem = ref?.current.getBoundingClientRect();\n\n      if (orientation === 'horizontal') {\n        let deltaX = prevRef.current.left - currentItem.left;\n        ref.current.animate(\n          [\n            {transform: `translateX(${deltaX}px)`, width: `${prevRef.current.width}px`},\n            {transform: 'translateX(0px)', width: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      } else {\n        let deltaY = prevRef.current.top - currentItem.top;\n        ref.current.animate(\n          [\n            {transform: `translateY(${deltaY}px)`, height: `${prevRef.current.height}px`},\n            {transform: 'translateY(0px)', height: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      }\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion, prevRef, orientation]);\n\n  return (\n    <>\n      {isSelected && <div ref={ref} className={selectedIndicator({isDisabled, orientation})} />}\n      {children}\n    </>\n  );\n}\n\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  minHeight: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;\n  let {menuId, valueId} = useContext(CollapseContext);\n  let ref = useRef(null);\n  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n  return (\n    <Group\n      {...otherProps}\n      ref={ref}\n      aria-labelledby={menuId + ' ' + valueId}\n      tabIndex={tabIndex}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n  );\n}\n\nfunction isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\nlet HiddenTabs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>,\n  items: Array<Node<any>>,\n  size?: string,\n  density?: 'compact' | 'regular'\n}) {\n  let {listRef, items = [], size, density} = props;\n\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n        flexWrap: 'inherit',\n        position: 'absolute',\n        inset: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-tab\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, density})}>\n            {item.props.children({size, density})}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let onSelectionChange = useCallback((key: Key | null) => {\n    if (key != null) {\n      _onSelectionChange?.(key);\n    }\n  }, [_onSelectionChange]);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }})({density})}>\n      <Picker\n        id={id}\n        valueId={valueId}\n        {...labelProps}\n        aria-describedby={props['aria-describedby']}\n        aria-details={props['aria-details']}\n        isDisabled={isDisabled || allKeysDisabled}\n        density={density!}\n        labelBehavior={labelBehavior}\n        items={items}\n        disabledKeys={disabledKeys}\n        selectedKey={selectedKey}\n        onSelectionChange={onSelectionChange}>\n        {(item: Node<any>) => {\n          return (\n            <PickerItem\n              {...item.props.originalProps}\n              isDisabled={isDisabled || allKeysDisabled}\n              key={item.key}>\n              {item.props.children({density, isMenu: true})}\n            </PickerItem>\n          );\n        }}\n      </Picker>\n    </div>\n  );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n  let {orientation = 'horizontal', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback((value: boolean) => {\n    if (orientation === 'vertical') {\n      // if orientation is vertical, we always show the items\n      _setShowItems(true);\n    } else {\n      _setShowItems(value);\n    }\n  }, [orientation]);\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useEffectEvent(() => {\n    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n      return;\n    }\n    let container = listRef.current;\n    let containerRect = container.getBoundingClientRect();\n    let tabs = container.querySelectorAll('[data-hidden-tab]');\n    let lastTab = tabs[tabs.length - 1];\n    let lastTabRect = lastTab.getBoundingClientRect();\n    if (direction === 'ltr') {\n      setShowItems?.(lastTabRect.right <= containerRect.right);\n    } else {\n      setShowItems?.(lastTabRect.left >= containerRect.left);\n    }\n  });\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  // start with null so that the first render won't have a flicker\n  let prevOrientation = useRef<Orientation | null>(null);\n  useLayoutEffect(() => {\n    if (collection.size > 0 && prevOrientation.current !== orientation) {\n      updateOverflow();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, updateOverflow, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let menuId = useId();\n  let valueId = useId();\n\n  let contents: ReactNode;\n  if (showItems) {\n    contents = (\n      <RACTabs\n        {...props}\n        style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n      <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.cjs.map"}

package/dist/Tabs.css

@@ -63,14 +63,18 @@
     margin-inline-start: .75rem;
   }
 
-  ._ua11 {
-    flex-grow: 0;
-  }
-
   .Nq11 {
     min-width: min-content;
   }
 
+  .Na11 {
+    min-width: 0;
+  }
+
+  ._ua11 {
+    flex-grow: 0;
+  }
+
   .g011 {
     background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }

package/dist/Tabs.css.map

@@ -1 +1 @@
-{"mappings":"AC0Fa;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6DR;;;;EAAA;;;;EAgBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4Cd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CC;;;;EAAA;;;;EAsCO;;;;EAAA;;;;EAU4C;;;;EAwE/C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8EA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAreJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAqJa;EAAA;IAAA;;;;IAAA;;;;IA4Cd;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA","sources":["d333cabc54201ea1","packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["@import \"575a5a16650d7070\";\n@import \"7a0058ba44ec735a\";\n@import \"ea0c0ad20f1e1c01\";\n@import \"1a91a7d853a67795\";\n@import \"b645d7882760dc18\";\n@import \"5aa00674bbf9e612\";\n@import \"9d65793a05791106\";\n@import \"2976d7d1f8a0759d\";\n@import \"713e94facc5ee3f3\";\n@import \"64129d49d07323ce\";\n@import \"5458e36ec7f2a11f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  ContextValue,\n  Group,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext,\n  TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular',\n  /**\n   * Defines if the text within the tabs should be hidden and only the icon should be shown.\n   * The text is always visible when the item is collapsed into a picker.\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps> & {\n  tablistRef?: RefObject<HTMLDivElement | null>,\n  prevRef?: RefObject<DOMRect | null>,\n  selectedKey?: Key | null\n}>({});\nconst CollapseContext = createContext({\n  showTabs: true,\n  menuId: '',\n  valueId: ''\n});\n\nconst tabs = style({\n  position: 'relative',\n  display: 'flex',\n  flexShrink: 0,\n  font: 'ui',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal',\n    labelBehavior = 'show'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  let tablistRef = useRef<HTMLDivElement | null>(null);\n  let prevRef = useRef<DOMRect | null>(null);\n\n  let onChange = useEffectEvent((val: Key) => {\n    if (tablistRef.current) {\n      prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;\n    }\n    setValue(val);\n  });\n\n  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          tablistRef,\n          prevRef,\n          onSelectionChange: onChange,\n          labelBehavior,\n          'aria-label': props['aria-label'],\n          'aria-labelledby': props['aria-labelledby']\n        }]\n      ]}>\n      <CollectionBuilder content={props.children}>\n        {collection => (\n          <CollapsingTabs\n            {...props}\n            selectedKey={value}\n            onSelectionChange={onChange}\n            collection={collection}\n            containerRef={domRef} />\n        )}\n      </CollectionBuilder>\n    </Provider>\n  );\n});\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        },\n        labelBehavior: {\n          hide: {\n            density: {\n              compact: 16,\n              regular: 24\n            }\n          }\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  marginEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  marginStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  minWidth: 'min'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext) ?? {};\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n  return null;\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {\n    tablistRef,\n    density,\n    labelBehavior,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = useContext(InternalTabsContext) ?? {};\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        style({\n          position: 'relative',\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: 'min'\n        }, getAllowedOverrides())(null, props.styles)}>\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n    </div>\n  );\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    default: 'full',\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    default: 'full',\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    default: 0\n  },\n  top: {\n    orientation: {\n      vertical: 0\n    }\n  },\n  left: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  insetStart: {\n    orientation: {\n      vertical: -12\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full'\n});\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide', orientation?: Orientation}>({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  minHeight: {\n    orientation: {\n      vertical: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default',\n  paddingX: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n  let {density, orientation, labelBehavior, prevRef} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior, orientation}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu,\n          isSelected,\n          isDisabled\n        }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [TextContext, {\n                  id: contentId,\n                  styles:\n                    style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                }],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: icon\n                }]\n              ]}>\n              <TabInner\n                isSelected={isSelected}\n                orientation={orientation!}\n                isDisabled={isDisabled}\n                prevRef={prevRef}>\n                {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n              </TabInner>\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nfunction TabInner({isSelected, isDisabled, orientation, children, prevRef}: {\n  isSelected: boolean,\n  isDisabled: boolean,\n  orientation: Orientation,\n  children: ReactNode,\n  prevRef?: RefObject<DOMRect | null>\n}) {\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  let ref = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {\n      let currentItem = ref?.current.getBoundingClientRect();\n\n      if (orientation === 'horizontal') {\n        let deltaX = prevRef.current.left - currentItem.left;\n        ref.current.animate(\n          [\n            {transform: `translateX(${deltaX}px)`, width: `${prevRef.current.width}px`},\n            {transform: 'translateX(0px)', width: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      } else {\n        let deltaY = prevRef.current.top - currentItem.top;\n        ref.current.animate(\n          [\n            {transform: `translateY(${deltaY}px)`, height: `${prevRef.current.height}px`},\n            {transform: 'translateY(0px)', height: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      }\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion, prevRef, orientation]);\n\n  return (\n    <>\n      {isSelected && <div ref={ref} className={selectedIndicator({isDisabled, orientation})} />}\n      {children}\n    </>\n  );\n}\n\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  minHeight: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;\n  let {menuId, valueId} = useContext(CollapseContext);\n  let ref = useRef(null);\n  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n  return (\n    <Group\n      {...otherProps}\n      ref={ref}\n      aria-labelledby={menuId + ' ' + valueId}\n      tabIndex={tabIndex}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n  );\n}\n\nfunction isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\nlet HiddenTabs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>,\n  items: Array<Node<any>>,\n  size?: string,\n  density?: 'compact' | 'regular'\n}) {\n  let {listRef, items, size, density} = props;\n\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n        flexWrap: 'inherit',\n        position: 'absolute',\n        inset: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-tab\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, density})}>\n            {item.props.children({size, density})}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let onSelectionChange = useCallback((key: Key | null) => {\n    if (key != null) {\n      _onSelectionChange?.(key);\n    }\n  }, [_onSelectionChange]);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }})({density})}>\n      <Picker\n        id={id}\n        valueId={valueId}\n        {...labelProps}\n        aria-describedby={props['aria-describedby']}\n        aria-details={props['aria-details']}\n        isDisabled={isDisabled || allKeysDisabled}\n        density={density!}\n        labelBehavior={labelBehavior}\n        items={items}\n        disabledKeys={disabledKeys}\n        selectedKey={selectedKey}\n        onSelectionChange={onSelectionChange}>\n        {(item: Node<any>) => {\n          return (\n            <PickerItem\n              {...item.props.originalProps}\n              isDisabled={isDisabled || allKeysDisabled}\n              key={item.key}>\n              {item.props.children({density, isMenu: true})}\n            </PickerItem>\n          );\n        }}\n      </Picker>\n    </div>\n  );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback((value: boolean) => {\n    if (orientation === 'vertical') {\n      // if orientation is vertical, we always show the items\n      _setShowItems(true);\n    } else {\n      _setShowItems(value);\n    }\n  }, [orientation]);\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useEffectEvent(() => {\n    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n      return;\n    }\n    let container = listRef.current;\n    let containerRect = container.getBoundingClientRect();\n    let tabs = container.querySelectorAll('[data-hidden-tab]');\n    let lastTab = tabs[tabs.length - 1];\n    let lastTabRect = lastTab.getBoundingClientRect();\n    if (direction === 'ltr') {\n      setShowItems?.(lastTabRect.right <= containerRect.right);\n    } else {\n      setShowItems?.(lastTabRect.left >= containerRect.left);\n    }\n  });\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  // start with null so that the first render won't have a flicker\n  let prevOrientation = useRef<Orientation | null>(null);\n  useLayoutEffect(() => {\n    if (collection.size > 0 && prevOrientation.current !== orientation) {\n      updateOverflow();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, updateOverflow, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let menuId = useId();\n  let valueId = useId();\n\n  let contents: ReactNode;\n  if (showItems) {\n    contents = (\n      <RACTabs\n        {...props}\n        style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <TabsMenu\n          id={menuId}\n          valueId={valueId}\n          items={children}\n          onSelectionChange={onSelectionChange}\n          aria-label={props['aria-label']}\n          aria-describedby={props['aria-labelledby']} />\n        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n      <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={children} density={density} listRef={listRef} />\n      </div>\n      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.css.map"}
+{"mappings":"ACuGa;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCO;;;;EAAA;;;;EA6DG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4Cd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CC;;;;EAAA;;;;EAsCO;;;;EAAA;;;;EAU4C;;;;EAwE/C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8EA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3fJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AA2Ka;EAAA;IAAA;;;;IAAA;;;;IA4Cd;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA","sources":["d333cabc54201ea1","packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["@import \"575a5a16650d7070\";\n@import \"7a0058ba44ec735a\";\n@import \"ea0c0ad20f1e1c01\";\n@import \"1a91a7d853a67795\";\n@import \"b645d7882760dc18\";\n@import \"5aa00674bbf9e612\";\n@import \"9d65793a05791106\";\n@import \"2976d7d1f8a0759d\";\n@import \"713e94facc5ee3f3\";\n@import \"64129d49d07323ce\";\n@import \"5458e36ec7f2a11f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  ContextValue,\n  Group,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext,\n  TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular',\n  /**\n   * Defines if the text within the tabs should be hidden and only the icon should be shown.\n   * The text is always visible when the item is collapsed into a picker.\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps> & {\n  tablistRef?: RefObject<HTMLDivElement | null>,\n  prevRef?: RefObject<DOMRect | null>,\n  selectedKey?: Key | null\n}>({});\n\ninterface CollapseContextType {\n  showTabs: boolean,\n  menuId: string,\n  valueId: string,\n  ariaLabel?: string | undefined,\n  ariaDescribedBy?: string | undefined,\n  tabs: Array<Node<any>>,\n  listRef?: RefObject<HTMLDivElement | null>,\n  onSelectionChange?: (key: Key) => void\n}\n\nconst CollapseContext = createContext<CollapseContextType>({\n  showTabs: true,\n  menuId: '',\n  valueId: '',\n  tabs: []\n});\n\nconst tabs = style({\n  position: 'relative',\n  display: 'flex',\n  flexShrink: 0,\n  font: 'ui',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal',\n    labelBehavior = 'show'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  let tablistRef = useRef<HTMLDivElement | null>(null);\n  let prevRef = useRef<DOMRect | null>(null);\n\n  let onChange = useEffectEvent((val: Key) => {\n    if (tablistRef.current) {\n      prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;\n    }\n    setValue(val);\n  });\n\n  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          tablistRef,\n          prevRef,\n          onSelectionChange: onChange,\n          labelBehavior,\n          'aria-label': props['aria-label'],\n          'aria-labelledby': props['aria-labelledby']\n        }]\n      ]}>\n      <CollectionBuilder content={props.children}>\n        {collection => (\n          <CollapsingTabs\n            {...props}\n            selectedKey={value}\n            onSelectionChange={onChange}\n            collection={collection}\n            containerRef={domRef} />\n        )}\n      </CollectionBuilder>\n    </Provider>\n  );\n});\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        },\n        labelBehavior: {\n          hide: {\n            density: {\n              compact: 16,\n              regular: 24\n            }\n          }\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  marginEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  marginStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  minWidth: 'min'\n});\n\nconst tablistWrapper = style({\n  position: 'relative',\n  minWidth: 0,\n  flexShrink: 0,\n  flexGrow: 0\n}, getAllowedOverrides());\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};\n  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n  \n  return (\n    <div className={tablistWrapper(null, props.styles)}>\n      {listRef && <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={tabs} density={density} listRef={listRef} />\n      </div>}\n      <TabsMenu\n        id={menuId}\n        valueId={valueId}\n        items={tabs}\n        onSelectionChange={onSelectionChange}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy} />\n    </div>\n  );\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {\n    tablistRef,\n    orientation,\n    density,\n    labelBehavior,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = useContext(InternalTabsContext) ?? {};\n  let {tabs, listRef} = useContext(CollapseContext) ?? {};\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        tablistWrapper(null, props.styles)}>\n      {listRef && <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={tabs} density={density} listRef={listRef} />\n      </div>}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n    </div>\n  );\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    default: 'full',\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    default: 'full',\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    default: 0\n  },\n  top: {\n    orientation: {\n      vertical: 0\n    }\n  },\n  left: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  insetStart: {\n    orientation: {\n      vertical: -12\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full'\n});\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide', orientation?: Orientation}>({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  minHeight: {\n    orientation: {\n      vertical: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default',\n  paddingX: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n  let {density, orientation, labelBehavior, prevRef} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior, orientation}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu,\n          isSelected,\n          isDisabled\n        }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [TextContext, {\n                  id: contentId,\n                  styles:\n                    style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                }],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: icon\n                }]\n              ]}>\n              <TabInner\n                isSelected={isSelected}\n                orientation={orientation!}\n                isDisabled={isDisabled}\n                prevRef={prevRef}>\n                {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n              </TabInner>\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nfunction TabInner({isSelected, isDisabled, orientation, children, prevRef}: {\n  isSelected: boolean,\n  isDisabled: boolean,\n  orientation: Orientation,\n  children: ReactNode,\n  prevRef?: RefObject<DOMRect | null>\n}) {\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  let ref = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {\n      let currentItem = ref?.current.getBoundingClientRect();\n\n      if (orientation === 'horizontal') {\n        let deltaX = prevRef.current.left - currentItem.left;\n        ref.current.animate(\n          [\n            {transform: `translateX(${deltaX}px)`, width: `${prevRef.current.width}px`},\n            {transform: 'translateX(0px)', width: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      } else {\n        let deltaY = prevRef.current.top - currentItem.top;\n        ref.current.animate(\n          [\n            {transform: `translateY(${deltaY}px)`, height: `${prevRef.current.height}px`},\n            {transform: 'translateY(0px)', height: '100%'}\n          ],\n          {\n            duration: 200,\n            easing: 'ease-out'\n          }\n        );\n      }\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion, prevRef, orientation]);\n\n  return (\n    <>\n      {isSelected && <div ref={ref} className={selectedIndicator({isDisabled, orientation})} />}\n      {children}\n    </>\n  );\n}\n\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  minHeight: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;\n  let {menuId, valueId} = useContext(CollapseContext);\n  let ref = useRef(null);\n  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n  return (\n    <Group\n      {...otherProps}\n      ref={ref}\n      aria-labelledby={menuId + ' ' + valueId}\n      tabIndex={tabIndex}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n  );\n}\n\nfunction isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\nlet HiddenTabs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>,\n  items: Array<Node<any>>,\n  size?: string,\n  density?: 'compact' | 'regular'\n}) {\n  let {listRef, items = [], size, density} = props;\n\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n        flexWrap: 'inherit',\n        position: 'absolute',\n        inset: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-tab\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, density})}>\n            {item.props.children({size, density})}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let onSelectionChange = useCallback((key: Key | null) => {\n    if (key != null) {\n      _onSelectionChange?.(key);\n    }\n  }, [_onSelectionChange]);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }})({density})}>\n      <Picker\n        id={id}\n        valueId={valueId}\n        {...labelProps}\n        aria-describedby={props['aria-describedby']}\n        aria-details={props['aria-details']}\n        isDisabled={isDisabled || allKeysDisabled}\n        density={density!}\n        labelBehavior={labelBehavior}\n        items={items}\n        disabledKeys={disabledKeys}\n        selectedKey={selectedKey}\n        onSelectionChange={onSelectionChange}>\n        {(item: Node<any>) => {\n          return (\n            <PickerItem\n              {...item.props.originalProps}\n              isDisabled={isDisabled || allKeysDisabled}\n              key={item.key}>\n              {item.props.children({density, isMenu: true})}\n            </PickerItem>\n          );\n        }}\n      </Picker>\n    </div>\n  );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n  let {orientation = 'horizontal', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback((value: boolean) => {\n    if (orientation === 'vertical') {\n      // if orientation is vertical, we always show the items\n      _setShowItems(true);\n    } else {\n      _setShowItems(value);\n    }\n  }, [orientation]);\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useEffectEvent(() => {\n    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n      return;\n    }\n    let container = listRef.current;\n    let containerRect = container.getBoundingClientRect();\n    let tabs = container.querySelectorAll('[data-hidden-tab]');\n    let lastTab = tabs[tabs.length - 1];\n    let lastTabRect = lastTab.getBoundingClientRect();\n    if (direction === 'ltr') {\n      setShowItems?.(lastTabRect.right <= containerRect.right);\n    } else {\n      setShowItems?.(lastTabRect.left >= containerRect.left);\n    }\n  });\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  // start with null so that the first render won't have a flicker\n  let prevOrientation = useRef<Orientation | null>(null);\n  useLayoutEffect(() => {\n    if (collection.size > 0 && prevOrientation.current !== orientation) {\n      updateOverflow();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, updateOverflow, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let menuId = useId();\n  let valueId = useId();\n\n  let contents: ReactNode;\n  if (showItems) {\n    contents = (\n      <RACTabs\n        {...props}\n        style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n      <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.css.map"}