npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-c78b24831-250206 → 3.0.0-nightly-801ef48a8-250207 - Mend

@react-spectrum/s2 3.0.0-nightly-c78b24831-250206 → 3.0.0-nightly-801ef48a8-250207

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/Picker.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"ACgHoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBI;;;;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;;;;EAcF;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EA2DiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiCqC;;;;EAgBzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2C1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjQF;EA+DF;;;;EAsGkB;;;;;AArKhB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkDG;;;;;;AAlDH;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAqKgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["552e27cf637b06d3","packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["@import \"3ea1b03e909704b0\";\n@import \"ee9bbd6fcdd43977\";\n@import \"6c757f8583900bce\";\n@import \"5664d1276ba33182\";\n@import \"4581fd7ca88158d4\";\n@import \"6f2c83ecc9c1c922\";\n@import \"5f2bbc1985161dbd\";\n@import \"19b2c692b4947046\";\n@import \"4d3d8008ddb5ca39\";\n@import \"6c5e73b19354c1ee\";\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 ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, 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 {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /*\n The size of the Picker.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the picker should be displayed with a quiet style.\n * @private\n /\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' \| 'style' \| 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /* The contents of the collection. /\n children: ReactNode \| ((item: T) => ReactNode),\n /\n Direction the menu will render relative to the Picker.\n \n @default 'bottom'\n /\n direction?: 'bottom' \| 'top',\n /\n Alignment of the menu relative to the input target.\n \n @default 'start'\n /\n align?: 'start' \| 'end',\n /* Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. /\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps \| AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' \| 'M' \| 'L' \| 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/\n Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n /\nexport const Picker = /#__PURE__/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' \| 'style' \| 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue \|\| (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\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":"Picker.css.map"}
1	+ {"mappings":"ACgHoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBI;;;;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;;;;EAcF;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EA2DiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiCqC;;;;EAgBzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2C1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlQF;EA+DF;;;;EAuGkB;;;;;AAtKhB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkDG;;;;;;AAlDH;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAsKgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["552e27cf637b06d3","packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["@import \"3ea1b03e909704b0\";\n@import \"ee9bbd6fcdd43977\";\n@import \"6c757f8583900bce\";\n@import \"5664d1276ba33182\";\n@import \"4581fd7ca88158d4\";\n@import \"6f2c83ecc9c1c922\";\n@import \"5f2bbc1985161dbd\";\n@import \"19b2c692b4947046\";\n@import \"4d3d8008ddb5ca39\";\n@import \"6c5e73b19354c1ee\";\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 ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, 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 {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /*\n The size of the Picker.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the picker should be displayed with a quiet style.\n * @private\n /\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' \| 'style' \| 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /* The contents of the collection. /\n children: ReactNode \| ((item: T) => ReactNode),\n /\n Direction the menu will render relative to the Picker.\n \n @default 'bottom'\n /\n direction?: 'bottom' \| 'top',\n /\n Alignment of the menu relative to the input target.\n \n @default 'start'\n /\n align?: 'start' \| 'end',\n /* Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. /\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps \| AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n width: 'full',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' \| 'M' \| 'L' \| 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/\n Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n /\nexport const Picker = /#__PURE__/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' \| 'style' \| 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue \|\| (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\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":"Picker.css.map"}

package/dist/Picker.mjs CHANGED Viewed

@@ -163,6 +163,7 @@ let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
     let rules = " .";
     rules += ' _Pa';
     rules += ' _3f';
+    rules += ' kb';
     if (props.size === "XL") rules += ' __l-14g31og';
     else if (props.size === "L") rules += ' __l-1pqbi84';
     else if (props.size === "M") rules += ' __l-n6rb9a';

package/dist/Picker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, 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 {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /*\n The size of the Picker.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the picker should be displayed with a quiet style.\n * @private\n /\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' \| 'style' \| 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /* The contents of the collection. /\n children: ReactNode \| ((item: T) => ReactNode),\n /\n Direction the menu will render relative to the Picker.\n \n @default 'bottom'\n /\n direction?: 'bottom' \| 'top',\n /\n Alignment of the menu relative to the input target.\n \n @default 'start'\n /\n align?: 'start' \| 'end',\n /* Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. /\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps \| AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' \| 'M' \| 'L' \| 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/\n Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n /\nexport const Picker = /#__PURE__/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' \| 'style' \| 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue \|\| (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\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":"Picker.mjs.map"}
1	+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, 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 {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /*\n The size of the Picker.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'XL',\n /\n Whether the picker should be displayed with a quiet style.\n * @private\n /\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' \| 'style' \| 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /* The contents of the collection. /\n children: ReactNode \| ((item: T) => ReactNode),\n /\n Direction the menu will render relative to the Picker.\n \n @default 'bottom'\n /\n direction?: 'bottom' \| 'top',\n /\n Alignment of the menu relative to the input target.\n \n @default 'start'\n /\n align?: 'start' \| 'end',\n /* Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. /\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps \| AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n width: 'full',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' \| 'M' \| 'L' \| 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/\n Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n /\nexport const Picker = /#__PURE__/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' \| 'style' \| 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue \|\| (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\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":"Picker.mjs.map"}

package/dist/Popover.cjs CHANGED Viewed

@@ -72,6 +72,7 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     }
     if (!$q) rules += ' q-rtptky';
     rules += ' __ra';
+    rules += ' _3d';
     if (props.isExiting) rules += ' _O-3t1x';
     else if (props.isEntering) rules += ' _O-3t1x';
     if (props.isSubmenu) rules += ' Ta';
@@ -193,13 +194,11 @@ const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
     rules += matches.join('');
     let $Y = false;
     let $k = false;
-    let $j = false;
     let $q = false;
     let $o = false;
     for (let p of matches){
         if (/^\s*Y/.test(p)) $Y = true;
         if (/^\s*k/.test(p)) $k = true;
-        if (/^\s*j/.test(p)) $j = true;
         if (/^\s*q/.test(p)) $q = true;
         if (/^\s*o/.test(p)) $o = true;
     }
@@ -217,7 +216,6 @@ const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
     rules += ' __Aa';
     if (!$Y) rules += ' Yc';
     if (!$k) rules += ' kb';
-    if (!$j) rules += ' jb';
     if (!$q) rules += ' q-17zqamw';
     if (!$o) rules += ' o-17zqamw';
     return rules;

package/dist/Popover.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gCAAC,CAAA,GAAA,iCAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gCAAC,CAAA,GAAA,iCAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}

package/dist/Popover.css CHANGED Viewed

@@ -116,6 +116,10 @@
     max-width: calc(100vw - 24px);
   }
+  ._3d {
+    display: flex;
+  }
   ._O-3t1x {
     opacity: 0;
     opacity: 0;
@@ -273,10 +277,6 @@
     width: 100%;
   }
-  .jb {
-    height: 100%;
-  }
   .q-17zqamw {
     max-width: inherit;
   }

package/dist/Popover.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AC+Cc;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;~~EA4EF~~;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAkGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA~~;;;;EAAA~~;;;;;~~AA9KN~~;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;~~IA4EF~~","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n","/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n ~~size~~: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}
1	+ {"mappings":"AC+Cc;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6EF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAkGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/KN;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6EF","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n","/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}

package/dist/Popover.mjs CHANGED Viewed

@@ -65,6 +65,7 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     }
     if (!$q) rules += ' q-rtptky';
     rules += ' __ra';
+    rules += ' _3d';
     if (props.isExiting) rules += ' _O-3t1x';
     else if (props.isEntering) rules += ' _O-3t1x';
     if (props.isSubmenu) rules += ' Ta';
@@ -186,13 +187,11 @@ const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
     rules += matches.join('');
     let $Y = false;
     let $k = false;
-    let $j = false;
     let $q = false;
     let $o = false;
     for (let p of matches){
         if (/^\s*Y/.test(p)) $Y = true;
         if (/^\s*k/.test(p)) $k = true;
-        if (/^\s*j/.test(p)) $j = true;
         if (/^\s*q/.test(p)) $q = true;
         if (/^\s*o/.test(p)) $o = true;
     }
@@ -210,7 +209,6 @@ const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
     rules += ' __Aa';
     if (!$Y) rules += ' Yc';
     if (!$k) rules += ' kb';
-    if (!$j) rules += ' jb';
     if (!$q) rules += ' q-17zqamw';
     if (!$o) rules += ' o-17zqamw';
     return rules;

package/dist/Popover.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gBAAC,CAAA,GAAA,aAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
1	+ {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gBAAC,CAAA,GAAA,aAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n /\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}