@cloudscape-design/components-themeable 3.0.1174 → 3.0.1176
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/components/button-trigger/styles.scss +7 -0
- package/lib/internal/scss/internal/components/drag-handle-wrapper/styles.scss +28 -0
- package/lib/internal/scss/internal/components/option/styles.scss +4 -0
- package/lib/internal/scss/internal/components/selectable-item/styles.scss +1 -0
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/template/autosuggest/internal.d.ts.map +1 -1
- package/lib/internal/template/autosuggest/internal.js +5 -1
- package/lib/internal/template/autosuggest/internal.js.map +1 -1
- package/lib/internal/template/icon/interfaces.d.ts +1 -1
- package/lib/internal/template/icon/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon/interfaces.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.d.ts +1 -0
- package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.js +2 -2
- package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/styles.css.js +14 -13
- package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +32 -27
- package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +14 -13
- package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.d.ts +3 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.d.ts.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.js +2 -2
- package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.js.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +30 -7
- package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -21
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +75 -39
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -21
- package/lib/internal/template/internal/components/option/index.d.ts +1 -1
- package/lib/internal/template/internal/components/option/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/option/index.js +5 -1
- package/lib/internal/template/internal/components/option/index.js.map +1 -1
- package/lib/internal/template/internal/components/option/interfaces.d.ts +2 -1
- package/lib/internal/template/internal/components/option/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/option/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/option/styles.css.js +17 -16
- package/lib/internal/template/internal/components/option/styles.scoped.css +32 -28
- package/lib/internal/template/internal/components/option/styles.selectors.js +17 -16
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/multiselect/index.d.ts.map +1 -1
- package/lib/internal/template/multiselect/index.js +2 -2
- package/lib/internal/template/multiselect/index.js.map +1 -1
- package/lib/internal/template/multiselect/interfaces.d.ts +37 -0
- package/lib/internal/template/multiselect/interfaces.d.ts.map +1 -1
- package/lib/internal/template/multiselect/interfaces.js.map +1 -1
- package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
- package/lib/internal/template/multiselect/internal.js +8 -4
- package/lib/internal/template/multiselect/internal.js.map +1 -1
- package/lib/internal/template/select/index.d.ts.map +1 -1
- package/lib/internal/template/select/index.js +2 -2
- package/lib/internal/template/select/index.js.map +1 -1
- package/lib/internal/template/select/interfaces.d.ts +31 -1
- package/lib/internal/template/select/interfaces.d.ts.map +1 -1
- package/lib/internal/template/select/interfaces.js.map +1 -1
- package/lib/internal/template/select/internal.d.ts.map +1 -1
- package/lib/internal/template/select/internal.js +8 -4
- package/lib/internal/template/select/internal.js.map +1 -1
- package/lib/internal/template/select/parts/item.d.ts +13 -2
- package/lib/internal/template/select/parts/item.d.ts.map +1 -1
- package/lib/internal/template/select/parts/item.js +62 -6
- package/lib/internal/template/select/parts/item.js.map +1 -1
- package/lib/internal/template/select/parts/multiselect-item.d.ts +9 -2
- package/lib/internal/template/select/parts/multiselect-item.d.ts.map +1 -1
- package/lib/internal/template/select/parts/multiselect-item.js +79 -5
- package/lib/internal/template/select/parts/multiselect-item.js.map +1 -1
- package/lib/internal/template/select/parts/plain-list.d.ts +3 -0
- package/lib/internal/template/select/parts/plain-list.d.ts.map +1 -1
- package/lib/internal/template/select/parts/plain-list.js +2 -1
- package/lib/internal/template/select/parts/plain-list.js.map +1 -1
- package/lib/internal/template/select/parts/trigger.d.ts +1 -0
- package/lib/internal/template/select/parts/trigger.d.ts.map +1 -1
- package/lib/internal/template/select/parts/trigger.js +17 -3
- package/lib/internal/template/select/parts/trigger.js.map +1 -1
- package/lib/internal/template/select/parts/virtual-list.d.ts.map +1 -1
- package/lib/internal/template/select/parts/virtual-list.js +2 -1
- package/lib/internal/template/select/parts/virtual-list.js.map +1 -1
- package/lib/internal/template/select/utils/render-options.d.ts +4 -1
- package/lib/internal/template/select/utils/render-options.d.ts.map +1 -1
- package/lib/internal/template/select/utils/render-options.js +15 -4
- package/lib/internal/template/select/utils/render-options.js.map +1 -1
- package/lib/internal/template/test-utils/dom/internal/option.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/internal/option.js +10 -1
- package/lib/internal/template/test-utils/dom/internal/option.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/internal/option.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/internal/option.js +10 -1
- package/lib/internal/template/test-utils/selectors/internal/option.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,41 @@ import SelectableItem from '../../internal/components/selectable-item';
|
|
|
9
9
|
import Tooltip from '../../internal/components/tooltip';
|
|
10
10
|
import useHiddenDescription from '../../internal/hooks/use-hidden-description';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
|
-
const
|
|
12
|
+
const toMultiselectOptionGroupItem = (props) => {
|
|
13
|
+
var _a, _b;
|
|
14
|
+
return {
|
|
15
|
+
type: 'group',
|
|
16
|
+
index: (_a = props.virtualIndex) !== null && _a !== void 0 ? _a : props.index,
|
|
17
|
+
option: props.option.option,
|
|
18
|
+
indeterminate: (_b = props.indeterminate) !== null && _b !== void 0 ? _b : false,
|
|
19
|
+
selected: props.selected,
|
|
20
|
+
highlighted: props.highlighted,
|
|
21
|
+
disabled: props.disabled,
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
const toMultiselectOptionItem = (props) => {
|
|
25
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
26
|
+
return {
|
|
27
|
+
type: 'item',
|
|
28
|
+
index: (_a = props.virtualIndex) !== null && _a !== void 0 ? _a : props.index,
|
|
29
|
+
option: props.option.option,
|
|
30
|
+
selected: props.selected,
|
|
31
|
+
highlighted: props.highlighted,
|
|
32
|
+
disabled: props.disabled,
|
|
33
|
+
parent: props.parentProps
|
|
34
|
+
? toMultiselectOptionGroupItem({
|
|
35
|
+
index: (_b = props.parentProps) === null || _b === void 0 ? void 0 : _b.index,
|
|
36
|
+
virtualIndex: (_c = props.parentProps) === null || _c === void 0 ? void 0 : _c.virtualIndex,
|
|
37
|
+
option: (_d = props.parentProps) === null || _d === void 0 ? void 0 : _d.option,
|
|
38
|
+
disabled: props.disabled,
|
|
39
|
+
highlighted: (_f = (_e = props.parentProps) === null || _e === void 0 ? void 0 : _e.highlighted) !== null && _f !== void 0 ? _f : false,
|
|
40
|
+
indeterminate: (_h = (_g = props.parentProps) === null || _g === void 0 ? void 0 : _g.indeterminate) !== null && _h !== void 0 ? _h : false,
|
|
41
|
+
selected: (_k = (_j = props.parentProps) === null || _j === void 0 ? void 0 : _j.selected) !== null && _k !== void 0 ? _k : false,
|
|
42
|
+
})
|
|
43
|
+
: null,
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
const MultiSelectItem = ({ index, virtualIndex, option, highlighted, selected, filteringValue, hasCheckbox, virtualPosition, padBottom, isNextSelected, isPreviousSelected, indeterminate, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, withScrollbar, sticky, renderOption, parentProps, ...restProps }, ref) => {
|
|
13
47
|
const baseProps = getBaseProps(restProps);
|
|
14
48
|
const isParent = option.type === 'parent';
|
|
15
49
|
const isChild = option.type === 'child';
|
|
@@ -25,12 +59,52 @@ const MultiSelectItem = ({ option, highlighted, selected, filteringValue, hasChe
|
|
|
25
59
|
const { descriptionId, descriptionEl } = useHiddenDescription(disabledReason);
|
|
26
60
|
const [canShowTooltip, setCanShowTooltip] = useState(true);
|
|
27
61
|
useEffect(() => setCanShowTooltip(true), [highlighted]);
|
|
28
|
-
|
|
62
|
+
const getMultiselectItemProps = (option) => {
|
|
63
|
+
if (option.type === 'parent') {
|
|
64
|
+
return toMultiselectOptionGroupItem({
|
|
65
|
+
option: option,
|
|
66
|
+
index: index,
|
|
67
|
+
virtualIndex: virtualIndex,
|
|
68
|
+
disabled: !!disabled,
|
|
69
|
+
highlighted: !!highlighted,
|
|
70
|
+
selected: !!selected,
|
|
71
|
+
indeterminate: indeterminate !== null && indeterminate !== void 0 ? indeterminate : false,
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
else if (option.type === 'select-all') {
|
|
75
|
+
return {
|
|
76
|
+
type: 'select-all',
|
|
77
|
+
option: option.option,
|
|
78
|
+
indeterminate: indeterminate !== null && indeterminate !== void 0 ? indeterminate : false,
|
|
79
|
+
selected: !!selected,
|
|
80
|
+
highlighted: !!highlighted,
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
return toMultiselectOptionItem({
|
|
85
|
+
option: option,
|
|
86
|
+
index: index,
|
|
87
|
+
virtualIndex: virtualIndex,
|
|
88
|
+
disabled: !!disabled,
|
|
89
|
+
highlighted: !!highlighted,
|
|
90
|
+
selected: !!selected,
|
|
91
|
+
parentProps: parentProps,
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
const renderOptionWrapper = (option) => {
|
|
96
|
+
if (!renderOption) {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
99
|
+
return renderOption({ item: getMultiselectItemProps(option), filterText: filteringValue });
|
|
100
|
+
};
|
|
101
|
+
const renderResult = renderOptionWrapper(option);
|
|
102
|
+
return (React.createElement(SelectableItem, { disableContentStyling: !!renderResult, ariaChecked: isParent && indeterminate ? 'mixed' : Boolean(selected), selected: selected, isNextSelected: isNextSelected, isPreviousSelected: isPreviousSelected, 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 },
|
|
29
103
|
React.createElement("div", { className: className },
|
|
30
|
-
hasCheckbox && (React.createElement("div", { className: styles.checkbox },
|
|
104
|
+
!renderResult && hasCheckbox && (React.createElement("div", { className: styles.checkbox },
|
|
31
105
|
React.createElement(CheckboxIcon, { checked: selected, indeterminate: (isParent || isSelectAll) && indeterminate, disabled: disabled }))),
|
|
32
|
-
React.createElement(Option, { option: { ...wrappedOption, disabled }, highlightedOption: highlighted, selectedOption: selected, highlightText: filteringValue, isGroupOption: isParent })),
|
|
33
|
-
isDisabledWithReason && (React.createElement(React.Fragment, null,
|
|
106
|
+
React.createElement(Option, { customContent: renderResult, option: { ...wrappedOption, disabled }, highlightedOption: highlighted, selectedOption: selected, highlightText: filteringValue, isGroupOption: isParent })),
|
|
107
|
+
!renderResult && isDisabledWithReason && (React.createElement(React.Fragment, null,
|
|
34
108
|
descriptionEl,
|
|
35
109
|
highlighted && canShowTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: internalRef, value: disabledReason, position: "right", hideOnOverscroll: true, onDismiss: () => setCanShowTooltip(false) }))))));
|
|
36
110
|
};
|
|
@@ -1 +1 @@
|
|
|
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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\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 { 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 isPreviousSelected,\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 isPreviousSelected={isPreviousSelected}\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
|
+
{"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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../../internal/base-component';\nimport CheckboxIcon from '../../internal/components/checkbox-icon';\nimport Option from '../../internal/components/option';\nimport { DropdownOption, OptionDefinition, OptionGroup } 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 { MultiselectProps } from '../../multiselect/interfaces';\nimport { ItemParentProps, ItemProps } from './item';\n\nimport styles from './styles.css.js';\ninterface MultiselectItemProps extends ItemProps<MultiselectProps.MultiselectOptionItemRenderer> {\n indeterminate?: boolean;\n parentProps?: MultiselectItemParentProps;\n}\n\nexport interface MultiselectItemParentProps extends ItemParentProps {\n indeterminate: boolean;\n highlighted: boolean;\n selected: boolean;\n}\nconst toMultiselectOptionGroupItem = (\n props: MultiselectItemParentProps\n): MultiselectProps.MultiselectOptionGroupItem => {\n return {\n type: 'group',\n index: props.virtualIndex ?? props.index,\n option: props.option.option as OptionGroup,\n indeterminate: props.indeterminate ?? false,\n selected: props.selected,\n highlighted: props.highlighted,\n disabled: props.disabled,\n };\n};\nconst toMultiselectOptionItem = (props: {\n index: number;\n virtualIndex?: number;\n option: DropdownOption;\n disabled: boolean;\n selected: boolean;\n highlighted: boolean;\n parentProps?: MultiselectItemParentProps;\n}): MultiselectProps.MultiselectOptionItem => {\n return {\n type: 'item',\n index: props.virtualIndex ?? props.index,\n option: props.option.option as OptionDefinition,\n selected: props.selected,\n highlighted: props.highlighted,\n disabled: props.disabled,\n parent: props.parentProps\n ? toMultiselectOptionGroupItem({\n index: props.parentProps?.index,\n virtualIndex: props.parentProps?.virtualIndex,\n option: props.parentProps?.option,\n disabled: props.disabled,\n highlighted: props.parentProps?.highlighted ?? false,\n indeterminate: props.parentProps?.indeterminate ?? false,\n selected: props.parentProps?.selected ?? false,\n })\n : null,\n };\n};\n\nconst MultiSelectItem = (\n {\n index,\n virtualIndex,\n option,\n highlighted,\n selected,\n filteringValue,\n hasCheckbox,\n virtualPosition,\n padBottom,\n isNextSelected,\n isPreviousSelected,\n indeterminate,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightType,\n withScrollbar,\n sticky,\n renderOption,\n parentProps,\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\n const getMultiselectItemProps = (option: DropdownOption): MultiselectProps.MultiselectItem => {\n if (option.type === 'parent') {\n return toMultiselectOptionGroupItem({\n option: option,\n index: index,\n virtualIndex: virtualIndex,\n disabled: !!disabled,\n highlighted: !!highlighted,\n selected: !!selected,\n indeterminate: indeterminate ?? false,\n });\n } else if (option.type === 'select-all') {\n return {\n type: 'select-all',\n option: option.option as OptionDefinition,\n indeterminate: indeterminate ?? false,\n selected: !!selected,\n highlighted: !!highlighted,\n };\n } else {\n return toMultiselectOptionItem({\n option: option,\n index: index,\n virtualIndex: virtualIndex,\n disabled: !!disabled,\n highlighted: !!highlighted,\n selected: !!selected,\n parentProps: parentProps,\n });\n }\n };\n\n const renderOptionWrapper = (option: DropdownOption) => {\n if (!renderOption) {\n return null;\n }\n\n return renderOption({ item: getMultiselectItemProps(option), filterText: filteringValue });\n };\n\n const renderResult = renderOptionWrapper(option);\n\n return (\n <SelectableItem\n disableContentStyling={!!renderResult}\n ariaChecked={isParent && indeterminate ? 'mixed' : Boolean(selected)}\n selected={selected}\n isNextSelected={isNextSelected}\n isPreviousSelected={isPreviousSelected}\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 {!renderResult && 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 customContent={renderResult}\n option={{ ...wrappedOption, disabled }}\n highlightedOption={highlighted}\n selectedOption={selected}\n highlightText={filteringValue}\n isGroupOption={isParent}\n />\n </div>\n {!renderResult && 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,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from '../../internal/components/option/interfaces';
|
|
3
3
|
import { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';
|
|
4
|
+
import { MultiselectProps } from '../../multiselect/interfaces';
|
|
5
|
+
import { SelectProps } from '../interfaces';
|
|
4
6
|
import { GetOptionProps, MenuProps } from '../utils/use-select';
|
|
5
7
|
export interface SelectListProps {
|
|
6
8
|
menuProps: MenuProps;
|
|
@@ -14,6 +16,7 @@ export interface SelectListProps {
|
|
|
14
16
|
useInteractiveGroups?: boolean;
|
|
15
17
|
screenReaderContent?: string;
|
|
16
18
|
firstOptionSticky?: boolean;
|
|
19
|
+
renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;
|
|
17
20
|
}
|
|
18
21
|
export declare namespace SelectListProps {
|
|
19
22
|
type SelectListRef = (index: number) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;
|
|
1
|
+
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,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;IAC5B,YAAY,CAAC,EAAE,WAAW,CAAC,wBAAwB,GAAG,gBAAgB,CAAC,6BAA6B,CAAC;CACtG;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;;AA8ED,wBAAqC"}
|
|
@@ -8,7 +8,7 @@ import { renderOptions } from '../utils/render-options';
|
|
|
8
8
|
import scrollToIndex from '../utils/scroll-to-index';
|
|
9
9
|
import { fallbackItemHeight } from './common';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
|
-
const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, }, ref) => {
|
|
11
|
+
const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, renderOption, }, ref) => {
|
|
12
12
|
const idPrefix = useUniqueId('select-list-');
|
|
13
13
|
const stickyOptionRef = useRef(null);
|
|
14
14
|
const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);
|
|
@@ -33,6 +33,7 @@ const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue,
|
|
|
33
33
|
const withScrollbar = !!width && width.inner < width.outer;
|
|
34
34
|
return (React.createElement(OptionsList, { ...menuProps, ref: mergedRef, stickyItemBlockSize: stickyOptionBlockSize },
|
|
35
35
|
renderOptions({
|
|
36
|
+
renderOption,
|
|
36
37
|
options: filteredOptions,
|
|
37
38
|
getOptionProps,
|
|
38
39
|
filteringValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAG1F,OAAO,WAAW,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport OptionsList from '../../internal/components/options-list';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport { SelectProps } from '../interfaces';\nimport { renderOptions } from '../utils/render-options';\nimport scrollToIndex from '../utils/scroll-to-index';\nimport { GetOptionProps, MenuProps } from '../utils/use-select';\nimport { fallbackItemHeight } from './common';\n\nimport styles from './styles.css.js';\n\nexport interface SelectListProps {\n menuProps: MenuProps;\n getOptionProps: GetOptionProps;\n filteredOptions: ReadonlyArray<DropdownOption>;\n filteringValue: string;\n highlightType: HighlightType;\n checkboxes?: boolean;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n firstOptionSticky?: boolean;\n renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;\n}\n\nexport namespace SelectListProps {\n export type SelectListRef = (index: number) => void;\n}\n\nconst PlainList = (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n renderOption,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n) => {\n const idPrefix = useUniqueId('select-list-');\n const stickyOptionRef = useRef<HTMLDivElement>(null);\n const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);\n\n const [width, menuMeasureRef] = useContainerQuery(rect => {\n if (stickyOptionRef.current) {\n // Cannot use container query on the sticky option individually because it is not rendered until the dropdown is open.\n // Not expecting the sticky option to change size without the dropdown also changing size.\n\n // The effects of using the sticky option block size to set the menu scroll padding are covered by integration tests.\n // istanbul ignore next\n setStickyOptionBlockSize(stickyOptionRef.current.clientHeight);\n }\n return { inner: rect.contentBoxWidth, outer: rect.borderBoxWidth };\n });\n\n const menuRef = menuProps.ref;\n\n const mergedRef = useMergeRefs(menuMeasureRef, menuRef);\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n const isSticky = firstOptionSticky && index === 0;\n if (highlightType.moveFocus && menuRef.current && !isSticky) {\n scrollToIndex({ index, menuEl: menuRef.current });\n }\n },\n [firstOptionSticky, highlightType.moveFocus, menuRef]\n );\n\n const withScrollbar = !!width && width.inner < width.outer;\n\n return (\n <OptionsList {...menuProps} ref={mergedRef} stickyItemBlockSize={stickyOptionBlockSize}>\n {renderOptions({\n renderOption,\n options: filteredOptions,\n getOptionProps,\n filteringValue,\n idPrefix,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n stickyOptionRef,\n withScrollbar,\n })}\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default forwardRef(PlainList);\n"]}
|
|
@@ -15,6 +15,7 @@ export interface TriggerProps extends FormFieldValidationControlProps {
|
|
|
15
15
|
triggerVariant?: SelectProps.TriggerVariant | MultiselectProps.TriggerVariant;
|
|
16
16
|
inFilteringToken?: 'root' | 'nested';
|
|
17
17
|
selectedOptions?: ReadonlyArray<OptionDefinition>;
|
|
18
|
+
renderOption?: SelectProps.SelectOptionItemRenderer;
|
|
18
19
|
}
|
|
19
20
|
declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
20
21
|
export default Trigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,WAAW,CAAC,wBAAwB,CAAC;CACrD;AAED,QAAA,MAAM,OAAO,wFA2IZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -9,13 +9,14 @@ import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
|
|
|
9
9
|
import { joinStrings } from '../../internal/utils/strings';
|
|
10
10
|
import InternalToken from '../../token/internal';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
|
-
const Trigger = React.forwardRef(({ ariaLabelledby, ariaDescribedby, controlId, invalid, inlineLabelText, warning, triggerProps, selectedOption, selectedOptions, triggerVariant, inFilteringToken, isOpen, placeholder, disabled, readOnly, }, ref) => {
|
|
12
|
+
const Trigger = React.forwardRef(({ ariaLabelledby, ariaDescribedby, controlId, invalid, inlineLabelText, warning, triggerProps, selectedOption, selectedOptions, triggerVariant, inFilteringToken, isOpen, placeholder, disabled, readOnly, renderOption, }, ref) => {
|
|
13
13
|
const isVisualRefresh = useVisualRefresh();
|
|
14
14
|
const generatedId = useUniqueId();
|
|
15
15
|
const id = controlId !== null && controlId !== void 0 ? controlId : generatedId;
|
|
16
16
|
const triggerContentId = useUniqueId('trigger-content-');
|
|
17
17
|
let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);
|
|
18
18
|
let triggerContent = null;
|
|
19
|
+
let hasCustomContent = false;
|
|
19
20
|
if (triggerVariant === 'tokens') {
|
|
20
21
|
if (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) {
|
|
21
22
|
triggerContent = (React.createElement("span", { className: clsx(styles['inline-token-trigger'], disabled && styles['inline-token-trigger--disabled'], isVisualRefresh && styles['visual-refresh']) },
|
|
@@ -36,13 +37,26 @@ const Trigger = React.forwardRef(({ ariaLabelledby, ariaDescribedby, controlId,
|
|
|
36
37
|
triggerContent = (React.createElement("span", { "aria-disabled": "true", className: clsx(styles.placeholder, styles.trigger), id: triggerContentId }, placeholder));
|
|
37
38
|
}
|
|
38
39
|
else if (triggerVariant === 'option') {
|
|
39
|
-
|
|
40
|
+
const triggerCustomContent = renderOption === null || renderOption === void 0 ? void 0 : renderOption({
|
|
41
|
+
filterText: undefined,
|
|
42
|
+
item: {
|
|
43
|
+
type: 'trigger',
|
|
44
|
+
option: selectedOption,
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
if (triggerCustomContent) {
|
|
48
|
+
hasCustomContent = true;
|
|
49
|
+
triggerContent = (React.createElement(Option, { customContent: triggerCustomContent, id: triggerContentId, option: { ...selectedOption, disabled }, triggerVariant: true }));
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
triggerContent = (React.createElement(Option, { id: triggerContentId, option: { ...selectedOption, disabled }, triggerVariant: true }));
|
|
53
|
+
}
|
|
40
54
|
}
|
|
41
55
|
else {
|
|
42
56
|
triggerContent = (React.createElement("span", { id: triggerContentId, className: styles.trigger }, selectedOption.label || selectedOption.value));
|
|
43
57
|
}
|
|
44
58
|
const mergedRef = useMergeRefs(triggerProps.ref, ref);
|
|
45
|
-
const triggerButton = (React.createElement(ButtonTrigger, { ...triggerProps, id: id, ref: mergedRef, pressed: !!isOpen, disabled: disabled, readOnly: readOnly, invalid: invalid, warning: warning && !invalid, inFilteringToken: inFilteringToken, inlineTokens: triggerVariant === 'tokens', ariaDescribedby: ariaDescribedby, ariaLabelledby: ariaLabelledbyIds }, triggerContent));
|
|
59
|
+
const triggerButton = (React.createElement(ButtonTrigger, { ...triggerProps, id: id, ref: mergedRef, pressed: !!isOpen, disabled: disabled, readOnly: readOnly, invalid: invalid, warning: warning && !invalid, inFilteringToken: inFilteringToken, inlineTokens: triggerVariant === 'tokens', hasCustomContent: hasCustomContent, ariaDescribedby: ariaDescribedby, ariaLabelledby: ariaLabelledbyIds }, triggerContent));
|
|
46
60
|
return (React.createElement(React.Fragment, null, inlineLabelText ? (React.createElement("div", { className: styles['inline-label-wrapper'] },
|
|
47
61
|
React.createElement("label", { htmlFor: controlId, className: clsx(styles['inline-label'], disabled && styles['inline-label-disabled'], triggerVariant === 'tokens' && styles['inline-label-inline-tokens']) }, inlineLabelText),
|
|
48
62
|
React.createElement("div", { className: styles['inline-label-trigger-wrapper'] }, triggerButton))) : (React.createElement(React.Fragment, null, triggerButton))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE1F,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAIjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.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 from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport Option from '../../internal/components/option';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport InternalToken from '../../token/internal';\nimport { SelectProps } from '../interfaces';\nimport { SelectTriggerProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n placeholder: string | undefined;\n disabled: boolean | undefined;\n readOnly?: boolean;\n triggerProps: SelectTriggerProps;\n selectedOption: OptionDefinition | null;\n inlineLabelText?: string;\n isOpen?: boolean;\n triggerVariant?: SelectProps.TriggerVariant | MultiselectProps.TriggerVariant;\n inFilteringToken?: 'root' | 'nested';\n selectedOptions?: ReadonlyArray<OptionDefinition>;\n renderOption?: SelectProps.SelectOptionItemRenderer;\n}\n\nconst Trigger = React.forwardRef(\n (\n {\n ariaLabelledby,\n ariaDescribedby,\n controlId,\n invalid,\n inlineLabelText,\n warning,\n triggerProps,\n selectedOption,\n selectedOptions,\n triggerVariant,\n inFilteringToken,\n isOpen,\n placeholder,\n disabled,\n readOnly,\n renderOption,\n }: TriggerProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n const generatedId = useUniqueId();\n const id = controlId ?? generatedId;\n const triggerContentId = useUniqueId('trigger-content-');\n\n let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);\n\n let triggerContent = null;\n let hasCustomContent = false;\n if (triggerVariant === 'tokens') {\n if (selectedOptions?.length) {\n triggerContent = (\n <span\n className={clsx(\n styles['inline-token-trigger'],\n disabled && styles['inline-token-trigger--disabled'],\n isVisualRefresh && styles['visual-refresh']\n )}\n >\n <span className={styles['inline-token-list']}>\n {selectedOptions.map(({ label }, i) => (\n <InternalToken key={i} label={label} variant=\"inline\" disabled={disabled} />\n ))}\n </span>\n <span className={styles['inline-token-counter']} id={triggerContentId}>\n <span className={styles['inline-token-hidden-placeholder']}>{placeholder}</span>\n <span>({selectedOptions.length})</span>\n </span>\n </span>\n );\n ariaLabelledbyIds = ariaLabelledby;\n } else {\n triggerContent = (\n <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n {placeholder}\n </span>\n );\n }\n } else if (!selectedOption) {\n triggerContent = (\n <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n {placeholder}\n </span>\n );\n } else if (triggerVariant === 'option') {\n const triggerCustomContent = renderOption?.({\n filterText: undefined,\n item: {\n type: 'trigger',\n option: selectedOption,\n },\n });\n if (triggerCustomContent) {\n hasCustomContent = true;\n triggerContent = (\n <Option\n customContent={triggerCustomContent}\n id={triggerContentId}\n option={{ ...selectedOption, disabled }}\n triggerVariant={true}\n />\n );\n } else {\n triggerContent = (\n <Option id={triggerContentId} option={{ ...selectedOption, disabled }} triggerVariant={true} />\n );\n }\n } else {\n triggerContent = (\n <span id={triggerContentId} className={styles.trigger}>\n {selectedOption.label || selectedOption.value}\n </span>\n );\n }\n\n const mergedRef = useMergeRefs(triggerProps.ref, ref);\n const triggerButton = (\n <ButtonTrigger\n {...triggerProps}\n id={id}\n ref={mergedRef}\n pressed={!!isOpen}\n disabled={disabled}\n readOnly={readOnly}\n invalid={invalid}\n warning={warning && !invalid}\n inFilteringToken={inFilteringToken}\n inlineTokens={triggerVariant === 'tokens'}\n hasCustomContent={hasCustomContent}\n ariaDescribedby={ariaDescribedby}\n ariaLabelledby={ariaLabelledbyIds}\n >\n {triggerContent}\n </ButtonTrigger>\n );\n return (\n <>\n {inlineLabelText ? (\n <div className={styles['inline-label-wrapper']}>\n <label\n htmlFor={controlId}\n className={clsx(\n styles['inline-label'],\n disabled && styles['inline-label-disabled'],\n triggerVariant === 'tokens' && styles['inline-label-inline-tokens']\n )}\n >\n {inlineLabelText}\n </label>\n <div className={styles['inline-label-trigger-wrapper']}>{triggerButton}</div>\n </div>\n ) : (\n <>{triggerButton}</>\n )}\n </>\n );\n }\n);\n\nexport default Trigger;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAUpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;
|
|
1
|
+
{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAUpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AA8H/C,wBAAuC"}
|
|
@@ -12,7 +12,7 @@ import styles from './styles.css.js';
|
|
|
12
12
|
const VirtualList = (props, ref) => {
|
|
13
13
|
return props.menuProps.open ? React.createElement(VirtualListOpen, { ...props, ref: ref }) : React.createElement(VirtualListClosed, { ...props, ref: ref });
|
|
14
14
|
};
|
|
15
|
-
const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, }, ref) => {
|
|
15
|
+
const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, renderOption, }, ref) => {
|
|
16
16
|
// update component, when it gets wider or narrower to reposition items
|
|
17
17
|
const [width, menuMeasureRef] = useContainerQuery(rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }), []);
|
|
18
18
|
const menuRefObject = useRef(null);
|
|
@@ -55,6 +55,7 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
|
|
|
55
55
|
const idPrefix = useUniqueId('select-list-');
|
|
56
56
|
const finalOptions = renderOptions({
|
|
57
57
|
options: virtualItems.map(({ index }) => filteredOptions[index]),
|
|
58
|
+
renderOption,
|
|
58
59
|
getOptionProps,
|
|
59
60
|
filteringValue,
|
|
60
61
|
highlightType,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE1F,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,WAAW,GAAG,CAAC,KAAsB,EAAE,GAA6C,EAAE,EAAE;IAC5F,OAAO,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC,CAAC,CAAC,oBAAC,iBAAiB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACtH,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,cAAc,EACd,eAAe,EACf,cAAc,EACd,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.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, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useVirtual } from '../../internal/hooks/use-virtual';\nimport { renderOptions } from '../utils/render-options';\nimport customScrollToIndex from '../utils/scroll-to-index';\nimport { fallbackItemHeight } from './common';\nimport { SelectListProps } from './plain-list';\n\nimport styles from './styles.css.js';\n\nconst VirtualList = (props: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n return props.menuProps.open ? <VirtualListOpen {...props} ref={ref} /> : <VirtualListClosed {...props} ref={ref} />;\n};\n\nconst VirtualListOpen = forwardRef(\n (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n renderOption,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n ) => {\n // update component, when it gets wider or narrower to reposition items\n const [width, menuMeasureRef] = useContainerQuery(\n rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }),\n []\n );\n const menuRefObject = useRef(null);\n const menuRef = useMergeRefs(menuMeasureRef, menuRefObject, menuProps.ref);\n const previousHighlightedIndex = useRef<number>();\n const { virtualItems, totalSize, scrollToIndex } = useVirtual({\n items: filteredOptions,\n parentRef: menuRefObject,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (filteringValue property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => fallbackItemHeight, [width?.inner, filteringValue]),\n firstItemSticky: firstOptionSticky,\n });\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n if (highlightType.moveFocus) {\n const movingUp = previousHighlightedIndex.current !== undefined && index < previousHighlightedIndex.current;\n if (firstOptionSticky && movingUp && index !== 0 && menuRefObject.current) {\n // React-Virtual v2 does not offer a proper way to handle sticky elements when scrolling,\n // so until we upgrade to v3, use our own scroll implementation\n // to prevent newly highlighted element from being covered by the sticky element\n // when moving the highlight upwards in the list.\n\n // Scrolling behavior is covered by integration tests.\n // istanbul ignore next\n customScrollToIndex({\n index,\n menuEl: menuRefObject?.current,\n });\n } else {\n scrollToIndex(index);\n }\n }\n previousHighlightedIndex.current = index;\n },\n [firstOptionSticky, highlightType.moveFocus, scrollToIndex]\n );\n\n const stickySize = firstOptionSticky ? virtualItems[0].size : 0;\n const withScrollbar = !!width && width.inner < width.outer;\n\n const idPrefix = useUniqueId('select-list-');\n const finalOptions = renderOptions({\n options: virtualItems.map(({ index }) => filteredOptions[index]),\n renderOption,\n getOptionProps,\n filteringValue,\n highlightType,\n idPrefix,\n checkboxes,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n withScrollbar,\n });\n\n return (\n <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef}>\n {finalOptions}\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: totalSize - stickySize }}\n />\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nconst VirtualListClosed = forwardRef(\n ({ menuProps, listBottom }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n useImperativeHandle(ref, () => () => {}, []);\n return (\n <OptionsList {...menuProps} ref={menuProps.ref}>\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nexport default forwardRef(VirtualList);\n"]}
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { DropdownOption } from '../../internal/components/option/interfaces';
|
|
3
3
|
import { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';
|
|
4
4
|
import { VirtualItem } from '../../internal/vendor/react-virtual';
|
|
5
|
+
import { MultiselectProps } from '../../multiselect/interfaces';
|
|
6
|
+
import { SelectProps } from '../interfaces';
|
|
5
7
|
interface RenderOptionProps {
|
|
6
8
|
options: ReadonlyArray<DropdownOption>;
|
|
7
9
|
getOptionProps: any;
|
|
@@ -17,7 +19,8 @@ interface RenderOptionProps {
|
|
|
17
19
|
withScrollbar: boolean;
|
|
18
20
|
firstOptionSticky?: boolean;
|
|
19
21
|
stickyOptionRef?: React.Ref<HTMLDivElement>;
|
|
22
|
+
renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;
|
|
20
23
|
}
|
|
21
|
-
export declare const renderOptions: ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }: RenderOptionProps) => JSX.Element[];
|
|
24
|
+
export declare const renderOptions: ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, renderOption, }: RenderOptionProps) => JSX.Element[];
|
|
22
25
|
export {};
|
|
23
26
|
//# sourceMappingURL=render-options.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAM5C,UAAU,iBAAiB;IACzB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,wBAAwB,GAAG,gBAAgB,CAAC,6BAA6B,CAAC;CACtG;AAED,eAAO,MAAM,aAAa,GAAI,6OAgB3B,iBAAiB,kBA8EnB,CAAC"}
|
|
@@ -6,7 +6,7 @@ import Item from '../parts/item';
|
|
|
6
6
|
import MultiselectItem from '../parts/multiselect-item';
|
|
7
7
|
import OptionGroup from '../parts/option-group';
|
|
8
8
|
import { getItemProps } from './get-item-props';
|
|
9
|
-
export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }) => {
|
|
9
|
+
export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, renderOption, }) => {
|
|
10
10
|
const getNestedItemProps = ({ index, option }) => {
|
|
11
11
|
const virtualItem = virtualItems && virtualItems[index];
|
|
12
12
|
const globalIndex = virtualItem ? virtualItem.index : index;
|
|
@@ -18,14 +18,14 @@ export const renderOptions = ({ options, getOptionProps, filteringValue, highlig
|
|
|
18
18
|
checkboxes,
|
|
19
19
|
});
|
|
20
20
|
};
|
|
21
|
-
const renderListItem = (props, index) => {
|
|
21
|
+
const renderListItem = (props, index, parentProps) => {
|
|
22
22
|
const virtualItem = virtualItems && virtualItems[index];
|
|
23
23
|
const globalIndex = virtualItem ? virtualItem.index : index;
|
|
24
24
|
const isLastItem = index === options.length - 1;
|
|
25
25
|
const padBottom = !hasDropdownStatus && isLastItem;
|
|
26
26
|
const ListItem = useInteractiveGroups ? MultiselectItem : Item;
|
|
27
27
|
const isSticky = firstOptionSticky && globalIndex === 0;
|
|
28
|
-
return (React.createElement(ListItem, { key: globalIndex, ...props, virtualPosition: virtualItem && virtualItem.start, ref: isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky }));
|
|
28
|
+
return (React.createElement(ListItem, { index: index, virtualIndex: virtualItem ? virtualItem.index : undefined, key: globalIndex, ...props, virtualPosition: virtualItem && virtualItem.start, ref: isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky, renderOption: renderOption, parentProps: parentProps }));
|
|
29
29
|
};
|
|
30
30
|
const unflattenedOptions = unflattenOptions(options);
|
|
31
31
|
return unflattenedOptions.map(nestedDropdownOption => {
|
|
@@ -37,7 +37,18 @@ export const renderOptions = ({ options, getOptionProps, filteringValue, highlig
|
|
|
37
37
|
const optionId = (_a = props.id) !== null && _a !== void 0 ? _a : `${idPrefix}-option-${index}`;
|
|
38
38
|
return (React.createElement(OptionGroup, { key: `group-${index}`, virtual: (virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems[index]) !== undefined, ariaLabelledby: optionId, ariaDisabled: props['aria-disabled'] },
|
|
39
39
|
renderListItem(props, index),
|
|
40
|
-
children.map(child =>
|
|
40
|
+
children.map(child => {
|
|
41
|
+
var _a, _b, _c, _d, _e, _f;
|
|
42
|
+
return (React.createElement(React.Fragment, { key: child.index }, renderListItem(getNestedItemProps(child), child.index, {
|
|
43
|
+
option: nestedDropdownOption.option,
|
|
44
|
+
disabled: (_a = nestedDropdownOption.option.disabled) !== null && _a !== void 0 ? _a : false,
|
|
45
|
+
index: index,
|
|
46
|
+
virtualIndex: (_c = (_b = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems[index]) === null || _b === void 0 ? void 0 : _b.index) !== null && _c !== void 0 ? _c : undefined,
|
|
47
|
+
highlighted: (_d = props.highlighted) !== null && _d !== void 0 ? _d : false,
|
|
48
|
+
selected: (_e = props.selected) !== null && _e !== void 0 ? _e : false,
|
|
49
|
+
indeterminate: (_f = props.indeterminate) !== null && _f !== void 0 ? _f : false,
|
|
50
|
+
})));
|
|
51
|
+
})));
|
|
41
52
|
}
|
|
42
53
|
return renderListItem(props, index);
|
|
43
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-options.js","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwB,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;
|
|
1
|
+
{"version":3,"file":"render-options.js","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwB,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAKlH,OAAO,IAAyB,MAAM,eAAe,CAAC;AACtD,OAAO,eAA+C,MAAM,2BAA2B,CAAC;AACxF,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAoBhD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,YAAY,GACM,EAAE,EAAE;IACtB,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAwB,EAAE,EAAE;QACrE,MAAM,WAAW,GAAG,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5D,OAAO,YAAY,CAAC;YAClB,MAAM;YACN,KAAK,EAAE,WAAW;YAClB,cAAc;YACd,cAAc,EAAE,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;YAClE,UAAU;SACX,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAU,EAAE,KAAa,EAAE,WAA0D,EAAE,EAAE;QAC/G,MAAM,WAAW,GAAG,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAE5D,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,MAAM,SAAS,GAAG,CAAC,iBAAiB,IAAI,UAAU,CAAC;QACnD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,MAAM,QAAQ,GAAG,iBAAiB,IAAI,WAAW,KAAK,CAAC,CAAC;QAExD,OAAO,CACL,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,WAAW,KACZ,KAAK,EACT,eAAe,EAAE,WAAW,IAAI,WAAW,CAAC,KAAK,EACjD,GAAG,EAAE,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,UAAU,EAC1F,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,WAAW,GAAG,CAAC,EAC7B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,CAAC,IAAI,EACjC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,QAAQ,EAChB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE;;QACnD,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC;QACzC,MAAM,KAAK,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;QAEvD,IAAI,oBAAoB,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,oBAAoB,CAAC;YAC1C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,QAAQ,WAAW,KAAK,EAAE,CAAC;YAC3D,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,SAAS,KAAK,EAAE,EACrB,OAAO,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,CAAC,MAAK,SAAS,EAC5C,cAAc,EAAE,QAAQ,EACxB,YAAY,EAAE,KAAK,CAAC,eAAe,CAAC;gBAEnC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5B,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;oBAAC,OAAA,CACrB,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,CAAC,KAAK,IAC7B,cAAc,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE;wBACtD,MAAM,EAAE,oBAAoB,CAAC,MAAM;wBACnC,QAAQ,EAAE,MAAA,oBAAoB,CAAC,MAAM,CAAC,QAAQ,mCAAI,KAAK;wBACvD,KAAK,EAAE,KAAK;wBACZ,YAAY,EAAE,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,CAAC,0CAAE,KAAK,mCAAI,SAAS;wBACvD,WAAW,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,KAAK;wBACvC,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK;wBACjC,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK;qBAC5C,CAAC,CACa,CAClB,CAAA;iBAAA,CAAC,CACU,CACf,CAAC;QACJ,CAAC;QAED,OAAO,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport { NestedDropdownOption, unflattenOptions } from '../../internal/components/option/utils/unflatten-options';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { VirtualItem } from '../../internal/vendor/react-virtual';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport { SelectProps } from '../interfaces';\nimport Item, { ItemParentProps } from '../parts/item';\nimport MultiselectItem, { MultiselectItemParentProps } from '../parts/multiselect-item';\nimport OptionGroup from '../parts/option-group';\nimport { getItemProps } from './get-item-props';\n\ninterface RenderOptionProps {\n options: ReadonlyArray<DropdownOption>;\n getOptionProps: any;\n filteringValue: string;\n highlightType: HighlightType;\n idPrefix: string;\n checkboxes?: boolean;\n hasDropdownStatus?: boolean;\n virtualItems?: VirtualItem[];\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaSetsize?: number;\n withScrollbar: boolean;\n firstOptionSticky?: boolean;\n stickyOptionRef?: React.Ref<HTMLDivElement>;\n renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;\n}\n\nexport const renderOptions = ({\n options,\n getOptionProps,\n filteringValue,\n highlightType,\n idPrefix,\n checkboxes = false,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n ariaSetsize,\n withScrollbar,\n firstOptionSticky,\n stickyOptionRef,\n renderOption,\n}: RenderOptionProps) => {\n const getNestedItemProps = ({ index, option }: NestedDropdownOption) => {\n const virtualItem = virtualItems && virtualItems[index];\n const globalIndex = virtualItem ? virtualItem.index : index;\n return getItemProps({\n option,\n index: globalIndex,\n getOptionProps,\n filteringValue: option.type === 'select-all' ? '' : filteringValue,\n checkboxes,\n });\n };\n\n const renderListItem = (props: any, index: number, parentProps?: ItemParentProps | MultiselectItemParentProps) => {\n const virtualItem = virtualItems && virtualItems[index];\n const globalIndex = virtualItem ? virtualItem.index : index;\n\n const isLastItem = index === options.length - 1;\n const padBottom = !hasDropdownStatus && isLastItem;\n const ListItem = useInteractiveGroups ? MultiselectItem : Item;\n const isSticky = firstOptionSticky && globalIndex === 0;\n\n return (\n <ListItem\n index={index}\n virtualIndex={virtualItem ? virtualItem.index : undefined}\n key={globalIndex}\n {...props}\n virtualPosition={virtualItem && virtualItem.start}\n ref={isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef}\n padBottom={padBottom}\n screenReaderContent={screenReaderContent}\n ariaPosinset={globalIndex + 1}\n ariaSetsize={ariaSetsize}\n highlightType={highlightType.type}\n withScrollbar={withScrollbar}\n sticky={isSticky}\n renderOption={renderOption}\n parentProps={parentProps}\n />\n );\n };\n\n const unflattenedOptions = unflattenOptions(options);\n return unflattenedOptions.map(nestedDropdownOption => {\n const index = nestedDropdownOption.index;\n const props = getNestedItemProps(nestedDropdownOption);\n\n if (nestedDropdownOption.type === 'parent') {\n const { children } = nestedDropdownOption;\n const optionId = props.id ?? `${idPrefix}-option-${index}`;\n return (\n <OptionGroup\n key={`group-${index}`}\n virtual={virtualItems?.[index] !== undefined}\n ariaLabelledby={optionId}\n ariaDisabled={props['aria-disabled']}\n >\n {renderListItem(props, index)}\n {children.map(child => (\n <React.Fragment key={child.index}>\n {renderListItem(getNestedItemProps(child), child.index, {\n option: nestedDropdownOption.option,\n disabled: nestedDropdownOption.option.disabled ?? false,\n index: index,\n virtualIndex: virtualItems?.[index]?.index ?? undefined,\n highlighted: props.highlighted ?? false,\n selected: props.selected ?? false,\n indeterminate: props.indeterminate ?? false,\n })}\n </React.Fragment>\n ))}\n </OptionGroup>\n );\n }\n\n return renderListItem(props, index);\n });\n};\n"]}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
|
|
2
2
|
export default class OptionWrapper extends ComponentWrapper {
|
|
3
3
|
static rootSelector: string;
|
|
4
|
+
/**
|
|
5
|
+
* Finds the label wrapper of this option.
|
|
6
|
+
* @returns {ElementWrapper} the ElementWrapper for the label.
|
|
7
|
+
*/
|
|
4
8
|
findLabel(): ElementWrapper;
|
|
5
9
|
findDescription(): ElementWrapper | null;
|
|
6
10
|
findLabelTag(): ElementWrapper | null;
|
|
@@ -12,8 +12,17 @@ const dom_1 = require("@cloudscape-design/test-utils-core/dom");
|
|
|
12
12
|
const styles_selectors_js_1 = require("../../../internal/components/option/styles.selectors.js");
|
|
13
13
|
const styles_selectors_js_2 = require("../../../select/parts/styles.selectors.js");
|
|
14
14
|
class OptionWrapper extends dom_1.ComponentWrapper {
|
|
15
|
+
/**
|
|
16
|
+
* Finds the label wrapper of this option.
|
|
17
|
+
* @returns {ElementWrapper} the ElementWrapper for the label.
|
|
18
|
+
*/
|
|
15
19
|
findLabel() {
|
|
16
|
-
|
|
20
|
+
const labelElementWrapper = this.findByClassName(styles_selectors_js_1.default.label);
|
|
21
|
+
if (!labelElementWrapper) {
|
|
22
|
+
// Fallback, if label is null due to custom content.
|
|
23
|
+
return this.findByClassName(styles_selectors_js_1.default['custom-content']);
|
|
24
|
+
}
|
|
25
|
+
return labelElementWrapper;
|
|
17
26
|
}
|
|
18
27
|
findDescription() {
|
|
19
28
|
return this.findByClassName(styles_selectors_js_1.default.description);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/internal/option.ts"],"names":[],"mappings":";;;;;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAAkH;AAElH,iGAA6E;AAC7E,mFAA0E;AAE1E,MAAqB,aAAc,SAAQ,sBAAgB;IAGzD,SAAS;QACP,
|
|
1
|
+
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/internal/option.ts"],"names":[],"mappings":";;;;;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAAkH;AAElH,iGAA6E;AAC7E,mFAA0E;AAE1E,MAAqB,aAAc,SAAQ,sBAAgB;IAGzD;;;OAGG;IACH,SAAS;QACP,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACzB,oDAAoD;YACpD,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,gBAAgB,CAAC,CAAE,CAAC;QACzD,CAAC;QACD,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,eAAe;QACb,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,WAAW,CAAC,CAAC;IAClD,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAM,CAAC,GAAG,CAAC,CAAC;IAC7C,CAAC;IAED,kBAAkB;QAChB,OAAO,IAAA,mBAAa,GAAE,CAAC,IAAI,CAAC,IAAI,6BAAiB,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC;IAClF,CAAC;IAGD,UAAU;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,6BAAM,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC;;AAlCM,0BAAY,GAAW,6BAAM,CAAC,MAAM,CAAC;kBADzB,aAAa;AAiChC;IADC,aAAO;+CAGP"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/selectors";
|
|
2
2
|
export default class OptionWrapper extends ComponentWrapper {
|
|
3
3
|
static rootSelector: string;
|
|
4
|
+
/**
|
|
5
|
+
* Finds the label wrapper of this option.
|
|
6
|
+
* @returns {ElementWrapper} the ElementWrapper for the label.
|
|
7
|
+
*/
|
|
4
8
|
findLabel(): ElementWrapper;
|
|
5
9
|
findDescription(): ElementWrapper;
|
|
6
10
|
findLabelTag(): ElementWrapper;
|