@react-spectrum/s2 3.0.0-nightly-2e9061df6-250424 → 3.0.0-nightly-63d4359d6-250426

package/dist/ComboBox.css.map

@@ -1 +1 @@
-{"mappings":"ACiGoB;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;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' 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 {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\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\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\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    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                // Prevent press scale from sticking while ComboBox is open.\n                // @ts-ignore\n                isPressed={false}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\n\n\nexport interface ComboBoxItemProps 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 ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\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          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
+{"mappings":"ACkGoB;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;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' 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 {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\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\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\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    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                // Prevent press scale from sticking while ComboBox is open.\n                // @ts-ignore\n                isPressed={false}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\n\n\nexport interface ComboBoxItemProps 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 ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\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          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}

package/dist/ComboBox.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' 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 {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\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\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\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    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                // Prevent press scale from sticking while ComboBox is open.\n                // @ts-ignore\n                isPressed={false}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\n\n\nexport interface ComboBoxItemProps 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 ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\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          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' 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 {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\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\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\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    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                // Prevent press scale from sticking while ComboBox is open.\n                // @ts-ignore\n                isPressed={false}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\n\n\nexport interface ComboBoxItemProps 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 ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\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          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}

package/dist/Menu.cjs

@@ -502,6 +502,8 @@ let $e741ea6b88ce4866$var$keyboard = function anonymous(props) {
     if (props.isDisabled) rules += ' aa_____O';
     if (props.isDisabled) rules += ' aj';
     else rules += ' al';
+    rules += ' bd';
+    rules += ' __Tf';
     return rules;
 };
 let $e741ea6b88ce4866$var$descriptor = " __b-zax38o __c-zax38o __d-zax38o __e-zax38o yd -rwx0fg_e-b";

package/dist/Menu.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.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  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  MenuSection as AriaMenuSection,\n  MenuSectionProps as AriaMenuSectionProps,\n  MenuTrigger as AriaMenuTrigger,\n  MenuTriggerProps as AriaMenuTriggerProps,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  SubmenuTriggerProps as AriaSubmenuTriggerProps,\n  ContextValue,\n  DEFAULT_SLOT,\n  Provider,\n  Separator,\n  SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n  /**\n   * Alignment of the menu relative to the trigger.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end',\n  /**\n   * Where the Menu opens relative to its trigger.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n  /**\n   * The size of the Menu.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The contents of the collection.\n   */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Hides the default link out icons on menu items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\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} as const;\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  width: 'full',\n  overflow: {\n    isPopover: 'auto'\n  },\n  maxWidth: {\n    isPopover: 320\n  },\n  padding: {\n    isPopover: 8\n  },\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'center',\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: 'border-box',\n  minHeight: 'control',\n  paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n  font: 'ui',\n  fontWeight: 'bold',\n  margin: 0\n});\n\nexport let menuitem = style({\n  ...focusRing(),\n  boxSizing: 'border-box',\n  borderRadius: 'control',\n  font: 'control',\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  paddingBottom: '--labelPadding',\n  backgroundColor: { // TODO: revisit color when I have access to dev mode again\n    default: {\n      default: 'transparent',\n      isFocused: baseColor('gray-100').isFocusVisible\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  // each menu item should take up the entire width, the subgrid will handle within the item\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: 'subgrid',\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: 'control',\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n  visibility: {\n    default: 'hidden',\n    isSelected: 'visible'\n  },\n  gridArea: 'checkmark',\n  color: 'accent',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'currentColor',\n      forcedColors: 'Highlight'\n    }\n  },\n  marginEnd: 'text-to-control',\n  aspectRatio: 'square'\n});\n\nlet checkbox = style({\n  gridArea: 'checkmark',\n  marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  marginTop: fontRelative(6), // made up, need feedback\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  size: {\n    default: 40,\n    size: {\n      S: 32,\n      M: 40,\n      L: 44,\n      XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n    }\n  },\n  aspectRatio: 'square',\n  objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n  gridArea: 'label',\n  font: 'control',\n  color: '[inherit]',\n  fontWeight: 'medium',\n  // TODO: token values for padding not defined yet, revisit\n  marginTop: '--labelPadding'\n});\n\nexport let description = style({\n  gridArea: 'description',\n  font: {\n    default: 'ui-sm',\n    size: {\n      S: 'ui-xs',\n      M: 'ui-sm',\n      L: 'ui',\n      XL: 'ui-lg'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    // Ideally this would use the same token as hover, but we don't have access to that here.\n    // TODO: should we always consider isHovered and isFocused to be the same thing?\n    isFocused: 'gray-800',\n    isDisabled: 'disabled'\n  },\n  transition: 'default'\n});\n\nlet value = style({\n  gridArea: 'value',\n  marginStart: 8\n});\n\nlet keyboard = style({\n  gridArea: 'keyboard',\n  marginStart: 8,\n  font: 'ui',\n  fontWeight: 'light',\n  color: {\n    default: 'gray-600',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  background: 'gray-25',\n  unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n  gridArea: 'descriptor',\n  marginStart: 8,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n  size: 'M',\n  isSubmenu: false,\n  hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n  let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n  let {\n    children,\n    size = ctxSize,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    hideLinkOutIcon = false\n  } = props;\n  let ctx = useContext(InternalMenuTriggerContext);\n  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n  // TODO: change offset/crossoffset based on size? scale?\n  // actual values?\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n  if (isSubmenu) {\n    initialPlacement = 'end top' as Placement;\n  }\n\n  let content = (\n    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\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        <AriaMenu\n          {...props}\n          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n          {children}\n        </AriaMenu>\n      </Provider>\n    </InternalMenuContext.Provider>\n  );\n\n  if (ctx || isSubmenu) {\n    return (\n      <PopoverBase\n        ref={ref}\n        hideArrow\n        placement={initialPlacement}\n        shouldFlip={shouldFlip}\n        // For submenus, the offset from the edge of the popover should be 10px.\n        // Subtract 8px for the padding around the parent menu.\n        offset={isSubmenu ? -2 : 8}\n        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n        crossOffset={isSubmenu ? -9 : 0}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}>\n        {content}\n      </PopoverBase>\n    );\n  }\n\n  return content;\n});\n\nexport function Divider(props: SeparatorProps): ReactNode {\n  return (\n    <Separator\n      {...props}\n      className={mergeStyles(\n        divider({\n          size: 'M',\n          orientation: 'horizontal',\n          isStaticColor: false\n        }), style({\n          display: {\n            default: 'grid',\n            ':last-child': 'none'\n          },\n          gridColumnStart: 2,\n          gridColumnEnd: -2,\n          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n        })\n      )} />\n  );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {\n  // remember, context doesn't work if it's around Section nor inside\n  let {size} = useContext(InternalMenuContext);\n  return (\n    <>\n      <AriaMenuSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaMenuSection>\n      <Divider />\n    </>\n  );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n  S: 'M',\n  M: 'L',\n  L: 'XL',\n  XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  return (\n    <AriaMenuItem\n      {...props}\n      textValue={textValue}\n      ref={ref}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})},\n                    value: {styles: value}\n                  }\n                }],\n                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n                [ImageContext, {styles: image({size})}]\n              ]}>\n              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                  <CheckmarkIcon size={size} className={iconStyles} />\n                </div>\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <LinkOutIcon\n                    size={linkIconSize[size]}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n              {renderProps.hasSubmenu && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <ChevronRightIcon\n                    size={size}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n            </Provider>\n          </>\n        );\n      }}\n    </AriaMenuItem>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps): ReactNode {\n  // RAC sets isPressed via PressResponder when the menu is open.\n  // We don't want press scaling to appear to get \"stuck\", so override this.\n  // For mouse interactions, menus open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(document, 'pointerup', () => {\n      setPressed(false);\n    }, {once: true, capture: true});\n  };\n\n  return (\n    <InternalMenuTriggerContext.Provider\n      value={{\n        align: props.align,\n        direction: props.direction,\n        shouldFlip: props.shouldFlip\n      }}>\n      <AriaMenuTrigger {...props}>\n        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n          {props.children}\n        </PressResponder>\n      </AriaMenuTrigger>\n    </InternalMenuTriggerContext.Provider>\n  );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.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  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  MenuSection as AriaMenuSection,\n  MenuSectionProps as AriaMenuSectionProps,\n  MenuTrigger as AriaMenuTrigger,\n  MenuTriggerProps as AriaMenuTriggerProps,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  SubmenuTriggerProps as AriaSubmenuTriggerProps,\n  ContextValue,\n  DEFAULT_SLOT,\n  MenuItemRenderProps,\n  Provider,\n  Separator,\n  SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n  /**\n   * Alignment of the menu relative to the trigger.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end',\n  /**\n   * Where the Menu opens relative to its trigger.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n  /**\n   * The size of the Menu.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The contents of the collection.\n   */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Hides the default link out icons on menu items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\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} as const;\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  width: 'full',\n  overflow: {\n    isPopover: 'auto'\n  },\n  maxWidth: {\n    isPopover: 320\n  },\n  padding: {\n    isPopover: 8\n  },\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'center',\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: 'border-box',\n  minHeight: 'control',\n  paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n  font: 'ui',\n  fontWeight: 'bold',\n  margin: 0\n});\n\nexport let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({\n  ...focusRing(),\n  boxSizing: 'border-box',\n  borderRadius: 'control',\n  font: 'control',\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  paddingBottom: '--labelPadding',\n  backgroundColor: { // TODO: revisit color when I have access to dev mode again\n    default: {\n      default: 'transparent',\n      isFocused: baseColor('gray-100').isFocusVisible\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  // each menu item should take up the entire width, the subgrid will handle within the item\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: 'subgrid',\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: 'control',\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n  visibility: {\n    default: 'hidden',\n    isSelected: 'visible'\n  },\n  gridArea: 'checkmark',\n  color: 'accent',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'currentColor',\n      forcedColors: 'Highlight'\n    }\n  },\n  marginEnd: 'text-to-control',\n  aspectRatio: 'square'\n});\n\nlet checkbox = style({\n  gridArea: 'checkmark',\n  marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  marginTop: fontRelative(6), // made up, need feedback\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  size: {\n    default: 40,\n    size: {\n      S: 32,\n      M: 40,\n      L: 44,\n      XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n    }\n  },\n  aspectRatio: 'square',\n  objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n  gridArea: 'label',\n  font: 'control',\n  color: '[inherit]',\n  fontWeight: 'medium',\n  // TODO: token values for padding not defined yet, revisit\n  marginTop: '--labelPadding'\n});\n\nexport let description = style({\n  gridArea: 'description',\n  font: {\n    default: 'ui-sm',\n    size: {\n      S: 'ui-xs',\n      M: 'ui-sm',\n      L: 'ui',\n      XL: 'ui-lg'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    // Ideally this would use the same token as hover, but we don't have access to that here.\n    // TODO: should we always consider isHovered and isFocused to be the same thing?\n    isFocused: 'gray-800',\n    isDisabled: 'disabled'\n  },\n  transition: 'default'\n});\n\nlet value = style({\n  gridArea: 'value',\n  marginStart: 8\n});\n\nlet keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({\n  gridArea: 'keyboard',\n  marginStart: 8,\n  font: 'ui',\n  fontWeight: 'light',\n  color: {\n    default: 'gray-600',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n  gridArea: 'descriptor',\n  marginStart: 8,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n  size: 'M',\n  isSubmenu: false,\n  hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n  let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n  let {\n    children,\n    size = ctxSize,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    hideLinkOutIcon = false\n  } = props;\n  let ctx = useContext(InternalMenuTriggerContext);\n  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n  // TODO: change offset/crossoffset based on size? scale?\n  // actual values?\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n  if (isSubmenu) {\n    initialPlacement = 'end top' as Placement;\n  }\n\n  let content = (\n    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\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        <AriaMenu\n          {...props}\n          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n          {children}\n        </AriaMenu>\n      </Provider>\n    </InternalMenuContext.Provider>\n  );\n\n  if (ctx || isSubmenu) {\n    return (\n      <PopoverBase\n        ref={ref}\n        hideArrow\n        placement={initialPlacement}\n        shouldFlip={shouldFlip}\n        // For submenus, the offset from the edge of the popover should be 10px.\n        // Subtract 8px for the padding around the parent menu.\n        offset={isSubmenu ? -2 : 8}\n        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n        crossOffset={isSubmenu ? -9 : 0}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}>\n        {content}\n      </PopoverBase>\n    );\n  }\n\n  return content;\n});\n\nexport function Divider(props: SeparatorProps): ReactNode {\n  return (\n    <Separator\n      {...props}\n      className={mergeStyles(\n        divider({\n          size: 'M',\n          orientation: 'horizontal',\n          isStaticColor: false\n        }), style({\n          display: {\n            default: 'grid',\n            ':last-child': 'none'\n          },\n          gridColumnStart: 2,\n          gridColumnEnd: -2,\n          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n        })\n      )} />\n  );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {\n  // remember, context doesn't work if it's around Section nor inside\n  let {size} = useContext(InternalMenuContext);\n  return (\n    <>\n      <AriaMenuSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaMenuSection>\n      <Divider />\n    </>\n  );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n  S: 'M',\n  M: 'L',\n  L: 'XL',\n  XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  return (\n    <AriaMenuItem\n      {...props}\n      textValue={textValue}\n      ref={ref}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})},\n                    value: {styles: value}\n                  }\n                }],\n                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n                [ImageContext, {styles: image({size})}]\n              ]}>\n              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                  <CheckmarkIcon size={size} className={iconStyles} />\n                </div>\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <LinkOutIcon\n                    size={linkIconSize[size]}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n              {renderProps.hasSubmenu && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <ChevronRightIcon\n                    size={size}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n            </Provider>\n          </>\n        );\n      }}\n    </AriaMenuItem>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps): ReactNode {\n  // RAC sets isPressed via PressResponder when the menu is open.\n  // We don't want press scaling to appear to get \"stuck\", so override this.\n  // For mouse interactions, menus open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(document, 'pointerup', () => {\n      setPressed(false);\n    }, {once: true, capture: true});\n  };\n\n  return (\n    <InternalMenuTriggerContext.Provider\n      value={{\n        align: props.align,\n        direction: props.direction,\n        shouldFlip: props.shouldFlip\n      }}>\n      <AriaMenuTrigger {...props}>\n        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n          {props.children}\n        </PressResponder>\n      </AriaMenuTrigger>\n    </InternalMenuTriggerContext.Provider>\n  );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.cjs.map"}

package/dist/Menu.css

@@ -518,6 +518,14 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
+  .bd {
+    background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  }
+
+  .__Tf {
+    unicode-bidi: plaintext;
+  }
+
   .__b-zax38o {
     grid-column-start: descriptor;
   }

package/dist/Menu.css.map

@@ -1 +1 @@
-{"mappings":"ACoGkB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYM;;;;EAAA;;;;EASC;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMN;;;;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;;;;EAoDC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBR;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKG;;;;EAAA;;;;EAAA;;;;EAYa;;;;EAAA;;;;EAKnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EASM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0GL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmGmB;;;;;;;AAhab;EAgDI;;;;EAAA;;;;EAmJP;;;;EAAA;;;;EA0HH;;;;;AA7TM;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2HA;;;;IAqCC;;;;IASM;;;;IAAA;;;;IAAA;;;;IA0BV;;;;;;AAnJO;EAAA;IAAA;;;;IAoDC;;;;IA+FR","sources":["7c22b67265d3212e","packages/@react-spectrum/s2/src/Menu.tsx"],"sourcesContent":["@import \"dc7300f7a31f6746\";\n@import \"ba4f3709c47b6f32\";\n@import \"188776d578edc2d4\";\n@import \"7542e2c368e43074\";\n@import \"a0ece4d15d51b6d1\";\n@import \"9190ed57f0ec543d\";\n@import \"7ea87ac6ab45824a\";\n@import \"8dd2ed15af634baa\";\n@import \"e1b788d5c243c1be\";\n@import \"227155bda7dda199\";\n@import \"9349097043636fe6\";\n@import \"329bb28fb4b64255\";\n@import \"fa4d0c98959eb626\";\n@import \"7ed629d8804e69a8\";\n@import \"c7f5b0af4e97a693\";\n@import \"04aee1e7a62e8b5b\";\n@import \"ddf352cdf38358b0\";\n@import \"eadd63f065c26a67\";\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  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  MenuSection as AriaMenuSection,\n  MenuSectionProps as AriaMenuSectionProps,\n  MenuTrigger as AriaMenuTrigger,\n  MenuTriggerProps as AriaMenuTriggerProps,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  SubmenuTriggerProps as AriaSubmenuTriggerProps,\n  ContextValue,\n  DEFAULT_SLOT,\n  Provider,\n  Separator,\n  SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n  /**\n   * Alignment of the menu relative to the trigger.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end',\n  /**\n   * Where the Menu opens relative to its trigger.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n  /**\n   * The size of the Menu.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The contents of the collection.\n   */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Hides the default link out icons on menu items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\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} as const;\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  width: 'full',\n  overflow: {\n    isPopover: 'auto'\n  },\n  maxWidth: {\n    isPopover: 320\n  },\n  padding: {\n    isPopover: 8\n  },\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'center',\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: 'border-box',\n  minHeight: 'control',\n  paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n  font: 'ui',\n  fontWeight: 'bold',\n  margin: 0\n});\n\nexport let menuitem = style({\n  ...focusRing(),\n  boxSizing: 'border-box',\n  borderRadius: 'control',\n  font: 'control',\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  paddingBottom: '--labelPadding',\n  backgroundColor: { // TODO: revisit color when I have access to dev mode again\n    default: {\n      default: 'transparent',\n      isFocused: baseColor('gray-100').isFocusVisible\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  // each menu item should take up the entire width, the subgrid will handle within the item\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: 'subgrid',\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: 'control',\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n  visibility: {\n    default: 'hidden',\n    isSelected: 'visible'\n  },\n  gridArea: 'checkmark',\n  color: 'accent',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'currentColor',\n      forcedColors: 'Highlight'\n    }\n  },\n  marginEnd: 'text-to-control',\n  aspectRatio: 'square'\n});\n\nlet checkbox = style({\n  gridArea: 'checkmark',\n  marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  marginTop: fontRelative(6), // made up, need feedback\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  size: {\n    default: 40,\n    size: {\n      S: 32,\n      M: 40,\n      L: 44,\n      XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n    }\n  },\n  aspectRatio: 'square',\n  objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n  gridArea: 'label',\n  font: 'control',\n  color: '[inherit]',\n  fontWeight: 'medium',\n  // TODO: token values for padding not defined yet, revisit\n  marginTop: '--labelPadding'\n});\n\nexport let description = style({\n  gridArea: 'description',\n  font: {\n    default: 'ui-sm',\n    size: {\n      S: 'ui-xs',\n      M: 'ui-sm',\n      L: 'ui',\n      XL: 'ui-lg'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    // Ideally this would use the same token as hover, but we don't have access to that here.\n    // TODO: should we always consider isHovered and isFocused to be the same thing?\n    isFocused: 'gray-800',\n    isDisabled: 'disabled'\n  },\n  transition: 'default'\n});\n\nlet value = style({\n  gridArea: 'value',\n  marginStart: 8\n});\n\nlet keyboard = style({\n  gridArea: 'keyboard',\n  marginStart: 8,\n  font: 'ui',\n  fontWeight: 'light',\n  color: {\n    default: 'gray-600',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  background: 'gray-25',\n  unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n  gridArea: 'descriptor',\n  marginStart: 8,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n  size: 'M',\n  isSubmenu: false,\n  hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n  let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n  let {\n    children,\n    size = ctxSize,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    hideLinkOutIcon = false\n  } = props;\n  let ctx = useContext(InternalMenuTriggerContext);\n  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n  // TODO: change offset/crossoffset based on size? scale?\n  // actual values?\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n  if (isSubmenu) {\n    initialPlacement = 'end top' as Placement;\n  }\n\n  let content = (\n    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\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        <AriaMenu\n          {...props}\n          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n          {children}\n        </AriaMenu>\n      </Provider>\n    </InternalMenuContext.Provider>\n  );\n\n  if (ctx || isSubmenu) {\n    return (\n      <PopoverBase\n        ref={ref}\n        hideArrow\n        placement={initialPlacement}\n        shouldFlip={shouldFlip}\n        // For submenus, the offset from the edge of the popover should be 10px.\n        // Subtract 8px for the padding around the parent menu.\n        offset={isSubmenu ? -2 : 8}\n        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n        crossOffset={isSubmenu ? -9 : 0}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}>\n        {content}\n      </PopoverBase>\n    );\n  }\n\n  return content;\n});\n\nexport function Divider(props: SeparatorProps): ReactNode {\n  return (\n    <Separator\n      {...props}\n      className={mergeStyles(\n        divider({\n          size: 'M',\n          orientation: 'horizontal',\n          isStaticColor: false\n        }), style({\n          display: {\n            default: 'grid',\n            ':last-child': 'none'\n          },\n          gridColumnStart: 2,\n          gridColumnEnd: -2,\n          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n        })\n      )} />\n  );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {\n  // remember, context doesn't work if it's around Section nor inside\n  let {size} = useContext(InternalMenuContext);\n  return (\n    <>\n      <AriaMenuSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaMenuSection>\n      <Divider />\n    </>\n  );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n  S: 'M',\n  M: 'L',\n  L: 'XL',\n  XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  return (\n    <AriaMenuItem\n      {...props}\n      textValue={textValue}\n      ref={ref}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})},\n                    value: {styles: value}\n                  }\n                }],\n                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n                [ImageContext, {styles: image({size})}]\n              ]}>\n              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                  <CheckmarkIcon size={size} className={iconStyles} />\n                </div>\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <LinkOutIcon\n                    size={linkIconSize[size]}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n              {renderProps.hasSubmenu && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <ChevronRightIcon\n                    size={size}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n            </Provider>\n          </>\n        );\n      }}\n    </AriaMenuItem>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps): ReactNode {\n  // RAC sets isPressed via PressResponder when the menu is open.\n  // We don't want press scaling to appear to get \"stuck\", so override this.\n  // For mouse interactions, menus open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(document, 'pointerup', () => {\n      setPressed(false);\n    }, {once: true, capture: true});\n  };\n\n  return (\n    <InternalMenuTriggerContext.Provider\n      value={{\n        align: props.align,\n        direction: props.direction,\n        shouldFlip: props.shouldFlip\n      }}>\n      <AriaMenuTrigger {...props}>\n        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n          {props.children}\n        </PressResponder>\n      </AriaMenuTrigger>\n    </InternalMenuTriggerContext.Provider>\n  );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.css.map"}
+{"mappings":"ACqGkB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYM;;;;EAAA;;;;EASC;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMN;;;;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;;;;EAoDC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBR;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKG;;;;EAAA;;;;EAAA;;;;EAYa;;;;EAAA;;;;EAKnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EASM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0GL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmGmB;;;;;;;AAhab;EAgDI;;;;EAAA;;;;EAmJP;;;;EAAA;;;;EA0HH;;;;;AA7TM;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2HA;;;;IAqCC;;;;IASM;;;;IAAA;;;;IAAA;;;;IA0BV;;;;;;AAnJO;EAAA;IAAA;;;;IAoDC;;;;IA+FR","sources":["7c22b67265d3212e","packages/@react-spectrum/s2/src/Menu.tsx"],"sourcesContent":["@import \"dc7300f7a31f6746\";\n@import \"ba4f3709c47b6f32\";\n@import \"188776d578edc2d4\";\n@import \"7542e2c368e43074\";\n@import \"a0ece4d15d51b6d1\";\n@import \"9190ed57f0ec543d\";\n@import \"7ea87ac6ab45824a\";\n@import \"8dd2ed15af634baa\";\n@import \"e1b788d5c243c1be\";\n@import \"227155bda7dda199\";\n@import \"9349097043636fe6\";\n@import \"329bb28fb4b64255\";\n@import \"fa4d0c98959eb626\";\n@import \"7ed629d8804e69a8\";\n@import \"c7f5b0af4e97a693\";\n@import \"04aee1e7a62e8b5b\";\n@import \"ddf352cdf38358b0\";\n@import \"eadd63f065c26a67\";\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  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  MenuSection as AriaMenuSection,\n  MenuSectionProps as AriaMenuSectionProps,\n  MenuTrigger as AriaMenuTrigger,\n  MenuTriggerProps as AriaMenuTriggerProps,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  SubmenuTriggerProps as AriaSubmenuTriggerProps,\n  ContextValue,\n  DEFAULT_SLOT,\n  MenuItemRenderProps,\n  Provider,\n  Separator,\n  SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n  /**\n   * Alignment of the menu relative to the trigger.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end',\n  /**\n   * Where the Menu opens relative to its trigger.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n  /**\n   * The size of the Menu.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The contents of the collection.\n   */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Hides the default link out icons on menu items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\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} as const;\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  width: 'full',\n  overflow: {\n    isPopover: 'auto'\n  },\n  maxWidth: {\n    isPopover: 320\n  },\n  padding: {\n    isPopover: 8\n  },\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'center',\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: 'border-box',\n  minHeight: 'control',\n  paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n  font: 'ui',\n  fontWeight: 'bold',\n  margin: 0\n});\n\nexport let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({\n  ...focusRing(),\n  boxSizing: 'border-box',\n  borderRadius: 'control',\n  font: 'control',\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  paddingBottom: '--labelPadding',\n  backgroundColor: { // TODO: revisit color when I have access to dev mode again\n    default: {\n      default: 'transparent',\n      isFocused: baseColor('gray-100').isFocusVisible\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  // each menu item should take up the entire width, the subgrid will handle within the item\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: 'subgrid',\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: 'control',\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n  visibility: {\n    default: 'hidden',\n    isSelected: 'visible'\n  },\n  gridArea: 'checkmark',\n  color: 'accent',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'currentColor',\n      forcedColors: 'Highlight'\n    }\n  },\n  marginEnd: 'text-to-control',\n  aspectRatio: 'square'\n});\n\nlet checkbox = style({\n  gridArea: 'checkmark',\n  marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  marginTop: fontRelative(6), // made up, need feedback\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  size: {\n    default: 40,\n    size: {\n      S: 32,\n      M: 40,\n      L: 44,\n      XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n    }\n  },\n  aspectRatio: 'square',\n  objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n  gridArea: 'label',\n  font: 'control',\n  color: '[inherit]',\n  fontWeight: 'medium',\n  // TODO: token values for padding not defined yet, revisit\n  marginTop: '--labelPadding'\n});\n\nexport let description = style({\n  gridArea: 'description',\n  font: {\n    default: 'ui-sm',\n    size: {\n      S: 'ui-xs',\n      M: 'ui-sm',\n      L: 'ui',\n      XL: 'ui-lg'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    // Ideally this would use the same token as hover, but we don't have access to that here.\n    // TODO: should we always consider isHovered and isFocused to be the same thing?\n    isFocused: 'gray-800',\n    isDisabled: 'disabled'\n  },\n  transition: 'default'\n});\n\nlet value = style({\n  gridArea: 'value',\n  marginStart: 8\n});\n\nlet keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({\n  gridArea: 'keyboard',\n  marginStart: 8,\n  font: 'ui',\n  fontWeight: 'light',\n  color: {\n    default: 'gray-600',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n  gridArea: 'descriptor',\n  marginStart: 8,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n  size: 'M',\n  isSubmenu: false,\n  hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n  let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n  let {\n    children,\n    size = ctxSize,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    hideLinkOutIcon = false\n  } = props;\n  let ctx = useContext(InternalMenuTriggerContext);\n  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n  // TODO: change offset/crossoffset based on size? scale?\n  // actual values?\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n  if (isSubmenu) {\n    initialPlacement = 'end top' as Placement;\n  }\n\n  let content = (\n    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\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        <AriaMenu\n          {...props}\n          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n          {children}\n        </AriaMenu>\n      </Provider>\n    </InternalMenuContext.Provider>\n  );\n\n  if (ctx || isSubmenu) {\n    return (\n      <PopoverBase\n        ref={ref}\n        hideArrow\n        placement={initialPlacement}\n        shouldFlip={shouldFlip}\n        // For submenus, the offset from the edge of the popover should be 10px.\n        // Subtract 8px for the padding around the parent menu.\n        offset={isSubmenu ? -2 : 8}\n        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n        crossOffset={isSubmenu ? -9 : 0}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}>\n        {content}\n      </PopoverBase>\n    );\n  }\n\n  return content;\n});\n\nexport function Divider(props: SeparatorProps): ReactNode {\n  return (\n    <Separator\n      {...props}\n      className={mergeStyles(\n        divider({\n          size: 'M',\n          orientation: 'horizontal',\n          isStaticColor: false\n        }), style({\n          display: {\n            default: 'grid',\n            ':last-child': 'none'\n          },\n          gridColumnStart: 2,\n          gridColumnEnd: -2,\n          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n        })\n      )} />\n  );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {\n  // remember, context doesn't work if it's around Section nor inside\n  let {size} = useContext(InternalMenuContext);\n  return (\n    <>\n      <AriaMenuSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaMenuSection>\n      <Divider />\n    </>\n  );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n  S: 'M',\n  M: 'L',\n  L: 'XL',\n  XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  return (\n    <AriaMenuItem\n      {...props}\n      textValue={textValue}\n      ref={ref}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})},\n                    value: {styles: value}\n                  }\n                }],\n                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n                [ImageContext, {styles: image({size})}]\n              ]}>\n              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                  <CheckmarkIcon size={size} className={iconStyles} />\n                </div>\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <LinkOutIcon\n                    size={linkIconSize[size]}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n              {renderProps.hasSubmenu && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <ChevronRightIcon\n                    size={size}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n            </Provider>\n          </>\n        );\n      }}\n    </AriaMenuItem>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps): ReactNode {\n  // RAC sets isPressed via PressResponder when the menu is open.\n  // We don't want press scaling to appear to get \"stuck\", so override this.\n  // For mouse interactions, menus open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(document, 'pointerup', () => {\n      setPressed(false);\n    }, {once: true, capture: true});\n  };\n\n  return (\n    <InternalMenuTriggerContext.Provider\n      value={{\n        align: props.align,\n        direction: props.direction,\n        shouldFlip: props.shouldFlip\n      }}>\n      <AriaMenuTrigger {...props}>\n        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n          {props.children}\n        </PressResponder>\n      </AriaMenuTrigger>\n    </InternalMenuTriggerContext.Provider>\n  );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.css.map"}

package/dist/Menu.mjs

@@ -481,6 +481,8 @@ let $13afb0ea5f0ed767$var$keyboard = function anonymous(props) {
     if (props.isDisabled) rules += ' aa_____O';
     if (props.isDisabled) rules += ' aj';
     else rules += ' al';
+    rules += ' bd';
+    rules += ' __Tf';
     return rules;
 };
 let $13afb0ea5f0ed767$var$descriptor = " __b-zax38o __c-zax38o __d-zax38o __e-zax38o yd -rwx0fg_e-b";

package/dist/Menu.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.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  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  MenuSection as AriaMenuSection,\n  MenuSectionProps as AriaMenuSectionProps,\n  MenuTrigger as AriaMenuTrigger,\n  MenuTriggerProps as AriaMenuTriggerProps,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  SubmenuTriggerProps as AriaSubmenuTriggerProps,\n  ContextValue,\n  DEFAULT_SLOT,\n  Provider,\n  Separator,\n  SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n  /**\n   * Alignment of the menu relative to the trigger.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end',\n  /**\n   * Where the Menu opens relative to its trigger.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n  /**\n   * The size of the Menu.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The contents of the collection.\n   */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Hides the default link out icons on menu items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\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} as const;\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  width: 'full',\n  overflow: {\n    isPopover: 'auto'\n  },\n  maxWidth: {\n    isPopover: 320\n  },\n  padding: {\n    isPopover: 8\n  },\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'center',\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: 'border-box',\n  minHeight: 'control',\n  paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n  font: 'ui',\n  fontWeight: 'bold',\n  margin: 0\n});\n\nexport let menuitem = style({\n  ...focusRing(),\n  boxSizing: 'border-box',\n  borderRadius: 'control',\n  font: 'control',\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  paddingBottom: '--labelPadding',\n  backgroundColor: { // TODO: revisit color when I have access to dev mode again\n    default: {\n      default: 'transparent',\n      isFocused: baseColor('gray-100').isFocusVisible\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  // each menu item should take up the entire width, the subgrid will handle within the item\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: 'subgrid',\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: 'control',\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n  visibility: {\n    default: 'hidden',\n    isSelected: 'visible'\n  },\n  gridArea: 'checkmark',\n  color: 'accent',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'currentColor',\n      forcedColors: 'Highlight'\n    }\n  },\n  marginEnd: 'text-to-control',\n  aspectRatio: 'square'\n});\n\nlet checkbox = style({\n  gridArea: 'checkmark',\n  marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  marginTop: fontRelative(6), // made up, need feedback\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  size: {\n    default: 40,\n    size: {\n      S: 32,\n      M: 40,\n      L: 44,\n      XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n    }\n  },\n  aspectRatio: 'square',\n  objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n  gridArea: 'label',\n  font: 'control',\n  color: '[inherit]',\n  fontWeight: 'medium',\n  // TODO: token values for padding not defined yet, revisit\n  marginTop: '--labelPadding'\n});\n\nexport let description = style({\n  gridArea: 'description',\n  font: {\n    default: 'ui-sm',\n    size: {\n      S: 'ui-xs',\n      M: 'ui-sm',\n      L: 'ui',\n      XL: 'ui-lg'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    // Ideally this would use the same token as hover, but we don't have access to that here.\n    // TODO: should we always consider isHovered and isFocused to be the same thing?\n    isFocused: 'gray-800',\n    isDisabled: 'disabled'\n  },\n  transition: 'default'\n});\n\nlet value = style({\n  gridArea: 'value',\n  marginStart: 8\n});\n\nlet keyboard = style({\n  gridArea: 'keyboard',\n  marginStart: 8,\n  font: 'ui',\n  fontWeight: 'light',\n  color: {\n    default: 'gray-600',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  background: 'gray-25',\n  unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n  gridArea: 'descriptor',\n  marginStart: 8,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n  size: 'M',\n  isSubmenu: false,\n  hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n  let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n  let {\n    children,\n    size = ctxSize,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    hideLinkOutIcon = false\n  } = props;\n  let ctx = useContext(InternalMenuTriggerContext);\n  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n  // TODO: change offset/crossoffset based on size? scale?\n  // actual values?\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n  if (isSubmenu) {\n    initialPlacement = 'end top' as Placement;\n  }\n\n  let content = (\n    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\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        <AriaMenu\n          {...props}\n          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n          {children}\n        </AriaMenu>\n      </Provider>\n    </InternalMenuContext.Provider>\n  );\n\n  if (ctx || isSubmenu) {\n    return (\n      <PopoverBase\n        ref={ref}\n        hideArrow\n        placement={initialPlacement}\n        shouldFlip={shouldFlip}\n        // For submenus, the offset from the edge of the popover should be 10px.\n        // Subtract 8px for the padding around the parent menu.\n        offset={isSubmenu ? -2 : 8}\n        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n        crossOffset={isSubmenu ? -9 : 0}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}>\n        {content}\n      </PopoverBase>\n    );\n  }\n\n  return content;\n});\n\nexport function Divider(props: SeparatorProps): ReactNode {\n  return (\n    <Separator\n      {...props}\n      className={mergeStyles(\n        divider({\n          size: 'M',\n          orientation: 'horizontal',\n          isStaticColor: false\n        }), style({\n          display: {\n            default: 'grid',\n            ':last-child': 'none'\n          },\n          gridColumnStart: 2,\n          gridColumnEnd: -2,\n          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n        })\n      )} />\n  );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {\n  // remember, context doesn't work if it's around Section nor inside\n  let {size} = useContext(InternalMenuContext);\n  return (\n    <>\n      <AriaMenuSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaMenuSection>\n      <Divider />\n    </>\n  );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n  S: 'M',\n  M: 'L',\n  L: 'XL',\n  XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  return (\n    <AriaMenuItem\n      {...props}\n      textValue={textValue}\n      ref={ref}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})},\n                    value: {styles: value}\n                  }\n                }],\n                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n                [ImageContext, {styles: image({size})}]\n              ]}>\n              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                  <CheckmarkIcon size={size} className={iconStyles} />\n                </div>\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <LinkOutIcon\n                    size={linkIconSize[size]}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n              {renderProps.hasSubmenu && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <ChevronRightIcon\n                    size={size}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n            </Provider>\n          </>\n        );\n      }}\n    </AriaMenuItem>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps): ReactNode {\n  // RAC sets isPressed via PressResponder when the menu is open.\n  // We don't want press scaling to appear to get \"stuck\", so override this.\n  // For mouse interactions, menus open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(document, 'pointerup', () => {\n      setPressed(false);\n    }, {once: true, capture: true});\n  };\n\n  return (\n    <InternalMenuTriggerContext.Provider\n      value={{\n        align: props.align,\n        direction: props.direction,\n        shouldFlip: props.shouldFlip\n      }}>\n      <AriaMenuTrigger {...props}>\n        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n          {props.children}\n        </PressResponder>\n      </AriaMenuTrigger>\n    </InternalMenuTriggerContext.Provider>\n  );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.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  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  MenuItemProps as AriaMenuItemProps,\n  MenuProps as AriaMenuProps,\n  MenuSection as AriaMenuSection,\n  MenuSectionProps as AriaMenuSectionProps,\n  MenuTrigger as AriaMenuTrigger,\n  MenuTriggerProps as AriaMenuTriggerProps,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  SubmenuTriggerProps as AriaSubmenuTriggerProps,\n  ContextValue,\n  DEFAULT_SLOT,\n  MenuItemRenderProps,\n  Provider,\n  Separator,\n  SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n  /**\n   * Alignment of the menu relative to the trigger.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end',\n  /**\n   * Where the Menu opens relative to its trigger.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n  /**\n   * The size of the Menu.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The contents of the collection.\n   */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Hides the default link out icons on menu items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\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} as const;\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  width: 'full',\n  overflow: {\n    isPopover: 'auto'\n  },\n  maxWidth: {\n    isPopover: 320\n  },\n  padding: {\n    isPopover: 8\n  },\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'center',\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: 'border-box',\n  minHeight: 'control',\n  paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n  font: 'ui',\n  fontWeight: 'bold',\n  margin: 0\n});\n\nexport let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({\n  ...focusRing(),\n  boxSizing: 'border-box',\n  borderRadius: 'control',\n  font: 'control',\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  paddingBottom: '--labelPadding',\n  backgroundColor: { // TODO: revisit color when I have access to dev mode again\n    default: {\n      default: 'transparent',\n      isFocused: baseColor('gray-100').isFocusVisible\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  // each menu item should take up the entire width, the subgrid will handle within the item\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       value keyboard descriptor .',\n    '. .         .    description .     .        .          .'\n  ],\n  gridTemplateColumns: 'subgrid',\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: 'control',\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n  visibility: {\n    default: 'hidden',\n    isSelected: 'visible'\n  },\n  gridArea: 'checkmark',\n  color: 'accent',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'currentColor',\n      forcedColors: 'Highlight'\n    }\n  },\n  marginEnd: 'text-to-control',\n  aspectRatio: 'square'\n});\n\nlet checkbox = style({\n  gridArea: 'checkmark',\n  marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  marginTop: fontRelative(6), // made up, need feedback\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  size: {\n    default: 40,\n    size: {\n      S: 32,\n      M: 40,\n      L: 44,\n      XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n    }\n  },\n  aspectRatio: 'square',\n  objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n  gridArea: 'label',\n  font: 'control',\n  color: '[inherit]',\n  fontWeight: 'medium',\n  // TODO: token values for padding not defined yet, revisit\n  marginTop: '--labelPadding'\n});\n\nexport let description = style({\n  gridArea: 'description',\n  font: {\n    default: 'ui-sm',\n    size: {\n      S: 'ui-xs',\n      M: 'ui-sm',\n      L: 'ui',\n      XL: 'ui-lg'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    // Ideally this would use the same token as hover, but we don't have access to that here.\n    // TODO: should we always consider isHovered and isFocused to be the same thing?\n    isFocused: 'gray-800',\n    isDisabled: 'disabled'\n  },\n  transition: 'default'\n});\n\nlet value = style({\n  gridArea: 'value',\n  marginStart: 8\n});\n\nlet keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({\n  gridArea: 'keyboard',\n  marginStart: 8,\n  font: 'ui',\n  fontWeight: 'light',\n  color: {\n    default: 'gray-600',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n  gridArea: 'descriptor',\n  marginStart: 8,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n  size: 'M',\n  isSubmenu: false,\n  hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n  let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n  let {\n    children,\n    size = ctxSize,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    hideLinkOutIcon = false\n  } = props;\n  let ctx = useContext(InternalMenuTriggerContext);\n  let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n  // TODO: change offset/crossoffset based on size? scale?\n  // actual values?\n  let initialPlacement: Placement;\n  switch (direction) {\n    case 'left':\n    case 'right':\n    case 'start':\n    case 'end':\n      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n      break;\n    case 'bottom':\n    case 'top':\n    default:\n      initialPlacement = `${direction} ${align}` as Placement;\n  }\n  if (isSubmenu) {\n    initialPlacement = 'end top' as Placement;\n  }\n\n  let content = (\n    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\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        <AriaMenu\n          {...props}\n          className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n          {children}\n        </AriaMenu>\n      </Provider>\n    </InternalMenuContext.Provider>\n  );\n\n  if (ctx || isSubmenu) {\n    return (\n      <PopoverBase\n        ref={ref}\n        hideArrow\n        placement={initialPlacement}\n        shouldFlip={shouldFlip}\n        // For submenus, the offset from the edge of the popover should be 10px.\n        // Subtract 8px for the padding around the parent menu.\n        offset={isSubmenu ? -2 : 8}\n        // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n        crossOffset={isSubmenu ? -9 : 0}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}>\n        {content}\n      </PopoverBase>\n    );\n  }\n\n  return content;\n});\n\nexport function Divider(props: SeparatorProps): ReactNode {\n  return (\n    <Separator\n      {...props}\n      className={mergeStyles(\n        divider({\n          size: 'M',\n          orientation: 'horizontal',\n          isStaticColor: false\n        }), style({\n          display: {\n            default: 'grid',\n            ':last-child': 'none'\n          },\n          gridColumnStart: 2,\n          gridColumnEnd: -2,\n          marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n        })\n      )} />\n  );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {\n  // remember, context doesn't work if it's around Section nor inside\n  let {size} = useContext(InternalMenuContext);\n  return (\n    <>\n      <AriaMenuSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaMenuSection>\n      <Divider />\n    </>\n  );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n  S: 'M',\n  M: 'L',\n  L: 'XL',\n  XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  return (\n    <AriaMenuItem\n      {...props}\n      textValue={textValue}\n      ref={ref}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})},\n                    value: {styles: value}\n                  }\n                }],\n                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n                [ImageContext, {styles: image({size})}]\n              ]}>\n              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n                <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                  <CheckmarkIcon size={size} className={iconStyles} />\n                </div>\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <LinkOutIcon\n                    size={linkIconSize[size]}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n              {renderProps.hasSubmenu && (\n                <div slot=\"descriptor\" className={descriptor}>\n                  <ChevronRightIcon\n                    size={size}\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      }\n                    })({direction})} />\n                </div>\n              )}\n            </Provider>\n          </>\n        );\n      }}\n    </AriaMenuItem>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps): ReactNode {\n  // RAC sets isPressed via PressResponder when the menu is open.\n  // We don't want press scaling to appear to get \"stuck\", so override this.\n  // For mouse interactions, menus open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(document, 'pointerup', () => {\n      setPressed(false);\n    }, {once: true, capture: true});\n  };\n\n  return (\n    <InternalMenuTriggerContext.Provider\n      value={{\n        align: props.align,\n        direction: props.direction,\n        shouldFlip: props.shouldFlip\n      }}>\n      <AriaMenuTrigger {...props}>\n        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n          {props.children}\n        </PressResponder>\n      </AriaMenuTrigger>\n    </InternalMenuTriggerContext.Provider>\n  );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {\n  return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.mjs.map"}