@react-spectrum/s2 3.0.0-nightly-4b8b33a02-250211 → 3.0.0-nightly-260eb700f-250213

package/dist/Tabs.css.map

@@ -1 +1 @@
-{"mappings":"ACkFa;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EA4DG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyFU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuFd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiCC;;;;EAAA;;;;EAmCO;;;;EAAA;;;;EAU4C;;;;EAa/C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoFA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArcJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IA4OD;;;;IAAA;;;;;;AAvFc;EAAA;IAAA;;;;IAAA;;;;IAuFd;;;;IAAA;;;;IA2FK","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} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, 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 {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/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'>, 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'>, 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'>, StyleProps {}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, 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<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<TabsProps>({});\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  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          onSelectionChange: setValue,\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={setValue}\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  paddingEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  paddingStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  flexShrink: 0,\n  flexBasis: '[0%]'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>) {\n  let {showTabs} = useContext(CollapseContext) ?? {};\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};\n  let state = useContext(TabListStateContext);\n  let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n  let tablistRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (tablistRef?.current) {\n      let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n      if (tab != null) {\n        setSelectedTab(tab);\n      }\n    }\n  }, [tablistRef, state?.selectedItem?.key]);\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n      {orientation === 'vertical' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\ninterface TabLineProps {\n  disabledKeys: Iterable<Key> | undefined,\n  isDisabled: boolean | undefined,\n  selectedTab: HTMLElement | undefined,\n  orientation?: Orientation,\n  density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine(props: TabLineProps) {\n  let {\n    disabledKeys,\n    isDisabled: isTabsDisabled,\n    selectedTab,\n    orientation,\n    density\n  } = props;\n  let {direction} = useLocale();\n  let state = useContext(TabListStateContext);\n\n  // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n  let [isDisabled, setIsDisabled] = useState<boolean>(false);\n  useEffect(() => {\n    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));\n    setIsDisabled(isDisabled);\n  }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n  let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n    transform: undefined,\n    width: undefined,\n    height: undefined\n  });\n\n  let onResize = useCallback(() => {\n    if (selectedTab) {\n      let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n        transform: undefined,\n        width: undefined,\n        height: undefined\n      };\n\n      // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n      let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n      styleObj.transform = orientation === 'vertical'\n        ? `translateY(${selectedTab.offsetTop}px)`\n        : `translateX(${offset}px)`;\n\n      if (orientation === 'horizontal') {\n        styleObj.width = `${selectedTab.offsetWidth}px`;\n      } else {\n        styleObj.height = `${selectedTab.offsetHeight}px`;\n      }\n      setStyle(styleObj);\n    }\n  }, [direction, setStyle, selectedTab, orientation]);\n\n  useLayoutEffect(() => {\n    onResize();\n  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tab = style({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: 'neutral-subdued',\n    isSelected: 'neutral',\n    isHovered: 'neutral-subdued',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    density: {\n      compact: 32,\n      regular: 48\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}, 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) {\n  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\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}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu\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              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nconst tabPanel = style({\n  ...focusRing(),\n  display: 'flex',\n  marginTop: 4,\n  marginX: -4,\n  paddingX: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '[0%]',\n  minHeight: 0,\n  minWidth: 0,\n  overflow: 'auto'\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps) {\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  let {UNSAFE_style, UNSAFE_className = '', ...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 isAllTabsDisabled<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=\"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']} & TabsProps) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isAllTabsDisabled(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  let prevOrientation = useRef(orientation);\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":"ACqFa;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EA4DG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyFU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuFd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkCC;;;;EAAA;;;;EAmCO;;;;EAAA;;;;EAU4C;;;;EAa/C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+EA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjcJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IA4OD;;;;IAAA;;;;;;AAvFc;EAAA;IAAA;;;;IAAA;;;;IAuFd;;;;IAAA;;;;IA4FK","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} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, 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 {focusRing, size, style} from '../style' with {type: 'macro'};\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} 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'>, 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'>, 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'>, 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'>, 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>>({});\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  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          onSelectionChange: setValue,\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={setValue}\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  paddingEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  paddingStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  flexShrink: 0,\n  flexBasis: '[0%]'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>) {\n  let {showTabs} = useContext(CollapseContext) ?? {};\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};\n  let state = useContext(TabListStateContext);\n  let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n  let tablistRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (tablistRef?.current) {\n      let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n      if (tab != null) {\n        setSelectedTab(tab);\n      }\n    }\n  }, [tablistRef, state?.selectedItem?.key]);\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n      {orientation === 'vertical' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\ninterface TabLineProps {\n  disabledKeys: Iterable<Key> | undefined,\n  isDisabled: boolean | undefined,\n  selectedTab: HTMLElement | undefined,\n  orientation?: Orientation,\n  density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine(props: TabLineProps) {\n  let {\n    disabledKeys,\n    isDisabled: isTabsDisabled,\n    selectedTab,\n    orientation,\n    density\n  } = props;\n  let {direction} = useLocale();\n  let state = useContext(TabListStateContext);\n\n  // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n  let [isDisabled, setIsDisabled] = useState<boolean>(false);\n  useEffect(() => {\n    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));\n    setIsDisabled(isDisabled);\n  }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n  let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n    transform: undefined,\n    width: undefined,\n    height: undefined\n  });\n\n  let onResize = useCallback(() => {\n    if (selectedTab) {\n      let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n        transform: undefined,\n        width: undefined,\n        height: undefined\n      };\n\n      // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n      let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n      styleObj.transform = orientation === 'vertical'\n        ? `translateY(${selectedTab.offsetTop}px)`\n        : `translateX(${offset}px)`;\n\n      if (orientation === 'horizontal') {\n        styleObj.width = `${selectedTab.offsetWidth}px`;\n      } else {\n        styleObj.height = `${selectedTab.offsetHeight}px`;\n      }\n      setStyle(styleObj);\n    }\n  }, [direction, setStyle, selectedTab, orientation]);\n\n  useLayoutEffect(() => {\n    onResize();\n  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tab = style({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: 'neutral-subdued',\n    isSelected: 'neutral',\n    isHovered: 'neutral-subdued',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    density: {\n      compact: 32,\n      regular: 48\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) {\n  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\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}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu\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              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  flexBasis: '[0%]',\n  minHeight: 0,\n  minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps) {\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  let {UNSAFE_style, UNSAFE_className = '', ...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 isAllTabsDisabled<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, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isAllTabsDisabled(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"}

