@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/TabsPicker.css

@@ -1,285 +1,285 @@
 @layer _.a {
-  ._Lf13 {
+  ._Lf131 {
     outline-style: solid;
   }
 
-  .Oh13 {
+  .Oh131 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc13 {
+  ._Mc131 {
     outline-width: 2px;
   }
 
-  ._Kd13 {
+  ._Kd131 {
     outline-offset: 2px;
   }
 
-  .zXcEWr13 {
+  .zXcEWr131 {
     grid-column-start: input;
   }
 
-  .yXcEWr13 {
+  .yXcEWr131 {
     grid-column-end: input;
   }
 
-  .BXcEWr13 {
+  .BXcEWr131 {
     grid-row-start: input;
   }
 
-  .AXcEWr13 {
+  .AXcEWr131 {
     grid-row-end: input;
   }
 
-  .Nk13 {
+  .Nk131 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne13 {
+  .Ne131 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf13 {
+  .Nf131 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj13 {
+  .Nj131 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl13 {
+  .Nl131 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd13 {
+  ._qd131 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H13 {
+  .-Anxdcc-Z3fn9H131 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr13 {
+  .-Anxdcc-Zr131 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne13 {
+  .-Anxdcc-ZStdtne131 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt13 {
+  .-Anxdcc-Zt131 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb13 {
+  .__v6TNLWb131 {
     contain-intrinsic-width: calc(var(--defaultWidth) - var(--S, 0px) - var(--R, 0px) - var(--m, 0px) - var(--l, 0px));
   }
 
-  ._Pc13 {
+  ._Pc131 {
     position: relative;
   }
 
-  .xb13 {
+  .xb131 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa131 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd131 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .pt13 {
+  .pt131 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .po13 {
+  .po131 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .pp13 {
+  .pp131 {
     color: light-dark(#c6c6c6, #444);
   }
 
-  ._Wd13 {
+  ._Wd131 {
     text-align: start;
   }
 
-  .oa13 {
+  .oa131 {
     border-start-start-radius: .25rem;
   }
 
-  .na13 {
+  .na131 {
     border-start-end-radius: .25rem;
   }
 
-  .ka13 {
+  .ka131 {
     border-end-start-radius: .25rem;
   }
 
-  .ja13 {
+  .ja131 {
     border-end-end-radius: .25rem;
   }
 
-  .Yd13 {
+  .Yd131 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .Xb13 {
+  .Xb131 {
     transition-duration: .15s;
   }
 
-  .qc13 {
+  .qc131 {
     column-gap: .428571em;
   }
 
-  .SMBFGYc13 {
+  .SMBFGYc131 {
     padding-inline-start: var(--S);
   }
 
-  .RfBFGYc13 {
+  .RfBFGYc131 {
     padding-inline-end: var(--R);
   }
 
-  .g913 {
+  .g9131 {
     background-color: #0000;
   }
 
-  .Ln13 {
+  .Ln131 {
     max-width: max-content;
   }
 
-  .__ca13 {
+  .__ca131 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .Fz13 {
+  .Fz131 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .Fx13 {
+  .Fx131 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .-S_-Sd13 {
+  .-S_-Sd131 {
     --S: 0px;
   }
 
-  .-R_-Rd13 {
+  .-R_-Rd131 {
     --R: 0px;
   }
 
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 
-  .se13 {
+  .se131 {
     display: grid;
   }
 
-  .Deb5jcb13 {
+  .Deb5jcb131 {
     grid-template-columns: .75rem auto auto minmax(0, 1fr) auto auto auto .75rem;
   }
 
-  ._oa13 {
+  ._oa131 {
     box-sizing: border-box;
   }
 
-  .K40ub4c13 {
+  .K40ub4c131 {
     max-height: inherit;
   }
 
-  ._Na13 {
+  ._Na131 {
     overflow-x: auto;
   }
 
-  .Pa13 {
+  .Pa131 {
     overflow-y: auto;
   }
 
-  .Tt13 {
+  .Tt131 {
     padding-top: 8px;
   }
 
-  .Qt13 {
+  .Qt131 {
     padding-bottom: 8px;
   }
 
-  .St13 {
+  .St131 {
     padding-inline-start: 8px;
   }
 
-  .Rt13 {
+  .Rt131 {
     padding-inline-end: 8px;
   }
 
-  .uk13 {
+  .uk131 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c131 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a131 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b131 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d131 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e131 {
     --fs: pow(1.125, 2);
   }
 
-  .vx13 {
+  .vx131 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  ._ua13 {
+  ._ua131 {
     flex-grow: 0;
   }
 
-  .eb13 {
+  .eb131 {
     align-items: center;
   }
 
-  ._va13 {
+  ._va131 {
     flex-shrink: 0;
   }
 
-  ._Sd13 {
+  ._Sd131 {
     rotate: 90deg;
   }
 
-  .-_8sjo0b-t5ZbAob13 {
+  .-_8sjo0b-t5ZbAob131 {
     --iconPrimary: currentColor;
   }
 
-  .z2U5Crc13 {
+  .z2U5Crc131 {
     grid-column-start: icon;
   }
 
-  .y2U5Crc13 {
+  .y2U5Crc131 {
     grid-column-end: icon;
   }
 
-  .B2U5Crc13 {
+  .B2U5Crc131 {
     grid-row-start: icon;
   }
 
-  .A2U5Crc13 {
+  .A2U5Crc131 {
     grid-row-end: icon;
   }
 
-  .SssxDec13 {
+  .SssxDec131 {
     padding-inline-start: calc(.375rem * var(--s2-scale));
   }
 
@@ -289,162 +289,162 @@
     }
   }
 
-  .sb13 {
+  .sb131 {
     display: block;
   }
 
-  .sk13 {
+  .sk131 {
     display: none;
   }
 
-  ._ub13 {
+  ._ub131 {
     flex-grow: 1;
   }
 
-  ._Nc13 {
+  ._Nc131 {
     overflow-x: hidden;
   }
 
-  .Pc13 {
+  .Pc131 {
     overflow-y: hidden;
   }
 
-  ._Yb13 {
+  ._Yb131 {
     text-overflow: ellipsis;
   }
 
-  ._7c13 {
+  ._7c131 {
     white-space: nowrap;
   }
 
-  .Nh13 {
+  .Nh131 {
     min-width: calc(12rem * var(--s2-scale));
   }
 
-  .ZbWuche13 {
+  .ZbWuche131 {
     width: calc(var(--trigger-width) - 24);
   }
 
-  .sd13 {
+  .sd131 {
     display: flex;
   }
 
-  .Za13 {
+  .Za131 {
     width: 100%;
   }
 
-  .Fb13 {
+  .Fb131 {
     height: 100%;
   }
 
-  .g013 {
+  .g0131 {
     background-color: light-dark(#292929, #dbdbdb);
   }
 
-  .gH13 {
+  .gH131 {
     background-color: light-dark(#e9e9e9, #2c2c2c);
   }
 
-  .FLvNfn13 {
+  .FLvNfn131 {
     height: 2px;
   }
 
-  ._je13 {
+  ._je131 {
     border-style: none;
   }
 
-  .og13 {
+  .og131 {
     border-start-start-radius: 9999px;
   }
 
-  .ng13 {
+  .ng131 {
     border-start-end-radius: 9999px;
   }
 
-  .kg13 {
+  .kg131 {
     border-end-start-radius: 9999px;
   }
 
-  .jg13 {
+  .jg131 {
     border-end-end-radius: 9999px;
   }
 
-  .Jk7Otrc13 {
+  .Jk7Otrc131 {
     margin-top: -2px;
   }
 
-  .Xa13 {
+  .Xa131 {
     transition-duration: .13s;
   }
 
-  ._2b13 {
+  ._2b131 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 }
 
 @layer _.b {
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb131:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai131:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea131:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb131:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd131:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje131:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl131:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc13 {
+    .Olc131 {
       outline-color: highlight;
     }
 
-    .gle13 {
+    .gle131 {
       background-color: highlight;
     }
 
-    .gld13 {
+    .gld131 {
       background-color: graytext;
     }
   }
@@ -452,7 +452,7 @@
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb13 {
+    ._qtb131 {
       contain: inline-size;
     }
   }
@@ -460,7 +460,7 @@
 
 @layer _.b.s {
   @media not ((hover: hover) and (pointer: fine)) {
-    .qsd13 {
+    .qsd131 {
       column-gap: .470588em;
     }
   }

package/dist/private/TabsPicker.css.map

@@ -1 +1 @@
-{"mappings":"ACoFoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkCF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYE;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAQO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsDgC;IAAA;;;;;EAkBpB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BhB;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAAA;;;;EAwCD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhNN;EAAA;;;;EAkCF;;;;;AAlCE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAgNM;;;;IAAA;;;;;;AAhNN;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA","sources":["abc7c61fd7ad618f","packages/@react-spectrum/s2/src/TabsPicker.tsx"],"sourcesContent":["@import \"b8fdcb8ccc776f53\";\n@import \"dcd883b3c8357572\";\n@import \"d5ec52da6ab778b1\";\n@import \"081608ef106e269e\";\n@import \"adbdb624431721fa\";\n@import \"03bd912125a89e81\";\n@import \"9581efae4a323524\";\n@import \"809cfbcd16a993af\";\n@import \"01c6d08aaf920097\";\n@import \"5bf76525c7e5a362\";\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 */\nimport {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';\n\nimport {Select as AriaSelect, SelectProps as AriaSelectProps, SelectValue} from 'react-aria-components/Select';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {Button} from 'react-aria-components/Button';\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 {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {controlFont, fieldInput, StyleProps} from './style-utils' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {edgeToText} from '../style/spectrum-theme' 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 {ListBox, ListBoxItem, ListBoxItemProps, ListBoxProps} from 'react-aria-components/ListBox';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nexport interface PickerStyleProps {\n}\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | '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: baseColor('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  width: 'full',\n  maxHeight: 'inherit',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: controlFont()\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  let {direction: dir} = useLocale();\n  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n  return (\n    <div>\n      <AriaSelect\n        {...pickerProps}\n        className=\"\"\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 + ' ' + css('&> * {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            <Popover\n              hideArrow\n              offset={menuOffset}\n              crossOffset={RTLFlipOffset * -12}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              styles={style({\n                minWidth: 192,\n                width: 'calc(var(--trigger-width) - 24)'\n              })}>\n              <div\n                className={style({\n                  display: 'flex',\n                  size: 'full'\n                })}>\n                <Provider\n                  values={[\n                    [HeaderContext, {styles: sectionHeader({size})}],\n                    [HeadingContext, {\n                      // @ts-ignore\n                      role: 'presentation',\n                      styles: sectionHeading\n                    }],\n                    [TextContext, {\n                      slots: {\n                        'description': {styles: description({size, isFocused: false, isDisabled: false})}\n                      }\n                    }]\n                  ]}>\n                  <ListBox\n                    items={items}\n                    className={menu}>\n                    {children}\n                  </ListBox>\n                </Provider>\n              </div>\n            </Popover>\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<{isDisabled?: boolean}>({\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: {isDisabled?: boolean}) {\n  return <div className={selectedIndicator(props)} />;\n}\n\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render'>, StyleProps {\n  children: ReactNode\n}\nexport function PickerItem(props: PickerItemProps): ReactNode {\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.css.map"}
+{"mappings":"ACqFoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkCF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBE;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAQO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwDgC;IAAA;;;;;EA0BlB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BlB;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAAA;;;;EA8CD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxON;EAAA;;;;EAkCF;;;;;AAlCE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAwOM;;;;IAAA;;;;;;AAxON;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA","sources":["abc7c61fd7ad618f","packages/@react-spectrum/s2/src/TabsPicker.tsx"],"sourcesContent":["@import \"b8fdcb8ccc776f53\";\n@import \"dcd883b3c8357572\";\n@import \"d5ec52da6ab778b1\";\n@import \"081608ef106e269e\";\n@import \"adbdb624431721fa\";\n@import \"03bd912125a89e81\";\n@import \"9581efae4a323524\";\n@import \"809cfbcd16a993af\";\n@import \"01c6d08aaf920097\";\n@import \"5bf76525c7e5a362\";\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 */\nimport {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';\n\nimport {\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectValue\n} from 'react-aria-components/Select';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {Button} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {checkmark, description, icon, label, menuitem, sectionHeader, sectionHeading} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {controlFont, fieldInput, StyleProps} from './style-utils' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {FieldLabel} 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 {ListBox, ListBoxItem, ListBoxItemProps, ListBoxProps} from 'react-aria-components/ListBox';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nexport interface PickerStyleProps {}\nexport interface PickerProps<T>\n  extends\n    Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | '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  /**\n   * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n   * dropdown is always equal to the trigger's width.\n   */\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   *\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 =\n  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\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: baseColor('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: [\n    edgeToText(32),\n    'auto',\n    'auto',\n    'minmax(0, 1fr)',\n    'auto',\n    'auto',\n    'auto',\n    edgeToText(32)\n  ],\n  boxSizing: 'border-box',\n  width: 'full',\n  maxHeight: 'inherit',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: controlFont()\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>(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  let {direction: dir} = useLocale();\n  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n  return (\n    <div>\n      <AriaSelect\n        {...pickerProps}\n        className=\"\"\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 =>\n                inputButton({\n                  ...renderProps,\n                  size: 'M',\n                  isOpen,\n                  isQuiet,\n                  density\n                })\n              }>\n              <SelectValue className={valueStyles + ' ' + css('&> * {display: none;}')}>\n                {({defaultChildren}) => {\n                  return (\n                    <Provider\n                      values={[\n                        [\n                          IconContext,\n                          {\n                            slots: {\n                              icon: {\n                                render: centerBaseline({\n                                  slot: 'icon',\n                                  styles: iconCenterWrapper({labelBehavior})\n                                }),\n                                styles: icon\n                              }\n                            }\n                          }\n                        ],\n                        [\n                          TextContext,\n                          {\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                        ],\n                        [InsideSelectValueContext, true]\n                      ]}>\n                      {defaultChildren}\n                    </Provider>\n                  );\n                }}\n              </SelectValue>\n              <ChevronIcon size={size} className={iconStyles} />\n            </Button>\n            <Popover\n              hideArrow\n              offset={menuOffset}\n              crossOffset={RTLFlipOffset * -12}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              styles={style({\n                minWidth: 192,\n                width: 'calc(var(--trigger-width) - 24)'\n              })}>\n              <div\n                className={style({\n                  display: 'flex',\n                  size: 'full'\n                })}>\n                <Provider\n                  values={[\n                    [HeaderContext, {styles: sectionHeader({size})}],\n                    [\n                      HeadingContext,\n                      {\n                        // @ts-ignore\n                        role: 'presentation',\n                        styles: sectionHeading\n                      }\n                    ],\n                    [\n                      TextContext,\n                      {\n                        slots: {\n                          description: {\n                            styles: description({size, isFocused: false, isDisabled: false})\n                          }\n                        }\n                      }\n                    ]\n                  ]}>\n                  <ListBox items={items} className={menu}>\n                    {children}\n                  </ListBox>\n                </Provider>\n              </div>\n            </Popover>\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\n * limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\nconst selectedIndicator = style<{isDisabled?: boolean}>({\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: {isDisabled?: boolean}) {\n  return <div className={selectedIndicator(props)} />;\n}\n\nexport interface PickerItemProps\n  extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render'>, StyleProps {\n  children: ReactNode;\n}\nexport function PickerItem(props: PickerItemProps): ReactNode {\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={\n        props.textValue ||\n        (typeof props.children === 'string' ? (props.children as string) : undefined)\n      }\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)\n      }>\n      {renderProps => {\n        let {children} = props;\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{\n              slots: {\n                icon: {\n                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}),\n                  styles: icon\n                }\n              }\n            }}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  [DEFAULT_SLOT]: {styles: label({size})}\n                }\n              }}>\n              {!isLink && (\n                <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />\n              )}\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({\n  context,\n  value,\n  children\n}: {\n  context: React.Context<any>;\n  value: any;\n  children: any;\n}) {\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.css.map"}