@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/Tabs.css

@@ -1,428 +1,428 @@
 @layer _.a {
-  .uk13 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .Up13 {
+  .Up15 {
     row-gap: 2rem;
   }
 
-  .Ul13 {
+  .Ul15 {
     row-gap: 1rem;
   }
 
-  .Uj13 {
+  .Uj15 {
     row-gap: 1.5rem;
   }
 
-  .qp13 {
+  .qp15 {
     column-gap: 2rem;
   }
 
-  .ql13 {
+  .ql15 {
     column-gap: 1rem;
   }
 
-  .qj13 {
+  .qj15 {
     column-gap: 1.5rem;
   }
 
-  ._ta13 {
+  ._ta15 {
     flex-direction: column;
   }
 
-  .Hz13 {
+  .Hz15 {
     margin-inline-end: 1.25rem;
   }
 
-  .Ix13 {
+  .Ix15 {
     margin-inline-start: .75rem;
   }
 
-  .Nq13 {
+  .Nq15 {
     min-width: min-content;
   }
 
-  .Na13 {
+  .Na15 {
     min-width: 0;
   }
 
-  ._ua13 {
+  ._ua15 {
     flex-grow: 0;
   }
 
-  .g013 {
+  .g015 {
     background-color: light-dark(#292929, #dbdbdb);
   }
 
-  .gH13 {
+  .gH15 {
     background-color: light-dark(#e9e9e9, #2c2c2c);
   }
 
-  .Fb13 {
+  .Fb15 {
     height: 100%;
   }
 
-  .FLvNfn13 {
+  .FLvNfn15 {
     height: 2px;
   }
 
-  .Za13 {
+  .Za15 {
     width: 100%;
   }
 
-  .ZLvNfn13 {
+  .ZLvNfn15 {
     width: 2px;
   }
 
-  ._qg13 {
+  ._qg15 {
     contain: strict;
   }
 
-  .YIRyJjb13 {
+  .YIRyJjb15 {
     transition-property: translate, width, height;
   }
 
-  .Xc13 {
+  .Xc15 {
     transition-duration: .2s;
   }
 
-  ._2a13 {
+  ._2a15 {
     transition-timing-function: cubic-bezier(0, 0, .4, 1);
   }
 
-  ._Er13 {
+  ._Er15 {
     left: 0;
   }
 
-  ._Aa13 {
+  ._Aa15 {
     inset-inline-start: -12px;
   }
 
-  ._je13 {
+  ._je15 {
     border-style: none;
   }
 
-  .og13 {
+  .og15 {
     border-start-start-radius: 9999px;
   }
 
-  .ng13 {
+  .ng15 {
     border-start-end-radius: 9999px;
   }
 
-  .kg13 {
+  .kg15 {
     border-end-start-radius: 9999px;
   }
 
-  .jg13 {
+  .jg15 {
     border-end-end-radius: 9999px;
   }
 
-  .pv13 {
+  .pv15 {
     color: light-dark(#505050, #afafaf);
   }
 
-  .po13 {
+  .po15 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .pp13 {
+  .pp15 {
     color: light-dark(#c6c6c6, #444);
   }
 
-  .oa13 {
+  .oa15 {
     border-start-start-radius: .25rem;
   }
 
-  .na13 {
+  .na15 {
     border-start-end-radius: .25rem;
   }
 
-  .ka13 {
+  .ka15 {
     border-end-start-radius: .25rem;
   }
 
-  .ja13 {
+  .ja15 {
     border-end-end-radius: .25rem;
   }
 
-  .Uc13 {
+  .Uc15 {
     row-gap: .428571em;
   }
 
-  .qc13 {
+  .qc15 {
     column-gap: .428571em;
   }
 
-  .Mi13 {
+  .Mi15 {
     min-height: calc(2rem * var(--s2-scale));
   }
 
-  .Mk13 {
+  .Mk15 {
     min-height: calc(3rem * var(--s2-scale));
   }
 
-  ._Pc13 {
+  ._Pc15 {
     position: relative;
   }
 
-  .ri13 {
+  .ri15 {
     cursor: default;
   }
 
-  ._Xa13 {
+  ._Xa15 {
     text-decoration: none;
   }
 
-  .Yd13 {
+  .Yd15 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .Xb13 {
+  .Xb15 {
     transition-duration: .15s;
   }
 
-  ._2b13 {
+  ._2b15 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .SssxDec13 {
+  .SssxDec15 {
     padding-inline-start: calc(.375rem * var(--s2-scale));
   }
 
-  .RssxDec13 {
+  .RssxDec15 {
     padding-inline-end: calc(.375rem * var(--s2-scale));
   }
 
-  .__ca13 {
+  .__ca15 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .-_8sjo0b-t5ZbAob13 {
+  .-_8sjo0b-t5ZbAob15 {
     --iconPrimary: currentColor;
   }
 
-  ._Jb13 {
+  ._Jb15 {
     order: 1;
   }
 
-  ._Ja13 {
+  ._Ja15 {
     order: 0;
   }
 
-  ._Le13 {
+  ._Le15 {
     outline-style: none;
   }
 
-  ._Lf13 {
+  ._Lf15 {
     outline-style: solid;
   }
 
-  .Oh13 {
+  .Oh15 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc13 {
+  ._Mc15 {
     outline-width: 2px;
   }
 
-  ._Kd13 {
+  ._Kd15 {
     outline-offset: 2px;
   }
 
-  .Js13 {
+  .Js15 {
     margin-top: .25rem;
   }
 
-  .pt13 {
+  .pt15 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  ._ub13 {
+  ._ub15 {
     flex-grow: 1;
   }
 
-  .Ma13 {
+  .Ma15 {
     min-height: 0;
   }
 
-  .sb13 {
+  .sb15 {
     display: block;
   }
 
-  .sk13 {
+  .sk15 {
     display: none;
   }
 
-  .s40ub4c13 {
+  .s40ub4c15 {
     display: inherit;
   }
 
-  ._t40ub4c13 {
+  ._t40ub4c15 {
     flex-direction: inherit;
   }
 
-  .U40ub4c13 {
+  .U40ub4c15 {
     row-gap: inherit;
   }
 
-  .q40ub4c13 {
+  .q40ub4c15 {
     column-gap: inherit;
   }
 
-  ._w40ub4c13 {
+  ._w40ub4c15 {
     flex-wrap: inherit;
   }
 
-  ._Pa13 {
+  ._Pa15 {
     position: absolute;
   }
 
-  .Wr13 {
+  .Wr15 {
     top: 0;
   }
 
-  ._lr13 {
+  ._lr15 {
     bottom: 0;
   }
 
-  ._Ar13 {
+  ._Ar15 {
     inset-inline-start: 0;
   }
 
-  ._zr13 {
+  ._zr15 {
     inset-inline-end: 0;
   }
 
-  ._6b13 {
+  ._6b15 {
     visibility: hidden;
   }
 
-  ._Nc13 {
+  ._Nc15 {
     overflow-x: hidden;
   }
 
-  .Pc13 {
+  .Pc15 {
     overflow-y: hidden;
   }
 
-  ._Ia13 {
+  ._Ia15 {
     opacity: 0;
   }
 
-  .sd13 {
+  .sd15 {
     display: flex;
   }
 
-  ._va13 {
+  ._va15 {
     flex-shrink: 0;
   }
 
-  .eb13 {
+  .eb15 {
     align-items: center;
   }
 
-  .Fx13 {
+  .Fx15 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .Fz13 {
+  .Fz15 {
     height: calc(3rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea15:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .gle13 {
+    .gle15 {
       background-color: highlight;
     }
 
-    .gld13 {
+    .gld15 {
       background-color: graytext;
     }
 
-    .pld13 {
+    .pld15 {
       color: highlight;
     }
 
-    .plc13 {
+    .plc15 {
       color: graytext;
     }
 
-    .Olc13 {
+    .Olc15 {
       outline-color: highlight;
     }
   }
@@ -430,7 +430,7 @@
 
 @layer _.b.dklsgc {
   @media (prefers-reduced-motion: reduce) {
-    .Ydklsgce13 {
+    .Ydklsgce15 {
       transition-property: none;
     }
   }
@@ -438,11 +438,11 @@
 
 @layer _.b.s {
   @media not ((hover: hover) and (pointer: fine)) {
-    .Usd13 {
+    .Usd15 {
       row-gap: .470588em;
     }
 
-    .qsd13 {
+    .qsd15 {
       column-gap: .470588em;
     }
   }

package/dist/private/Tabs.css.map

@@ -1 +1 @@
-{"mappings":"AC2Ga;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+DG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCO;;;;EAAA;;;;EA6DG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmDd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgDC;;;;EAqCO;;;;EAU4C;;;;EAkC/C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoFA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiDA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3dJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAkKa;EAAA;IAAA;;;;IAAA;;;;IAmDd;;;;IAAA;;;;IAiIK;;;;;;AApLS;EAAA;IAAA;;;;;;AAmDd;EAAA;IAAA;;;;IAAA","sources":["d333cabc54201ea1","packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["@import \"575a5a16650d7070\";\n@import \"7a0058ba44ec735a\";\n@import \"ea0c0ad20f1e1c01\";\n@import \"1a91a7d853a67795\";\n@import \"b645d7882760dc18\";\n@import \"5aa00674bbf9e612\";\n@import \"9d65793a05791106\";\n@import \"2976d7d1f8a0759d\";\n@import \"713e94facc5ee3f3\";\n@import \"64129d49d07323ce\";\n@import \"5458e36ec7f2a11f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext,\n  TabRenderProps\n} from 'react-aria-components/Tabs';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from 'react-aria/CollectionBuilder';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Group} from 'react-aria-components/Group';\nimport {IconContext} from './Icon';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {SelectionIndicator} from 'react-aria-components/SelectionIndicator';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from 'react-stately/useControlledState';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useHasTabbableChild} from 'react-aria/private/focus/useHasTabbableChild';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular',\n  /**\n   * Defines if the text within the tabs should be hidden and only the icon should be shown.\n   * The text is always visible when the item is collapsed into a picker.\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'render' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps> & {\n  tablistRef?: RefObject<HTMLDivElement | null>,\n  selectedKey?: Key | null\n}>({});\n\ninterface CollapseContextType {\n  showTabs: boolean,\n  menuId: string,\n  valueId: string,\n  ariaLabel?: string | undefined,\n  ariaDescribedBy?: string | undefined,\n  tabs: Array<Node<any>>,\n  listRef?: RefObject<HTMLDivElement | null>,\n  onSelectionChange?: (key: Key) => void\n}\n\nconst CollapseContext = createContext<CollapseContextType>({\n  showTabs: true,\n  menuId: '',\n  valueId: '',\n  tabs: []\n});\n\nconst tabs = style({\n  position: 'relative',\n  display: 'flex',\n  flexShrink: 0,\n  font: 'ui',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal',\n    labelBehavior = 'show'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  let tablistRef = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          tablistRef,\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  marginEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  marginStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  minWidth: 'min'\n});\n\nconst tablistWrapper = style({\n  position: 'relative',\n  minWidth: 0,\n  flexShrink: 0,\n  flexGrow: 0\n}, getAllowedOverrides());\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};\n  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n\n  return (\n    <div className={tablistWrapper(null, props.styles)}>\n      {listRef && <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={tabs} density={density} listRef={listRef} />\n      </div>}\n      <TabsMenu\n        id={menuId}\n        valueId={valueId}\n        items={tabs}\n        onSelectionChange={onSelectionChange}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy} />\n    </div>\n  );\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {\n    tablistRef,\n    orientation,\n    density,\n    labelBehavior,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = useContext(InternalTabsContext) ?? {};\n  let {tabs, listRef} = useContext(CollapseContext) ?? {};\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        tablistWrapper(null, props.styles)}>\n      {listRef && <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={tabs} density={density} listRef={listRef} />\n      </div>}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n    </div>\n  );\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    default: 'full',\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    default: 'full',\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  contain: 'strict',\n  transition: {\n    default: '[translate,width,height]',\n    '@media (prefers-reduced-motion: reduce)': 'none'\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: 'out',\n  bottom: {\n    default: 0\n  },\n  top: {\n    orientation: {\n      vertical: 0\n    }\n  },\n  left: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  insetStart: {\n    orientation: {\n      vertical: -12\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full'\n});\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide', orientation?: Orientation}>({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  minHeight: {\n    orientation: {\n      vertical: {\n        density: {\n          compact: 32,\n          regular: 48\n        }\n      }\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  textDecoration: 'none',\n  flexShrink: 0,\n  transition: 'default',\n  paddingX: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n  let {density, orientation, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior, orientation}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu,\n          isDisabled\n        }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [TextContext, {\n                  id: contentId,\n                  styles:\n                    style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                }],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: icon\n                }]\n              ]}>\n              <TabInner\n                orientation={orientation!}\n                isDisabled={isDisabled}>\n                {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n              </TabInner>\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nfunction TabInner({isDisabled, orientation, children}: {\n  isDisabled: boolean,\n  orientation: Orientation,\n  children: ReactNode\n}) {\n  let ref = useRef<HTMLDivElement | null>(null);\n  let isHidden = useContext(HiddenTabsContext);\n\n  return (\n    <>\n      {!isHidden && <SelectionIndicator ref={ref} className={selectedIndicator({isDisabled, orientation})} />}\n      {children}\n    </>\n  );\n}\n\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  minHeight: 0,\n  display: {\n    default: 'block',\n    isInert: 'none'\n  }\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {UNSAFE_style, UNSAFE_className = '', id, shouldForceMount, ...otherProps} = props;\n  let {menuId, valueId} = useContext(CollapseContext);\n  let ref = useRef(null);\n  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n  return (\n    <Group\n      {...otherProps}\n      ref={ref}\n      aria-labelledby={menuId + ' ' + valueId}\n      tabIndex={tabIndex}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n  );\n}\n\nfunction isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\nconst HiddenTabsContext = createContext(false);\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      <HiddenTabsContext.Provider value>\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      </HiddenTabsContext.Provider>\n    </div>\n  );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let onSelectionChange = useCallback((key: Key | null) => {\n    if (key != null) {\n      _onSelectionChange?.(key);\n    }\n  }, [_onSelectionChange]);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }})({density})}>\n      <Picker\n        id={id}\n        valueId={valueId}\n        {...labelProps}\n        aria-describedby={props['aria-describedby']}\n        aria-details={props['aria-details']}\n        isDisabled={isDisabled || allKeysDisabled}\n        density={density!}\n        labelBehavior={labelBehavior}\n        items={items}\n        disabledKeys={disabledKeys}\n        selectedKey={selectedKey}\n        onSelectionChange={onSelectionChange}>\n        {(item: Node<any>) => {\n          return (\n            <PickerItem\n              {...item.props.originalProps}\n              isDisabled={isDisabled || allKeysDisabled}\n              key={item.key}>\n              {item.props.children({density, isMenu: true})}\n            </PickerItem>\n          );\n        }}\n      </Picker>\n    </div>\n  );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n  let {orientation = 'horizontal', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback((value: boolean) => {\n    if (orientation === 'vertical') {\n      // if orientation is vertical, we always show the items\n      _setShowItems(true);\n    } else {\n      _setShowItems(value);\n    }\n  }, [orientation]);\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n\n  let updateOverflow = () => {\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  let updateOverflowEffect = useEffectEvent(updateOverflow);\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflowEffect);\n    }\n  }, [collection.size]);\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      updateOverflowEffect();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflowEffect());\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        className=\"\"\n        style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n      <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.css.map"}
+{"mappings":"ACmKa;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8EG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCO;;;;EAAA;;;;EAqEG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmDd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyDC;;;;EA4Ce;;;;EAasC;;;;EA0CjD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8FA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiEA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAviBJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAyLa;EAAA;IAAA;;;;IAAA;;;;IAmDd;;;;IAAA;;;;IA4JK;;;;;;AA/MS;EAAA;IAAA;;;;;;AAmDd;EAAA;IAAA;;;;IAAA","sources":["d333cabc54201ea1","packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["@import \"575a5a16650d7070\";\n@import \"7a0058ba44ec735a\";\n@import \"ea0c0ad20f1e1c01\";\n@import \"1a91a7d853a67795\";\n@import \"b645d7882760dc18\";\n@import \"5aa00674bbf9e612\";\n@import \"9d65793a05791106\";\n@import \"2976d7d1f8a0759d\";\n@import \"713e94facc5ee3f3\";\n@import \"64129d49d07323ce\";\n@import \"5458e36ec7f2a11f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext,\n  TabRenderProps\n} from 'react-aria-components/Tabs';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  Collection,\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  Key,\n  Node,\n  Orientation,\n  RefObject\n} from '@react-types/shared';\nimport {CollectionBuilder} from 'react-aria/CollectionBuilder';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  createContext,\n  forwardRef,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {\n  getAllowedOverrides,\n  StyleProps,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {Group} from 'react-aria-components/Group';\nimport {IconContext} from './Icon';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {SelectionIndicator} from 'react-aria-components/SelectionIndicator';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from 'react-stately/useControlledState';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useHasTabbableChild} from 'react-aria/private/focus/useHasTabbableChild';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps\n  extends\n    Omit<AriaTabsProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>,\n    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   *\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   *\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide';\n}\n\nexport interface TabProps\n  extends\n    Omit<\n      AriaTabProps,\n      'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode;\n}\n\nexport interface TabListProps<T>\n  extends\n    Omit<\n      AriaTabListProps<T>,\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'aria-label'\n      | 'aria-labelledby'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode);\n}\n\nexport interface TabPanelProps\n  extends\n    Omit<\n      AriaTabPanelProps,\n      'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n    >,\n    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 =\n  createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<\n  Partial<TabsProps> & {\n    tablistRef?: RefObject<HTMLDivElement | null>;\n    selectedKey?: Key | null;\n    baseId?: string;\n  }\n>({});\n\ninterface CollapseContextType {\n  showTabs: boolean;\n  menuId: string;\n  valueId: string;\n  ariaLabel?: string | undefined;\n  ariaDescribedBy?: string | undefined;\n  tabs: Array<Node<any>>;\n  listRef?: RefObject<HTMLDivElement | null>;\n  onSelectionChange?: (key: Key) => void;\n}\n\nconst CollapseContext = createContext<CollapseContextType>({\n  showTabs: true,\n  menuId: '',\n  valueId: '',\n  tabs: []\n});\n\nconst tabs = style(\n  {\n    position: 'relative',\n    display: 'flex',\n    flexShrink: 0,\n    font: 'ui',\n    flexDirection: {\n      orientation: {\n        horizontal: 'column'\n      }\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The\n * 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(\n    props.selectedKey,\n    props.defaultSelectedKey ?? null!,\n    props.onSelectionChange\n  );\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  let tablistRef = useRef<HTMLDivElement | null>(null);\n  // Shared base id so child Tab/TabPanel components can derive stable ids.\n  let baseId = useId();\n\n  return (\n    <Provider\n      values={[\n        [\n          InternalTabsContext,\n          {\n            density,\n            isDisabled,\n            orientation,\n            disabledKeys,\n            selectedKey: value,\n            tablistRef,\n            onSelectionChange: setValue,\n            labelBehavior,\n            baseId,\n            'aria-label': props['aria-label'],\n            'aria-labelledby': props['aria-labelledby']\n          }\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        )}\n      </CollectionBuilder>\n    </Provider>\n  );\n});\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        },\n        labelBehavior: {\n          hide: {\n            density: {\n              compact: 16,\n              regular: 24\n            }\n          }\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  marginEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  marginStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  minWidth: 'min'\n});\n\nconst tablistWrapper = style(\n  {\n    position: 'relative',\n    minWidth: 0,\n    flexShrink: 0,\n    flexGrow: 0\n  },\n  getAllowedOverrides()\n);\n\nexport function TabList<T>(props: TabListProps<T>): ReactNode | null {\n  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} =\n    useContext(CollapseContext) ?? {};\n  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n\n  return (\n    <div className={tablistWrapper(null, props.styles)}>\n      {listRef && (\n        <div className={tablist({orientation, labelBehavior, density})}>\n          <HiddenTabs items={tabs} density={density} listRef={listRef} />\n        </div>\n      )}\n      <TabsMenu\n        id={menuId}\n        valueId={valueId}\n        items={tabs}\n        onSelectionChange={onSelectionChange}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n      />\n    </div>\n  );\n}\n\nfunction TabListInner<T>(props: TabListProps<T>) {\n  let {\n    tablistRef,\n    orientation,\n    density,\n    labelBehavior,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = useContext(InternalTabsContext) ?? {};\n  let {tabs, listRef} = useContext(CollapseContext) ?? {};\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tablistWrapper(null, props.styles)}>\n      {listRef && (\n        <div className={tablist({orientation, labelBehavior, density})}>\n          <HiddenTabs items={tabs} density={density} listRef={listRef} />\n        </div>\n      )}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})}\n      />\n    </div>\n  );\n}\n\nconst selectedIndicator = style<{isDisabled: boolean; orientation?: Orientation}>({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    default: 'full',\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    default: 'full',\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  contain: 'strict',\n  transition: {\n    default: '[translate,width,height]',\n    '@media (prefers-reduced-motion: reduce)': 'none'\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: 'out',\n  bottom: {\n    default: 0\n  },\n  top: {\n    orientation: {\n      vertical: 0\n    }\n  },\n  left: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  insetStart: {\n    orientation: {\n      vertical: -12\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full'\n});\n\nconst tab = style<\n  TabRenderProps & {\n    density?: 'compact' | 'regular';\n    labelBehavior?: 'show' | 'hide';\n    orientation?: Orientation;\n  }\n>(\n  {\n    ...focusRing(),\n    display: 'flex',\n    color: {\n      default: baseColor('neutral-subdued'),\n      isSelected: baseColor('neutral'),\n      isDisabled: 'disabled',\n      forcedColors: {\n        isSelected: 'Highlight',\n        isDisabled: 'GrayText'\n      }\n    },\n    borderRadius: 'sm',\n    gap: 'text-to-visual',\n    height: {\n      orientation: {\n        horizontal: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }\n      }\n    },\n    minHeight: {\n      orientation: {\n        vertical: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }\n      }\n    },\n    alignItems: 'center',\n    position: 'relative',\n    cursor: 'default',\n    textDecoration: 'none',\n    flexShrink: 0,\n    transition: 'default',\n    paddingX: {\n      labelBehavior: {\n        hide: size(6)\n      }\n    },\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n  let {density, orientation, labelBehavior, baseId} = useContext(InternalTabsContext) ?? {};\n\n  // Derive a stable content id from the shared baseId on InternalTabsContext.\n  // Prevents infinite loop when rendering across multiple CollectionBuilder portals.\n  let fallbackId = useId();\n  let contentId = `${baseId ?? fallbackId}-content-${props.id ?? fallbackId}`;\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        tab({...renderProps, density, labelBehavior, orientation}, props.styles)\n      }>\n      {({\n        // @ts-ignore\n        isMenu,\n        isDisabled\n      }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [\n                  TextContext,\n                  {\n                    id: contentId,\n                    styles: style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                  }\n                ],\n                [\n                  IconContext,\n                  {\n                    render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                    styles: icon\n                  }\n                ]\n              ]}>\n              <TabInner orientation={orientation!} isDisabled={isDisabled}>\n                {typeof props.children === 'string' ? (\n                  <Text>{props.children}</Text>\n                ) : (\n                  props.children\n                )}\n              </TabInner>\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nfunction TabInner({\n  isDisabled,\n  orientation,\n  children\n}: {\n  isDisabled: boolean;\n  orientation: Orientation;\n  children: ReactNode;\n}) {\n  let ref = useRef<HTMLDivElement | null>(null);\n  let isHidden = useContext(HiddenTabsContext);\n\n  return (\n    <>\n      {!isHidden && (\n        <SelectionIndicator ref={ref} className={selectedIndicator({isDisabled, orientation})} />\n      )}\n      {children}\n    </>\n  );\n}\n\nconst tabPanel = style(\n  {\n    ...focusRing(),\n    marginTop: 4,\n    color: 'gray-800',\n    flexGrow: 1,\n    minHeight: 0,\n    display: {\n      default: 'block',\n      isInert: 'none'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps =>\n          (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)\n        }\n      />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {UNSAFE_style, UNSAFE_className = '', id, shouldForceMount, ...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}\n\nfunction isEveryTabDisabled<T>(\n  collection: Collection<Node<T>> | undefined,\n  disabledKeys: Set<Key>\n) {\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\nconst HiddenTabsContext = createContext(false);\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      <HiddenTabsContext.Provider value>\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      </HiddenTabsContext.Provider>\n    </div>\n  );\n};\n\nlet TabsMenu = (\n  props: {\n    valueId: string;\n    items: Array<Node<any>>;\n    onSelectionChange: TabsProps['onSelectionChange'];\n  } & Omit<TabsProps, 'children'>\n) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {\n    density,\n    onSelectionChange: _onSelectionChange,\n    selectedKey,\n    isDisabled,\n    disabledKeys,\n    labelBehavior\n  } = useContext(InternalTabsContext);\n  let onSelectionChange = useCallback(\n    (key: Key | null) => {\n      if (key != null) {\n        _onSelectionChange?.(key);\n      }\n    },\n    [_onSelectionChange]\n  );\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }\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 = ({\n  collection,\n  containerRef,\n  ...props\n}: {collection: Collection<Node<unknown>>; containerRef: any} & TabsProps) => {\n  let {orientation = 'horizontal', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback(\n    (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    },\n    [orientation]\n  );\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n\n  let updateOverflow = () => {\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  let updateOverflowEffect = useEffectEvent(updateOverflow);\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflowEffect);\n    }\n  }, [collection.size]);\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      updateOverflowEffect();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflowEffect());\n  }, []);\n\n  let menuId = useId();\n  let valueId = useId();\n\n  let contents: ReactNode;\n  if (showItems) {\n    contents = (\n      <RACTabs {...props} className=\"\" style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <CollapseContext.Provider\n          value={{\n            showTabs: false,\n            tabs: children,\n            menuId,\n            valueId,\n            listRef: listRef,\n            onSelectionChange,\n            ariaLabel: props['aria-label'],\n            ariaDescribedBy: props['aria-labelledby']\n          }}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)}\n      ref={containerRef}>\n      <CollapseContext.Provider\n        value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.css.map"}