package/dist/Tabs.mjs

@@ -8,9 +8,9 @@ import {jsx as $8bRfI$jsx, jsxs as $8bRfI$jsxs, Fragment as $8bRfI$Fragment} fro
 import {createContext as $8bRfI$createContext, forwardRef as $8bRfI$forwardRef, useContext as $8bRfI$useContext, useState as $8bRfI$useState, useRef as $8bRfI$useRef, useEffect as $8bRfI$useEffect, useCallback as $8bRfI$useCallback, useMemo as $8bRfI$useMemo, createElement as $8bRfI$createElement} from "react";
 import {Provider as $8bRfI$Provider, TabListStateContext as $8bRfI$TabListStateContext, TabList as $8bRfI$TabList, Tab as $8bRfI$Tab, TabPanel as $8bRfI$TabPanel, Group as $8bRfI$Group, Tabs as $8bRfI$Tabs} from "react-aria-components";
 import {CollectionBuilder as $8bRfI$CollectionBuilder} from "@react-aria/collections";
+import {useLayoutEffect as $8bRfI$useLayoutEffect, useId as $8bRfI$useId, inertValue as $8bRfI$inertValue, useLabels as $8bRfI$useLabels, useEffectEvent as $8bRfI$useEffectEvent, useResizeObserver as $8bRfI$useResizeObserver} from "@react-aria/utils";
 import {useControlledState as $8bRfI$useControlledState} from "@react-stately/utils";
 import {useDOMRef as $8bRfI$useDOMRef} from "@react-spectrum/utils";
-import {useLayoutEffect as $8bRfI$useLayoutEffect, useId as $8bRfI$useId, useLabels as $8bRfI$useLabels, useEffectEvent as $8bRfI$useEffectEvent, useResizeObserver as $8bRfI$useResizeObserver} from "@react-aria/utils";
 import {useHasTabbableChild as $8bRfI$useHasTabbableChild} from "@react-aria/focus";
 import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
 
@@ -47,32 +47,32 @@ const $79e2b4a1b34d1592$var$CollapseContext = /*#__PURE__*/ (0, $8bRfI$createCon
 });
 const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q|j|n|o)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
     rules += matches.join('');
