@react-spectrum/s2 3.0.0-nightly-b0f156972-241202 → 3.0.0-nightly-e94e36431-241203

package/dist/TabsPicker.css

@@ -0,0 +1,416 @@
+@layer _.a {
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3t1z {
+    outline-offset: 2px;
+  }
+
+  .__a-4cfph1 {
+    grid-column-start: input;
+  }
+
+  .__b-4cfph1 {
+    grid-column-end: input;
+  }
+
+  .__c-4cfph1 {
+    grid-row-start: input;
+  }
+
+  .__d-4cfph1 {
+    grid-row-end: input;
+  }
+
+  .qf {
+    min-width: calc(2rem * var(--s2-scale));
+  }
+
+  .qg {
+    min-width: calc(1.25rem * var(--s2-scale));
+  }
+
+  .qh {
+    min-width: calc(1.5rem * var(--s2-scale));
+  }
+
+  .qi {
+    min-width: calc(2.5rem * var(--s2-scale));
+  }
+
+  .qj {
+    min-width: calc(3rem * var(--s2-scale));
+  }
+
+  .__ma {
+    contain: none;
+  }
+
+  .-usygro_l-___K {
+    --defaultWidth: calc(13rem * var(--s2-scale));
+  }
+
+  .-usygro_l-___u {
+    --defaultWidth: calc(12rem * var(--s2-scale));
+  }
+
+  .-usygro_l-___0 {
+    --defaultWidth: calc(14rem * var(--s2-scale));
+  }
+
+  .-usygro_l-____g {
+    --defaultWidth: calc(15rem * var(--s2-scale));
+  }
+
+  .m-rwozxi {
+    contain-intrinsic-width: calc(var(--defaultWidth)  - var(--C, 0px)  - var(--D, 0px)  - var(--s, 0px)  - var(--t, 0px));
+  }
+
+  .Uc {
+    position: relative;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  ._ja {
+    text-align: start;
+  }
+
+  .wf {
+    border-style: none;
+  }
+
+  ._vb {
+    border-start-start-radius: .25rem;
+  }
+
+  ._wb {
+    border-start-end-radius: .25rem;
+  }
+
+  ._xb {
+    border-end-start-radius: .25rem;
+  }
+
+  ._yb {
+    border-end-end-radius: .25rem;
+  }
+
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .jG {
+    column-gap: .428571em;
+  }
+
+  .C-375tnm {
+    padding-inline-start: var(--C);
+  }
+
+  .D-375tnn {
+    padding-inline-end: var(--D);
+  }
+
+  .ba {
+    background-color: #0000;
+  }
+
+  .rd {
+    max-width: max-content;
+  }
+
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .k_a {
+    height: calc(3rem * var(--s2-scale));
+  }
+
+  .kU {
+    height: calc(2rem * var(--s2-scale));
+  }
+
+  .-_375tnm_C-a {
+    --C: 0rem;
+  }
+
+  .-_375tnn_D-a {
+    --D: 0rem;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Zf {
+    display: grid;
+  }
+
+  .__h-1kgdida {
+    grid-template-columns: .75rem auto auto minmax(0, 1fr) auto auto auto .75rem;
+  }
+
+  .__na {
+    box-sizing: border-box;
+  }
+
+  .p-17zqamw {
+    max-height: inherit;
+  }
+
+  .__va {
+    overflow-x: auto;
+  }
+
+  .__wa {
+    overflow-y: auto;
+  }
+
+  .Ed {
+    padding-top: .5rem;
+  }
+
+  .Fd {
+    padding-bottom: .5rem;
+  }
+
+  .Cd {
+    padding-inline-start: .5rem;
+  }
+
+  .Dd {
+    padding-inline-end: .5rem;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._da {
+    font-size: .6875rem;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._9-3t1x {
+    flex-grow: 0;
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  .kb {
+    height: 100%;
+  }
+
+  ._8-3t1x {
+    flex-shrink: 0;
+  }
+
+  .R-3hn0u {
+    rotate: 90deg;
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  .-u6zm92 > * {
+    display: none;
+  }
+
+  ._Za {
+    display: block;
+  }
+
+  ._9-3t1y {
+    flex-grow: 1;
+  }
+
+  .__vb {
+    overflow-x: hidden;
+  }
+
+  .__wb {
+    overflow-y: hidden;
+  }
+
+  ._ma {
+    text-overflow: ellipsis;
+  }
+
+  ._pb {
+    white-space: nowrap;
+  }
+
+  .y-375tp4 {
+    margin-inline-start: var(--y);
+  }
+
+  .q___u {
+    min-width: calc(12rem * var(--s2-scale));
+  }
+
+  .l-13f72lm {
+    width: calc(var(--trigger-width)  + (-2 * var(--y)));
+  }
+
+  .-_375tp4_y-M {
+    --y: -.75rem;
+  }
+}
+
+@layer _.b {
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____z {
+      outline-color: highlight;
+    }
+  }
+}
+
+@layer _.b.-_1s8glxu {
+  @supports (contain-intrinsic-width: 1px) {
+    .__m-1s8glxue {
+      contain: inline-size;
+    }
+  }
+}
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .jbH {
+      column-gap: .470588em;
+    }
+
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=TabsPicker.css.map */

package/dist/TabsPicker.css.map

@@ -0,0 +1 @@
+{"mappings":"AC6FoB;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;;;;EAAA;;;;EAmCF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAmDqC;;;;EAgBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuB/B;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjJA;EAAA;;;;EAmCF;;;;;AAnCE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAmCF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","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","/*\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  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  iconCenterWrapper,\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, 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';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\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 {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\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\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(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: '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});\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});\n\nconst valueStyles = style({\n  flexGrow: 0,\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center',\n  height: 'full'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InsideSelectValueContext = createContext(false);\n\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\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    placeholder = stringFormatter.format('picker.placeholder'),\n    density,\n    ...pickerProps\n  } = props;\n  let isQuiet = true;\n\n  const menuOffset: number = 6;\n  const size = 'M';\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}>\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}),\n                            styles: icon\n                          }\n                        }\n                      }],\n                      [TextContext, {\n                        slots: {\n                          // Default slot is useful when converting other collections to PickerItems.\n                          [DEFAULT_SLOT]: {styles: style({\n                            display: 'block',\n                            flexGrow: 1,\n                            truncate: true\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  );\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\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\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\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\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n"],"names":[],"version":3,"file":"TabsPicker.css.map"}