@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/Tabs.css

@@ -3,7 +3,7 @@
     margin-top: .25rem;
   }
 
-  ._9-3t1y {
+  .__a-3t1y {
     flex-grow: 1;
   }
 
@@ -15,11 +15,11 @@
     min-width: 0;
   }
 
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
@@ -27,11 +27,11 @@
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._Nc {
+  ._Oc {
     outline-width: 2px;
   }
 
-  ._M-3t1z {
+  ._N-3t1z {
     outline-offset: 2px;
   }
 
@@ -51,19 +51,19 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  ._vb {
+  ._wb {
     border-start-start-radius: .25rem;
   }
 
-  ._wb {
+  ._xb {
     border-start-end-radius: .25rem;
   }
 
-  ._xb {
+  ._yb {
     border-end-start-radius: .25rem;
   }
 
-  ._yb {
+  ._zb {
     border-end-end-radius: .25rem;
   }
 
@@ -83,19 +83,19 @@
     height: calc(3rem * var(--s2-scale));
   }
 
-  ._1c {
+  ._2c {
     align-items: center;
   }
 
-  .__Hb {
+  .__Ib {
     cursor: default;
   }
 
-  ._Oa {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  ._Pa {
+    transition-property: color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  ._Q-375x7f {
+  ._R-375x7f {
     transition-duration: .15s;
   }
 
@@ -103,11 +103,11 @@
     --iconPrimary: currentColor;
   }
 
-  .__A-3t1y {
+  .__B-3t1y {
     order: 1;
   }
 
-  .__A-3t1x {
+  .__B-3t1x {
     order: 0;
   }
 
@@ -139,11 +139,11 @@
     flex-basis: 0%;
   }
 
-  .Uc {
+  .Vc {
     position: relative;
   }
 
-  .Ua {
+  .Va {
     position: absolute;
   }
 
@@ -167,7 +167,7 @@
     width: 2px;
   }
 
-  .Za {
+  ._aa {
     bottom: 0;
   }
 
@@ -175,55 +175,55 @@
     border-style: none;
   }
 
-  ._vf {
+  ._wf {
     border-start-start-radius: 9999px;
   }
 
-  ._wf {
+  ._xf {
     border-start-end-radius: 9999px;
   }
 
-  ._xf {
+  ._yf {
     border-end-start-radius: 9999px;
   }
 
-  ._yf {
+  ._zf {
     border-end-end-radius: 9999px;
   }
 
-  ._Q-375x5l {
+  ._R-375x5l {
     transition-duration: .13s;
   }
 
-  ._Ra {
+  ._Sa {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  ._Zd {
+  ._0d {
     display: flex;
   }
 
-  ._8-3t1x {
+  ._9-3t1x {
     flex-shrink: 0;
   }
 
-  ._ca {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._eb {
+  ._fb {
     font-variation-settings: "wght" 400;
     font-synthesis-weight: none;
     font-weight: 400;
   }
 
-  ._6b {
+  ._7b {
     flex-direction: column;
   }
 }
 
 @layer _.b {
-  ._c-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 }
@@ -232,23 +232,23 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
 
-    .aa_____z {
+    .aa_____M {
       color: highlight;
     }
 
-    .aa_____B {
+    .aa_____O {
       color: graytext;
     }
 
-    .ba_____z {
+    .ba_____M {
       background-color: highlight;
     }
 
-    .ba_____B {
+    .ba_____O {
       background-color: graytext;
     }
   }
@@ -271,37 +271,37 @@
 }
 
 @layer _.c {
-  ._c-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._c-enzykdd:lang(ja) {
+  ._d-enzykdd: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 {
-  ._c-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._c-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._c-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg: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 {
-  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh: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;
   }
 }

package/dist/Tabs.css.map

@@ -1 +1 @@
-{"mappings":"ACqEiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BC;;;;EAkBoB;;;;EAEyB;;;;EAU1C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDkC;;;;EAyCxB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuFb;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AA9PI;EA8PJ;;;;;AA9PI;;AAkBL;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAqJc;;;;IAAA;;;;;;AArJd;EAAA;IAAA;;;;IAAA;;;;;;AA4BC;;;;AAgNA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","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","/*\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    Provider,\n    Tab as RACTab,\n    TabList as RACTabList,\n    Tabs as RACTabs,\n    TabListStateContext,\n    useSlottedContext\n  } from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\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\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>, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tablist. */\n  children?: 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<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst tabPanel = style({\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  return (\n    <AriaTabPanel\n      {...props}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />\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}, getAllowedOverrides());\n\nconst icon = style({\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density} = useSlottedContext(TabsContext) ?? {};\n\n  return (\n    <RACTab\n      {...props}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>\n      <Provider\n        values={[\n          [TextContext, {styles: style({order: 1})}],\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    </RACTab>\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      }\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 {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};\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        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, 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\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 || null, 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, direction, orientation, density]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tabs = style({\n  display: 'flex',\n  flexShrink: 0,\n  fontFamily: 'sans',\n  fontWeight: 'normal',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nfunction 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  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACTabs\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>\n      <Provider\n        values={[\n          [TabsContext, {density, isDisabled, disabledKeys, orientation}]\n        ]}>\n        {props.children}\n      </Provider>\n    </RACTabs>\n  );\n}\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 */\nconst _Tabs = forwardRef(Tabs);\nexport {_Tabs as Tabs};\n"],"names":[],"version":3,"file":"Tabs.css.map"}
+{"mappings":"ACqEiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BC;;;;EAkBoB;;;;EAEyB;;;;EAU1C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDkC;;;;EAyCxB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuFb;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AA9PI;EA8PJ;;;;;AA9PI;;AAkBL;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAqJc;;;;IAAA;;;;;;AArJd;EAAA;IAAA;;;;IAAA;;;;;;AA4BC;;;;AAgNA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","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","/*\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    Provider,\n    Tab as RACTab,\n    TabList as RACTabList,\n    Tabs as RACTabs,\n    TabListStateContext,\n    useSlottedContext\n  } from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\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\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>, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tablist. */\n  children?: 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<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst tabPanel = style({\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  return (\n    <AriaTabPanel\n      {...props}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />\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}, getAllowedOverrides());\n\nconst icon = style({\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density} = useSlottedContext(TabsContext) ?? {};\n\n  return (\n    <RACTab\n      {...props}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>\n      <Provider\n        values={[\n          [TextContext, {styles: style({order: 1})}],\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    </RACTab>\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      }\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 {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};\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        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, 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\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 || null, 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, direction, orientation, density]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tabs = style({\n  display: 'flex',\n  flexShrink: 0,\n  fontFamily: 'sans',\n  fontWeight: 'normal',\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  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACTabs\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>\n      <Provider\n        values={[\n          [TabsContext, {density, isDisabled, disabledKeys, orientation}]\n        ]}>\n        {props.children}\n      </Provider>\n    </RACTabs>\n  );\n});\n"],"names":[],"version":3,"file":"Tabs.css.map"}

package/dist/Tabs.mjs

@@ -33,23 +33,23 @@ import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
 const $79e2b4a1b34d1592$export$cfa7aa87c26e7d1f = /*#__PURE__*/ (0, $8bRfI$createContext)(null);
 const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
     rules += matches.join('');
     let $A = false;
-    let $_9 = false;
+    let $__a = false;
     let $h = false;
     let $o = false;
     let $q = false;
     for (let p of matches){
         if (/^\s*A/.test(p)) $A = true;
-        if (/^\s*_9/.test(p)) $_9 = true;
+        if (/^\s*__a/.test(p)) $__a = true;
         if (/^\s*h/.test(p)) $h = true;
         if (/^\s*o/.test(p)) $o = true;
         if (/^\s*q/.test(p)) $q = true;
     }
     if (!$A) rules += ' Ac';
     rules += ' an';
-    if (!$_9) rules += ' _9-3t1y';
+    if (!$__a) rules += ' __a-3t1y';
     if (!$h) rules += ' h-3hmsa';
     if (!$o) rules += ' oo';
     if (!$q) rules += ' qo';
@@ -64,23 +64,23 @@ function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
 }
 const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
     rules += matches.join('');
-    let $U = false;
-    let $_8 = false;
+    let $V = false;
+    let $_9 = false;
     for (let p of matches){
-        if (/^\s*U/.test(p)) $U = true;
-        if (/^\s*_8/.test(p)) $_8 = true;
+        if (/^\s*V/.test(p)) $V = true;
+        if (/^\s*_9/.test(p)) $_9 = true;
     }
-    if (props.isFocusVisible) rules += ' _Lb';
-    else rules += ' _La';
-    rules += ' da_____z';
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
+    rules += ' da_____M';
     rules += ' dx';
-    rules += ' _Nc';
-    rules += ' _M-3t1z';
-    rules += ' _Zd';
-    if (props.isDisabled) rules += ' aa_____B';
-    else if (props.isSelected) rules += ' aa_____z';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    rules += ' _0d';
+    if (props.isDisabled) rules += ' aa_____O';
+    else if (props.isSelected) rules += ' aa_____M';
     if (props.isDisabled) rules += ' aj';
     else if (props.isHovered) {
         if (props.isPressed) rules += ' an';
@@ -96,26 +96,26 @@ const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
         else if (props.isFocusVisible) rules += ' an';
         else rules += ' am';
     }
-    rules += ' _vb';
     rules += ' _wb';
     rules += ' _xb';
     rules += ' _yb';
+    rules += ' _zb';
     rules += ' ibH';
     rules += ' iG';
     rules += ' jbH';
     rules += ' jG';
     if (props.density === "regular") rules += ' k_a';
     else if (props.density === "compact") rules += ' kU';
-    rules += ' _1c';
-    if (!$U) rules += ' Uc';
-    rules += ' __Hb';
-    if (!$_8) rules += ' _8-3t1x';
-    rules += ' _Oa';
-    rules += ' _Q-375x7f';
-    rules += ' _Ra';
+    rules += ' _2c';
+    if (!$V) rules += ' Vc';
+    rules += ' __Ib';
+    if (!$_9) rules += ' _9-3t1x';
+    rules += ' _Pa';
+    rules += ' _R-375x7f';
+    rules += ' _Sa';
     return rules;
 };
-const $79e2b4a1b34d1592$var$icon = " . _8-3t1x -rwx0fg_e-b";
+const $79e2b4a1b34d1592$var$icon = " . _9-3t1x -rwx0fg_e-b";
 function $79e2b4a1b34d1592$export$3e41faf802a29e71(props) {
     let { density: density } = (0, $8bRfI$useSlottedContext)($79e2b4a1b34d1592$export$cfa7aa87c26e7d1f) ?? {};
     return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tab), {
@@ -130,7 +130,7 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props) {
                 [
                     (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                     {
-                        styles: " . __A-3t1y"
+                        styles: " . __B-3t1y"
                     }
                 ],
                 [
@@ -138,7 +138,7 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props) {
                     {
                         render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                             slot: 'icon',
-                            styles: " . __A-3t1x"
+                            styles: " . __B-3t1x"
                         }),
                         styles: $79e2b4a1b34d1592$var$icon
                     }
@@ -152,7 +152,7 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props) {
 }
 const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
     let rules = " .";
-    rules += ' _Zd';
+    rules += ' _0d';
     if (props.orientation === "horizontal") {
         if (props.density === "regular") rules += ' ij';
         else if (props.density === "compact") rules += ' ih';
@@ -161,10 +161,10 @@ const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
         if (props.density === "regular") rules += ' jj';
         else if (props.density === "compact") rules += ' jh';
     }
-    if (props.orientation === "vertical") rules += ' _6b';
+    if (props.orientation === "vertical") rules += ' _7b';
     if (props.orientation === "vertical") rules += ' Dg';
     if (props.orientation === "vertical") rules += ' Ce';
-    rules += ' _8-3t1x';
+    rules += ' _9-3t1x';
     rules += ' h-3hmsa';
     return rules;
 };
@@ -186,11 +186,11 @@ function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props1) {
         style: props1.UNSAFE_style,
         className: (props1.UNSAFE_className || '') + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');
-            let $U = false;
-            for (let p of matches)if (/^\s*U/.test(p)) $U = true;
-            if (!$U) rules += ' Uc';
+            let $V = false;
+            for (let p of matches)if (/^\s*V/.test(p)) $V = true;
+            if (!$V) rules += ' Vc';
             return rules;
         }(null, props1.styles),
         children: [
@@ -236,9 +236,9 @@ function $79e2b4a1b34d1592$var$isAllTabsDisabled(collection, disabledKeys) {
 }
 const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
     let rules = " .";
-    rules += ' Ua';
-    if (props.isDisabled) rules += ' ba_____B';
-    else rules += ' ba_____z';
+    rules += ' Va';
+    if (props.isDisabled) rules += ' ba_____O';
+    else rules += ' ba_____M';
     if (props.isDisabled) rules += ' bg';
     else {
         if (props.isPressed) rules += ' bo';
@@ -248,14 +248,14 @@ const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
     }
     if (props.orientation === "horizontal") rules += ' k-375zlr';
     if (props.orientation === "vertical") rules += ' l-375zlr';
-    if (props.orientation === "horizontal") rules += ' Za';
+    if (props.orientation === "horizontal") rules += ' _aa';
     rules += ' wf';
-    rules += ' _vf';
     rules += ' _wf';
     rules += ' _xf';
     rules += ' _yf';
-    rules += ' _Q-375x5l';
-    rules += ' _Ra';
+    rules += ' _zf';
+    rules += ' _R-375x5l';
+    rules += ' _Sa';
     return rules;
 };
 function $79e2b4a1b34d1592$var$TabLine(props) {
@@ -319,25 +319,25 @@ function $79e2b4a1b34d1592$var$TabLine(props) {
 }
 const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
     rules += matches.join('');
-    let $_8 = false;
-    for (let p of matches)if (/^\s*_8/.test(p)) $_8 = true;
-    rules += ' _Zd';
-    if (!$_8) rules += ' _8-3t1x';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
-    rules += ' _eb';
-    if (props.orientation === "horizontal") rules += ' _6b';
+    let $_9 = false;
+    for (let p of matches)if (/^\s*_9/.test(p)) $_9 = true;
+    rules += ' _0d';
+    if (!$_9) rules += ' _9-3t1x';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _fb';
+    if (props.orientation === "horizontal") rules += ' _7b';
     return rules;
 };
-function $79e2b4a1b34d1592$var$Tabs(props, ref) {
+const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $79e2b4a1b34d1592$export$cfa7aa87c26e7d1f);
     let { density: density = 'regular', isDisabled: isDisabled, disabledKeys: disabledKeys, orientation: orientation = 'horizontal' } = props;
     let domRef = (0, $8bRfI$useDOMRef)(ref);
@@ -363,10 +363,7 @@ function $79e2b4a1b34d1592$var$Tabs(props, ref) {
             children: props.children
         })
     });
-}
-/**
- * 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.
- */ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)($79e2b4a1b34d1592$var$Tabs);
+});
 
 
 export {$79e2b4a1b34d1592$export$cfa7aa87c26e7d1f as TabsContext, $79e2b4a1b34d1592$export$3d96ec278d3efce4 as TabPanel, $79e2b4a1b34d1592$export$3e41faf802a29e71 as Tab, $79e2b4a1b34d1592$export$e51a686c67fdaa2d as TabList, $79e2b4a1b34d1592$export$b2539bed5023c21c as Tabs};

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    Provider,\n    Tab as RACTab,\n    TabList as RACTabList,\n    Tabs as RACTabs,\n    TabListStateContext,\n    useSlottedContext\n  } from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\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\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>, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tablist. */\n  children?: 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<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst tabPanel = style({\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  return (\n    <AriaTabPanel\n      {...props}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />\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}, getAllowedOverrides());\n\nconst icon = style({\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density} = useSlottedContext(TabsContext) ?? {};\n\n  return (\n    <RACTab\n      {...props}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>\n      <Provider\n        values={[\n          [TextContext, {styles: style({order: 1})}],\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    </RACTab>\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      }\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 {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};\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        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, 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\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 || null, 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, direction, orientation, density]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tabs = style({\n  display: 'flex',\n  flexShrink: 0,\n  fontFamily: 'sans',\n  fontWeight: 'normal',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nfunction 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  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACTabs\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>\n      <Provider\n        values={[\n          [TabsContext, {density, isDisabled, disabledKeys, orientation}]\n        ]}>\n        {props.children}\n      </Provider>\n    </RACTabs>\n  );\n}\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 */\nconst _Tabs = forwardRef(Tabs);\nexport {_Tabs as Tabs};\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    Provider,\n    Tab as RACTab,\n    TabList as RACTabList,\n    Tabs as RACTabs,\n    TabListStateContext,\n    useSlottedContext\n  } from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\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\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>, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tablist. */\n  children?: 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<TabsProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst tabPanel = style({\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  return (\n    <AriaTabPanel\n      {...props}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />\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}, getAllowedOverrides());\n\nconst icon = style({\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density} = useSlottedContext(TabsContext) ?? {};\n\n  return (\n    <RACTab\n      {...props}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>\n      <Provider\n        values={[\n          [TextContext, {styles: style({order: 1})}],\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    </RACTab>\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      }\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 {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};\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        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, 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\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 || null, 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, direction, orientation, density]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tabs = style({\n  display: 'flex',\n  flexShrink: 0,\n  fontFamily: 'sans',\n  fontWeight: 'normal',\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  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACTabs\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>\n      <Provider\n        values={[\n          [TabsContext, {density, isDisabled, disabledKeys, orientation}]\n        ]}>\n        {props.children}\n      </Provider>\n    </RACTabs>\n  );\n});\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}