@react-spectrum/s2 0.6.0 → 0.7.1

package/dist/Tabs.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAyDM,MAAM,0DAAc,CAAA,GAAA,oBAAY,EAAwD;AAE/F,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AASC,SAAS,0CAAS,KAAoB;IAC3C,qBACE,gBAAC,CAAA,GAAA,eAAW;QACT,GAAG,KAAK;QACT,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,MAAM,MAAM,MAAM;;AAE7E;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BN,MAAM;AAQC,SAAS,0CAAI,KAAe;IACjC,IAAI,WAAC,OAAO,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE,8CAAgB,CAAC;IAEnD,qBACE,gBAAC,CAAA,GAAA,UAAK;QACH,GAAG,KAAK;QACT,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0BAAI;gBAAC,GAAG,WAAW;yBAAE;YAAO,GAAG,MAAM,MAAM;kBACtG,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAAmB;iBAAE;gBAC1C;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,QAAQ;oBACV;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F;AAEA,MAAM;;;;;;;;;;;;;;;;;;AA+BC,SAAS,0CAA0B,MAAsB;IAC9D,IAAI,WAAC,OAAO,cAAE,UAAU,gBAAE,YAAY,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE,8CAAgB,CAAC;IAC1F,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0BAAkB;IACzC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAA2B;IACtE,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IAExC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,YAAY,SAAS;YACvB,IAAI,MAA0B,WAAW,OAAO,CAAC,aAAa,CAAC;YAE/D,IAAI,OAAO,MACT,eAAe;QAEnB;IACF,GAAG;QAAC;QAAY,OAAO,cAAc;KAAI;IAEzC,qBACE,iBAAC;QACC,OAAO,OAAM,YAAY;QACzB,WAAW,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK;;;;;;;;UAAqD,MAAM,OAAM,MAAM;;YAClH,gBAAgB,4BACf,gBAAC;gBAAQ,cAAc;gBAAc,YAAY;gBAAY,aAAa;gBAAa,aAAa;gBAAa,SAAS;;0BAC5H,gBAAC,CAAA,GAAA,cAAS;gBACP,GAAG,MAAK;gBACT,KAAK;gBACL,WAAW,CAAA,cAAe,8BAAQ;wBAAC,GAAG,WAAW;iCAAE;oBAAO;;YAC3D,gBAAgB,8BACf,gBAAC;gBAAQ,cAAc;gBAAc,YAAY;gBAAY,aAAa;gBAAa,aAAa;gBAAa,SAAS;;;;AAGlI;AAEA,SAAS,wCAAqB,UAAsC,EAAE,YAAsB;IAC1F,IAAI,UAAsB;IAC1B,IAAI,cAAc,WAAW,IAAI,GAAG,GAAG;QACrC,UAAU,WAAW,WAAW;QAEhC,IAAI,QAAQ;QACZ,MAAO,WAAW,QAAQ,WAAW,IAAI,CAAE;YACzC,yHAAyH;YACzH,IAAI,CAAC,aAAa,GAAG,CAAC,YAAY,CAAC,WAAW,OAAO,CAAC,UAAU,OAAO,YACrE,OAAO;YAGT,UAAU,WAAW,WAAW,CAAC;YACjC;QACF;QACA,OAAO;IACT;IACA,OAAO;AACT;AAUA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AA+BN,SAAS,8BAAQ,KAAmB;IAClC,IAAI,gBACF,YAAY,EACZ,YAAY,cAAc,eAC1B,WAAW,eACX,WAAW,WACX,OAAO,EACR,GAAG;IACJ,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0BAAkB;IAEzC,+FAA+F;IAC/F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAW;IACpD,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,aAAa,kBAAkB,wCAAkB,OAAO,cAAc,MAAM,eAAe,IAAI,IAAI,gBAAgB,IAAI,IAAI;QAC/H,cAAc;IAChB,GAAG;QAAC,OAAO;QAAY;QAAc;QAAgB;KAAc;IAEnE,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAA0F;QACvH,WAAW;QACX,OAAO;QACP,QAAQ;IACV;IAEA,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QACzB,IAAI,aAAa;YACf,IAAI,WAAqG;gBACvG,WAAW;gBACX,OAAO;gBACP,QAAQ;YACV;YAEA,8JAA8J;YAC9J,IAAI,SAAS,cAAc,QAAQ,KAAM,CAAA,AAAC,YAAY,YAAY,EAAkB,cAAc,YAAY,WAAW,GAAG,YAAY,UAAU,AAAD,IAAK,YAAY,UAAU;YAC5K,SAAS,SAAS,GAAG,gBAAgB,aACjC,CAAC,WAAW,EAAE,YAAY,SAAS,CAAC,GAAG,CAAC,GACxC,CAAC,WAAW,EAAE,OAAO,GAAG,CAAC;YAE7B,IAAI,gBAAgB,cAClB,SAAS,KAAK,GAAG,GAAG,YAAY,WAAW,CAAC,EAAE,CAAC;iBAE/C,SAAS,MAAM,GAAG,GAAG,YAAY,YAAY,CAAC,EAAE,CAAC;YAEnD,SAAS;QACX;IACF,GAAG;QAAC;QAAW;QAAU;QAAa;KAAY;IAElD,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;QAAU,OAAO,cAAc;QAAK;QAAW;QAAa;KAAQ;IAExE,qBACE,gBAAC;QAAI,OAAO;YAAC,GAAG,KAAK;QAAA;QAAG,WAAW,wCAAkB;wBAAC;yBAAY;QAAW;;AAEjF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;AAeC,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,uBACV,UAAU,gBACV,YAAY,eACZ,cAAc,cACf,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,WAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,2BAAK;gBAAC,GAAG,WAAW;YAAA,GAAG,MAAM,MAAM;kBAC9F,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC;oBAAa;iCAAC;oCAAS;sCAAY;qCAAc;oBAAW;iBAAE;aAChE;sBACA,MAAM,QAAQ;;;AAIvB","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"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Tabs.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  TabListProps as AriaTabListProps,\n  TabPanel as AriaTabPanel,\n  TabPanelProps as AriaTabPanelProps,\n  TabProps as AriaTabProps,\n  TabsProps as AriaTabsProps,\n  ContextValue,\n  Group,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  Tabs as RACTabs,\n  TabListStateContext\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tabs. */\n  children: ReactNode,\n  /**\n   * The amount of space between the tabs.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular',\n  /**\n   * Defines if the text within the tabs should be hidden and only the icon should be shown.\n   * The text is always visible when the item is collapsed into a picker.\n   * @default 'show'\n   */\n  labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {\n  /** The content to display in the tab. */\n  children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {\n  /** The content to display in the tablist. */\n  children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the tab panels. */\n  children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps>>({});\nconst CollapseContext = createContext({\n  showTabs: true,\n  menuId: '',\n  valueId: ''\n});\n\nconst tabs = style({\n  position: 'relative',\n  display: 'flex',\n  flexShrink: 0,\n  font: 'ui',\n  flexDirection: {\n    orientation: {\n      horizontal: 'column'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\n/**\n * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n  let {\n    density = 'regular',\n    isDisabled,\n    disabledKeys,\n    orientation = 'horizontal',\n    labelBehavior = 'show'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n  if (!props['aria-label'] && !props['aria-labelledby']) {\n    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n  }\n\n  return (\n    <Provider\n      values={[\n        [InternalTabsContext, {\n          density,\n          isDisabled,\n          orientation,\n          disabledKeys,\n          selectedKey: value,\n          onSelectionChange: setValue,\n          labelBehavior,\n          'aria-label': props['aria-label'],\n          'aria-labelledby': props['aria-labelledby']\n        }]\n      ]}>\n      <CollectionBuilder content={props.children}>\n        {collection => (\n          <CollapsingTabs\n            {...props}\n            selectedKey={value}\n            onSelectionChange={setValue}\n            collection={collection}\n            containerRef={domRef} />\n        )}\n      </CollectionBuilder>\n    </Provider>\n  );\n});\n\nconst tablist = style({\n  display: 'flex',\n  gap: {\n    orientation: {\n      horizontal: {\n        density: {\n          compact: 24,\n          regular: 32\n        },\n        labelBehavior: {\n          hide: {\n            density: {\n              compact: 16,\n              regular: 24\n            }\n          }\n        }\n      }\n    }\n  },\n  flexDirection: {\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  paddingEnd: {\n    orientation: {\n      vertical: 20\n    }\n  },\n  paddingStart: {\n    orientation: {\n      vertical: 12\n    }\n  },\n  flexShrink: 0,\n  flexBasis: '[0%]'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>) {\n  let {showTabs} = useContext(CollapseContext) ?? {};\n\n  if (showTabs) {\n    return <TabListInner {...props} />;\n  }\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n  let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};\n  let state = useContext(TabListStateContext);\n  let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n  let tablistRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (tablistRef?.current) {\n      let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n      if (tab != null) {\n        setSelectedTab(tab);\n      }\n    }\n  }, [tablistRef, state?.selectedItem?.key]);\n\n  return (\n    <div\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n      {orientation === 'vertical' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n      <RACTabList\n        {...props}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        ref={tablistRef}\n        className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n      {orientation === 'horizontal' &&\n        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n    </div>\n  );\n}\n\ninterface TabLineProps {\n  disabledKeys: Iterable<Key> | undefined,\n  isDisabled: boolean | undefined,\n  selectedTab: HTMLElement | undefined,\n  orientation?: Orientation,\n  density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style({\n  position: 'absolute',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: {\n    orientation: {\n      horizontal: '[2px]'\n    }\n  },\n  width: {\n    orientation: {\n      vertical: '[2px]'\n    }\n  },\n  bottom: {\n    orientation: {\n      horizontal: 0\n    }\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine(props: TabLineProps) {\n  let {\n    disabledKeys,\n    isDisabled: isTabsDisabled,\n    selectedTab,\n    orientation,\n    density\n  } = props;\n  let {direction} = useLocale();\n  let state = useContext(TabListStateContext);\n\n  // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n  let [isDisabled, setIsDisabled] = useState<boolean>(false);\n  useEffect(() => {\n    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));\n    setIsDisabled(isDisabled);\n  }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n  let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n    transform: undefined,\n    width: undefined,\n    height: undefined\n  });\n\n  let onResize = useCallback(() => {\n    if (selectedTab) {\n      let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n        transform: undefined,\n        width: undefined,\n        height: undefined\n      };\n\n      // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes\n      let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n      styleObj.transform = orientation === 'vertical'\n        ? `translateY(${selectedTab.offsetTop}px)`\n        : `translateX(${offset}px)`;\n\n      if (orientation === 'horizontal') {\n        styleObj.width = `${selectedTab.offsetWidth}px`;\n      } else {\n        styleObj.height = `${selectedTab.offsetHeight}px`;\n      }\n      setStyle(styleObj);\n    }\n  }, [direction, setStyle, selectedTab, orientation]);\n\n  useLayoutEffect(() => {\n    onResize();\n  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);\n\n  return (\n    <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n  );\n}\n\nconst tab = style({\n  ...focusRing(),\n  display: 'flex',\n  color: {\n    default: 'neutral-subdued',\n    isSelected: 'neutral',\n    isHovered: 'neutral-subdued',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isSelected: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'sm',\n  gap: 'text-to-visual',\n  height: {\n    density: {\n      compact: 32,\n      regular: 48\n    }\n  },\n  alignItems: 'center',\n  position: 'relative',\n  cursor: 'default',\n  flexShrink: 0,\n  transition: 'default',\n  paddingX: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n  display: 'block',\n  flexShrink: 0,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tab(props: TabProps) {\n  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n  let contentId = useId();\n  let ariaLabelledBy = props['aria-labelledby'] || '';\n  return (\n    <RACTab\n      {...props}\n      // @ts-ignore\n      originalProps={props}\n      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>\n      {({\n          // @ts-ignore\n          isMenu\n        }) => {\n        if (isMenu) {\n          return props.children;\n        } else {\n          return (\n            <Provider\n              values={[\n                [TextContext, {\n                  id: contentId,\n                  styles:\n                    style({\n                      order: 1,\n                      display: {\n                        labelBehavior: {\n                          hide: 'none'\n                        }\n                      }\n                    })({labelBehavior})\n                }],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: icon\n                }]\n              ]}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </Provider>\n          );\n        }\n      }}\n    </RACTab>\n  );\n}\n\nconst tabPanel = style({\n  ...focusRing(),\n  marginTop: 4,\n  color: 'gray-800',\n  flexGrow: 1,\n  flexBasis: '[0%]',\n  minHeight: 0,\n  minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps) {\n  let {showTabs} = useContext(CollapseContext);\n  let {selectedKey} = useContext(InternalTabsContext);\n  if (showTabs) {\n    return (\n      <AriaTabPanel\n        {...props}\n        style={props.UNSAFE_style}\n        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n    );\n  }\n\n  if (props.id !== selectedKey) {\n    return null;\n  }\n\n  return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n  let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;\n  let {menuId, valueId} = useContext(CollapseContext);\n  let ref = useRef(null);\n  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n  return (\n    <Group\n      {...otherProps}\n      ref={ref}\n      aria-labelledby={menuId + ' ' + valueId}\n      tabIndex={tabIndex}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n  );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n  let testKey: Key | null = null;\n  if (collection && collection.size > 0) {\n    testKey = collection.getFirstKey();\n\n    let index = 0;\n    while (testKey && index < collection.size) {\n      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n        return false;\n      }\n\n      testKey = collection.getKeyAfter(testKey);\n      index++;\n    }\n    return true;\n  }\n  return false;\n}\n\nlet HiddenTabs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>,\n  items: Array<Node<any>>,\n  size?: string,\n  density?: 'compact' | 'regular'\n}) {\n  let {listRef, items, size, density} = props;\n\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: '[inherit]',\n        flexDirection: '[inherit]',\n        gap: '[inherit]',\n        flexWrap: '[inherit]',\n        position: 'absolute',\n        inset: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-tab\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, density})}>\n            {item.props.children({size, density})}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n  let state = useContext(TabListStateContext);\n  let allKeysDisabled = useMemo(() => {\n    return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n  }, [state?.collection, disabledKeys]);\n  let labelProps = useLabels({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  return (\n    <div\n      className={style({\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        height: {\n          density: {\n            compact: 32,\n            regular: 48\n          }\n        }})({density})}>\n      <Picker\n        id={id}\n        valueId={valueId}\n        {...labelProps}\n        aria-describedby={props['aria-describedby']}\n        aria-details={props['aria-details']}\n        isDisabled={isDisabled || allKeysDisabled}\n        density={density!}\n        labelBehavior={labelBehavior}\n        items={items}\n        disabledKeys={disabledKeys}\n        selectedKey={selectedKey}\n        onSelectionChange={onSelectionChange}>\n        {(item: Node<any>) => {\n          return (\n            <PickerItem\n              {...item.props.originalProps}\n              isDisabled={isDisabled || allKeysDisabled}\n              key={item.key}>\n              {item.props.children({density, isMenu: true})}\n            </PickerItem>\n          );\n        }}\n      </Picker>\n    </div>\n  );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;\n  let [showItems, _setShowItems] = useState(true);\n  showItems = orientation === 'vertical' ? true : showItems;\n  let setShowItems = useCallback((value: boolean) => {\n    if (orientation === 'vertical') {\n      // if orientation is vertical, we always show the items\n      _setShowItems(true);\n    } else {\n      _setShowItems(value);\n    }\n  }, [orientation]);\n\n  let {direction} = useLocale();\n\n  let children = useMemo(() => [...collection], [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useEffectEvent(() => {\n    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n      return;\n    }\n    let container = listRef.current;\n    let containerRect = container.getBoundingClientRect();\n    let tabs = container.querySelectorAll('[data-hidden-tab]');\n    let lastTab = tabs[tabs.length - 1];\n    let lastTabRect = lastTab.getBoundingClientRect();\n    if (direction === 'ltr') {\n      setShowItems?.(lastTabRect.right <= containerRect.right);\n    } else {\n      setShowItems?.(lastTabRect.left >= containerRect.left);\n    }\n  });\n\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  // start with null so that the first render won't have a flicker\n  let prevOrientation = useRef<Orientation | null>(null);\n  useLayoutEffect(() => {\n    if (collection.size > 0 && prevOrientation.current !== orientation) {\n      updateOverflow();\n    }\n    prevOrientation.current = orientation;\n  }, [collection.size, updateOverflow, orientation]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  let menuId = useId();\n  let valueId = useId();\n\n  let contents: ReactNode;\n  if (showItems) {\n    contents = (\n      <RACTabs\n        {...props}\n        style={{display: 'contents'}}>\n        {props.children}\n      </RACTabs>\n    );\n  } else {\n    contents = (\n      <>\n        <TabsMenu\n          id={menuId}\n          valueId={valueId}\n          items={children}\n          onSelectionChange={onSelectionChange}\n          aria-label={props['aria-label']}\n          aria-describedby={props['aria-labelledby']} />\n        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>\n          {props.children}\n        </CollapseContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n      <div className={tablist({orientation, labelBehavior, density})}>\n        <HiddenTabs items={children} density={density} listRef={listRef} />\n      </div>\n      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>\n        {contents}\n      </CollapseContext.Provider>\n    </div>\n  );\n};\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}

