@react-spectrum/s2 3.0.0-nightly-5a0b4fabc-240924 → 3.0.0-nightly-a626c2596-240926

package/dist/Picker.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.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  PopoverProps as AriaPopoverProps,\n  Section as AriaSection,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps,\n  SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  Divider,\n  icon,\n  iconCenterWrapper,\n  label,\n  menuitem,\n  section,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldErrorIcon,\n  FieldLabel,\n  HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\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 {Popover} 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 {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   * @private\n   */\n  isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n  PickerStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\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}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  font: 'control',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: 'none',\n  borderRadius: 'control',\n  alignItems: 'center',\n  height: 'control',\n  transition: 'default',\n  columnGap: {\n    default: 'text-to-control',\n    isQuiet: 'text-to-visual'\n  },\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control'\n});\n\nconst invalidBorder = style({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderRadius: 'control',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: 'negative',\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\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  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    ...pickerProps\n  } = props;\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: size,\n                isOpen,\n                isQuiet\n              })}>\n              {(renderProps) => (\n                <>\n                  <SelectValue className={valueStyles({isQuiet}) + ' ' + 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                                description: {},\n                                label: {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                  {isInvalid && (\n                    <FieldErrorIcon isDisabled={isDisabled} />\n                  )}\n                  <ChevronIcon\n                    size={size}\n                    className={iconStyles} />\n                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n                  {isInvalid && !isDisabled && !isQuiet &&\n                    // @ts-ignore known limitation detecting functions from the theme\n                    <div className={invalidBorder({...renderProps, size})} />\n                  }\n                </>\n              )}\n            </Button>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Popover\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n              }}\n              styles={style({\n                marginStart: {\n                  isQuiet: -12\n                },\n                minWidth: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: 192\n                },\n                width: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n                }\n              })(props)}>\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({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </Popover>\n          </InternalPickerContext.Provider>\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\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\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                  label: {styles: label({size})},\n                  description: {styles: description({...renderProps, size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{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\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n  return (\n    <>\n      <AriaSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.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  PopoverProps as AriaPopoverProps,\n  Section as AriaSection,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps,\n  SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  Divider,\n  icon,\n  iconCenterWrapper,\n  label,\n  menuitem,\n  section,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldErrorIcon,\n  FieldLabel,\n  HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\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 {Popover} 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 {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   * @private\n   */\n  isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n  PickerStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\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}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  font: 'control',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: 'none',\n  borderRadius: 'control',\n  alignItems: 'center',\n  height: 'control',\n  transition: 'default',\n  columnGap: {\n    default: 'text-to-control',\n    isQuiet: 'text-to-visual'\n  },\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control'\n});\n\nconst invalidBorder = style({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderRadius: 'control',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: 'negative',\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\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  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    ...pickerProps\n  } = props;\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\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: size,\n                isOpen,\n                isQuiet\n              })}>\n              {(renderProps) => (\n                <>\n                  <SelectValue className={valueStyles({isQuiet}) + ' ' + 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                                description: {},\n                                label: {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                  {isInvalid && (\n                    <FieldErrorIcon isDisabled={isDisabled} />\n                  )}\n                  <ChevronIcon\n                    size={size}\n                    className={iconStyles} />\n                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n                  {isInvalid && !isDisabled && !isQuiet &&\n                    // @ts-ignore known limitation detecting functions from the theme\n                    <div className={invalidBorder({...renderProps, size})} />\n                  }\n                </>\n              )}\n            </Button>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Popover\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n              }}\n              styles={style({\n                marginStart: {\n                  isQuiet: -12\n                },\n                minWidth: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: 192\n                },\n                width: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n                }\n              })(props)}>\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({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </Popover>\n          </InternalPickerContext.Provider>\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\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\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                  label: {styles: label({size})},\n                  description: {styles: description({...renderProps, size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{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\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n  return (\n    <>\n      <AriaSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}

package/dist/Popover.cjs

@@ -97,6 +97,7 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     rules += ' _Ra';
     rules += ' __P-19n1ox2';
     rules += ' __Fa';
+    if (props.isExiting) rules += ' __Ba';
     return rules;
 };
 // TODO: animations and real Popover Arrow

package/dist/Popover.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Popover.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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Popover.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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.cjs.map"}

package/dist/Popover.css

@@ -222,6 +222,10 @@
     isolation: isolate;
   }
 
+  .__Ba {
+    pointer-events: none;
+  }
+
   ._Za {
     display: block;
   }

package/dist/Popover.css.map

@@ -1 +1 @@
-{"mappings":"ACwCsB;;;;;;;;;;AASG;;;;;;;;;;AASE;;;;;;;;;;AASC;;;;;;;;;;AASD;;;;;;;;;;AAUb;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;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;;;;EAwFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;AAxFE;;AAAA;EAAA;IAAA;;;;IAwFF;;;;;;AAAA","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n@import \"5d916373626af735\";\n@import \"b7be93ba2a203a5d\";\n@import \"4d2c1c572cefcb8e\";\n@import \"5a3650982696b8cb\";\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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.css.map"}
+{"mappings":"ACwCsB;;;;;;;;;;AASG;;;;;;;;;;AASE;;;;;;;;;;AASC;;;;;;;;;;AASD;;;;;;;;;;AAUb;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;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;;;;EA2FF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;AA3FE;;AAAA;EAAA;IAAA;;;;IA2FF;;;;;;AAAA","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n@import \"5d916373626af735\";\n@import \"b7be93ba2a203a5d\";\n@import \"4d2c1c572cefcb8e\";\n@import \"5a3650982696b8cb\";\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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.css.map"}

package/dist/Popover.mjs

@@ -91,6 +91,7 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     rules += ' _Ra';
     rules += ' __P-19n1ox2';
     rules += ' __Fa';
+    if (props.isExiting) rules += ' __Ba';
     return rules;
 };
 // TODO: animations and real Popover Arrow

package/dist/Popover.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Popover.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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Popover.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  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let popoverRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.mjs.map"}

package/dist/SegmentedControl.cjs

@@ -90,11 +90,13 @@ const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
     let $h = false;
     let $_9 = false;
     let $_8 = false;
+    let $q = false;
     for (let p of matches){
         if (/^\s*U/.test(p)) $U = true;
         if (/^\s*h/.test(p)) $h = true;
         if (/^\s*_9/.test(p)) $_9 = true;
         if (/^\s*_8/.test(p)) $_8 = true;
+        if (/^\s*q/.test(p)) $q = true;
     }
     if (!$U) rules += ' Uc';
     rules += ' _Zd';
@@ -125,6 +127,10 @@ const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
     if (!$h) rules += ' ha';
     if (!$_9) rules += ' _9-3t1y';
     if (!$_8) rules += ' _8-3t1x';
+    if (!$q) {
+        rules += ' qba';
+        rules += ' qa';
+    }
     rules += ' _2d';
     rules += ' _pb';
     rules += ' __R-yksgrp';
@@ -141,6 +147,8 @@ const $e33225559d5e019f$var$slider = function anonymous(props) {
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
+    if (props.isDisabled) rules += ' ba_____B';
+    else rules += ' ba_____z';
     rules += ' bd';
     rules += ' Ya';
     rules += ' l4';
@@ -152,6 +160,8 @@ const $e33225559d5e019f$var$slider = function anonymous(props) {
     rules += ' vc';
     rules += ' sc';
     rules += ' tc';
+    if (props.isDisabled) rules += ' ca_____B';
+    else rules += ' ca_____z';
     if (props.isDisabled) rules += ' ci';
     else rules += ' co';
     rules += ' _vd';
@@ -297,7 +307,7 @@ function $e33225559d5e019f$var$SegmentedControlItem(props, ref) {
                             style: (0, $2061c83559b50a66$exports.pressScale)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c",
+                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c qa qba",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
                                 children: props.children
                             }) : props.children

package/dist/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label': string\n}\nexport interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The content to display in the control item.\n   */\n  children: ReactNode\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: 'gray-25',\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled'\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultValue,\n    value\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (props.onChange) {\n      props.onChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.value === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.value);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props} \n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center'})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A control items represents an individual control within a segmented control.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A segmented control is a mutually exclusive group of buttons, with or without a track.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label': string\n}\nexport interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The content to display in the control item.\n   */\n  children: ReactNode\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultValue,\n    value\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (props.onChange) {\n      props.onChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.value === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.value);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props} \n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A control items represents an individual control within a segmented control.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A segmented control is a mutually exclusive group of buttons, with or without a track.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}

