@react-spectrum/s2/dist/TabsPicker.css.map

Spectrum 2 UI components in React

{"mappings":"AC0FoB;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;;;;EAkCF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAQO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDgC;;;;EAkBpB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BhB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArMN;EAAA;;;;EAkCF;;;;;AAlCE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAkCF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmKQ;EAAA;IAAA;;;;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","/*\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 {baseColor, edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};\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 {controlFont, 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: 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  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  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, {\n                    // @ts-ignore\n                    role: 'presentation',\n                    styles: sectionHeading\n                  }],\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<{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'>, 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"}