-    let $Y = false;
-    let $__c = false;
+    let $V = false;
+    let $_9 = false;
     for (let p of matches){
-        if (/^\s*Y/.test(p)) $Y = true;
-        if (/^\s*__c/.test(p)) $__c = true;
+        if (/^\s*V/.test(p)) $V = true;
+        if (/^\s*_9/.test(p)) $_9 = true;
     }
-    if (!$Y) rules += ' Yc';
-    rules += ' _3d';
-    if (!$__c) rules += ' __c-3t1x';
-    rules += ' _g-bc1l9oh';
-    rules += ' _g-1uotwbwg';
-    rules += ' _g-eo0c6sf';
-    rules += ' _g-enzzrge';
-    rules += ' _g-enzykdd';
-    rules += ' _g-enzwzjc';
-    rules += ' _g-enzrfpb';
+    if (!$V) rules += ' Vc';
+    rules += ' _0d';
+    if (!$_9) rules += ' _9-3t1x';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
     rules += ' _ga';
-    rules += ' _hbf';
-    rules += ' _he';
-    rules += ' _ib';
-    rules += ' _j-1x99dlob';
-    rules += ' _ja';
     rules += ' an';
-    if (props.orientation === "horizontal") rules += ' __ab';
+    if (props.orientation === "horizontal") rules += ' _7b';
     return rules;
 };
 const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
@@ -112,14 +112,7 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
 });
 const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
     let rules = " .";
-    rules += ' _3d';
-    if (props.orientation === "horizontal") {
-        if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' hh';
-            else if (props.density === "compact") rules += ' hf';
-        } else if (props.density === "regular") rules += ' hj';
-        else if (props.density === "compact") rules += ' hh';
-    }
+    rules += ' _0d';
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
             if (props.density === "regular") rules += ' ih';
@@ -127,11 +120,18 @@ const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
         } else if (props.density === "regular") rules += ' ij';
         else if (props.density === "compact") rules += ' ih';
     }
-    if (props.orientation === "vertical") rules += ' __ab';
-    if (props.orientation === "vertical") rules += ' Gg';
-    if (props.orientation === "vertical") rules += ' Fe';
-    rules += ' __c-3t1x';
-    rules += ' g-3hmsa';
+    if (props.orientation === "horizontal") {
+        if (props.labelBehavior === "hide") {
+            if (props.density === "regular") rules += ' jh';
+            else if (props.density === "compact") rules += ' jf';
+        } else if (props.density === "regular") rules += ' jj';
+        else if (props.density === "compact") rules += ' jh';
+    }
+    if (props.orientation === "vertical") rules += ' _7b';
+    if (props.orientation === "vertical") rules += ' Dg';
+    if (props.orientation === "vertical") rules += ' Ce';
+    rules += ' _9-3t1x';
+    rules += ' h-3hmsa';
     return rules;
 };
 function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props) {
@@ -158,11 +158,11 @@ function $79e2b4a1b34d1592$var$TabListInner(props1) {
         style: props1.UNSAFE_style,
         className: (props1.UNSAFE_className || '') + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');
-            let $Y = false;
-            for (let p of matches)if (/^\s*Y/.test(p)) $Y = true;
-            if (!$Y) rules += ' Yc';
+            let $V = false;
+            for (let p of matches)if (/^\s*V/.test(p)) $V = true;
+            if (!$V) rules += ' Vc';
             return rules;
         }(null, props1.styles),
         children: [
@@ -196,7 +196,7 @@ function $79e2b4a1b34d1592$var$TabListInner(props1) {
 }
 const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
     let rules = " .";
-    rules += ' Ya';
+    rules += ' Va';
     if (props.isDisabled) rules += ' ba_____O';
     else rules += ' ba_____M';
     if (props.isDisabled) rules += ' bg';
@@ -206,16 +206,16 @@ const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
         else if (props.isHovered) rules += ' bo';
         else rules += ' bn';
     }
-    if (props.orientation === "horizontal") rules += ' j-375zlr';
-    if (props.orientation === "vertical") rules += ' k-375zlr';
-    if (props.orientation === "horizontal") rules += ' _da';
-    rules += ' zf';
+    if (props.orientation === "horizontal") rules += ' k-375zlr';
+    if (props.orientation === "vertical") rules += ' l-375zlr';
+    if (props.orientation === "horizontal") rules += ' _aa';
+    rules += ' wf';
+    rules += ' _wf';
+    rules += ' _xf';
+    rules += ' _yf';
     rules += ' _zf';
-    rules += ' _Af';
-    rules += ' _Bf';
-    rules += ' _Cf';
-    rules += ' _U-375x5l';
-    rules += ' _Va';
+    rules += ' _R-375x5l';
+    rules += ' _Sa';
     return rules;
 };
 function $79e2b4a1b34d1592$var$TabLine(props) {
@@ -279,21 +279,21 @@ function $79e2b4a1b34d1592$var$TabLine(props) {
 }
 const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
     rules += matches.join('');
-    let $Y = false;
-    let $__c = false;
+    let $V = false;
+    let $_9 = false;
     for (let p of matches){
-        if (/^\s*Y/.test(p)) $Y = true;
-        if (/^\s*__c/.test(p)) $__c = true;
+        if (/^\s*V/.test(p)) $V = true;
+        if (/^\s*_9/.test(p)) $_9 = true;
     }
-    if (props.isFocusVisible) rules += ' _Pb';
-    else rules += ' _Pa';
-    rules += ' ca_____M';
-    rules += ' cx';
-    rules += ' _Rc';
-    rules += ' _Q-3t1z';
-    rules += ' _3d';
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
+    rules += ' da_____M';
+    rules += ' dx';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    rules += ' _0d';
     if (props.isDisabled) rules += ' aa_____O';
     else if (props.isSelected) rules += ' aa_____M';
     if (props.isDisabled) rules += ' aj';
@@ -311,28 +311,29 @@ const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
         else if (props.isFocusVisible) rules += ' an';
         else rules += ' am';
     }