package/dist/TabsPicker.cjs

@@ -0,0 +1,415 @@
+require("./TabsPicker.css");
+var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
+var $e741ea6b88ce4866$exports = require("./Menu.cjs");
+var $dba2b18fc5727f9b$exports = require("./Checkmark.cjs");
+var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
+var $a0b996a550bb0891$exports = require("./Field.cjs");
+var $6367bc87eb7d24ad$exports = require("./Content.cjs");
+var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
+var $493371ef39bf7a55$exports = require("./Popover.cjs");
+var $2061c83559b50a66$exports = require("./pressScale.cjs");
+var $bfa4962d90c8af48$exports = require("./Form.cjs");
+var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
+var $7pV4n$reactjsxruntime = require("react/jsx-runtime");
+var $7pV4n$reactariacomponents = require("react-aria-components");
+var $7pV4n$react = require("react");
+var $7pV4n$reactspectrumutils = require("@react-spectrum/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Picker", () => $9d2c38978395d44a$export$ba25329847403e11);
+$parcel$export(module.exports, "PickerItem", () => $9d2c38978395d44a$export$d601881f38163e28);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $9d2c38978395d44a$export$b72b8dade9393cd5 = /*#__PURE__*/ (0, $7pV4n$react.createContext)(null);
+const $9d2c38978395d44a$var$inputButton = function anonymous(props) {
+    let rules = " .";
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
+    rules += ' da_____M';
+    rules += ' dx';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    rules += ' __b-g2ozi1';
+    rules += ' __c-g2ozi1';
+    rules += ' __d-g2ozi1';
+    rules += ' __e-g2ozi1';
+    if (props.size === "XL") rules += ' qj';
+    else if (props.size === "L") rules += ' qi';
+    else if (props.size === "S") rules += ' qh';
+    else if (props.size === "XS") rules += ' qg';
+    else rules += ' qf';
+    if (props.isQuiet) rules += ' __na';
+    else rules += ' __n-1s8glxue';
+    if (props.size === "XL") rules += ' -usygro_l-____g';
+    else if (props.size === "L") rules += ' -usygro_l-___0';
+    else if (props.size === "S") rules += ' -usygro_l-___u';
+    else rules += ' -usygro_l-___K';
+    rules += ' m-rwozxi';
+    rules += ' Vc';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
+    if (props.isDisabled) rules += ' aj';
+    else {
+        if (props.isPressed) rules += ' ao';
+        else if (props.isFocusVisible) rules += ' ao';
+        else if (props.isHovered) rules += ' ao';
+        else rules += ' an';
+    }
+    rules += ' _0d';
+    rules += ' _ka';
+    rules += ' wf';
+    rules += ' _wb';
+    rules += ' _xb';
+    rules += ' _yb';
+    rules += ' _zb';
+    rules += ' _2c';
+    rules += ' _Pa';
+    rules += ' _R-375x7f';
+    rules += ' _Sa';
+    rules += ' jbH';
+    rules += ' jG';
+    rules += ' C-375tnm';
+    rules += ' D-375tnn';
+    rules += ' ba';
+    if (props.isQuiet) rules += ' rd';
+    rules += ' __S-yksgrp';
+    if (props.density === "compact") rules += ' kU';
+    else rules += ' k_a';
+    rules += ' __oa';
+    rules += ' -_375tnm_C-a';
+    rules += ' -_375tnn_D-a';
+    return rules;
+};
+let $9d2c38978395d44a$export$b1e5508a851be14d = function anonymous(props) {
+    let rules = " .";
+    rules += ' _Ma';
+    rules += ' _0f';
+    rules += ' __i-n6rb9a';
+    rules += ' __oa';
+    rules += ' p-17zqamw';
+    rules += ' __wa';
+    rules += ' __xa';
+    rules += ' Ed';
+    rules += ' Fd';
+    rules += ' Cd';
+    rules += ' Dd';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    if (props.size === "XL") {
+        rules += ' _ebj';
+        rules += ' _ei';
+    } else if (props.size === "L") {
+        rules += ' _ebh';
+        rules += ' _eg';
+    } else if (props.size === "S") {
+        rules += ' _ebd';
+        rules += ' _ec';
+    } else if (props.size === "XS") {
+        rules += ' _ebb';
+        rules += ' _ea';
+    } else {
+        rules += ' _ebf';
+        rules += ' _ee';
+    }
+    return rules;
+};
+const $9d2c38978395d44a$var$valueStyles = " __a-3t1x __wb __xb _na _qb _0d _2c kb";
+const $9d2c38978395d44a$var$iconStyles = " _9-3t1x R-3hn0u -rwx0fg_e-b";
+const $9d2c38978395d44a$var$iconCenterWrapper = function anonymous(props) {
+    let rules = " .";
+    rules += ' _0d';
+    rules += ' __b-qb5q8i';
+    rules += ' __c-qb5q8i';
+    rules += ' __d-qb5q8i';
+    rules += ' __e-qb5q8i';
+    if (props.labelBehavior === "hide") rules += ' C-ve8p9e';
+    return rules;
+};
+let $9d2c38978395d44a$var$InsideSelectValueContext = /*#__PURE__*/ (0, $7pV4n$react.createContext)(false);
+function $9d2c38978395d44a$var$Picker(props1, ref) {
+    [props1, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props1, ref, $9d2c38978395d44a$export$b72b8dade9393cd5);
+    let domRef = (0, $7pV4n$reactspectrumutils.useFocusableRef)(ref);
+    props1 = (0, $bfa4962d90c8af48$exports.useFormProps)(props1);
+    let { direction: direction = 'bottom', align: align = 'start', shouldFlip: shouldFlip = true, children: children, items: items, density: density, labelBehavior: labelBehavior = 'show', valueId: valueId, ...pickerProps } = props1;
+    let isQuiet = true;
+    const menuOffset = 6;
+    const size = 'M';
+    let ariaLabelledby = props1['aria-labelledby'] ?? '';
+    return /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $7pV4n$reactariacomponents.Select), {
+                ...pickerProps,
+                "aria-labelledby": `${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`,
+                children: ({ isOpen: isOpen })=>/*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsxs)((0, $7pV4n$reactjsxruntime.Fragment), {
+                        children: [
+                            /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
+                                isQuiet: isQuiet
+                            }),
+                            /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsxs)((0, $7pV4n$reactariacomponents.Button), {
+                                ref: domRef,
+                                style: (renderProps)=>(0, $2061c83559b50a66$exports.pressScale)(domRef)(renderProps),
+                                // Prevent press scale from sticking while Picker is open.
+                                // @ts-ignore
+                                isPressed: false,
+                                className: (renderProps)=>$9d2c38978395d44a$var$inputButton({
+                                        ...renderProps,
+                                        size: 'M',
+                                        isOpen: isOpen,
+                                        isQuiet: isQuiet,
+                                        density: density
+                                    }),
+                                children: [
+                                    /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $7pV4n$reactariacomponents.SelectValue), {
+                                        className: $9d2c38978395d44a$var$valueStyles + ' ' + "-u6zm92",
+                                        children: ({ defaultChildren: defaultChildren })=>{
+                                            return /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $7pV4n$reactariacomponents.Provider), {
+                                                values: [
+                                                    [
+                                                        (0, $bde97c91243ed164$exports.IconContext),
+                                                        {
+                                                            slots: {
+                                                                icon: {
+                                                                    render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
+                                                                        slot: 'icon',
+                                                                        styles: $9d2c38978395d44a$var$iconCenterWrapper({
+                                                                            labelBehavior: labelBehavior
+                                                                        })
+                                                                    }),
+                                                                    styles: (0, $e741ea6b88ce4866$exports.icon)
+                                                                }
+                                                            }
+                                                        }
+                                                    ],
+                                                    [
+                                                        (0, $6367bc87eb7d24ad$exports.TextContext),
+                                                        {
+                                                            slots: {
+                                                                // Default slot is useful when converting other collections to PickerItems.
+                                                                [(0, $7pV4n$reactariacomponents.DEFAULT_SLOT)]: {
+                                                                    id: valueId,
+                                                                    styles: function anonymous(props) {
+                                                                        let rules = " .";
+                                                                        if (props.labelBehavior === "hide") rules += ' _0j';
+                                                                        else rules += ' _0a';
+                                                                        rules += ' __a-3t1y';
+                                                                        rules += ' __wb';
+                                                                        rules += ' __xb';
+                                                                        rules += ' _na';
+                                                                        rules += ' _qb';
+                                                                        return rules;
+                                                                    }({
+                                                                        labelBehavior: labelBehavior
+                                                                    })
+                                                                }
+                                                            }
+                                                        }
+                                                    ],
+                                                    [
+                                                        $9d2c38978395d44a$var$InsideSelectValueContext,
+                                                        true
+                                                    ]
+                                                ],
+                                                children: defaultChildren
+                                            });
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
+                                        size: size,
+                                        className: $9d2c38978395d44a$var$iconStyles
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $493371ef39bf7a55$exports.PopoverBase), {
+                                hideArrow: true,
+                                offset: menuOffset,
+                                placement: `${direction} ${align}`,
+                                shouldFlip: shouldFlip,
+                                styles: " y-375tp4 q___u l-13f72lm -_375tp4_y-M",
+                                children: /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $7pV4n$reactariacomponents.Provider), {
+                                    values: [
+                                        [
+                                            (0, $6367bc87eb7d24ad$exports.HeaderContext),
+                                            {
+                                                styles: (0, $e741ea6b88ce4866$exports.sectionHeader)({
+                                                    size: size
+                                                })
+                                            }
+                                        ],
+                                        [
+                                            (0, $6367bc87eb7d24ad$exports.HeadingContext),
+                                            {
+                                                styles: (0, $e741ea6b88ce4866$exports.sectionHeading)
+                                            }
+                                        ],
+                                        [
+                                            (0, $6367bc87eb7d24ad$exports.TextContext),
+                                            {
+                                                slots: {
+                                                    description: {
+                                                        styles: (0, $e741ea6b88ce4866$exports.description)({
+                                                            size: size
+                                                        })
+                                                    }
+                                                }
+                                            }
+                                        ]
+                                    ],
+                                    children: /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $7pV4n$reactariacomponents.ListBox), {
+                                        items: items,
+                                        className: $9d2c38978395d44a$export$b1e5508a851be14d,
+                                        children: children
+                                    })
+                                })
+                            })
+                        ]
+                    })
+            }),
+            /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)($9d2c38978395d44a$var$TabLine, {
+                isDisabled: props1.isDisabled
+            })
+        ]
+    });
+}
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */ let $9d2c38978395d44a$export$ba25329847403e11 = /*#__PURE__*/ (0, $7pV4n$react.forwardRef)($9d2c38978395d44a$var$Picker);
+const $9d2c38978395d44a$var$selectedIndicator = function anonymous(props) {
+    let rules = " .";
+    if (props.isDisabled) rules += ' ba_____O';
+    else rules += ' ba_____M';
+    if (props.isDisabled) rules += ' bg';
+    else {
+        if (props.isPressed) rules += ' bo';
+        else if (props.isFocusVisible) rules += ' bo';
+        else if (props.isHovered) rules += ' bo';
+        else rules += ' bn';
+    }
+    rules += ' k-375zlr';
+    rules += ' wf';
+    rules += ' _wf';
+    rules += ' _xf';
+    rules += ' _yf';
+    rules += ' _zf';
+    rules += ' A-yj8a3w';
+    rules += ' _R-375x5l';
+    rules += ' _Sa';
+    return rules;
+};
+function $9d2c38978395d44a$var$TabLine(props) {
+    return /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)("div", {
+        className: $9d2c38978395d44a$var$selectedIndicator(props)
+    });
+}
+function $9d2c38978395d44a$export$d601881f38163e28(props) {
+    let ref = (0, $7pV4n$react.useRef)(null);
+    let isLink = props.href != null;
+    const size = 'M';
+    return /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $7pV4n$reactariacomponents.ListBoxItem), {
+        ...props,
+        ref: ref,
+        textValue: props.textValue || (typeof props.children === 'string' ? props.children : undefined),
+        style: (0, $2061c83559b50a66$exports.pressScale)(ref, props.UNSAFE_style),
+        className: (renderProps)=>(props.UNSAFE_className || '') + (0, $e741ea6b88ce4866$exports.menuitem)({
+                ...renderProps,
+                size: size,
+                isLink: isLink
+            }, props.styles),
+        children: (renderProps)=>{
+            let { children: children } = props;
+            return /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)($9d2c38978395d44a$var$DefaultProvider, {
+                context: (0, $bde97c91243ed164$exports.IconContext),
+                value: {
+                    slots: {
+                        icon: {
+                            render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
+                                slot: 'icon',
+                                styles: $9d2c38978395d44a$var$iconCenterWrapper({})
+                            }),
+                            styles: (0, $e741ea6b88ce4866$exports.icon)
+                        }
+                    }
+                },
+                children: /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsxs)($9d2c38978395d44a$var$DefaultProvider, {
+                    context: (0, $6367bc87eb7d24ad$exports.TextContext),
+                    value: {
+                        slots: {
+                            [(0, $7pV4n$reactariacomponents.DEFAULT_SLOT)]: {
+                                styles: (0, $e741ea6b88ce4866$exports.label)({
+                                    size: size
+                                })
+                            }
+                        }
+                    },
+                    children: [
+                        !isLink && /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $dba2b18fc5727f9b$exports.default), {
+                            size: size,
+                            className: (0, $e741ea6b88ce4866$exports.checkmark)({
+                                ...renderProps,
+                                size: size
+                            })
+                        }),
+                        typeof children === 'string' ? /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
+                            children: children
+                        }) : children
+                    ]
+                })
+            });
+        }
+    });
+}
+// A Context.Provider that only sets a value if not inside SelectValue.
+function $9d2c38978395d44a$var$DefaultProvider({ context: context, value: value, children: children }) {
+    let inSelectValue = (0, $7pV4n$react.useContext)($9d2c38978395d44a$var$InsideSelectValueContext);
+    if (inSelectValue) return children;
+    return /*#__PURE__*/ (0, $7pV4n$reactjsxruntime.jsx)(context.Provider, {
+        value: value,
+        children: children
+    });
+}
+
+
+//# sourceMappingURL=TabsPicker.cjs.map