package/dist/SegmentedControl.css

@@ -244,6 +244,10 @@
   ._1c {
     align-items: center;
   }
+
+  .qa {
+    min-width: 0;
+  }
 }
 
 @layer _.b {
@@ -335,6 +339,10 @@
     .jbH {
       column-gap: .470588em;
     }
+
+    .qba {
+      min-width: 0;
+    }
   }
 }
 
@@ -355,6 +363,22 @@
     .da_____z {
       outline-color: highlight;
     }
+
+    .ba_____z {
+      background-color: highlight;
+    }
+
+    .ba_____B {
+      background-color: graytext;
+    }
+
+    .ca_____z {
+      border-color: highlight;
+    }
+
+    .ca_____B {
+      border-color: graytext;
+    }
   }
 }
 

package/dist/SegmentedControl.css.map

@@ -1 +1 @@
-{"mappings":"ACgDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+I+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9LxD;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;;AARK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAQL;;;;IAsL6D;;;;IAAA;;;;;;AAtL7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAkCL;;;;;;AAlCK;EAAA;IAAA;;;;IAAA;;;;;;AAkCL","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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 {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label': string\n}\nexport interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The content to display in the control item.\n   */\n  children: ReactNode\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: 'gray-25',\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled'\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultValue,\n    value\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (props.onChange) {\n      props.onChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.value === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.value);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props} \n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center'})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A control items represents an individual control within a segmented control.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A segmented control is a mutually exclusive group of buttons, with or without a track.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}
+{"mappings":"ACgDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyJ+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzMxD;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;;AARK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAQL;;;;IAiM6D;;;;IAAA;;;;IAAA;;;;;;AAjM7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAmCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAnCK;EAAA;IAAA;;;;IAAA;;;;;;AAmCL","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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 {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label': string\n}\nexport interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The content to display in the control item.\n   */\n  children: ReactNode\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultValue,\n    value\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (props.onChange) {\n      props.onChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.value === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.value);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props} \n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A control items represents an individual control within a segmented control.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A segmented control is a mutually exclusive group of buttons, with or without a track.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}

package/dist/SegmentedControl.mjs

@@ -82,11 +82,13 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
     let $h = false;
     let $_9 = false;
     let $_8 = false;
+    let $q = false;
     for (let p of matches){
         if (/^\s*U/.test(p)) $U = true;
         if (/^\s*h/.test(p)) $h = true;
         if (/^\s*_9/.test(p)) $_9 = true;
         if (/^\s*_8/.test(p)) $_8 = true;
+        if (/^\s*q/.test(p)) $q = true;
     }
     if (!$U) rules += ' Uc';
     rules += ' _Zd';
@@ -117,6 +119,10 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
     if (!$h) rules += ' ha';
     if (!$_9) rules += ' _9-3t1y';
     if (!$_8) rules += ' _8-3t1x';
+    if (!$q) {
+        rules += ' qba';
+        rules += ' qa';
+    }
     rules += ' _2d';
     rules += ' _pb';
     rules += ' __R-yksgrp';
@@ -133,6 +139,8 @@ const $c679c2152e03f8bf$var$slider = function anonymous(props) {
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
+    if (props.isDisabled) rules += ' ba_____B';
+    else rules += ' ba_____z';
     rules += ' bd';
     rules += ' Ya';
     rules += ' l4';
@@ -144,6 +152,8 @@ const $c679c2152e03f8bf$var$slider = function anonymous(props) {
     rules += ' vc';
     rules += ' sc';
     rules += ' tc';
+    if (props.isDisabled) rules += ' ca_____B';
+    else rules += ' ca_____z';
     if (props.isDisabled) rules += ' ci';
     else rules += ' co';
     rules += ' _vd';
@@ -289,7 +299,7 @@ function $c679c2152e03f8bf$var$SegmentedControlItem(props, ref) {
                             style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c",
+                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c qa qba",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
                                 children: props.children
                             }) : props.children

package/dist/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label': string\n}\nexport interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The content to display in the control item.\n   */\n  children: ReactNode\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: 'gray-25',\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled'\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultValue,\n    value\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (props.onChange) {\n      props.onChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.value === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.value);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props} \n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center'})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A control items represents an individual control within a segmented control.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A segmented control is a mutually exclusive group of buttons, with or without a track.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /**\n   * Defines a string value that labels the current element.\n   */\n  'aria-label': string\n}\nexport interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n  /**\n   * The content to display in the control item.\n   */\n  children: ReactNode\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultValue,\n    value\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (props.onChange) {\n      props.onChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.value === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.value);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props} \n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A control items represents an individual control within a segmented control.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A segmented control is a mutually exclusive group of buttons, with or without a track.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.mjs.map"}