@react-spectrum/s2 3.0.0-nightly-4b8b33a02-250211 → 3.0.0-nightly-56da82e3e-250212

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";
 
@@ -330,6 +330,7 @@ const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
     rules += ' _Va';
     if (props.labelBehavior === "hide") rules += ' F-ve8p9e';
     if (props.labelBehavior === "hide") rules += ' G-ve8p9e';
+    rules += ' __V-yksgrp';
     return rules;
 };
 const $79e2b4a1b34d1592$var$icon = " _3a __c-3t1x -rwx0fg_d-b";
@@ -390,19 +391,13 @@ const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
     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) || [];
     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;
     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;
@@ -413,20 +408,12 @@ const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
     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';
     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';
     return rules;
 };
 function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
@@ -475,7 +462,7 @@ 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",
         children: items.map((item)=>{
@@ -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;

package/dist/Tabs.mjs.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} 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.mjs.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} 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.mjs.map"}

package/dist/TagGroup.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.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                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  ContextValue,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps,\n  useLocale,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {Collection, CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {flushSync} from 'react-dom';\nimport {focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode,\n  /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n  maxRows?: number,\n  /** The label to display on the action button.  */\n  groupActionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void\n}\n\nexport const TagGroupContext = createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {props: TagGroupProps<T>, forwardedRef: DOMRef<HTMLDivElement>, collection: any}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({visibleTagCount: collection.size, showCollapseButton: false});\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(\n    () => Array.from(collection) as Array<Node<T>>,\n    [collection]\n  );\n  let items = useMemo(\n    () => Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = useEffectEvent(() => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  });\n\n  useResizeObserver({ref: maxRows != null ? containerRef : undefined, onResize: updateVisibleTagCount});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && (maxRows != null && maxRows > 0)) {\n      queueMicrotask(updateVisibleTagCount);\n    }\n  }, [collection.size, updateVisibleTagCount, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCount());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.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                      style={item.props.UNSAFE_style}\n                      key={item.key}\n                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel} />\n            }\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed ?\n            stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) :\n            stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      }\n      {groupActionLabel && onGroupAction &&\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      }\n    </div>\n  );\n}\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})} >\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} {...renderProps}>{typeof children === 'string' ? <Text>{children}</Text> : children}</TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n  return (\n    <>\n      {isInRealDOM && (\n      <div\n        className={style({\n          display: 'flex',\n          minWidth: 0,\n          alignItems: 'center',\n          gap: 'text-to-visual',\n          forcedColorAdjust: 'none',\n          backgroundColor: 'transparent'\n        })}>\n        <Provider\n          values={[\n            [TextContext, {styles: style({order: 1, truncate: true})}],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              styles: style({order: 0})\n            }],\n            [ImageContext, {\n              styles: style({\n                size: fontRelative(20),\n                flexShrink: 0,\n                order: 0,\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                borderRadius: 'sm'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      </div>\n        )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isDisabled={isDisabled} />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.cjs.map"}