@cloudscape-design/components 3.0.930 → 3.0.932
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/internal/components/option/interfaces.d.ts +1 -1
- package/internal/components/option/interfaces.d.ts.map +1 -1
- package/internal/components/option/interfaces.js.map +1 -1
- package/internal/components/option/utils/prepare-options.d.ts +1 -0
- package/internal/components/option/utils/prepare-options.d.ts.map +1 -1
- package/internal/components/option/utils/prepare-options.js +1 -0
- package/internal/components/option/utils/prepare-options.js.map +1 -1
- package/internal/components/options-list/index.d.ts +1 -0
- package/internal/components/options-list/index.d.ts.map +1 -1
- package/internal/components/options-list/index.js +2 -2
- package/internal/components/options-list/index.js.map +1 -1
- package/internal/components/selectable-item/index.d.ts.map +1 -1
- package/internal/components/selectable-item/index.js +2 -1
- package/internal/components/selectable-item/index.js.map +1 -1
- package/internal/components/selectable-item/interfaces.d.ts +1 -0
- package/internal/components/selectable-item/interfaces.d.ts.map +1 -1
- package/internal/components/selectable-item/interfaces.js.map +1 -1
- package/internal/components/selectable-item/styles.css.js +20 -19
- package/internal/components/selectable-item/styles.scoped.css +41 -37
- package/internal/components/selectable-item/styles.selectors.js +20 -19
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/multiselect/interfaces.d.ts +11 -2
- package/multiselect/interfaces.d.ts.map +1 -1
- package/multiselect/interfaces.js.map +1 -1
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +5 -3
- package/multiselect/internal.js.map +1 -1
- package/multiselect/use-multiselect.d.ts +7 -4
- package/multiselect/use-multiselect.d.ts.map +1 -1
- package/multiselect/use-multiselect.js +33 -9
- package/multiselect/use-multiselect.js.map +1 -1
- package/package.json +1 -1
- package/select/parts/common.d.ts +2 -0
- package/select/parts/common.d.ts.map +1 -0
- package/select/parts/common.js +4 -0
- package/select/parts/common.js.map +1 -0
- package/select/parts/multiselect-item.d.ts.map +1 -1
- package/select/parts/multiselect-item.js +3 -2
- package/select/parts/multiselect-item.js.map +1 -1
- package/select/parts/plain-list.d.ts.map +1 -1
- package/select/parts/plain-list.js +22 -14
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/virtual-list.d.ts.map +1 -1
- package/select/parts/virtual-list.js +26 -9
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/render-options.d.ts +4 -3
- package/select/utils/render-options.d.ts.map +1 -1
- package/select/utils/render-options.js +5 -5
- package/select/utils/render-options.js.map +1 -1
- package/select/utils/scroll-to-index.d.ts +5 -0
- package/select/utils/scroll-to-index.d.ts.map +1 -0
- package/select/utils/scroll-to-index.js +14 -0
- package/select/utils/scroll-to-index.js.map +1 -0
- package/select/utils/use-select.d.ts +4 -1
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +18 -9
- package/select/utils/use-select.js.map +1 -1
- package/table/body-cell/styles.css.js +46 -46
- package/table/body-cell/styles.scoped.css +378 -369
- package/table/body-cell/styles.selectors.js +46 -46
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +2 -0
- package/table/internal.js.map +1 -1
- package/table/use-prevent-sticky-click-scroll.d.ts +3 -0
- package/table/use-prevent-sticky-click-scroll.d.ts.map +1 -0
- package/table/use-prevent-sticky-click-scroll.js +79 -0
- package/table/use-prevent-sticky-click-scroll.js.map +1 -0
- package/test-utils/dom/internal/dropdown-host.d.ts +20 -2
- package/test-utils/dom/internal/dropdown-host.js +33 -2
- package/test-utils/dom/internal/dropdown-host.js.map +1 -1
- package/test-utils/selectors/internal/dropdown-host.d.ts +1 -0
- package/test-utils/selectors/internal/dropdown-host.js +6 -0
- package/test-utils/selectors/internal/dropdown-host.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -31,8 +31,12 @@ export interface MultiselectProps extends BaseSelectProps {
|
|
|
31
31
|
deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;
|
|
32
32
|
/**
|
|
33
33
|
* An object containing all the localized strings required by the component.
|
|
34
|
-
*
|
|
35
|
-
*
|
|
34
|
+
*
|
|
35
|
+
* * `selectAllText` (string) - Specifies the text to be displayed next to the checkbox that selects or deselects all options.
|
|
36
|
+
* * `tokenLimitShowFewer` (string) - Specifies the text to be displayed in the "Show fewer" button for the token group control.
|
|
37
|
+
* * `tokenLimitShowMore` (string) - Specifies the text to be displayed in the "Show more" button for the token group control. This string should not contain the number of hidden tokens
|
|
38
|
+
* because this will be added by the component automatically.
|
|
39
|
+
* @i18n
|
|
36
40
|
*/
|
|
37
41
|
i18nStrings?: MultiselectProps.I18nStrings;
|
|
38
42
|
/**
|
|
@@ -54,6 +58,10 @@ export interface MultiselectProps extends BaseSelectProps {
|
|
|
54
58
|
* Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowMore` label on one page.
|
|
55
59
|
*/
|
|
56
60
|
tokenLimitShowMoreAriaLabel?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Enables users to select and deselect all options with a special extra checkbox which is displayed at the start of the dropdown.
|
|
63
|
+
*/
|
|
64
|
+
enableSelectAll?: boolean;
|
|
57
65
|
}
|
|
58
66
|
export declare namespace MultiselectProps {
|
|
59
67
|
type Option = OptionDefinition;
|
|
@@ -62,6 +70,7 @@ export declare namespace MultiselectProps {
|
|
|
62
70
|
type DeselectAriaLabelFunction = (option: Option) => string;
|
|
63
71
|
type TriggerVariant = 'placeholder' | 'tokens';
|
|
64
72
|
interface I18nStrings {
|
|
73
|
+
selectAllText?: string;
|
|
65
74
|
tokenLimitShowFewer?: string;
|
|
66
75
|
tokenLimitShowMore?: string;
|
|
67
76
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClH,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;;OAGG;IACH,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,yBAAyB,CAAC;IAC/D
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClH,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;;OAGG;IACH,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,yBAAyB,CAAC;IAC/D;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAE/E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,gBAAgB,CAAC;IACtC,KAAY,WAAW,GAAG,qBAAqB,CAAC;IAChD,KAAY,OAAO,GAAG,aAAa,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IAC1D,KAAY,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnE,KAAY,cAAc,GAAG,aAAa,GAAG,QAAQ,CAAC;IAEtD,UAAiB,WAAW;QAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IAED,UAAiB,uBAAuB;QACtC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KACxC;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseSelectProps } from '../select/interfaces';\n\nexport interface MultiselectProps extends BaseSelectProps {\n /**\n * Specifies the currently selected options.\n * Provide an empty array to clear the selection.\n */\n selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n /**\n * Determines whether the dropdown list stays open after the user selects an item.\n */\n keepOpen?: boolean;\n /**\n * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n */\n tokenLimit?: number;\n /**\n * Hides the tokens displayed underneath the component.\n * Only use this if the selected options are displayed elsewhere on the page.\n */\n hideTokens?: boolean;\n /**\n * Shows tokens inside the trigger instead of below it.\n */\n inlineTokens?: boolean;\n /**\n * Specifies an `aria-label` for the token deselection button.\n * @i18n\n */\n deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n /**\n * An object containing all the localized strings required by the component.\n *
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseSelectProps } from '../select/interfaces';\n\nexport interface MultiselectProps extends BaseSelectProps {\n /**\n * Specifies the currently selected options.\n * Provide an empty array to clear the selection.\n */\n selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n /**\n * Determines whether the dropdown list stays open after the user selects an item.\n */\n keepOpen?: boolean;\n /**\n * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n */\n tokenLimit?: number;\n /**\n * Hides the tokens displayed underneath the component.\n * Only use this if the selected options are displayed elsewhere on the page.\n */\n hideTokens?: boolean;\n /**\n * Shows tokens inside the trigger instead of below it.\n */\n inlineTokens?: boolean;\n /**\n * Specifies an `aria-label` for the token deselection button.\n * @i18n\n */\n deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n /**\n * An object containing all the localized strings required by the component.\n *\n * * `selectAllText` (string) - Specifies the text to be displayed next to the checkbox that selects or deselects all options.\n * * `tokenLimitShowFewer` (string) - Specifies the text to be displayed in the \"Show fewer\" button for the token group control.\n * * `tokenLimitShowMore` (string) - Specifies the text to be displayed in the \"Show more\" button for the token group control. This string should not contain the number of hidden tokens\n * because this will be added by the component automatically.\n * @i18n\n */\n i18nStrings?: MultiselectProps.I18nStrings;\n /**\n * Called when the user selects or deselects an option.\n * The event `detail` contains the current `selectedOptions`.\n */\n onChange?: NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>;\n\n /**\n * Automatically focuses the trigger when component is mounted.\n */\n autoFocus?: boolean;\n\n /**\n * Adds an aria-label to the \"Show fewer\" button for the token group control.\n * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowFewer` label on one page.\n */\n tokenLimitShowFewerAriaLabel?: string;\n /**\n * Adds an aria-label to the \"Show more\" button for the token group control.\n * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowMore` label on one page.\n */\n tokenLimitShowMoreAriaLabel?: string;\n /**\n * Enables users to select and deselect all options with a special extra checkbox which is displayed at the start of the dropdown.\n */\n enableSelectAll?: boolean;\n}\n\nexport namespace MultiselectProps {\n export type Option = OptionDefinition;\n export type OptionGroup = OptionGroupDefinition;\n export type Options = ReadonlyArray<Option | OptionGroup>;\n export type DeselectAriaLabelFunction = (option: Option) => string;\n export type TriggerVariant = 'placeholder' | 'tokens';\n\n export interface I18nStrings {\n selectAllText?: string;\n tokenLimitShowFewer?: string;\n tokenLimitShowMore?: string;\n }\n\n export interface MultiselectChangeDetail {\n selectedOptions: ReadonlyArray<Option>;\n }\n\n export interface Ref {\n /**\n * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n */\n focus(): void;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAU3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,QAAA,MAAM,mBAAmB;;;;;;;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAU3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,QAAA,MAAM,mBAAmB;;;;;;;gFA+KxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/multiselect/internal.js
CHANGED
|
@@ -20,7 +20,7 @@ import { useMultiselect } from './use-multiselect';
|
|
|
20
20
|
import styles from './styles.css.js';
|
|
21
21
|
const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
22
22
|
var _b;
|
|
23
|
-
var { options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef = null, autoFocus } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "ariaRequired", "placeholder", "disabled", "readOnly", "ariaLabel", "selectedOptions", "deselectAriaLabel", "tokenLimit", "i18nStrings", "virtualScroll", "inlineTokens", "hideTokens", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel", "__internalRootRef", "autoFocus"]);
|
|
23
|
+
var { options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef = null, autoFocus, enableSelectAll } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "ariaRequired", "placeholder", "disabled", "readOnly", "ariaLabel", "selectedOptions", "deselectAriaLabel", "tokenLimit", "i18nStrings", "virtualScroll", "inlineTokens", "hideTokens", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel", "__internalRootRef", "autoFocus", "enableSelectAll"]);
|
|
24
24
|
const baseProps = getBaseProps(restProps);
|
|
25
25
|
const formFieldContext = useFormFieldContext(restProps);
|
|
26
26
|
const i18n = useInternalI18n('multiselect');
|
|
@@ -39,7 +39,9 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
39
39
|
footerId,
|
|
40
40
|
filteringValue,
|
|
41
41
|
setFilteringValue,
|
|
42
|
-
externalRef
|
|
42
|
+
externalRef,
|
|
43
|
+
enableSelectAll,
|
|
44
|
+
i18nStrings }, restProps));
|
|
43
45
|
const filter = (React.createElement(Filter, Object.assign({ clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, multiselectProps.getFilterProps())));
|
|
44
46
|
const trigger = (React.createElement(Trigger, Object.assign({ placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerProps: multiselectProps.getTriggerProps(disabled, autoFocus), selectedOption: null, selectedOptions: selectedOptions, triggerVariant: inlineTokens ? 'tokens' : 'placeholder', isOpen: multiselectProps.isOpen }, formFieldContext, { controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, ariaLabelId) })));
|
|
45
47
|
const tokens = selectedOptions.map(option => ({
|
|
@@ -64,7 +66,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
64
66
|
const dropdownProps = multiselectProps.getDropdownProps();
|
|
65
67
|
return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }, multiselectProps.getWrapperProps()),
|
|
66
68
|
React.createElement(Dropdown, Object.assign({}, dropdownProps, { ariaLabelledby: dropdownProps.dropdownContentRole ? joinStrings(ariaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined, open: multiselectProps.isOpen, trigger: trigger, header: filter, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport, stretchBeyondTriggerWidth: true }),
|
|
67
|
-
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: multiselectProps.getMenuProps(), getOptionProps: multiselectProps.getOptionProps, filteredOptions: multiselectProps.filteredOptions, filteringValue: filteringValue, ref: multiselectProps.scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: true, screenReaderContent: multiselectProps.announcement, highlightType: multiselectProps.highlightType })),
|
|
69
|
+
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: multiselectProps.getMenuProps(), getOptionProps: multiselectProps.getOptionProps, filteredOptions: multiselectProps.filteredOptions, filteringValue: filteringValue, ref: multiselectProps.scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: true, screenReaderContent: multiselectProps.announcement, highlightType: multiselectProps.highlightType, firstOptionSticky: enableSelectAll })),
|
|
68
70
|
showTokens && (React.createElement(InternalTokenGroup, Object.assign({}, multiselectProps.getTokenProps(), { className: styles.tokens, alignment: "horizontal", limit: tokenLimit, items: tokens, i18nStrings: tokenGroupI18nStrings, limitShowMoreAriaLabel: tokenLimitShowMoreAriaLabel, limitShowFewerAriaLabel: tokenLimitShowFewerAriaLabel, disableOuterPadding: true, readOnly: readOnly }))),
|
|
69
71
|
React.createElement(ScreenreaderOnly, { id: ariaLabelId }, ariaLabel)));
|
|
70
72
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport Dropdown from '../internal/components/dropdown';\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport Filter from '../select/parts/filter';\nimport PlainList from '../select/parts/plain-list';\nimport Trigger from '../select/parts/trigger';\nimport VirtualList from '../select/parts/virtual-list';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport InternalTokenGroup from '../token-group/internal';\nimport { MultiselectProps } from './interfaces';\nimport { useMultiselect } from './use-multiselect';\n\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = SomeRequired<\n MultiselectProps,\n 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen' | 'hideTokens'\n> &\n InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options,\n filteringType,\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\n ariaRequired,\n placeholder,\n disabled,\n readOnly,\n ariaLabel,\n selectedOptions,\n deselectAriaLabel,\n tokenLimit,\n i18nStrings,\n virtualScroll,\n inlineTokens = false,\n hideTokens,\n expandToViewport,\n tokenLimitShowFewerAriaLabel,\n tokenLimitShowMoreAriaLabel,\n __internalRootRef = null,\n autoFocus,\n ...restProps\n }: InternalMultiselectProps,\n externalRef: React.Ref<MultiselectProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n const i18n = useInternalI18n('multiselect');\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\n const ariaLabelId = useUniqueId('multiselect-ariaLabel-');\n const footerId = useUniqueId('multiselect-footer-');\n\n const [filteringValue, setFilteringValue] = useState('');\n const multiselectProps = useMultiselect({\n options,\n selectedOptions,\n filteringType,\n disabled,\n deselectAriaLabel,\n controlId,\n ariaLabelId,\n footerId,\n filteringValue,\n setFilteringValue,\n externalRef,\n ...restProps,\n });\n\n const filter = (\n <Filter\n clearAriaLabel={filteringClearAriaLabel}\n filteringType={filteringType}\n placeholder={filteringPlaceholder}\n ariaLabel={filteringAriaLabel}\n ariaRequired={ariaRequired}\n value={filteringValue}\n {...multiselectProps.getFilterProps()}\n />\n );\n\n const trigger = (\n <Trigger\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n triggerProps={multiselectProps.getTriggerProps(disabled, autoFocus)}\n selectedOption={null}\n selectedOptions={selectedOptions}\n triggerVariant={inlineTokens ? 'tokens' : 'placeholder'}\n isOpen={multiselectProps.isOpen}\n {...formFieldContext}\n controlId={controlId}\n ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, ariaLabelId)}\n />\n );\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n format({ option__label: option.label ?? '' })\n ),\n }));\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const showTokens = !hideTokens && !inlineTokens && tokens.length > 0;\n\n const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n limitShowMore: i18nStrings?.tokenLimitShowMore,\n };\n\n const dropdownStatus = multiselectProps.dropdownStatus;\n const dropdownProps = multiselectProps.getDropdownProps();\n\n return (\n <div\n {...baseProps}\n ref={__internalRootRef}\n className={clsx(styles.root, baseProps.className)}\n {...multiselectProps.getWrapperProps()}\n >\n <Dropdown\n {...dropdownProps}\n ariaLabelledby={dropdownProps.dropdownContentRole ? joinStrings(ariaLabelId, controlId) : undefined}\n ariaDescribedby={\n dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined\n }\n open={multiselectProps.isOpen}\n trigger={trigger}\n header={filter}\n footer={\n dropdownStatus.isSticky ? (\n <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n expandToViewport={expandToViewport}\n stretchBeyondTriggerWidth={true}\n >\n <ListComponent\n listBottom={\n !dropdownStatus.isSticky ? (\n <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n menuProps={multiselectProps.getMenuProps()}\n getOptionProps={multiselectProps.getOptionProps}\n filteredOptions={multiselectProps.filteredOptions}\n filteringValue={filteringValue}\n ref={multiselectProps.scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n checkboxes={true}\n useInteractiveGroups={true}\n screenReaderContent={multiselectProps.announcement}\n highlightType={multiselectProps.highlightType}\n />\n </Dropdown>\n\n {showTokens && (\n <InternalTokenGroup\n {...multiselectProps.getTokenProps()}\n className={styles.tokens}\n alignment=\"horizontal\"\n limit={tokenLimit}\n items={tokens}\n i18nStrings={tokenGroupI18nStrings}\n limitShowMoreAriaLabel={tokenLimitShowMoreAriaLabel}\n limitShowFewerAriaLabel={tokenLimitShowFewerAriaLabel}\n disableOuterPadding={true}\n readOnly={readOnly}\n />\n )}\n\n <ScreenreaderOnly id={ariaLabelId}>{ariaLabel}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalMultiselect;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport Dropdown from '../internal/components/dropdown';\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport Filter from '../select/parts/filter';\nimport PlainList from '../select/parts/plain-list';\nimport Trigger from '../select/parts/trigger';\nimport VirtualList from '../select/parts/virtual-list';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport InternalTokenGroup from '../token-group/internal';\nimport { MultiselectProps } from './interfaces';\nimport { useMultiselect } from './use-multiselect';\n\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = SomeRequired<\n MultiselectProps,\n 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen' | 'hideTokens'\n> &\n InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options,\n filteringType,\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\n ariaRequired,\n placeholder,\n disabled,\n readOnly,\n ariaLabel,\n selectedOptions,\n deselectAriaLabel,\n tokenLimit,\n i18nStrings,\n virtualScroll,\n inlineTokens = false,\n hideTokens,\n expandToViewport,\n tokenLimitShowFewerAriaLabel,\n tokenLimitShowMoreAriaLabel,\n __internalRootRef = null,\n autoFocus,\n enableSelectAll,\n ...restProps\n }: InternalMultiselectProps,\n externalRef: React.Ref<MultiselectProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n const i18n = useInternalI18n('multiselect');\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\n const ariaLabelId = useUniqueId('multiselect-ariaLabel-');\n const footerId = useUniqueId('multiselect-footer-');\n\n const [filteringValue, setFilteringValue] = useState('');\n const multiselectProps = useMultiselect({\n options,\n selectedOptions,\n filteringType,\n disabled,\n deselectAriaLabel,\n controlId,\n ariaLabelId,\n footerId,\n filteringValue,\n setFilteringValue,\n externalRef,\n enableSelectAll,\n i18nStrings,\n ...restProps,\n });\n\n const filter = (\n <Filter\n clearAriaLabel={filteringClearAriaLabel}\n filteringType={filteringType}\n placeholder={filteringPlaceholder}\n ariaLabel={filteringAriaLabel}\n ariaRequired={ariaRequired}\n value={filteringValue}\n {...multiselectProps.getFilterProps()}\n />\n );\n\n const trigger = (\n <Trigger\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n triggerProps={multiselectProps.getTriggerProps(disabled, autoFocus)}\n selectedOption={null}\n selectedOptions={selectedOptions}\n triggerVariant={inlineTokens ? 'tokens' : 'placeholder'}\n isOpen={multiselectProps.isOpen}\n {...formFieldContext}\n controlId={controlId}\n ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, ariaLabelId)}\n />\n );\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n format({ option__label: option.label ?? '' })\n ),\n }));\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const showTokens = !hideTokens && !inlineTokens && tokens.length > 0;\n\n const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n limitShowMore: i18nStrings?.tokenLimitShowMore,\n };\n\n const dropdownStatus = multiselectProps.dropdownStatus;\n const dropdownProps = multiselectProps.getDropdownProps();\n\n return (\n <div\n {...baseProps}\n ref={__internalRootRef}\n className={clsx(styles.root, baseProps.className)}\n {...multiselectProps.getWrapperProps()}\n >\n <Dropdown\n {...dropdownProps}\n ariaLabelledby={dropdownProps.dropdownContentRole ? joinStrings(ariaLabelId, controlId) : undefined}\n ariaDescribedby={\n dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined\n }\n open={multiselectProps.isOpen}\n trigger={trigger}\n header={filter}\n footer={\n dropdownStatus.isSticky ? (\n <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n expandToViewport={expandToViewport}\n stretchBeyondTriggerWidth={true}\n >\n <ListComponent\n listBottom={\n !dropdownStatus.isSticky ? (\n <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n menuProps={multiselectProps.getMenuProps()}\n getOptionProps={multiselectProps.getOptionProps}\n filteredOptions={multiselectProps.filteredOptions}\n filteringValue={filteringValue}\n ref={multiselectProps.scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n checkboxes={true}\n useInteractiveGroups={true}\n screenReaderContent={multiselectProps.announcement}\n highlightType={multiselectProps.highlightType}\n firstOptionSticky={enableSelectAll}\n />\n </Dropdown>\n\n {showTokens && (\n <InternalTokenGroup\n {...multiselectProps.getTokenProps()}\n className={styles.tokens}\n alignment=\"horizontal\"\n limit={tokenLimit}\n items={tokens}\n i18nStrings={tokenGroupI18nStrings}\n limitShowMoreAriaLabel={tokenLimitShowMoreAriaLabel}\n limitShowFewerAriaLabel={tokenLimitShowFewerAriaLabel}\n disableOuterPadding={true}\n readOnly={readOnly}\n />\n )}\n\n <ScreenreaderOnly id={ariaLabelId}>{ariaLabel}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalMultiselect;\n"]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownStatusProps } from '../internal/components/dropdown-status';
|
|
3
|
+
import { DropdownOption } from '../internal/components/option/interfaces';
|
|
3
4
|
import { SomeRequired } from '../internal/types';
|
|
4
5
|
import { SelectListProps } from '../select/parts/plain-list';
|
|
5
6
|
import { TokenGroupProps } from '../token-group/interfaces';
|
|
6
7
|
import { MultiselectProps } from './interfaces';
|
|
7
|
-
type UseMultiselectOptions = SomeRequired<Pick<MultiselectProps, 'options' | 'selectedOptions' | 'filteringType' | 'filteringResultsText' | 'disabled' | 'noMatch' | 'renderHighlightedAriaLive' | 'deselectAriaLabel' | 'keepOpen' | 'onBlur' | 'onFocus' | 'onLoadItems' | 'onChange' | 'selectedAriaLabel'> & DropdownStatusProps & {
|
|
8
|
+
type UseMultiselectOptions = SomeRequired<Pick<MultiselectProps, 'options' | 'selectedOptions' | 'filteringType' | 'filteringResultsText' | 'disabled' | 'noMatch' | 'renderHighlightedAriaLive' | 'deselectAriaLabel' | 'keepOpen' | 'onBlur' | 'onFocus' | 'onLoadItems' | 'onChange' | 'selectedAriaLabel' | 'enableSelectAll' | 'i18nStrings'> & DropdownStatusProps & {
|
|
8
9
|
controlId?: string;
|
|
9
10
|
ariaLabelId: string;
|
|
10
11
|
footerId: string;
|
|
@@ -14,13 +15,13 @@ type UseMultiselectOptions = SomeRequired<Pick<MultiselectProps, 'options' | 'se
|
|
|
14
15
|
}, 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen'> & {
|
|
15
16
|
embedded?: boolean;
|
|
16
17
|
};
|
|
17
|
-
export declare function useMultiselect({ options, filteringType, filteringResultsText, disabled, statusType, empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions, deselectAriaLabel, keepOpen, onBlur, onFocus, onLoadItems, onChange, controlId, ariaLabelId, footerId, filteringValue, setFilteringValue, externalRef, embedded, ...restProps }: UseMultiselectOptions): {
|
|
18
|
+
export declare function useMultiselect({ options, filteringType, filteringResultsText, disabled, statusType, empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions, deselectAriaLabel, keepOpen, onBlur, onFocus, onLoadItems, onChange, controlId, ariaLabelId, footerId, filteringValue, setFilteringValue, externalRef, embedded, enableSelectAll, i18nStrings, ...restProps }: UseMultiselectOptions): {
|
|
18
19
|
isOpen: boolean;
|
|
19
20
|
tokens: readonly TokenGroupProps.Item[];
|
|
20
21
|
announcement: string;
|
|
21
22
|
dropdownStatus: import("../internal/components/dropdown-status").DropdownStatusResult;
|
|
22
23
|
filteringValue: string;
|
|
23
|
-
filteredOptions: readonly
|
|
24
|
+
filteredOptions: readonly DropdownOption[];
|
|
24
25
|
highlightType: import("../internal/components/options-list/utils/use-highlight-option").HighlightType;
|
|
25
26
|
scrollToIndex: React.RefObject<SelectListProps.SelectListRef>;
|
|
26
27
|
getFilterProps: () => Partial<import("../select/parts/filter").FilterProps>;
|
|
@@ -46,9 +47,10 @@ export declare function useMultiselect({ options, filteringType, filteringResult
|
|
|
46
47
|
statusType: DropdownStatusProps.StatusType;
|
|
47
48
|
nativeAttributes?: Record<string, any> | undefined;
|
|
48
49
|
decreaseBlockMargin?: boolean | undefined;
|
|
50
|
+
stickyItemBlockSize?: number | null | undefined;
|
|
49
51
|
ref: React.RefObject<HTMLUListElement>;
|
|
50
52
|
};
|
|
51
|
-
getOptionProps: (option:
|
|
53
|
+
getOptionProps: (option: DropdownOption, index: number) => any;
|
|
52
54
|
getTokenProps: () => {
|
|
53
55
|
onDismiss: import("../internal/events").NonCancelableEventHandler<TokenGroupProps.DismissDetail>;
|
|
54
56
|
};
|
|
@@ -62,6 +64,7 @@ export declare function useMultiselect({ options, filteringType, filteringResult
|
|
|
62
64
|
getWrapperProps: () => {
|
|
63
65
|
onKeyDown: (event: React.KeyboardEvent<Element>) => void;
|
|
64
66
|
};
|
|
67
|
+
highlightedIndex: number;
|
|
65
68
|
};
|
|
66
69
|
export {};
|
|
67
70
|
//# sourceMappingURL=use-multiselect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,mBAAmB,EAAqB,MAAM,wCAAwC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAiC,MAAM,0CAA0C,CAAC;AAIzG,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,qBAAqB,GAAG,YAAY,CACvC,IAAI,CACF,gBAAgB,EACd,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,sBAAsB,GACtB,UAAU,GACV,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,GACnB,UAAU,GACV,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,iBAAiB,GACjB,aAAa,CAChB,GACC,mBAAmB,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CAC9C,EACH,SAAS,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,GAAG,UAAU,CAC5E,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3B,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAuLc,gBAAgB;;;;;;;;;;EA0CrD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { __rest } from "tslib";
|
|
4
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
4
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
5
5
|
import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { useInternalI18n } from '../i18n/context';
|
|
7
7
|
import { useDropdownStatus } from '../internal/components/dropdown-status';
|
|
@@ -16,7 +16,7 @@ import { useLoadItems } from '../select/utils/use-load-items';
|
|
|
16
16
|
import { useNativeSearch } from '../select/utils/use-native-search';
|
|
17
17
|
import { useSelect } from '../select/utils/use-select';
|
|
18
18
|
export function useMultiselect(_a) {
|
|
19
|
-
var { options, filteringType, filteringResultsText, disabled, statusType, empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions, deselectAriaLabel, keepOpen, onBlur, onFocus, onLoadItems, onChange, controlId, ariaLabelId, footerId, filteringValue, setFilteringValue, externalRef, embedded } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringResultsText", "disabled", "statusType", "empty", "loadingText", "finishedText", "errorText", "noMatch", "renderHighlightedAriaLive", "selectedOptions", "deselectAriaLabel", "keepOpen", "onBlur", "onFocus", "onLoadItems", "onChange", "controlId", "ariaLabelId", "footerId", "filteringValue", "setFilteringValue", "externalRef", "embedded"]);
|
|
19
|
+
var { options, filteringType, filteringResultsText, disabled, statusType, empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions, deselectAriaLabel, keepOpen, onBlur, onFocus, onLoadItems, onChange, controlId, ariaLabelId, footerId, filteringValue, setFilteringValue, externalRef, embedded, enableSelectAll, i18nStrings } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringResultsText", "disabled", "statusType", "empty", "loadingText", "finishedText", "errorText", "noMatch", "renderHighlightedAriaLive", "selectedOptions", "deselectAriaLabel", "keepOpen", "onBlur", "onFocus", "onLoadItems", "onChange", "controlId", "ariaLabelId", "footerId", "filteringValue", "setFilteringValue", "externalRef", "embedded", "enableSelectAll", "i18nStrings"]);
|
|
20
20
|
checkOptionValueField('Multiselect', 'options', options);
|
|
21
21
|
const i18n = useInternalI18n('multiselect');
|
|
22
22
|
const i18nCommon = useInternalI18n('select');
|
|
@@ -32,9 +32,29 @@ export function useMultiselect(_a) {
|
|
|
32
32
|
statusType,
|
|
33
33
|
});
|
|
34
34
|
const useInteractiveGroups = true;
|
|
35
|
-
const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(options, filteringType, filteringValue);
|
|
35
|
+
const { flatOptions, filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(options, filteringType, filteringValue);
|
|
36
|
+
const selectAllOption = {
|
|
37
|
+
type: 'select-all',
|
|
38
|
+
afterHeader: filteringType !== 'none',
|
|
39
|
+
option: { label: i18n('i18nStrings.selectAllText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.selectAllText) },
|
|
40
|
+
};
|
|
41
|
+
const visibleOptions = enableSelectAll && filteredOptions.length ? [selectAllOption, ...filteredOptions] : filteredOptions;
|
|
42
|
+
// Includes visible and non-visible (filtered out) options
|
|
43
|
+
const allNonParentOptions = flatOptions.filter(item => item.type !== 'parent').map(option => option.option);
|
|
44
|
+
const filteredNonParentOptions = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);
|
|
45
|
+
const selectedValues = useMemo(() => new Set(selectedOptions.map(option => option.value)), [selectedOptions]);
|
|
46
|
+
const isSomeSelected = selectedOptions.length > 0;
|
|
47
|
+
const isAllVisibleSelectableSelected = isSomeSelected && filteredNonParentOptions.every(option => option.disabled || selectedValues.has(option.value));
|
|
48
|
+
const isAllSelected = allNonParentOptions.every(option => selectedValues.has(option.value));
|
|
49
|
+
const toggleAll = () => {
|
|
50
|
+
const filteredNonParentOptionValues = new Set(filteredNonParentOptions.map(option => option.value));
|
|
51
|
+
fireNonCancelableEvent(onChange, {
|
|
52
|
+
selectedOptions: isAllVisibleSelectableSelected
|
|
53
|
+
? selectedOptions.filter(option => !filteredNonParentOptionValues.has(option.value))
|
|
54
|
+
: allNonParentOptions.filter(({ disabled, value }) => selectedValues.has(value) || (!disabled && filteredNonParentOptionValues.has(value))),
|
|
55
|
+
});
|
|
56
|
+
};
|
|
36
57
|
const updateSelectedOption = useCallback((option) => {
|
|
37
|
-
const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);
|
|
38
58
|
// switch between selection and deselection behavior, ignores disabled options to prevent
|
|
39
59
|
// getting stuck on one behavior when an option is disabled and its state cannot be changed
|
|
40
60
|
const isAllChildrenSelected = (optionsArray) => optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);
|
|
@@ -48,7 +68,7 @@ export function useMultiselect(_a) {
|
|
|
48
68
|
};
|
|
49
69
|
let newSelectedOptions = [...selectedOptions];
|
|
50
70
|
if (isGroup(option)) {
|
|
51
|
-
const visibleOptions = intersection([...option.options],
|
|
71
|
+
const visibleOptions = intersection([...option.options], filteredNonParentOptions);
|
|
52
72
|
newSelectedOptions = isAllChildrenSelected(visibleOptions)
|
|
53
73
|
? unselect(visibleOptions, newSelectedOptions)
|
|
54
74
|
: select(visibleOptions, newSelectedOptions);
|
|
@@ -61,12 +81,12 @@ export function useMultiselect(_a) {
|
|
|
61
81
|
fireNonCancelableEvent(onChange, {
|
|
62
82
|
selectedOptions: newSelectedOptions,
|
|
63
83
|
});
|
|
64
|
-
}, [
|
|
84
|
+
}, [selectedOptions, onChange, filteredNonParentOptions]);
|
|
65
85
|
const scrollToIndex = useRef(null);
|
|
66
86
|
const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, announceSelected, } = useSelect({
|
|
67
87
|
selectedOptions,
|
|
68
88
|
updateSelectedOption,
|
|
69
|
-
options:
|
|
89
|
+
options: visibleOptions,
|
|
70
90
|
filteringType,
|
|
71
91
|
onFocus,
|
|
72
92
|
onBlur,
|
|
@@ -77,10 +97,13 @@ export function useMultiselect(_a) {
|
|
|
77
97
|
useInteractiveGroups,
|
|
78
98
|
statusType,
|
|
79
99
|
embedded,
|
|
100
|
+
isAllSelected,
|
|
101
|
+
isSomeSelected,
|
|
102
|
+
toggleAll,
|
|
80
103
|
});
|
|
81
104
|
const wrapperOnKeyDown = useNativeSearch({
|
|
82
105
|
isEnabled: filteringType === 'none' && isOpen,
|
|
83
|
-
options:
|
|
106
|
+
options: visibleOptions,
|
|
84
107
|
highlightOption: highlightOption,
|
|
85
108
|
highlightedOption: highlightedOption === null || highlightedOption === void 0 ? void 0 : highlightedOption.option,
|
|
86
109
|
useInteractiveGroups,
|
|
@@ -149,7 +172,7 @@ export function useMultiselect(_a) {
|
|
|
149
172
|
announcement,
|
|
150
173
|
dropdownStatus,
|
|
151
174
|
filteringValue,
|
|
152
|
-
filteredOptions,
|
|
175
|
+
filteredOptions: visibleOptions,
|
|
153
176
|
highlightType,
|
|
154
177
|
scrollToIndex,
|
|
155
178
|
getFilterProps,
|
|
@@ -159,6 +182,7 @@ export function useMultiselect(_a) {
|
|
|
159
182
|
getTokenProps: () => ({ onDismiss: tokenOnDismiss }),
|
|
160
183
|
getDropdownProps: () => (Object.assign(Object.assign({}, getDropdownProps()), { onMouseDown: dropdownOnMouseDown })),
|
|
161
184
|
getWrapperProps: () => ({ onKeyDown: wrapperOnKeyDown }),
|
|
185
|
+
highlightedIndex,
|
|
162
186
|
};
|
|
163
187
|
}
|
|
164
188
|
//# sourceMappingURL=use-multiselect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-multiselect.js","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { DropdownStatusProps, useDropdownStatus } from '../internal/components/dropdown-status';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport { SelectListProps } from '../select/parts/plain-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { useSelect } from '../select/utils/use-select';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport { MultiselectProps } from './interfaces';\n\ntype UseMultiselectOptions = SomeRequired<\n Pick<\n MultiselectProps,\n | 'options'\n | 'selectedOptions'\n | 'filteringType'\n | 'filteringResultsText'\n | 'disabled'\n | 'noMatch'\n | 'renderHighlightedAriaLive'\n | 'deselectAriaLabel'\n | 'keepOpen'\n | 'onBlur'\n | 'onFocus'\n | 'onLoadItems'\n | 'onChange'\n | 'selectedAriaLabel'\n > &\n DropdownStatusProps & {\n controlId?: string;\n ariaLabelId: string;\n footerId: string;\n filteringValue: string;\n setFilteringValue?: (value: string) => void;\n externalRef: React.Ref<MultiselectProps.Ref>;\n },\n 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen'\n> & { embedded?: boolean };\n\nexport function useMultiselect({\n options,\n filteringType,\n filteringResultsText,\n disabled,\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n noMatch,\n renderHighlightedAriaLive,\n selectedOptions,\n deselectAriaLabel,\n keepOpen,\n onBlur,\n onFocus,\n onLoadItems,\n onChange,\n controlId,\n ariaLabelId,\n footerId,\n filteringValue,\n setFilteringValue,\n externalRef,\n embedded,\n ...restProps\n}: UseMultiselectOptions) {\n checkOptionValueField('Multiselect', 'options', options);\n\n const i18n = useInternalI18n('multiselect');\n const i18nCommon = useInternalI18n('select');\n const recoveryText = i18nCommon('recoveryText', restProps.recoveryText);\n const errorIconAriaLabel = i18nCommon('errorIconAriaLabel', restProps.errorIconAriaLabel);\n const selectedAriaLabel = i18nCommon('selectedAriaLabel', restProps.selectedAriaLabel);\n\n if (restProps.recoveryText && !onLoadItems) {\n warnOnce('Multiselect', '`onLoadItems` must be provided for `recoveryText` to be displayed.');\n }\n\n const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({\n onLoadItems,\n options,\n statusType,\n });\n const useInteractiveGroups = true;\n const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(\n options,\n filteringType,\n filteringValue\n );\n\n const updateSelectedOption = useCallback(\n (option: OptionDefinition | OptionGroup) => {\n const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);\n\n // switch between selection and deselection behavior, ignores disabled options to prevent\n // getting stuck on one behavior when an option is disabled and its state cannot be changed\n const isAllChildrenSelected = (optionsArray: OptionDefinition[]) =>\n optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);\n const intersection = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);\n const union = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);\n const select = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return union(selectedOptions, options);\n };\n const unselect = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return selectedOptions.filter(option => findOptionIndex(options, option) === -1);\n };\n let newSelectedOptions = [...selectedOptions];\n\n if (isGroup(option)) {\n const visibleOptions = intersection([...option.options], filtered);\n newSelectedOptions = isAllChildrenSelected(visibleOptions)\n ? unselect(visibleOptions, newSelectedOptions)\n : select(visibleOptions, newSelectedOptions);\n } else {\n newSelectedOptions = isAllChildrenSelected([option])\n ? unselect([option], newSelectedOptions)\n : select([option], newSelectedOptions);\n }\n\n fireNonCancelableEvent(onChange, {\n selectedOptions: newSelectedOptions,\n });\n },\n [onChange, selectedOptions, filteredOptions]\n );\n\n const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n const {\n isOpen,\n highlightType,\n highlightedOption,\n highlightedIndex,\n getTriggerProps,\n getDropdownProps,\n getFilterProps,\n getMenuProps,\n getOptionProps,\n highlightOption,\n announceSelected,\n } = useSelect({\n selectedOptions,\n updateSelectedOption,\n options: filteredOptions,\n filteringType,\n onFocus,\n onBlur,\n externalRef,\n keepOpen,\n fireLoadItems,\n setFilteringValue,\n useInteractiveGroups,\n statusType,\n embedded,\n });\n\n const wrapperOnKeyDown = useNativeSearch({\n isEnabled: filteringType === 'none' && isOpen,\n options: filteredOptions,\n highlightOption: highlightOption,\n highlightedOption: highlightedOption?.option,\n useInteractiveGroups,\n });\n\n const isEmpty = !options || options.length === 0;\n const isNoMatch = filteredOptions && filteredOptions.length === 0;\n const isFiltered =\n filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;\n const filteredText = isFiltered ? filteringResultsText?.(matchesCount, totalCount) : undefined;\n const dropdownStatus = useDropdownStatus({\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n isEmpty,\n isNoMatch,\n noMatch,\n isFiltered,\n filteringResultsText: filteredText,\n onRecoveryClick: handleRecoveryClick,\n errorIconAriaLabel: errorIconAriaLabel,\n hasRecoveryCallback: !!onLoadItems,\n });\n\n const announcement = useAnnouncement({\n announceSelected,\n highlightedOption,\n getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n format({ option__label: option.label ?? '' })\n ),\n }));\n\n useEffect(() => {\n scrollToIndex.current?.(highlightedIndex);\n }, [highlightedIndex]);\n\n const dropdownOnMouseDown = (event: React.MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (target !== document.activeElement) {\n // prevent currently focused element from losing it\n event.preventDefault();\n }\n };\n\n const tokenOnDismiss: TokenGroupProps['onDismiss'] = ({ detail }) => {\n const optionToDeselect = selectedOptions[detail.itemIndex];\n updateSelectedOption(optionToDeselect);\n const targetRef = getTriggerProps().ref;\n if (targetRef.current) {\n targetRef.current.focus();\n }\n };\n\n return {\n isOpen,\n tokens,\n announcement,\n dropdownStatus,\n filteringValue,\n filteredOptions,\n highlightType,\n scrollToIndex,\n getFilterProps,\n getTriggerProps,\n getMenuProps: () => ({\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: joinStrings(ariaLabelId, controlId),\n ariaDescribedby: dropdownStatus.content ? footerId : undefined,\n embedded,\n }),\n getOptionProps,\n getTokenProps: () => ({ onDismiss: tokenOnDismiss }),\n getDropdownProps: () => ({ ...getDropdownProps(), onMouseDown: dropdownOnMouseDown }),\n getWrapperProps: () => ({ onKeyDown: wrapperOnKeyDown }),\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-multiselect.js","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { DropdownStatusProps, useDropdownStatus } from '../internal/components/dropdown-status';\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport { SelectListProps } from '../select/parts/plain-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { useSelect } from '../select/utils/use-select';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport { MultiselectProps } from './interfaces';\n\ntype UseMultiselectOptions = SomeRequired<\n Pick<\n MultiselectProps,\n | 'options'\n | 'selectedOptions'\n | 'filteringType'\n | 'filteringResultsText'\n | 'disabled'\n | 'noMatch'\n | 'renderHighlightedAriaLive'\n | 'deselectAriaLabel'\n | 'keepOpen'\n | 'onBlur'\n | 'onFocus'\n | 'onLoadItems'\n | 'onChange'\n | 'selectedAriaLabel'\n | 'enableSelectAll'\n | 'i18nStrings'\n > &\n DropdownStatusProps & {\n controlId?: string;\n ariaLabelId: string;\n footerId: string;\n filteringValue: string;\n setFilteringValue?: (value: string) => void;\n externalRef: React.Ref<MultiselectProps.Ref>;\n },\n 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen'\n> & { embedded?: boolean };\n\nexport function useMultiselect({\n options,\n filteringType,\n filteringResultsText,\n disabled,\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n noMatch,\n renderHighlightedAriaLive,\n selectedOptions,\n deselectAriaLabel,\n keepOpen,\n onBlur,\n onFocus,\n onLoadItems,\n onChange,\n controlId,\n ariaLabelId,\n footerId,\n filteringValue,\n setFilteringValue,\n externalRef,\n embedded,\n enableSelectAll,\n i18nStrings,\n ...restProps\n}: UseMultiselectOptions) {\n checkOptionValueField('Multiselect', 'options', options);\n\n const i18n = useInternalI18n('multiselect');\n const i18nCommon = useInternalI18n('select');\n const recoveryText = i18nCommon('recoveryText', restProps.recoveryText);\n const errorIconAriaLabel = i18nCommon('errorIconAriaLabel', restProps.errorIconAriaLabel);\n const selectedAriaLabel = i18nCommon('selectedAriaLabel', restProps.selectedAriaLabel);\n\n if (restProps.recoveryText && !onLoadItems) {\n warnOnce('Multiselect', '`onLoadItems` must be provided for `recoveryText` to be displayed.');\n }\n\n const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({\n onLoadItems,\n options,\n statusType,\n });\n const useInteractiveGroups = true;\n const { flatOptions, filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(\n options,\n filteringType,\n filteringValue\n );\n\n const selectAllOption: DropdownOption = {\n type: 'select-all',\n afterHeader: filteringType !== 'none',\n option: { label: i18n('i18nStrings.selectAllText', i18nStrings?.selectAllText) },\n };\n\n const visibleOptions =\n enableSelectAll && filteredOptions.length ? [selectAllOption, ...filteredOptions] : filteredOptions;\n\n // Includes visible and non-visible (filtered out) options\n const allNonParentOptions = flatOptions.filter(item => item.type !== 'parent').map(option => option.option);\n\n const filteredNonParentOptions = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);\n\n const selectedValues = useMemo(() => new Set(selectedOptions.map(option => option.value)), [selectedOptions]);\n\n const isSomeSelected = selectedOptions.length > 0;\n const isAllVisibleSelectableSelected =\n isSomeSelected && filteredNonParentOptions.every(option => option.disabled || selectedValues.has(option.value));\n const isAllSelected = allNonParentOptions.every(option => selectedValues.has(option.value));\n\n const toggleAll = () => {\n const filteredNonParentOptionValues = new Set(filteredNonParentOptions.map(option => option.value));\n fireNonCancelableEvent(onChange, {\n selectedOptions: isAllVisibleSelectableSelected\n ? selectedOptions.filter(option => !filteredNonParentOptionValues.has(option.value))\n : allNonParentOptions.filter(\n ({ disabled, value }) =>\n selectedValues.has(value) || (!disabled && filteredNonParentOptionValues.has(value))\n ),\n });\n };\n\n const updateSelectedOption = useCallback(\n (option: OptionDefinition | OptionGroup) => {\n // switch between selection and deselection behavior, ignores disabled options to prevent\n // getting stuck on one behavior when an option is disabled and its state cannot be changed\n const isAllChildrenSelected = (optionsArray: OptionDefinition[]) =>\n optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);\n const intersection = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);\n const union = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);\n const select = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return union(selectedOptions, options);\n };\n const unselect = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return selectedOptions.filter(option => findOptionIndex(options, option) === -1);\n };\n let newSelectedOptions = [...selectedOptions];\n\n if (isGroup(option)) {\n const visibleOptions = intersection([...option.options], filteredNonParentOptions);\n newSelectedOptions = isAllChildrenSelected(visibleOptions)\n ? unselect(visibleOptions, newSelectedOptions)\n : select(visibleOptions, newSelectedOptions);\n } else {\n newSelectedOptions = isAllChildrenSelected([option])\n ? unselect([option], newSelectedOptions)\n : select([option], newSelectedOptions);\n }\n\n fireNonCancelableEvent(onChange, {\n selectedOptions: newSelectedOptions,\n });\n },\n [selectedOptions, onChange, filteredNonParentOptions]\n );\n\n const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n const {\n isOpen,\n highlightType,\n highlightedOption,\n highlightedIndex,\n getTriggerProps,\n getDropdownProps,\n getFilterProps,\n getMenuProps,\n getOptionProps,\n highlightOption,\n announceSelected,\n } = useSelect({\n selectedOptions,\n updateSelectedOption,\n options: visibleOptions,\n filteringType,\n onFocus,\n onBlur,\n externalRef,\n keepOpen,\n fireLoadItems,\n setFilteringValue,\n useInteractiveGroups,\n statusType,\n embedded,\n isAllSelected,\n isSomeSelected,\n toggleAll,\n });\n\n const wrapperOnKeyDown = useNativeSearch({\n isEnabled: filteringType === 'none' && isOpen,\n options: visibleOptions,\n highlightOption: highlightOption,\n highlightedOption: highlightedOption?.option,\n useInteractiveGroups,\n });\n\n const isEmpty = !options || options.length === 0;\n const isNoMatch = filteredOptions && filteredOptions.length === 0;\n const isFiltered =\n filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;\n const filteredText = isFiltered ? filteringResultsText?.(matchesCount, totalCount) : undefined;\n const dropdownStatus = useDropdownStatus({\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n isEmpty,\n isNoMatch,\n noMatch,\n isFiltered,\n filteringResultsText: filteredText,\n onRecoveryClick: handleRecoveryClick,\n errorIconAriaLabel: errorIconAriaLabel,\n hasRecoveryCallback: !!onLoadItems,\n });\n\n const announcement = useAnnouncement({\n announceSelected,\n highlightedOption,\n getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n format({ option__label: option.label ?? '' })\n ),\n }));\n\n useEffect(() => {\n scrollToIndex.current?.(highlightedIndex);\n }, [highlightedIndex]);\n\n const dropdownOnMouseDown = (event: React.MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (target !== document.activeElement) {\n // prevent currently focused element from losing it\n event.preventDefault();\n }\n };\n\n const tokenOnDismiss: TokenGroupProps['onDismiss'] = ({ detail }) => {\n const optionToDeselect = selectedOptions[detail.itemIndex];\n updateSelectedOption(optionToDeselect);\n const targetRef = getTriggerProps().ref;\n if (targetRef.current) {\n targetRef.current.focus();\n }\n };\n\n return {\n isOpen,\n tokens,\n announcement,\n dropdownStatus,\n filteringValue,\n filteredOptions: visibleOptions,\n highlightType,\n scrollToIndex,\n getFilterProps,\n getTriggerProps,\n getMenuProps: () => ({\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: joinStrings(ariaLabelId, controlId),\n ariaDescribedby: dropdownStatus.content ? footerId : undefined,\n embedded,\n }),\n getOptionProps,\n getTokenProps: () => ({ onDismiss: tokenOnDismiss }),\n getDropdownProps: () => ({ ...getDropdownProps(), onMouseDown: dropdownOnMouseDown }),\n getWrapperProps: () => ({ onKeyDown: wrapperOnKeyDown }),\n highlightedIndex,\n };\n}\n"]}
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/common.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,KAAK,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/select/parts/common.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport const fallbackItemHeight = 31;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect-item.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/multiselect-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGnC,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;
|
|
1
|
+
{"version":3,"file":"multiselect-item.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/multiselect-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGnC,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;AAwGD,wBAA6D"}
|
|
@@ -15,6 +15,7 @@ const MultiSelectItem = (_a, ref) => {
|
|
|
15
15
|
const baseProps = getBaseProps(restProps);
|
|
16
16
|
const isParent = option.type === 'parent';
|
|
17
17
|
const isChild = option.type === 'child';
|
|
18
|
+
const isSelectAll = option.type === 'select-all';
|
|
18
19
|
const wrappedOption = option.option;
|
|
19
20
|
const disabled = option.disabled || wrappedOption.disabled;
|
|
20
21
|
const disabledReason = disabled && (option.disabledReason || wrappedOption.disabledReason)
|
|
@@ -26,10 +27,10 @@ const MultiSelectItem = (_a, ref) => {
|
|
|
26
27
|
const { descriptionId, descriptionEl } = useHiddenDescription(disabledReason);
|
|
27
28
|
const [canShowTooltip, setCanShowTooltip] = useState(true);
|
|
28
29
|
useEffect(() => setCanShowTooltip(true), [highlighted]);
|
|
29
|
-
return (React.createElement(SelectableItem, Object.assign({ ariaChecked: isParent && indeterminate ? 'mixed' : Boolean(selected), selected: selected, isNextSelected: isNextSelected, highlighted: highlighted, disabled: disabled, isParent: isParent, isChild: isChild, highlightType: highlightType, ref: useMergeRefs(ref, internalRef), virtualPosition: virtualPosition, padBottom: padBottom, useInteractiveGroups: true, screenReaderContent: screenReaderContent, ariaPosinset: ariaPosinset, ariaSetsize: ariaSetsize, ariaDescribedby: isDisabledWithReason ? descriptionId : '', value: option.option.value, afterHeader: option.afterHeader, withScrollbar: withScrollbar, sticky: sticky }, baseProps),
|
|
30
|
+
return (React.createElement(SelectableItem, Object.assign({ ariaChecked: isParent && indeterminate ? 'mixed' : Boolean(selected), selected: selected, isNextSelected: isNextSelected, highlighted: highlighted, disabled: disabled, isParent: isParent, isChild: isChild, isSelectAll: isSelectAll, highlightType: highlightType, ref: useMergeRefs(ref, internalRef), virtualPosition: virtualPosition, padBottom: padBottom, useInteractiveGroups: true, screenReaderContent: screenReaderContent, ariaPosinset: ariaPosinset, ariaSetsize: ariaSetsize, ariaDescribedby: isDisabledWithReason ? descriptionId : '', value: option.option.value, afterHeader: option.afterHeader, withScrollbar: withScrollbar, sticky: sticky }, baseProps),
|
|
30
31
|
React.createElement("div", { className: className },
|
|
31
32
|
hasCheckbox && (React.createElement("div", { className: styles.checkbox },
|
|
32
|
-
React.createElement(CheckboxIcon, { checked: selected, indeterminate: isParent && indeterminate, disabled:
|
|
33
|
+
React.createElement(CheckboxIcon, { checked: selected, indeterminate: (isParent || isSelectAll) && indeterminate, disabled: disabled }))),
|
|
33
34
|
React.createElement(Option, { option: Object.assign(Object.assign({}, wrappedOption), { disabled }), highlightedOption: highlighted, selectedOption: selected, highlightText: filteringValue, isGroupOption: isParent })),
|
|
34
35
|
isDisabledWithReason && (React.createElement(React.Fragment, null,
|
|
35
36
|
descriptionEl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect-item.js","sourceRoot":"","sources":["../../../../src/select/parts/multiselect-item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAEtD,OAAO,cAAc,MAAM,2CAA2C,CAAC;AACvE,OAAO,OAAO,MAAM,mCAAmC,CAAC;AACxD,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAKrC,MAAM,eAAe,GAAG,CACtB,EAiBuB,EACvB,GAA8B,EAC9B,EAAE;QAnBF,EACE,MAAM,EACN,WAAW,EACX,QAAQ,EACR,cAAc,EACd,WAAW,EACX,eAAe,EACf,SAAS,EACT,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,aAAa,EACb,MAAM,OAEe,EADlB,SAAS,cAhBd,2OAiBC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC;IACxC,MAAM,aAAa,GAAqB,MAAM,CAAC,MAAM,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC;IAC3D,MAAM,cAAc,GAClB,QAAQ,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC;QACjE,CAAC,CAAC,MAAM,CAAC,cAAc,IAAI,aAAa,CAAC,cAAc;QACvD,CAAC,CAAC,EAAE,CAAC;IACT,MAAM,oBAAoB,GAAG,CAAC,CAAC,cAAc,CAAC;IAC9C,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC;IAE9B,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAE9E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3D,SAAS,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"multiselect-item.js","sourceRoot":"","sources":["../../../../src/select/parts/multiselect-item.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { getBaseProps } from '../../internal/base-component';\nimport CheckboxIcon from '../../internal/components/checkbox-icon';\nimport Option from '../../internal/components/option';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport SelectableItem from '../../internal/components/selectable-item';\nimport Tooltip from '../../internal/components/tooltip';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { ItemProps } from './item';\n\nimport styles from './styles.css.js';\ninterface MultiselectItemProps extends ItemProps {\n indeterminate?: boolean;\n}\n\nconst MultiSelectItem = (\n {\n option,\n highlighted,\n selected,\n filteringValue,\n hasCheckbox,\n virtualPosition,\n padBottom,\n isNextSelected,\n indeterminate,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightType,\n withScrollbar,\n sticky,\n ...restProps\n }: MultiselectItemProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const baseProps = getBaseProps(restProps);\n\n const isParent = option.type === 'parent';\n const isChild = option.type === 'child';\n const isSelectAll = option.type === 'select-all';\n const wrappedOption: OptionDefinition = option.option;\n const disabled = option.disabled || wrappedOption.disabled;\n const disabledReason =\n disabled && (option.disabledReason || wrappedOption.disabledReason)\n ? option.disabledReason || wrappedOption.disabledReason\n : '';\n const isDisabledWithReason = !!disabledReason;\n const internalRef = useRef<HTMLDivElement>(null);\n const className = styles.item;\n\n const { descriptionId, descriptionEl } = useHiddenDescription(disabledReason);\n\n const [canShowTooltip, setCanShowTooltip] = useState(true);\n useEffect(() => setCanShowTooltip(true), [highlighted]);\n return (\n <SelectableItem\n ariaChecked={isParent && indeterminate ? 'mixed' : Boolean(selected)}\n selected={selected}\n isNextSelected={isNextSelected}\n highlighted={highlighted}\n disabled={disabled}\n isParent={isParent}\n isChild={isChild}\n isSelectAll={isSelectAll}\n highlightType={highlightType}\n ref={useMergeRefs(ref, internalRef)}\n virtualPosition={virtualPosition}\n padBottom={padBottom}\n useInteractiveGroups={true}\n screenReaderContent={screenReaderContent}\n ariaPosinset={ariaPosinset}\n ariaSetsize={ariaSetsize}\n ariaDescribedby={isDisabledWithReason ? descriptionId : ''}\n value={option.option.value}\n afterHeader={option.afterHeader}\n withScrollbar={withScrollbar}\n sticky={sticky}\n {...baseProps}\n >\n <div className={className}>\n {hasCheckbox && (\n <div className={styles.checkbox}>\n <CheckboxIcon\n checked={selected}\n indeterminate={(isParent || isSelectAll) && indeterminate}\n disabled={disabled}\n />\n </div>\n )}\n <Option\n option={{ ...wrappedOption, disabled }}\n highlightedOption={highlighted}\n selectedOption={selected}\n highlightText={filteringValue}\n isGroupOption={isParent}\n />\n </div>\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {highlighted && canShowTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={internalRef}\n value={disabledReason!}\n position=\"right\"\n hideOnOverscroll={true}\n onDismiss={() => setCanShowTooltip(false)}\n />\n )}\n </>\n )}\n </SelectableItem>\n );\n};\n\nexport default React.memo(React.forwardRef(MultiSelectItem));\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAIlG,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhE,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;;AA0ED,wBAAqC"}
|
|
@@ -1,29 +1,36 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { forwardRef, useImperativeHandle } from 'react';
|
|
3
|
+
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
4
4
|
import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
5
5
|
import OptionsList from '../../internal/components/options-list';
|
|
6
6
|
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
|
|
7
|
-
import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
|
|
8
7
|
import { renderOptions } from '../utils/render-options';
|
|
8
|
+
import scrollToIndex from '../utils/scroll-to-index';
|
|
9
|
+
import { fallbackItemHeight } from './common';
|
|
9
10
|
import styles from './styles.css.js';
|
|
10
11
|
const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, }, ref) => {
|
|
11
|
-
const
|
|
12
|
+
const stickyOptionRef = useRef(null);
|
|
13
|
+
const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);
|
|
14
|
+
const [width, menuMeasureRef] = useContainerQuery(rect => {
|
|
15
|
+
if (stickyOptionRef.current) {
|
|
16
|
+
// Cannot use container query on the sticky option individually because it is not rendered until the dropdown is open.
|
|
17
|
+
// Not expecting the sticky option to change size without the dropdown also changing size.
|
|
18
|
+
// The effects of using the sticky option block size to set the menu scroll padding are covered by integration tests.
|
|
19
|
+
// istanbul ignore next
|
|
20
|
+
setStickyOptionBlockSize(stickyOptionRef.current.clientHeight);
|
|
21
|
+
}
|
|
22
|
+
return { inner: rect.contentBoxWidth, outer: rect.borderBoxWidth };
|
|
23
|
+
});
|
|
12
24
|
const menuRef = menuProps.ref;
|
|
13
25
|
const mergedRef = useMergeRefs(menuMeasureRef, menuRef);
|
|
14
26
|
useImperativeHandle(ref, () => (index) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
// In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318
|
|
19
|
-
if (((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) !== undefined && ((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) > 15) {
|
|
20
|
-
/* istanbul ignore next: clientHeight always returns 0 in JSDOM, the line is covered by integ tests */
|
|
21
|
-
scrollElementIntoView(item);
|
|
22
|
-
}
|
|
27
|
+
const isSticky = firstOptionSticky && index === 0;
|
|
28
|
+
if (highlightType.moveFocus && menuRef.current && !isSticky) {
|
|
29
|
+
scrollToIndex({ index, menuEl: menuRef.current });
|
|
23
30
|
}
|
|
24
|
-
}, [highlightType, menuRef]);
|
|
31
|
+
}, [firstOptionSticky, highlightType.moveFocus, menuRef]);
|
|
25
32
|
const withScrollbar = !!width && width.inner < width.outer;
|
|
26
|
-
return (React.createElement(OptionsList, Object.assign({}, menuProps, { ref: mergedRef }),
|
|
33
|
+
return (React.createElement(OptionsList, Object.assign({}, menuProps, { ref: mergedRef, stickyItemBlockSize: stickyOptionBlockSize }),
|
|
27
34
|
renderOptions({
|
|
28
35
|
options: filteredOptions,
|
|
29
36
|
getOptionProps,
|
|
@@ -33,8 +40,9 @@ const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue,
|
|
|
33
40
|
hasDropdownStatus,
|
|
34
41
|
useInteractiveGroups,
|
|
35
42
|
screenReaderContent,
|
|
36
|
-
withScrollbar: withScrollbar,
|
|
37
43
|
firstOptionSticky,
|
|
44
|
+
stickyOptionRef,
|
|
45
|
+
withScrollbar,
|
|
38
46
|
}),
|
|
39
47
|
listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
40
48
|
};
|