+    rules += ' _wb';
+    rules += ' _xb';
+    rules += ' _yb';
     rules += ' _zb';
-    rules += ' _Ab';
-    rules += ' _Bb';
-    rules += ' _Cb';
-    rules += ' hbH';
-    rules += ' hG';
     rules += ' ibH';
     rules += ' iG';
-    if (props.density === "regular") rules += ' j_a';
-    else if (props.density === "compact") rules += ' jU';
-    rules += ' _5c';
-    if (!$Y) rules += ' Yc';
-    rules += ' __Lb';
-    if (!$__c) rules += ' __c-3t1x';
+    rules += ' jbH';
+    rules += ' jG';
+    if (props.density === "regular") rules += ' k_a';
+    else if (props.density === "compact") rules += ' kU';
+    rules += ' _2c';
+    if (!$V) rules += ' Vc';
+    rules += ' __Ib';
+    if (!$_9) rules += ' _9-3t1x';
+    rules += ' _Pa';
+    rules += ' _R-375x7f';
     rules += ' _Sa';
-    rules += ' _U-375x7f';
-    rules += ' _Va';
-    if (props.labelBehavior === "hide") rules += ' F-ve8p9e';
-    if (props.labelBehavior === "hide") rules += ' G-ve8p9e';
+    if (props.labelBehavior === "hide") rules += ' C-ve8p9e';
+    if (props.labelBehavior === "hide") rules += ' D-ve8p9e';
+    rules += ' __S-yksgrp';
     return rules;
 };
-const $79e2b4a1b34d1592$var$icon = " _3a __c-3t1x -rwx0fg_d-b";
+const $79e2b4a1b34d1592$var$icon = " _0a _9-3t1x -rwx0fg_e-b";
 function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
     let { density: density, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
     let contentId = (0, $8bRfI$useId)();
@@ -359,8 +360,8 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                             id: contentId,
                             styles: function anonymous(props) {
                                 let rules = " .";
-                                rules += ' __E-3t1y';
-                                if (props.labelBehavior === "hide") rules += ' _3j';
+                                rules += ' __B-3t1y';
+                                if (props.labelBehavior === "hide") rules += ' _0j';
                                 return rules;
                             }({
                                 labelBehavior: labelBehavior
@@ -372,7 +373,7 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
                         {
                             render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                 slot: 'icon',
-                                styles: " __E-3t1x"
+                                styles: " __B-3t1x"
                             }),
                             styles: $79e2b4a1b34d1592$var$icon
                         }
@@ -387,46 +388,32 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
 }
 const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q|j|n|o)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
     rules += matches.join('');