package/dist/TabsPicker.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TabsPicker.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 */\nimport {\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  Button,\n  ContextValue,\n  DEFAULT_SLOT,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SelectValue\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  icon,\n  label,\n  menuitem,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldLabel\n} from './Field';\nimport {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nexport interface PickerStyleProps {\n}\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,\n  PickerStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  Pick<ListBoxProps<T>, 'items'>,\n  Pick<AriaPopoverProps, 'shouldFlip'> {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the Picker.\n     *\n     * @default 'bottom'\n     */\n    direction?: 'bottom' | 'top',\n    /**\n     * Alignment of the menu relative to the input target.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'end',\n    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number,\n    /** Density of the tabs, affects the height of the picker. */\n    density: 'compact' | 'regular',\n    /**\n     * If the tab picker should only display icon and no text for the button label.\n     * @default 'show\n     */\n    labelBehavior?: 'show' | 'hide',\n    /** Id for the SelectedValue so we can label using it. */\n    valueId?: string\n}\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\nconst inputButton = style({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  position: 'relative',\n  font: 'ui',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: 'none',\n  borderRadius: 'sm',\n  alignItems: 'center',\n  transition: 'default',\n  columnGap: 'text-to-visual',\n  paddingX: 0,\n  backgroundColor: 'transparent',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true,\n  height: {\n    default: 48,\n    density: {\n      compact: 32\n    }\n  },\n  boxSizing: 'border-box'\n});\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control'\n});\nconst valueStyles = style({\n  flexGrow: 0,\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center',\n  height: 'full'\n});\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\nconst iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon',\n  paddingStart: {\n    labelBehavior: {\n      hide: size(6)\n    }\n  }\n});\nlet InsideSelectValueContext = createContext(false);\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    children,\n    items,\n    density,\n    labelBehavior = 'show',\n    valueId,\n    ...pickerProps\n  } = props;\n  let isQuiet = true;\n  const menuOffset: number = 6;\n  const size = 'M';\n  let ariaLabelledby = props['aria-labelledby'] ?? '';\n  return (\n    <div>\n      <AriaSelect\n        {...pickerProps}\n        aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>\n        {({isOpen}) => (\n          <>\n            <FieldLabel isQuiet={isQuiet} />\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              // Prevent press scale from sticking while Picker is open.\n              // @ts-ignore\n              isPressed={false}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: 'M',\n                isOpen,\n                isQuiet,\n                density\n              })}>\n              <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>\n                {({defaultChildren}) => {\n                  return (\n                    <Provider\n                      values={[\n                        [IconContext, {\n                          slots: {\n                            icon: {\n                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),\n                              styles: icon\n                            }\n                          }\n                        }],\n                        [TextContext, {\n                          slots: {\n                            // Default slot is useful when converting other collections to PickerItems.\n                            [DEFAULT_SLOT]: {\n                              id: valueId,\n                              styles: style({\n                                display: {\n                                  default: 'block',\n                                  labelBehavior: {\n                                    hide: 'none'\n                                  }\n                                },\n                                flexGrow: 1,\n                                truncate: true\n                              })({labelBehavior})\n                            }\n                          }\n                        }],\n                        [InsideSelectValueContext, true]\n                      ]}>\n                      {defaultChildren}\n                    </Provider>\n                  );\n                }}\n              </SelectValue>\n              <ChevronIcon\n                size={size}\n                className={iconStyles} />\n            </Button>\n            <PopoverBase\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              styles={style({\n                marginStart: -12,\n                minWidth: 192,\n                width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      description: {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </>\n        )}\n      </AriaSelect>\n      <TabLine isDisabled={props.isDisabled} />\n    </div>\n  );\n}\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\n\nconst selectedIndicator = style({\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  height: '[2px]',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  marginTop: '[-2px]',\n  transitionDuration: 130,\n  transitionTimingFunction: 'in-out'\n});\nfunction TabLine(props) {\n  return <div className={selectedIndicator(props)} />;\n}\n\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\nexport function PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  const size = 'M';\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{slots: {\n              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}\n            }}}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  [DEFAULT_SLOT]: {styles: label({size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text>{children}</Text> : children}\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n"],"names":[],"version":3,"file":"TabsPicker.cjs.map"}