@react-spectrum/s2
Version:
Spectrum 2 UI components in React
1 lines • 30.7 kB
Source Map (JSON)
{"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 Collection,\n ContextValue,\n DEFAULT_SLOT,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxLoadMoreItem,\n ListBoxProps,\n ListLayout,\n Provider,\n SectionProps,\n SelectValue,\n Virtualizer\n} from 'react-aria-components';\nimport {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles as checkboxIconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkbox,\n checkmark,\n description,\n icon,\n iconCenterWrapper,\n label,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {control, controlBorderRadius, controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createHideableComponent} from '@react-aria/collections';\nimport {\n Divider,\n listbox,\n listboxHeader,\n listboxItem,\n LOADER_ROW_HEIGHTS\n} from './ComboBox';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\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 {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria';\nimport {Popover} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useGlobalListeners, useSlotId} from '@react-aria/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useScale} from './utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\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 */\n isQuiet?: boolean\n}\n\ntype SelectionMode = 'single' | 'multiple';\nexport interface PickerProps<T extends object, M extends SelectionMode = 'single'> extends\n Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items' | 'dependencies'>,\n Pick<AriaPopoverProps, 'shouldFlip'>,\n Pick<AsyncLoadable, 'onLoadMore'> {\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 /** The current loading state of the Picker. */\n loadingState?: LoadingState\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 ...control({shape: 'default', icon: true}),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\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 transition: 'default',\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: baseColor('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: controlFont(),\n gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n ...controlBorderRadius(),\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: baseColor('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 color: {\n isLoading: 'disabled'\n }\n});\n\nconst avatar = style({\n gridArea: 'icon',\n marginEnd: 'text-to-visual'\n});\n\nconst loadingWrapperStyles = style({\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginY: 8\n});\n\nconst progressCircleStyles = style({\n size: {\n size: {\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n }\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, M extends SelectionMode = 'single'>(props: PickerProps<T, M>, 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 loadingState,\n onLoadMore,\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 let renderer;\n let showButtonSpinner = useMemo(() => loadingState === 'loading', [loadingState]);\n let spinnerId = useSlotId([showButtonSpinner]);\n\n let listBoxLoadingCircle = (\n <ListBoxLoadMoreItem\n className={loadingWrapperStyles}\n isLoading={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}>\n <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />\n </ListBoxLoadMoreItem>\n );\n\n if (typeof children === 'function' && items) {\n renderer = (\n <>\n <Collection items={items} dependencies={props.dependencies}>\n {children}\n </Collection>\n {listBoxLoadingCircle}\n </>\n );\n } else {\n renderer = (\n <>\n {children}\n {listBoxLoadingCircle}\n </>\n );\n }\n let scale = useScale();\n let {direction: dir} = useLocale();\n let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n return (\n <AriaSelect\n {...pickerProps}\n aria-describedby={spinnerId}\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 includeNecessityIndicatorInAccessibilityName\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 <PickerButton\n loadingState={loadingState}\n isOpen={isOpen}\n isQuiet={isQuiet}\n isFocusVisible={isFocusVisible}\n size={size}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n buttonRef={domRef}\n loadingCircle={\n <PickerProgressCircle\n id={spinnerId}\n size={size}\n aria-label={stringFormatter.format('table.loading')} />\n } />\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n estimatedRowHeight: 32,\n estimatedHeadingHeight: 50,\n padding: 8,\n loaderHeight: LOADER_ROW_HEIGHTS[size][scale]}}>\n <Popover\n hideArrow\n padding=\"none\"\n offset={menuOffset}\n crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n minWidth: {\n default: '--trigger-width',\n isQuiet: 192\n },\n width: {\n default: '--trigger-width',\n isQuiet: '[calc(var(--trigger-width) - 24)]'\n }\n })(props)}>\n <div\n className={style({\n display: 'flex',\n size: 'full'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: listboxHeader({size})}],\n [HeadingContext, {\n // @ts-ignore\n role: 'presentation',\n styles: sectionHeading\n }],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n dependencies={props.dependencies}\n items={items}\n className={listbox({size})}>\n {renderer}\n </ListBox>\n </Provider>\n </div>\n </Popover>\n </Virtualizer>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nfunction PickerProgressCircle(props) {\n let {\n id,\n size,\n 'aria-label': ariaLabel\n } = props;\n return (\n <ProgressCircle\n id={id}\n isIndeterminate\n size=\"S\"\n aria-label={ariaLabel}\n styles={progressCircleStyles({size})} />\n );\n}\n\nconst avatarSize = {\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n} as const;\n\ninterface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'loadingState'> {\n loadingCircle: ReactNode,\n buttonRef: RefObject<HTMLButtonElement | null>\n}\n\n// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register\nconst PickerButton = createHideableComponent(function PickerButton<T extends object>(props: PickerButtonInnerProps<T>) {\n let {\n isOpen,\n isQuiet,\n isFocusVisible,\n size,\n isInvalid,\n isDisabled,\n loadingState,\n loadingCircle,\n buttonRef\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n // For mouse interactions, pickers open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(document, 'pointerup', () => {\n setPressed(false);\n }, {once: true, capture: true});\n };\n\n return (\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n <Button\n ref={buttonRef}\n style={renderProps => pressScale(buttonRef)(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('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>\n {({selectedItems, 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 [AvatarContext, {\n slots: {\n avatar: {\n size: avatarSize[size ?? 'M'],\n styles: avatar\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n [DEFAULT_SLOT]: {\n styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n }),\n // @ts-ignore\n 'data-slot': 'label'\n },\n label: {\n styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n }),\n // @ts-ignore not technically necessary, but good for consistency\n 'data-slot': 'label'\n }\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {selectedItems.length <= 1\n ? defaultChildren\n : <Text slot=\"label\">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>\n }\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {loadingState === 'loading' && !isOpen && loadingCircle}\n <ChevronIcon\n size={size}\n className={iconStyles({isLoading: loadingState === 'loading'})} />\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 </PressResponder>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, 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): ReactNode {\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 || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={AvatarContext}\n value={{slots: {\n avatar: {size: avatarSize[size], styles: avatar}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})},\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {renderProps.selectionMode === 'single' && !isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {renderProps.selectionMode === 'multiple' && !isLink && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={checkboxIconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\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 Omit<SectionProps<T>, 'style' | 'className' | keyof GlobalDOMAttributes>, StyleProps {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>): ReactNode {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection\n {...props}>\n {props.children}\n </AriaListBoxSection>\n <Divider size={size} />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}