-    let $D = false;
-    let $B = false;
-    let $C = false;
-    let $__d = false;
-    let $__c = false;
-    let $g = false;
-    let $n = false;
-    let $p = false;
+    let $A = false;
+    let $__a = false;
+    let $h = false;
+    let $o = false;
+    let $q = false;
     for (let p of matches){
-        if (/^\s*D/.test(p)) $D = true;
-        if (/^\s*B/.test(p)) $B = true;
-        if (/^\s*C/.test(p)) $C = true;
-        if (/^\s*__d/.test(p)) $__d = true;
-        if (/^\s*__c/.test(p)) $__c = true;
-        if (/^\s*g/.test(p)) $g = true;
-        if (/^\s*n/.test(p)) $n = true;
-        if (/^\s*p/.test(p)) $p = true;
+        if (/^\s*A/.test(p)) $A = true;
+        if (/^\s*__a/.test(p)) $__a = true;
+        if (/^\s*h/.test(p)) $h = true;
+        if (/^\s*o/.test(p)) $o = true;
+        if (/^\s*q/.test(p)) $q = true;
     }
-    if (props.isFocusVisible) rules += ' _Pb';
-    else rules += ' _Pa';
-    rules += ' ca_____M';
-    rules += ' cx';
-    rules += ' _Rc';
-    rules += ' _Q-3t1z';
-    rules += ' _3d';
-    if (!$D) rules += ' Dc';
-    if (!$B) rules += ' BK';
-    if (!$C) rules += ' CK';
-    rules += ' Fc';
-    rules += ' Gc';
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
+    rules += ' da_____M';
+    rules += ' dx';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    if (!$A) rules += ' Ac';
     rules += ' an';
-    if (!$__d) rules += ' __d-3t1y';
-    if (!$__c) rules += ' __c-3t1y';
-    if (!$g) rules += ' g-3hmsa';
-    if (!$n) rules += ' no';
-    if (!$p) rules += ' po';
-    rules += ' __za';
-    rules += ' __Aa';
+    if (!$__a) rules += ' __a-3t1y';
+    if (!$h) rules += ' h-3hmsa';
+    if (!$o) rules += ' oo';
+    if (!$q) rules += ' qo';
     return rules;
 };
 function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
@@ -475,9 +462,9 @@ let $79e2b4a1b34d1592$var$HiddenTabs = function(props) {
     let { listRef: listRef, items: items, size: size, density: density } = props;
     return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
         // @ts-ignore
-        inert: "true",
+        inert: (0, $8bRfI$inertValue)(true),
         ref: listRef,
-        className: " _3-17zqamw __a-17zqamw h-17zqamw i-17zqamw __b-17zqamw Ya _ba _da Za _aa __Ib __zb __Ab _O-3t1x",
+        className: " _0-17zqamw _7-17zqamw i-17zqamw j-17zqamw _8-17zqamw Va Ya _aa Wa Xa __Fb __wb __xb _L-3t1x",
         children: items.map((item)=>{
             // pull off individual props as an allow list, don't want refs or other props getting through
             return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
@@ -513,11 +500,11 @@ let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
     return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
         className: function anonymous(props) {
             let rules = " .";
-            rules += ' _3d';
-            rules += ' __c-3t1x';
-            rules += ' _5c';
-            if (props.density === "regular") rules += ' j_a';
-            else if (props.density === "compact") rules += ' jU';
+            rules += ' _0d';
+            rules += ' _9-3t1x';
+            rules += ' _2c';
+            if (props.density === "regular") rules += ' k_a';
+            else if (props.density === "compact") rules += ' kU';
             return rules;
         }({
             density: density
@@ -586,7 +573,8 @@ let $79e2b4a1b34d1592$var$CollapsingTabs = ({ collection: collection, containerR
         collection.size,
         updateOverflow
     ]);
-    let prevOrientation = (0, $8bRfI$useRef)(orientation);
+    // start with null so that the first render won't have a flicker
+    let prevOrientation = (0, $8bRfI$useRef)(null);
     (0, $8bRfI$useLayoutEffect)(()=>{
         if (collection.size > 0 && prevOrientation.current !== orientation) updateOverflow();
         prevOrientation.current = orientation;