@cimpress-ui/react 1.13.3 → 1.13.5
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.
- package/dist/commonjs/components/select/select.d.ts +17 -0
- package/dist/commonjs/components/select/select.d.ts.map +1 -1
- package/dist/commonjs/components/select/select.js +46 -9
- package/dist/commonjs/components/select/select.js.map +1 -1
- package/dist/esm/components/select/select.d.ts +17 -0
- package/dist/esm/components/select/select.d.ts.map +1 -1
- package/dist/esm/components/select/select.js +49 -12
- package/dist/esm/components/select/select.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +1 -1
|
@@ -32,6 +32,23 @@ export interface SelectProps<T extends CollectionItem = CollectionItem, M extend
|
|
|
32
32
|
* @default 'text'
|
|
33
33
|
*/
|
|
34
34
|
UNSTABLE_valueDisplay?: 'text' | 'tags';
|
|
35
|
+
/**
|
|
36
|
+
* Whether the list of options should be filterable.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
UNSTABLE_isFilterable?: boolean;
|
|
40
|
+
/** The value of the filter input (controlled). */
|
|
41
|
+
UNSTABLE_filterValue?: string;
|
|
42
|
+
/** The initial value of the filter input (uncontrolled). */
|
|
43
|
+
UNSTABLE_defaultFilterValue?: string;
|
|
44
|
+
/** Handler that is called when the filter value changes. */
|
|
45
|
+
UNSTABLE_onFilterChange?: (value: string) => void;
|
|
46
|
+
/** A custom filter function to use instead of the default filter. */
|
|
47
|
+
UNSTABLE_filter?: ((textValue: string, inputValue: string, node: {
|
|
48
|
+
key: Key;
|
|
49
|
+
value: T | null;
|
|
50
|
+
}) => boolean) | null;
|
|
51
|
+
UNSTABLE_isClearable?: boolean;
|
|
35
52
|
}
|
|
36
53
|
/** The imperative API exposed by the `Select` component. */
|
|
37
54
|
export interface SelectApi {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,11 +19,13 @@ const is_production_js_1 = require("../../utils/is-production.js");
|
|
|
19
19
|
const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
|
|
20
20
|
const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
|
|
21
21
|
const with_style_props_js_1 = require("../../with-style-props.js");
|
|
22
|
+
const button_js_1 = require("../button/button.js");
|
|
22
23
|
const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
|
|
23
24
|
const form_field_js_1 = require("../internal/form-field/form-field.js");
|
|
24
25
|
const spinner_js_1 = require("../spinner/spinner.js");
|
|
25
26
|
const tag_group_js_1 = require("../tag/tag-group.js");
|
|
26
27
|
const tag_js_1 = require("../tag/tag.js");
|
|
28
|
+
const search_field_js_1 = require("../text-inputs/search-field.js");
|
|
27
29
|
const text_js_1 = require("../typography/text.js");
|
|
28
30
|
const utils_js_1 = require("../typography/utils.js");
|
|
29
31
|
const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
|
|
@@ -34,10 +36,9 @@ const VIRTUAL_LAYOUT_OPTIONS = {
|
|
|
34
36
|
padding: 0,
|
|
35
37
|
gap: 0,
|
|
36
38
|
};
|
|
37
|
-
function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, isVirtualized = false, apiRef, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, selectedKey, defaultSelectedKey, onSelectionChange, UNSTABLE_selectionMode, UNSTABLE_value, UNSTABLE_defaultValue, UNSTABLE_onChange, UNSTABLE_valueDisplay = 'text', ...props }, ref) {
|
|
39
|
+
function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, isVirtualized = false, apiRef, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, selectedKey, defaultSelectedKey, onSelectionChange, UNSTABLE_selectionMode, UNSTABLE_value, UNSTABLE_defaultValue, UNSTABLE_onChange, UNSTABLE_valueDisplay: valueDisplay = 'text', UNSTABLE_isFilterable: isFilterable = false, UNSTABLE_filterValue: filterValue, UNSTABLE_defaultFilterValue: defaultFilterValue, UNSTABLE_onFilterChange: onFilterChange, UNSTABLE_filter: filter, UNSTABLE_isClearable: isClearable = false, ...props }, ref) {
|
|
38
40
|
const triggerRef = (0, react_1.useRef)(null);
|
|
39
41
|
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
|
|
40
|
-
const collectionMessages = (0, index_js_1.useLocalizedMessages)('UNSTABLE_collection');
|
|
41
42
|
(0, use_production_warning_js_1.useProductionWarning)(() => {
|
|
42
43
|
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
43
44
|
console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');
|
|
@@ -50,18 +51,41 @@ function Select({ children, items, label, description, error, UNSAFE_className,
|
|
|
50
51
|
focus: () => triggerRef.current?.focus(),
|
|
51
52
|
}), []);
|
|
52
53
|
const listBox = ((0, jsx_runtime_1.jsx)(SelectListBox, { items: items, isLoading: isLoading, onLoadMore: onLoadMore, onScroll: onScroll, children: children }));
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
return isPlaceholder ? defaultChildren : selectedText;
|
|
58
|
-
} }), (0, jsx_runtime_1.jsx)(index_js_2.IconChevronDown, {})] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) }), UNSTABLE_selectionMode === 'multiple' && UNSTABLE_valueDisplay === 'tags' && (0, jsx_runtime_1.jsx)(SelectTags, {})] }));
|
|
54
|
+
const listBoxWithVirtualizer = isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox);
|
|
55
|
+
const listBoxWithFilter = isFilterable ? ((0, jsx_runtime_1.jsx)(SelectFilter, { filterValue: filterValue, defaultFilterValue: defaultFilterValue, onFilterChange: onFilterChange, filter: filter, children: listBoxWithVirtualizer })) : (listBoxWithVirtualizer);
|
|
56
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { ...props, ref: ref, className: (0, clsx_1.default)('cim-select', UNSAFE_className), style: UNSAFE_style, selectedKey: selectedKey, onSelectionChange: onSelectionChange, value: UNSTABLE_value, defaultValue: UNSTABLE_defaultValue, onChange: UNSTABLE_onChange, selectionMode: UNSTABLE_selectionMode, allowsEmptyCollection: isLoading, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsx)(SelectButton, { ref: triggerRef, valueDisplay: valueDisplay }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsxs)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: [listBoxWithFilter, (0, jsx_runtime_1.jsx)(SelectFooter, { isClearable: isClearable })] }), UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && (0, jsx_runtime_1.jsx)(SelectTags, {})] }));
|
|
59
57
|
}
|
|
58
|
+
const SelectButton = (0, forward_ref_js_1.forwardRef)(({ valueDisplay }, ref) => {
|
|
59
|
+
const collectionMessages = (0, index_js_1.useLocalizedMessages)('UNSTABLE_collection');
|
|
60
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { ref: ref, className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (values) => (0, clsx_1.default)(values.defaultClassName, (0, utils_js_1.textStyle)({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder, state }) => {
|
|
61
|
+
if (valueDisplay === 'tags' && state.selectedItems.length > 0) {
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body", tone: "subtle", children: collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length }) }));
|
|
63
|
+
}
|
|
64
|
+
return isPlaceholder ? defaultChildren : selectedText;
|
|
65
|
+
} }), (0, jsx_runtime_1.jsx)(index_js_2.IconChevronDown, {})] }));
|
|
66
|
+
});
|
|
60
67
|
function SelectListBox({ children, items, isLoading, onLoadMore, ...props }) {
|
|
61
68
|
const collectionMessages = (0, index_js_1.useLocalizedMessages)('UNSTABLE_collection');
|
|
62
69
|
const selectState = (0, react_1.useContext)(react_aria_components_1.SelectStateContext);
|
|
63
70
|
const isEmpty = selectState?.collection.size === 0;
|
|
64
|
-
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { className: "cim-select-listbox",
|
|
71
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { className: "cim-select-listbox", renderEmptyState: () => !isLoading && (
|
|
72
|
+
// TODO: i18n once stabilized
|
|
73
|
+
(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "body", tone: "subtle", marginX: 8, marginY: 8, UNSAFE_className: "cim-select-listbox-empty-state", children: "No results found." })), ...props, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children }), (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: isLoading, children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { "aria-label": collectionMessages.format(isEmpty ? 'loading' : 'loadingMore'), size: "small", marginY: 8 }) })] }));
|
|
74
|
+
}
|
|
75
|
+
function SelectFilter({ children, filterValue, defaultFilterValue, onFilterChange, filter, }) {
|
|
76
|
+
const { contains } = (0, react_aria_1.useFilter)({ sensitivity: 'base' });
|
|
77
|
+
const filterFn = (0, react_1.useMemo)(() => {
|
|
78
|
+
if (filter === null)
|
|
79
|
+
return undefined;
|
|
80
|
+
if (filter == null)
|
|
81
|
+
return contains;
|
|
82
|
+
return (textValue, inputValue, node) => {
|
|
83
|
+
return filter(textValue, inputValue, { key: node.key, value: node.value });
|
|
84
|
+
};
|
|
85
|
+
}, [filter, contains]);
|
|
86
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Autocomplete, { filter: filterFn, inputValue: filterValue, defaultInputValue: defaultFilterValue, onInputChange: onFilterChange, children: [(0, jsx_runtime_1.jsx)(search_field_js_1.SearchField
|
|
87
|
+
// TODO: i18n once stabilized
|
|
88
|
+
, { "aria-label": "Search", placeholder: "Search", autoFocus: true, marginX: 8, marginTop: 8 }), children] }));
|
|
65
89
|
}
|
|
66
90
|
function SelectTags() {
|
|
67
91
|
const labelContext = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.LabelContext);
|
|
@@ -79,6 +103,19 @@ function SelectTags() {
|
|
|
79
103
|
}, marginTop: 8, children: (item) => (0, jsx_runtime_1.jsx)(tag_js_1.Tag, { children: item.label }) }), (0, jsx_runtime_1.jsx)(visually_hidden_js_1.UNSTABLE_VisuallyHidden, { id: selectedItemsLabelId, children: "selected items" })] }));
|
|
80
104
|
} }));
|
|
81
105
|
}
|
|
106
|
+
function SelectFooter({ isClearable }) {
|
|
107
|
+
const selectState = (0, react_1.useContext)(react_aria_components_1.SelectStateContext);
|
|
108
|
+
if (!isClearable) {
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
if (!selectState || selectState.selectedItems.length === 0) {
|
|
112
|
+
return null;
|
|
113
|
+
}
|
|
114
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "cim-select-footer", children: (0, jsx_runtime_1.jsx)(button_js_1.Button, { onPress: () => {
|
|
115
|
+
selectState.setValue(null);
|
|
116
|
+
selectState.close();
|
|
117
|
+
}, size: "small", variant: "tertiary", children: "Clear selection" }) }));
|
|
118
|
+
}
|
|
82
119
|
/**
|
|
83
120
|
* Allows users to select one item from a collapsible list.
|
|
84
121
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useContext, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n> extends CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay = 'text',\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACButton ref={triggerRef} className=\"cim-select-button\">\n <RACSelectValue\n className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n >\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (UNSTABLE_valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n <IconChevronDown />\n </RACButton>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n {UNSTABLE_selectionMode === 'multiple' && UNSTABLE_valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & { isLoading?: boolean; onLoadMore?: () => void }) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox className=\"cim-select-listbox\" {...props}>\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n> extends CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {listBoxWithFilter}\n <SelectFooter isClearable={isClearable} />\n </CollapsibleList>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\nconst SelectButton = forwardRef<{ valueDisplay: SelectProps['UNSTABLE_valueDisplay'] }, HTMLButtonElement>(\n ({ valueDisplay }, ref) => {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <RACButton ref={ref} className=\"cim-select-button\">\n <RACSelectValue\n className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n >\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n <IconChevronDown />\n </RACButton>\n );\n },\n);\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\ninterface SelectFooterProps {\n isClearable?: boolean;\n}\n\nfunction SelectFooter({ isClearable }: SelectFooterProps) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!isClearable) {\n return null;\n }\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <div className=\"cim-select-footer\">\n <Button\n onPress={() => {\n selectState.setValue(null);\n selectState.close();\n }}\n size=\"small\"\n variant=\"tertiary\"\n >\n {/* TODO: i18n once stabilized */}\n Clear selection\n </Button>\n </div>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
|
|
@@ -32,6 +32,23 @@ export interface SelectProps<T extends CollectionItem = CollectionItem, M extend
|
|
|
32
32
|
* @default 'text'
|
|
33
33
|
*/
|
|
34
34
|
UNSTABLE_valueDisplay?: 'text' | 'tags';
|
|
35
|
+
/**
|
|
36
|
+
* Whether the list of options should be filterable.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
UNSTABLE_isFilterable?: boolean;
|
|
40
|
+
/** The value of the filter input (controlled). */
|
|
41
|
+
UNSTABLE_filterValue?: string;
|
|
42
|
+
/** The initial value of the filter input (uncontrolled). */
|
|
43
|
+
UNSTABLE_defaultFilterValue?: string;
|
|
44
|
+
/** Handler that is called when the filter value changes. */
|
|
45
|
+
UNSTABLE_onFilterChange?: (value: string) => void;
|
|
46
|
+
/** A custom filter function to use instead of the default filter. */
|
|
47
|
+
UNSTABLE_filter?: ((textValue: string, inputValue: string, node: {
|
|
48
|
+
key: Key;
|
|
49
|
+
value: T | null;
|
|
50
|
+
}) => boolean) | null;
|
|
51
|
+
UNSTABLE_isClearable?: boolean;
|
|
35
52
|
}
|
|
36
53
|
/** The imperative API exposed by the `Select` component. */
|
|
37
54
|
export interface SelectApi {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { useContext, useImperativeHandle, useRef } from 'react';
|
|
5
|
-
import { useId } from 'react-aria';
|
|
6
|
-
import { Button as RACButton, Collection as RACCollection, Header as RACHeader, LabelContext as RACLabelContext, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection, ListLayout as RACListLayout, Select as RACSelect, SelectStateContext as RACSelectStateContext, SelectValue as RACSelectValue, Text as RACText, Virtualizer as RACVirtualizer, useSlottedContext, } from 'react-aria-components';
|
|
4
|
+
import { useContext, useImperativeHandle, useMemo, useRef, } from 'react';
|
|
5
|
+
import { useFilter, useId } from 'react-aria';
|
|
6
|
+
import { Autocomplete as RACAutocomplete, Button as RACButton, Collection as RACCollection, Header as RACHeader, LabelContext as RACLabelContext, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection, ListLayout as RACListLayout, Select as RACSelect, SelectStateContext as RACSelectStateContext, SelectValue as RACSelectValue, Text as RACText, Virtualizer as RACVirtualizer, useSlottedContext, } from 'react-aria-components';
|
|
7
7
|
import { forwardRef } from '../../forward-ref.js';
|
|
8
8
|
import { useLocalizedMessages } from '../../i18n/index.js';
|
|
9
9
|
import { IconCheck, IconChevronDown } from '../../icons/index.js';
|
|
@@ -11,11 +11,13 @@ import { isProduction } from '../../utils/is-production.js';
|
|
|
11
11
|
import { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';
|
|
12
12
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
13
13
|
import { withStyleProps } from '../../with-style-props.js';
|
|
14
|
+
import { Button } from '../button/button.js';
|
|
14
15
|
import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
|
|
15
16
|
import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
|
|
16
17
|
import { Spinner } from '../spinner/spinner.js';
|
|
17
18
|
import { TagGroup } from '../tag/tag-group.js';
|
|
18
19
|
import { Tag } from '../tag/tag.js';
|
|
20
|
+
import { SearchField } from '../text-inputs/search-field.js';
|
|
19
21
|
import { Text } from '../typography/text.js';
|
|
20
22
|
import { textStyle } from '../typography/utils.js';
|
|
21
23
|
import { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';
|
|
@@ -26,10 +28,9 @@ const VIRTUAL_LAYOUT_OPTIONS = {
|
|
|
26
28
|
padding: 0,
|
|
27
29
|
gap: 0,
|
|
28
30
|
};
|
|
29
|
-
function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, isVirtualized = false, apiRef, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, selectedKey, defaultSelectedKey, onSelectionChange, UNSTABLE_selectionMode, UNSTABLE_value, UNSTABLE_defaultValue, UNSTABLE_onChange, UNSTABLE_valueDisplay = 'text', ...props }, ref) {
|
|
31
|
+
function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, isVirtualized = false, apiRef, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, selectedKey, defaultSelectedKey, onSelectionChange, UNSTABLE_selectionMode, UNSTABLE_value, UNSTABLE_defaultValue, UNSTABLE_onChange, UNSTABLE_valueDisplay: valueDisplay = 'text', UNSTABLE_isFilterable: isFilterable = false, UNSTABLE_filterValue: filterValue, UNSTABLE_defaultFilterValue: defaultFilterValue, UNSTABLE_onFilterChange: onFilterChange, UNSTABLE_filter: filter, UNSTABLE_isClearable: isClearable = false, ...props }, ref) {
|
|
30
32
|
const triggerRef = useRef(null);
|
|
31
33
|
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
|
|
32
|
-
const collectionMessages = useLocalizedMessages('UNSTABLE_collection');
|
|
33
34
|
useProductionWarning(() => {
|
|
34
35
|
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
35
36
|
console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');
|
|
@@ -42,18 +43,41 @@ function Select({ children, items, label, description, error, UNSAFE_className,
|
|
|
42
43
|
focus: () => triggerRef.current?.focus(),
|
|
43
44
|
}), []);
|
|
44
45
|
const listBox = (_jsx(SelectListBox, { items: items, isLoading: isLoading, onLoadMore: onLoadMore, onScroll: onScroll, children: children }));
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
return isPlaceholder ? defaultChildren : selectedText;
|
|
50
|
-
} }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) }), UNSTABLE_selectionMode === 'multiple' && UNSTABLE_valueDisplay === 'tags' && _jsx(SelectTags, {})] }));
|
|
46
|
+
const listBoxWithVirtualizer = isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox);
|
|
47
|
+
const listBoxWithFilter = isFilterable ? (_jsx(SelectFilter, { filterValue: filterValue, defaultFilterValue: defaultFilterValue, onFilterChange: onFilterChange, filter: filter, children: listBoxWithVirtualizer })) : (listBoxWithVirtualizer);
|
|
48
|
+
return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, selectedKey: selectedKey, onSelectionChange: onSelectionChange, value: UNSTABLE_value, defaultValue: UNSTABLE_defaultValue, onChange: UNSTABLE_onChange, selectionMode: UNSTABLE_selectionMode, allowsEmptyCollection: isLoading, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsx(SelectButton, { ref: triggerRef, valueDisplay: valueDisplay }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsxs(CollapsibleList, { offset: 5, maxHeight: 315, children: [listBoxWithFilter, _jsx(SelectFooter, { isClearable: isClearable })] }), UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && _jsx(SelectTags, {})] }));
|
|
51
49
|
}
|
|
50
|
+
const SelectButton = forwardRef(({ valueDisplay }, ref) => {
|
|
51
|
+
const collectionMessages = useLocalizedMessages('UNSTABLE_collection');
|
|
52
|
+
return (_jsxs(RACButton, { ref: ref, className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder, state }) => {
|
|
53
|
+
if (valueDisplay === 'tags' && state.selectedItems.length > 0) {
|
|
54
|
+
return (_jsx(Text, { as: "span", variant: "body", tone: "subtle", children: collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length }) }));
|
|
55
|
+
}
|
|
56
|
+
return isPlaceholder ? defaultChildren : selectedText;
|
|
57
|
+
} }), _jsx(IconChevronDown, {})] }));
|
|
58
|
+
});
|
|
52
59
|
function SelectListBox({ children, items, isLoading, onLoadMore, ...props }) {
|
|
53
60
|
const collectionMessages = useLocalizedMessages('UNSTABLE_collection');
|
|
54
61
|
const selectState = useContext(RACSelectStateContext);
|
|
55
62
|
const isEmpty = selectState?.collection.size === 0;
|
|
56
|
-
return (_jsxs(RACListBox, { className: "cim-select-listbox",
|
|
63
|
+
return (_jsxs(RACListBox, { className: "cim-select-listbox", renderEmptyState: () => !isLoading && (
|
|
64
|
+
// TODO: i18n once stabilized
|
|
65
|
+
_jsx(Text, { as: "p", variant: "body", tone: "subtle", marginX: 8, marginY: 8, UNSAFE_className: "cim-select-listbox-empty-state", children: "No results found." })), ...props, children: [_jsx(RACCollection, { items: items, children: children }), _jsx(RACListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: isLoading, children: _jsx(Spinner, { "aria-label": collectionMessages.format(isEmpty ? 'loading' : 'loadingMore'), size: "small", marginY: 8 }) })] }));
|
|
66
|
+
}
|
|
67
|
+
function SelectFilter({ children, filterValue, defaultFilterValue, onFilterChange, filter, }) {
|
|
68
|
+
const { contains } = useFilter({ sensitivity: 'base' });
|
|
69
|
+
const filterFn = useMemo(() => {
|
|
70
|
+
if (filter === null)
|
|
71
|
+
return undefined;
|
|
72
|
+
if (filter == null)
|
|
73
|
+
return contains;
|
|
74
|
+
return (textValue, inputValue, node) => {
|
|
75
|
+
return filter(textValue, inputValue, { key: node.key, value: node.value });
|
|
76
|
+
};
|
|
77
|
+
}, [filter, contains]);
|
|
78
|
+
return (_jsxs(RACAutocomplete, { filter: filterFn, inputValue: filterValue, defaultInputValue: defaultFilterValue, onInputChange: onFilterChange, children: [_jsx(SearchField
|
|
79
|
+
// TODO: i18n once stabilized
|
|
80
|
+
, { "aria-label": "Search", placeholder: "Search", autoFocus: true, marginX: 8, marginTop: 8 }), children] }));
|
|
57
81
|
}
|
|
58
82
|
function SelectTags() {
|
|
59
83
|
const labelContext = useSlottedContext(RACLabelContext);
|
|
@@ -71,6 +95,19 @@ function SelectTags() {
|
|
|
71
95
|
}, marginTop: 8, children: (item) => _jsx(Tag, { children: item.label }) }), _jsx(UNSTABLE_VisuallyHidden, { id: selectedItemsLabelId, children: "selected items" })] }));
|
|
72
96
|
} }));
|
|
73
97
|
}
|
|
98
|
+
function SelectFooter({ isClearable }) {
|
|
99
|
+
const selectState = useContext(RACSelectStateContext);
|
|
100
|
+
if (!isClearable) {
|
|
101
|
+
return null;
|
|
102
|
+
}
|
|
103
|
+
if (!selectState || selectState.selectedItems.length === 0) {
|
|
104
|
+
return null;
|
|
105
|
+
}
|
|
106
|
+
return (_jsx("div", { className: "cim-select-footer", children: _jsx(Button, { onPress: () => {
|
|
107
|
+
selectState.setValue(null);
|
|
108
|
+
selectState.close();
|
|
109
|
+
}, size: "small", variant: "tertiary", children: "Clear selection" }) }));
|
|
110
|
+
}
|
|
74
111
|
/**
|
|
75
112
|
* Allows users to select one item from a collapsible list.
|
|
76
113
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAA0C,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxG,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,YAAY,IAAI,eAAe,EAC/B,OAAO,IAAI,UAAU,EACrB,WAAW,IAAI,cAAc,EAE7B,mBAAmB,IAAI,sBAAsB,EAE7C,cAAc,IAAI,iBAAiB,EACnC,UAAU,IAAI,aAAa,EAE3B,MAAM,IAAI,SAAS,EAEnB,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,IAAI,cAAc,EAC7B,IAAI,IAAI,OAAO,EACf,WAAW,IAAI,cAAc,EAC7B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC5G,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAWpC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAIhF,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AA2DF,SAAS,MAAM,CACb,EACE,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,kBAAkB,EAAE,SAAS,EAC7B,mBAAmB,EAAE,UAAU,EAC/B,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,GAAG,MAAM,EAC9B,GAAG,KAAK,EACU,EACpB,GAAiC;IAEjC,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEnD,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,qBAAqB,CAAC,CAAC;IAEvE,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;IACxF,CAAC;IAED,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE;KACzC,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,YAC1F,QAAQ,GACK,CACjB,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,cAAc,EACrB,YAAY,EAAE,qBAAqB,EACnC,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,sBAAsB,EACrC,qBAAqB,EAAE,SAAS,aAEhC,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,SAAS,IAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,mBAAmB,aACvD,KAAC,cAAc,IACb,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,YAEvG,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE;4BAC3D,IAAI,qBAAqB,KAAK,MAAM,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gCACvE,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,YACzC,kBAAkB,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,GACzF,CACR,CAAC;4BACJ,CAAC;4BAED,OAAO,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC;wBACxD,CAAC,GACc,EACjB,KAAC,eAAe,KAAG,IACT,EACZ,KAAC,cAAc,cAAE,KAAK,GAAkB,EACxC,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAC1D,KAAC,eAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEb,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACe,EACjB,sBAAsB,KAAK,UAAU,IAAI,qBAAqB,KAAK,MAAM,IAAI,KAAC,UAAU,KAAG,IAClF,CACb,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAA2B,EAC/C,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EAC8D;IACtE,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,qBAAqB,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,WAAW,EAAE,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC;IAEnD,OAAO,CACL,MAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,KAAK,KAAK,aAClD,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,EACvD,KAAC,sBAAsB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAClE,KAAC,OAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,GACzF,IACd,CACd,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACxD,MAAM,oBAAoB,GAAG,KAAK,EAAE,CAAC;IAErC,OAAO,CACL,KAAC,cAAc,cACZ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;YACb,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACrC,OAAO,mBAAK,CAAC;YACf,CAAC;YAED,OAAO,CACL,8BACE,KAAC,QAAQ,uBACU,CAAC,YAAY,EAAE,EAAE,EAAE,oBAAoB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnF,KAAK,EAAE,KAAK,CAAC,aAAa;6BACvB,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC;6BAC9B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,EAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;4BACjB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gCAC/B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;4BAC1D,CAAC;wBACH,CAAC,EACD,SAAS,EAAE,CAAC,YAEX,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,GAAG,cAAE,IAAI,CAAC,KAAK,GAAO,GACzB,EAEX,KAAC,uBAAuB,IAAC,EAAE,EAAE,oBAAoB,+BAA0C,IAC1F,CACJ,CAAC;QACJ,CAAC,GACc,CAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAS7B,kDAAkD;AAClD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChE,MAAM,SAAS,GAAG,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,SAAS,YACxE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,8BACE,KAAC,SAAS,KAAG,EAEb,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAStC,wDAAwD;AACxD,MAAM,UAAU,aAAa,CAA2B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAyB;IACjH,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;IAC/F,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAErG,KAAK,GACI,EACZ,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useContext, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n> extends CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay = 'text',\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACButton ref={triggerRef} className=\"cim-select-button\">\n <RACSelectValue\n className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n >\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (UNSTABLE_valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n <IconChevronDown />\n </RACButton>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n {UNSTABLE_selectionMode === 'multiple' && UNSTABLE_valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & { isLoading?: boolean; onLoadMore?: () => void }) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox className=\"cim-select-listbox\" {...props}>\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n> extends CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {listBoxWithFilter}\n <SelectFooter isClearable={isClearable} />\n </CollapsibleList>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\nconst SelectButton = forwardRef<{ valueDisplay: SelectProps['UNSTABLE_valueDisplay'] }, HTMLButtonElement>(\n ({ valueDisplay }, ref) => {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <RACButton ref={ref} className=\"cim-select-button\">\n <RACSelectValue\n className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n >\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n <IconChevronDown />\n </RACButton>\n );\n },\n);\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\ninterface SelectFooterProps {\n isClearable?: boolean;\n}\n\nfunction SelectFooter({ isClearable }: SelectFooterProps) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!isClearable) {\n return null;\n }\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <div className=\"cim-select-footer\">\n <Button\n onPress={() => {\n selectState.setValue(null);\n selectState.close();\n }}\n size=\"small\"\n variant=\"tertiary\"\n >\n {/* TODO: i18n once stabilized */}\n Clear selection\n </Button>\n </div>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
|