@cloudscape-design/components-themeable 3.0.1341 → 3.0.1342
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/expandable-section/styles.scss +142 -0
- package/lib/internal/scss/input/styles.scss +2 -5
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/multiselect/styles.scss +14 -0
- package/lib/internal/scss/pagination/styles.scss +9 -2
- package/lib/internal/scss/pagination/test-classes/styles.scss +8 -0
- package/lib/internal/scss/select/styles.scss +14 -1
- package/lib/internal/scss/side-navigation/styles.scss +62 -24
- package/lib/internal/scss/textarea/styles.scss +21 -2
- package/lib/internal/template/expandable-section/expandable-section-header.d.ts +2 -1
- package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/lib/internal/template/expandable-section/expandable-section-header.js +57 -13
- package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
- package/lib/internal/template/expandable-section/interfaces.d.ts +1 -1
- package/lib/internal/template/expandable-section/interfaces.js.map +1 -1
- package/lib/internal/template/expandable-section/internal.d.ts +14 -1
- package/lib/internal/template/expandable-section/internal.d.ts.map +1 -1
- package/lib/internal/template/expandable-section/internal.js +3 -3
- package/lib/internal/template/expandable-section/internal.js.map +1 -1
- package/lib/internal/template/expandable-section/styles.css.js +42 -35
- package/lib/internal/template/expandable-section/styles.scoped.css +177 -69
- package/lib/internal/template/expandable-section/styles.selectors.js +42 -35
- package/lib/internal/template/i18n/messages/all.all.js +1 -1
- package/lib/internal/template/i18n/messages/all.all.json +1 -1
- package/lib/internal/template/i18n/messages/all.ar.js +1 -1
- package/lib/internal/template/i18n/messages/all.ar.json +1 -1
- package/lib/internal/template/i18n/messages/all.de.js +1 -1
- package/lib/internal/template/i18n/messages/all.de.json +1 -1
- package/lib/internal/template/i18n/messages/all.en-GB.js +1 -1
- package/lib/internal/template/i18n/messages/all.en-GB.json +1 -1
- package/lib/internal/template/i18n/messages/all.en.js +1 -1
- package/lib/internal/template/i18n/messages/all.en.json +1 -1
- package/lib/internal/template/i18n/messages/all.es.js +1 -1
- package/lib/internal/template/i18n/messages/all.es.json +1 -1
- package/lib/internal/template/i18n/messages/all.fr.js +1 -1
- package/lib/internal/template/i18n/messages/all.fr.json +1 -1
- package/lib/internal/template/i18n/messages/all.id.js +1 -1
- package/lib/internal/template/i18n/messages/all.id.json +1 -1
- package/lib/internal/template/i18n/messages/all.it.js +1 -1
- package/lib/internal/template/i18n/messages/all.it.json +1 -1
- package/lib/internal/template/i18n/messages/all.ja.js +1 -1
- package/lib/internal/template/i18n/messages/all.ja.json +1 -1
- package/lib/internal/template/i18n/messages/all.ko.js +1 -1
- package/lib/internal/template/i18n/messages/all.ko.json +1 -1
- package/lib/internal/template/i18n/messages/all.pt-BR.js +1 -1
- package/lib/internal/template/i18n/messages/all.pt-BR.json +1 -1
- package/lib/internal/template/i18n/messages/all.tr.js +1 -1
- package/lib/internal/template/i18n/messages/all.tr.json +1 -1
- package/lib/internal/template/i18n/messages/all.zh-CN.js +1 -1
- package/lib/internal/template/i18n/messages/all.zh-CN.json +1 -1
- package/lib/internal/template/i18n/messages/all.zh-TW.js +1 -1
- package/lib/internal/template/i18n/messages/all.zh-TW.json +1 -1
- package/lib/internal/template/i18n/messages-types.d.ts +5 -0
- package/lib/internal/template/i18n/messages-types.d.ts.map +1 -1
- package/lib/internal/template/i18n/messages-types.js.map +1 -1
- package/lib/internal/template/input/styles.css.js +28 -28
- package/lib/internal/template/input/styles.scoped.css +70 -70
- package/lib/internal/template/input/styles.selectors.js +28 -28
- package/lib/internal/template/internal/base-component/styles.scoped.css +297 -289
- package/lib/internal/template/internal/components/cartesian-chart/styles.css.js +28 -28
- package/lib/internal/template/internal/components/cartesian-chart/styles.scoped.css +35 -35
- package/lib/internal/template/internal/components/cartesian-chart/styles.selectors.js +28 -28
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
- package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
- package/lib/internal/template/internal/generated/theming/index.cjs +31 -0
- package/lib/internal/template/internal/generated/theming/index.js +31 -0
- package/lib/internal/template/multiselect/index.d.ts.map +1 -1
- package/lib/internal/template/multiselect/index.js +4 -0
- package/lib/internal/template/multiselect/index.js.map +1 -1
- package/lib/internal/template/multiselect/interfaces.d.ts +8 -1
- 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 +22 -2
- package/lib/internal/template/multiselect/internal.js.map +1 -1
- package/lib/internal/template/multiselect/styles.css.js +5 -3
- package/lib/internal/template/multiselect/styles.scoped.css +13 -3
- package/lib/internal/template/multiselect/styles.selectors.js +5 -3
- package/lib/internal/template/multiselect/use-multiselect.d.ts +3 -2
- package/lib/internal/template/multiselect/use-multiselect.d.ts.map +1 -1
- package/lib/internal/template/multiselect/use-multiselect.js +5 -3
- package/lib/internal/template/multiselect/use-multiselect.js.map +1 -1
- package/lib/internal/template/pagination/index.d.ts.map +1 -1
- package/lib/internal/template/pagination/index.js +3 -3
- package/lib/internal/template/pagination/index.js.map +1 -1
- package/lib/internal/template/pagination/interfaces.d.ts +19 -3
- package/lib/internal/template/pagination/interfaces.d.ts.map +1 -1
- package/lib/internal/template/pagination/interfaces.js.map +1 -1
- package/lib/internal/template/pagination/internal.d.ts.map +1 -1
- package/lib/internal/template/pagination/internal.js +18 -6
- package/lib/internal/template/pagination/internal.js.map +1 -1
- package/lib/internal/template/pagination/styles.css.js +12 -11
- package/lib/internal/template/pagination/styles.scoped.css +34 -25
- package/lib/internal/template/pagination/styles.selectors.js +12 -11
- package/lib/internal/template/pagination/test-classes/styles.css.js +6 -0
- package/lib/internal/template/pagination/test-classes/styles.scoped.css +7 -0
- package/lib/internal/template/pagination/test-classes/styles.selectors.js +7 -0
- package/lib/internal/template/prompt-input/internal.d.ts.map +1 -1
- package/lib/internal/template/prompt-input/internal.js +14 -2
- package/lib/internal/template/prompt-input/internal.js.map +1 -1
- package/lib/internal/template/select/index.d.ts.map +1 -1
- package/lib/internal/template/select/index.js +4 -0
- package/lib/internal/template/select/index.js.map +1 -1
- package/lib/internal/template/select/interfaces.d.ts +39 -0
- 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 +20 -4
- package/lib/internal/template/select/internal.js.map +1 -1
- package/lib/internal/template/select/styles.css.js +3 -1
- package/lib/internal/template/select/styles.scoped.css +11 -1
- package/lib/internal/template/select/styles.selectors.js +3 -1
- package/lib/internal/template/select/utils/dropdown-customization.d.ts +20 -0
- package/lib/internal/template/select/utils/dropdown-customization.d.ts.map +1 -0
- package/lib/internal/template/select/utils/dropdown-customization.js +22 -0
- package/lib/internal/template/select/utils/dropdown-customization.js.map +1 -0
- package/lib/internal/template/select/utils/use-select.d.ts +4 -1
- package/lib/internal/template/select/utils/use-select.d.ts.map +1 -1
- package/lib/internal/template/select/utils/use-select.js +21 -4
- package/lib/internal/template/select/utils/use-select.js.map +1 -1
- package/lib/internal/template/side-navigation/parts.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/parts.js +3 -2
- package/lib/internal/template/side-navigation/parts.js.map +1 -1
- package/lib/internal/template/side-navigation/styles.css.js +50 -48
- package/lib/internal/template/side-navigation/styles.scoped.css +106 -93
- package/lib/internal/template/side-navigation/styles.selectors.js +50 -48
- package/lib/internal/template/test-utils/dom/multiselect/index.d.ts +16 -0
- package/lib/internal/template/test-utils/dom/multiselect/index.js +16 -0
- package/lib/internal/template/test-utils/dom/multiselect/index.js.map +1 -1
- package/lib/internal/template/test-utils/dom/pagination/index.d.ts +5 -1
- package/lib/internal/template/test-utils/dom/pagination/index.js +7 -0
- package/lib/internal/template/test-utils/dom/pagination/index.js.map +1 -1
- package/lib/internal/template/test-utils/dom/select/index.d.ts +16 -0
- package/lib/internal/template/test-utils/dom/select/index.js +16 -0
- package/lib/internal/template/test-utils/dom/select/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/multiselect/index.d.ts +16 -0
- package/lib/internal/template/test-utils/selectors/multiselect/index.js +20 -0
- package/lib/internal/template/test-utils/selectors/multiselect/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/pagination/index.d.ts +5 -1
- package/lib/internal/template/test-utils/selectors/pagination/index.js +7 -0
- package/lib/internal/template/test-utils/selectors/pagination/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/select/index.d.ts +16 -0
- package/lib/internal/template/test-utils/selectors/select/index.js +20 -0
- package/lib/internal/template/test-utils/selectors/select/index.js.map +1 -1
- package/lib/internal/template/textarea/index.d.ts.map +1 -1
- package/lib/internal/template/textarea/index.js +11 -3
- package/lib/internal/template/textarea/index.js.map +1 -1
- package/lib/internal/template/textarea/interfaces.d.ts +12 -0
- package/lib/internal/template/textarea/interfaces.d.ts.map +1 -1
- package/lib/internal/template/textarea/interfaces.js.map +1 -1
- package/lib/internal/template/textarea/styles.css.js +9 -5
- package/lib/internal/template/textarea/styles.scoped.css +26 -14
- package/lib/internal/template/textarea/styles.selectors.js +9 -5
- package/package.json +1 -1
|
@@ -18,10 +18,14 @@ const Select = React.forwardRef(({ options = [], filteringType = 'none', statusT
|
|
|
18
18
|
triggerVariant,
|
|
19
19
|
virtualScroll: restProps.virtualScroll,
|
|
20
20
|
readOnly: restProps.readOnly,
|
|
21
|
+
dropdownRole: restProps.dropdownRole,
|
|
21
22
|
},
|
|
22
23
|
metadata: {
|
|
23
24
|
hasInlineLabel: Boolean(restProps.inlineLabelText),
|
|
24
25
|
hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),
|
|
26
|
+
hasDropdownHeader: Boolean(restProps.renderDropdownHeader),
|
|
27
|
+
hasDropdownFooter: Boolean(restProps.renderDropdownFooter),
|
|
28
|
+
hasDropdownAriaDescribedby: Boolean(restProps.dropdownAriaDescribedby),
|
|
25
29
|
},
|
|
26
30
|
});
|
|
27
31
|
const externalProps = getExternalProps(restProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,OAAO,cAAc,MAAM,YAAY,CAAC;AAIxC,OAAO,kBAAkB,MAAM,wEAAwE,CAAC;AAExG,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,OAAO,GAAG,EAAE,EACZ,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,UAAU,EACvB,cAAc,GAAG,OAAO,EACxB,YAAY,EACZ,GAAG,SAAS,EACA,EACd,GAA+B,EAC/B,EAAE;;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE;YACL,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,aAAa;YACb,cAAc;YACd,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,QAAQ,EAAE,SAAS,CAAC,QAAQ;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,OAAO,cAAc,MAAM,YAAY,CAAC;AAIxC,OAAO,kBAAkB,MAAM,wEAAwE,CAAC;AAExG,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,OAAO,GAAG,EAAE,EACZ,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,UAAU,EACvB,cAAc,GAAG,OAAO,EACxB,YAAY,EACZ,GAAG,SAAS,EACA,EACd,GAA+B,EAC/B,EAAE;;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE;YACL,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,aAAa;YACb,cAAc;YACd,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,YAAY,EAAE,SAAS,CAAC,YAAY;SACrC;QACD,QAAQ,EAAE;YACR,cAAc,EAAE,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC;YAClD,kBAAkB,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;YAC1E,iBAAiB,EAAE,OAAO,CAAC,SAAS,CAAC,oBAAoB,CAAC;YAC1D,iBAAiB,EAAE,OAAO,CAAC,SAAS,CAAC,oBAAoB,CAAC;YAC1D,0BAA0B,EAAE,OAAO,CAAC,SAAS,CAAC,uBAAuB,CAAC;SACvE;KACF,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAElD,MAAM,0BAA0B,GAA8C;QAC5E,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,IAAI,kBAAkB,CAAC,gBAAgB,CAAC,EAAE;QACjD,UAAU,EAAE;YACV,QAAQ,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE;YACvC,mBAAmB,EAAE,GAAG,aAAa,CAAC,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE;YACxI,8HAA8H;YAC9H,cAAc,EAAE,GAAG,MAAA,MAAA,MAAA,aAAa,CAAC,cAAc,0CAAE,KAAK,mCAAI,MAAA,aAAa,CAAC,cAAc,0CAAE,KAAK,mCAAI,IAAI,EAAE;SACxG;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,KAC1B,aAAa,KACb,kBAAkB,EACtB,GAAG,EAAE,GAAG,KACJ,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,GAC5E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { GeneratedAnalyticsMetadataSelectComponent } from './analytics-metadata/interfaces';\nimport { SelectProps } from './interfaces';\nimport InternalSelect from './internal';\n\nexport { SelectProps };\n\nimport analyticsSelectors from '../internal/components/button-trigger/analytics-metadata/styles.css.js';\n\nconst Select = React.forwardRef(\n (\n {\n options = [],\n filteringType = 'none',\n statusType = 'finished',\n triggerVariant = 'label',\n renderOption,\n ...restProps\n }: SelectProps,\n ref: React.Ref<SelectProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Select', {\n props: {\n autoFocus: restProps.autoFocus,\n expandToViewport: restProps.expandToViewport,\n filteringType,\n triggerVariant,\n virtualScroll: restProps.virtualScroll,\n readOnly: restProps.readOnly,\n dropdownRole: restProps.dropdownRole,\n },\n metadata: {\n hasInlineLabel: Boolean(restProps.inlineLabelText),\n hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),\n hasDropdownHeader: Boolean(restProps.renderDropdownHeader),\n hasDropdownFooter: Boolean(restProps.renderDropdownFooter),\n hasDropdownAriaDescribedby: Boolean(restProps.dropdownAriaDescribedby),\n },\n });\n const externalProps = getExternalProps(restProps);\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataSelectComponent = {\n name: 'awsui.Select',\n label: `.${analyticsSelectors['button-trigger']}`,\n properties: {\n disabled: `${!!externalProps.disabled}`,\n selectedOptionValue: `${externalProps.selectedOption && externalProps.selectedOption.value ? externalProps.selectedOption.value : null}`,\n // Use label for display if available, fallback to value because that's what gets shown in dropdown when label is not provided\n selectedOption: `${externalProps.selectedOption?.label ?? externalProps.selectedOption?.value ?? null}`,\n },\n };\n\n return (\n <InternalSelect\n renderOption={renderOption}\n options={options}\n filteringType={filteringType}\n statusType={statusType}\n triggerVariant={triggerVariant}\n {...externalProps}\n {...baseComponentProps}\n ref={ref}\n {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n />\n );\n }\n);\n\napplyDisplayName(Select, 'Select');\nexport default Select;\n"]}
|
|
@@ -137,6 +137,31 @@ export interface BaseSelectProps extends BaseDropdownHostProps, BaseComponentPro
|
|
|
137
137
|
* user from both modifying the value and opening the dropdown. A read-only control is still focusable.
|
|
138
138
|
*/
|
|
139
139
|
readOnly?: boolean;
|
|
140
|
+
/**
|
|
141
|
+
* Renders content at the top of the dropdown, above the filter input (when filtering is enabled) and the
|
|
142
|
+
* options list. Pinned (sticky) to the top and rendered in every state (empty, no-match, loading, error,
|
|
143
|
+
* finished).
|
|
144
|
+
*/
|
|
145
|
+
renderDropdownHeader?: SelectProps.DropdownContentRenderer;
|
|
146
|
+
/**
|
|
147
|
+
* Renders content at the bottom of the dropdown. The content is always sticky and never scrolls with the
|
|
148
|
+
* options list. It is added below the built-in status region. Receives the current filtering state and a
|
|
149
|
+
* callback to close the dropdown.
|
|
150
|
+
*/
|
|
151
|
+
renderDropdownFooter?: SelectProps.DropdownContentRenderer;
|
|
152
|
+
/**
|
|
153
|
+
* Determines the ARIA role of the dropdown.
|
|
154
|
+
*
|
|
155
|
+
* - `auto` (default): the dropdown uses a listbox role, or a dialog role wrapping the listbox when built-in
|
|
156
|
+
* filtering is enabled.
|
|
157
|
+
* - `dialog`: the dropdown always uses a dialog role wrapping the listbox, even without built-in filtering. Use
|
|
158
|
+
* this when you render interactive custom content and want assistive technologies to treat the dropdown as a dialog.
|
|
159
|
+
*/
|
|
160
|
+
dropdownRole?: SelectProps.DropdownRole;
|
|
161
|
+
/**
|
|
162
|
+
* Adds `aria-describedby` to the dropdown's listbox/dialog content.
|
|
163
|
+
*/
|
|
164
|
+
dropdownAriaDescribedby?: string;
|
|
140
165
|
}
|
|
141
166
|
export interface SelectProps extends BaseSelectProps {
|
|
142
167
|
/**
|
|
@@ -181,6 +206,20 @@ export interface SelectProps extends BaseSelectProps {
|
|
|
181
206
|
export declare namespace SelectProps {
|
|
182
207
|
type FilteringType = OptionsFilteringType;
|
|
183
208
|
type TriggerVariant = 'label' | 'option';
|
|
209
|
+
/**
|
|
210
|
+
* The argument passed to the dropdown render functions (`renderDropdownHeader`
|
|
211
|
+
* and `renderDropdownFooter`).
|
|
212
|
+
*/
|
|
213
|
+
interface DropdownContentProps {
|
|
214
|
+
filterText: string;
|
|
215
|
+
closeDropdown: () => void;
|
|
216
|
+
}
|
|
217
|
+
type DropdownRole = 'auto' | 'dialog';
|
|
218
|
+
/**
|
|
219
|
+
* A render function for custom dropdown content, used by `renderDropdownHeader` and `renderDropdownFooter`.
|
|
220
|
+
* Receives the current filtering state and a callback to close the dropdown.
|
|
221
|
+
*/
|
|
222
|
+
type DropdownContentRenderer = (props: DropdownContentProps) => ReactNode | null;
|
|
184
223
|
type Option = OptionDefinition;
|
|
185
224
|
type OptionGroup = OptionGroupDefinition;
|
|
186
225
|
type Options = ReadonlyArray<Option | OptionGroup>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAC7G,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,+BAA+B,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,MAAM,WAAW,eACf,SAAQ,qBAAqB,EAC3B,kBAAkB,EAClB,+BAA+B,EAC/B,mBAAmB;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiCI;IACJ,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;;;QAgBI;IACJ,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5E;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;;;;OAUG;IACH,yBAAyB,CAAC,EAAE,WAAW,CAAC,8BAA8B,CAAC;IACvE;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\n\nimport { BaseDropdownHostProps, OptionsFilteringType, OptionsLoadItemsDetail } from '../dropdown/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\nimport { DropdownStatusProps } from '../types/dropdown-status';\nimport { NonCancelableEventHandler } from '../types/events';\nimport { FormFieldValidationControlProps } from '../types/form-field';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../types/option';\n\nexport interface BaseSelectProps\n extends BaseDropdownHostProps,\n BaseComponentProps,\n FormFieldValidationControlProps,\n DropdownStatusProps {\n /**\n * Specifies an array of options that are displayed to the user as a dropdown list.\n * The options can be grouped using `OptionGroup` objects.\n *\n * #### Option\n * - `value` (string) - The returned value of the option when selected.\n *\n * #### OptionGroup\n * - `value` (string) - Used to locate option group in test utils.\n * - `options` (Option[]) - (Optional) The options under this group.\n *\n * #### Shared Option and OptionGroup properties\n * - `label` (string) - (Optional) Option or group text displayed to the user.\n * - `lang` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.\n * - `description` (string) - (Optional) Further information about the option or group that appears below the label.\n * - `disabled` (boolean) - (Optional) Determines whether the option or group is disabled.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.\n * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option or group.\n * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option or group.\n * - `iconAriaLabel` (string) - (Optional) Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n * - `iconAlt` (string) - (Optional) **Deprecated**, replaced by \\`iconAriaLabel\\`. Specifies alternate text for a custom icon, for use with `iconUrl`.\n * - `iconUrl` (string) - (Optional) URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n *\n * Note: Only one level of option nesting is supported.\n *\n * If you want to use the built-in filtering capabilities of this component, provide\n * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n *\n * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n * on your own.\n **/\n options?: SelectProps.Options;\n\n /**\n * Determines how filtering is applied to the list of `options`:\n *\n * * `auto` - The component will automatically filter options based on user input.\n * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n * them from server.\n *\n * By default the component will filter the provided `options` based on the value of the filtering input field.\n * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n * are displayed in the list of options.\n *\n * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n *\n * Note: Manual filtering doesn't disable match highlighting.\n **/\n filteringType?: OptionsFilteringType;\n\n /**\n * Determines whether the whole select component is disabled.\n */\n disabled?: boolean;\n /**\n * Specifies the placeholder to display in the filtering input if filtering is enabled.\n */\n filteringPlaceholder?: string;\n\n /**\n * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n */\n filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n /**\n * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n */\n filteringAriaLabel?: string;\n /**\n * Adds an `aria-label` to the clear button inside the search input.\n * @i18n\n */\n filteringClearAriaLabel?: string;\n /**\n * @deprecated Has no effect.\n */\n name?: string;\n /**\n * Specifies the hint text that's displayed in the field when no option has been selected.\n */\n placeholder?: string;\n /**\n * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n */\n controlId?: string;\n /**\n * Adds `aria-required` to the native input element.\n */\n ariaRequired?: boolean;\n /**\n * Adds `aria-label` to the select element.\n * Use this if you don't have a visible label for this control.\n */\n ariaLabel?: string;\n /**\n * Specifies the localized string that describes an option as being selected.\n * This is required to provide a good screen reader experience. For more information, see the\n * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n * @i18n\n */\n selectedAriaLabel?: string;\n /**\n * Overrides the element that is announced to screen readers\n * when the highlighted option changes. By default, this announces\n * the option's name and properties, and its selected state if\n * the `selectedAriaLabel` property is defined.\n * The highlighted option is provided, and its group (if groups\n * are used and it differs from the group of the previously highlighted option).\n *\n * For more information, see the\n * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n */\n renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n /**\n * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n */\n noMatch?: React.ReactNode;\n /**\n * Called when input focus is removed from the UI control.\n */\n onBlur?: NonCancelableEventHandler;\n /**\n * Called when input focus is set onto the UI control.\n */\n onFocus?: NonCancelableEventHandler;\n\n /**\n * Specifies if the control is read-only, which prevents the\n * user from both modifying the value and opening the dropdown. A read-only control is still focusable.\n */\n readOnly?: boolean;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n /**\n * Adds a small label inline with the input for saving vertical space in the UI.\n * For use with collection select filters only.\n */\n inlineLabelText?: string;\n onLoadItems?: NonCancelableEventHandler<SelectProps.LoadItemsDetail>;\n /**\n * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n * don't set this property because the form field component automatically sets it.\n *\n * Use this property if the component isn't using `inlineLabelText` and isn't surrounded by a form field, or you want to override the value\n * automatically set by the form field (for example, if you have two components within a single form field).\n *\n * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n */\n ariaLabelledby?: string;\n /**\n * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n */\n triggerVariant?: SelectProps.TriggerVariant;\n /**\n * Specifies the currently selected option.\n * If you want to clear the selection, use `null`.\n */\n selectedOption: SelectProps.Option | null;\n /**\n * Called when the user selects an option.\n * The event `detail` contains the current `selectedOption`.\n */\n onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n\n /**\n * Automatically focuses the trigger when component is mounted.\n */\n autoFocus?: boolean;\n /**\n * Specifies a render function to render custom options in the dropdown menu or trigger.\n */\n renderOption?: SelectProps.SelectOptionItemRenderer;\n}\n\nexport namespace SelectProps {\n export type FilteringType = OptionsFilteringType;\n export type TriggerVariant = 'label' | 'option';\n\n export type Option = OptionDefinition;\n export type OptionGroup = OptionGroupDefinition;\n export type Options = ReadonlyArray<Option | OptionGroup>;\n\n export interface SelectOptionItem {\n type: 'item';\n index: number;\n option: Option;\n highlighted: boolean;\n selected: boolean;\n disabled: boolean;\n parent: SelectOptionGroupItem | null;\n }\n export interface SelectOptionGroupItem {\n type: 'group';\n index: number;\n option: OptionGroup;\n disabled: boolean;\n }\n export interface SelectTriggerOptionItem {\n type: 'trigger';\n option: Option;\n }\n export type SelectItem = SelectOptionItem | SelectOptionGroupItem | SelectTriggerOptionItem;\n export type SelectOptionItemRenderer = (props: { item: SelectItem; filterText?: string }) => ReactNode | null;\n\n /* eslint-disable-next-line @typescript-eslint/no-empty-object-type --\n * Required to create a distinct named type for the documenter.\n **/\n export interface LoadItemsDetail extends OptionsLoadItemsDetail {}\n\n export interface ChangeDetail {\n selectedOption: Option;\n }\n\n export interface ContainingOptionAndGroupString {\n (option: Option, group?: OptionGroup): string;\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
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\n\nimport { BaseDropdownHostProps, OptionsFilteringType, OptionsLoadItemsDetail } from '../dropdown/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\nimport { DropdownStatusProps } from '../types/dropdown-status';\nimport { NonCancelableEventHandler } from '../types/events';\nimport { FormFieldValidationControlProps } from '../types/form-field';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../types/option';\n\nexport interface BaseSelectProps\n extends BaseDropdownHostProps,\n BaseComponentProps,\n FormFieldValidationControlProps,\n DropdownStatusProps {\n /**\n * Specifies an array of options that are displayed to the user as a dropdown list.\n * The options can be grouped using `OptionGroup` objects.\n *\n * #### Option\n * - `value` (string) - The returned value of the option when selected.\n *\n * #### OptionGroup\n * - `value` (string) - Used to locate option group in test utils.\n * - `options` (Option[]) - (Optional) The options under this group.\n *\n * #### Shared Option and OptionGroup properties\n * - `label` (string) - (Optional) Option or group text displayed to the user.\n * - `lang` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.\n * - `description` (string) - (Optional) Further information about the option or group that appears below the label.\n * - `disabled` (boolean) - (Optional) Determines whether the option or group is disabled.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.\n * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option or group.\n * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option or group.\n * - `iconAriaLabel` (string) - (Optional) Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n * - `iconAlt` (string) - (Optional) **Deprecated**, replaced by \\`iconAriaLabel\\`. Specifies alternate text for a custom icon, for use with `iconUrl`.\n * - `iconUrl` (string) - (Optional) URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n *\n * Note: Only one level of option nesting is supported.\n *\n * If you want to use the built-in filtering capabilities of this component, provide\n * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n *\n * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n * on your own.\n **/\n options?: SelectProps.Options;\n\n /**\n * Determines how filtering is applied to the list of `options`:\n *\n * * `auto` - The component will automatically filter options based on user input.\n * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n * them from server.\n *\n * By default the component will filter the provided `options` based on the value of the filtering input field.\n * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n * are displayed in the list of options.\n *\n * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n *\n * Note: Manual filtering doesn't disable match highlighting.\n **/\n filteringType?: OptionsFilteringType;\n\n /**\n * Determines whether the whole select component is disabled.\n */\n disabled?: boolean;\n /**\n * Specifies the placeholder to display in the filtering input if filtering is enabled.\n */\n filteringPlaceholder?: string;\n\n /**\n * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n */\n filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n /**\n * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n */\n filteringAriaLabel?: string;\n /**\n * Adds an `aria-label` to the clear button inside the search input.\n * @i18n\n */\n filteringClearAriaLabel?: string;\n /**\n * @deprecated Has no effect.\n */\n name?: string;\n /**\n * Specifies the hint text that's displayed in the field when no option has been selected.\n */\n placeholder?: string;\n /**\n * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n */\n controlId?: string;\n /**\n * Adds `aria-required` to the native input element.\n */\n ariaRequired?: boolean;\n /**\n * Adds `aria-label` to the select element.\n * Use this if you don't have a visible label for this control.\n */\n ariaLabel?: string;\n /**\n * Specifies the localized string that describes an option as being selected.\n * This is required to provide a good screen reader experience. For more information, see the\n * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n * @i18n\n */\n selectedAriaLabel?: string;\n /**\n * Overrides the element that is announced to screen readers\n * when the highlighted option changes. By default, this announces\n * the option's name and properties, and its selected state if\n * the `selectedAriaLabel` property is defined.\n * The highlighted option is provided, and its group (if groups\n * are used and it differs from the group of the previously highlighted option).\n *\n * For more information, see the\n * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n */\n renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n /**\n * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n */\n noMatch?: React.ReactNode;\n /**\n * Called when input focus is removed from the UI control.\n */\n onBlur?: NonCancelableEventHandler;\n /**\n * Called when input focus is set onto the UI control.\n */\n onFocus?: NonCancelableEventHandler;\n\n /**\n * Specifies if the control is read-only, which prevents the\n * user from both modifying the value and opening the dropdown. A read-only control is still focusable.\n */\n readOnly?: boolean;\n\n /**\n * Renders content at the top of the dropdown, above the filter input (when filtering is enabled) and the\n * options list. Pinned (sticky) to the top and rendered in every state (empty, no-match, loading, error,\n * finished).\n */\n renderDropdownHeader?: SelectProps.DropdownContentRenderer;\n\n /**\n * Renders content at the bottom of the dropdown. The content is always sticky and never scrolls with the\n * options list. It is added below the built-in status region. Receives the current filtering state and a\n * callback to close the dropdown.\n */\n renderDropdownFooter?: SelectProps.DropdownContentRenderer;\n\n /**\n * Determines the ARIA role of the dropdown.\n *\n * - `auto` (default): the dropdown uses a listbox role, or a dialog role wrapping the listbox when built-in\n * filtering is enabled.\n * - `dialog`: the dropdown always uses a dialog role wrapping the listbox, even without built-in filtering. Use\n * this when you render interactive custom content and want assistive technologies to treat the dropdown as a dialog.\n */\n dropdownRole?: SelectProps.DropdownRole;\n\n /**\n * Adds `aria-describedby` to the dropdown's listbox/dialog content.\n */\n dropdownAriaDescribedby?: string;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n /**\n * Adds a small label inline with the input for saving vertical space in the UI.\n * For use with collection select filters only.\n */\n inlineLabelText?: string;\n onLoadItems?: NonCancelableEventHandler<SelectProps.LoadItemsDetail>;\n /**\n * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n * don't set this property because the form field component automatically sets it.\n *\n * Use this property if the component isn't using `inlineLabelText` and isn't surrounded by a form field, or you want to override the value\n * automatically set by the form field (for example, if you have two components within a single form field).\n *\n * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n */\n ariaLabelledby?: string;\n /**\n * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n */\n triggerVariant?: SelectProps.TriggerVariant;\n /**\n * Specifies the currently selected option.\n * If you want to clear the selection, use `null`.\n */\n selectedOption: SelectProps.Option | null;\n /**\n * Called when the user selects an option.\n * The event `detail` contains the current `selectedOption`.\n */\n onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n\n /**\n * Automatically focuses the trigger when component is mounted.\n */\n autoFocus?: boolean;\n /**\n * Specifies a render function to render custom options in the dropdown menu or trigger.\n */\n renderOption?: SelectProps.SelectOptionItemRenderer;\n}\n\nexport namespace SelectProps {\n export type FilteringType = OptionsFilteringType;\n export type TriggerVariant = 'label' | 'option';\n\n /**\n * The argument passed to the dropdown render functions (`renderDropdownHeader`\n * and `renderDropdownFooter`).\n */\n export interface DropdownContentProps {\n filterText: string;\n\n closeDropdown: () => void;\n }\n\n export type DropdownRole = 'auto' | 'dialog';\n\n /**\n * A render function for custom dropdown content, used by `renderDropdownHeader` and `renderDropdownFooter`.\n * Receives the current filtering state and a callback to close the dropdown.\n */\n export type DropdownContentRenderer = (props: DropdownContentProps) => ReactNode | null;\n\n export type Option = OptionDefinition;\n export type OptionGroup = OptionGroupDefinition;\n export type Options = ReadonlyArray<Option | OptionGroup>;\n\n export interface SelectOptionItem {\n type: 'item';\n index: number;\n option: Option;\n highlighted: boolean;\n selected: boolean;\n disabled: boolean;\n parent: SelectOptionGroupItem | null;\n }\n export interface SelectOptionGroupItem {\n type: 'group';\n index: number;\n option: OptionGroup;\n disabled: boolean;\n }\n export interface SelectTriggerOptionItem {\n type: 'trigger';\n option: Option;\n }\n export type SelectItem = SelectOptionItem | SelectOptionGroupItem | SelectTriggerOptionItem;\n export type SelectOptionItemRenderer = (props: { item: SelectItem; filterText?: string }) => ReactNode | null;\n\n /* eslint-disable-next-line @typescript-eslint/no-empty-object-type --\n * Required to create a distinct named type for the documenter.\n **/\n export interface LoadItemsDetail extends OptionsLoadItemsDetail {}\n\n export interface ChangeDetail {\n selectedOption: Option;\n }\n\n export interface ContainingOptionAndGroupString {\n (option: Option, group?: OptionGroup): string;\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/select/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAe3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/select/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAe3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAc3C,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IAC3G,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACxC;AAED,QAAA,MAAM,cAAc,6FA4RnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -20,12 +20,13 @@ import PlainList from './parts/plain-list';
|
|
|
20
20
|
import Trigger from './parts/trigger';
|
|
21
21
|
import VirtualList from './parts/virtual-list';
|
|
22
22
|
import { checkOptionValueField } from './utils/check-option-value-field';
|
|
23
|
+
import { composeDropdownContent } from './utils/dropdown-customization';
|
|
23
24
|
import { useAnnouncement } from './utils/use-announcement';
|
|
24
25
|
import { useLoadItems } from './utils/use-load-items';
|
|
25
26
|
import { useNativeSearch } from './utils/use-native-search';
|
|
26
27
|
import { useSelect } from './utils/use-select';
|
|
27
28
|
import styles from './styles.css.js';
|
|
28
|
-
const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, filteringResultsText, inlineLabelText, ariaRequired, placeholder, disabled, readOnly, ariaLabel, statusType = 'finished', empty, loadingText, finishedText, errorText, noMatch, triggerVariant = 'label', renderHighlightedAriaLive, selectedOption, onBlur, onFocus, onLoadItems, onChange, virtualScroll, expandToViewport, autoFocus, __inFilteringToken, __internalRootRef, renderOption, ...restProps }, externalRef) => {
|
|
29
|
+
const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, filteringResultsText, inlineLabelText, ariaRequired, placeholder, disabled, readOnly, ariaLabel, statusType = 'finished', empty, loadingText, finishedText, errorText, noMatch, triggerVariant = 'label', renderHighlightedAriaLive, selectedOption, onBlur, onFocus, onLoadItems, onChange, virtualScroll, expandToViewport, autoFocus, __inFilteringToken, __internalRootRef, renderOption, renderDropdownHeader, renderDropdownFooter, dropdownRole, dropdownAriaDescribedby, ...restProps }, externalRef) => {
|
|
29
30
|
var _a;
|
|
30
31
|
const baseProps = getBaseProps(restProps);
|
|
31
32
|
const formFieldContext = useFormFieldContext(restProps);
|
|
@@ -52,7 +53,7 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
|
|
|
52
53
|
const selfControlId = useUniqueId('trigger');
|
|
53
54
|
const controlId = (_a = formFieldContext.controlId) !== null && _a !== void 0 ? _a : selfControlId;
|
|
54
55
|
const scrollToIndex = useRef(null);
|
|
55
|
-
const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, selectOption, announceSelected, focusActiveRef, } = useSelect({
|
|
56
|
+
const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, selectOption, announceSelected, focusActiveRef, closeDropdown, } = useSelect({
|
|
56
57
|
selectedOptions: selectedOption ? [selectedOption] : [],
|
|
57
58
|
updateSelectedOption: option => fireNonCancelableEvent(onChange, { selectedOption: option }),
|
|
58
59
|
options: filteredOptions,
|
|
@@ -63,6 +64,7 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
|
|
|
63
64
|
fireLoadItems,
|
|
64
65
|
setFilteringValue,
|
|
65
66
|
statusType,
|
|
67
|
+
dropdownRole,
|
|
66
68
|
});
|
|
67
69
|
const handleNativeSearch = useNativeSearch({
|
|
68
70
|
isEnabled: filteringType === 'none' && !readOnly,
|
|
@@ -76,6 +78,9 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
|
|
|
76
78
|
var _a;
|
|
77
79
|
(_a = scrollToIndex.current) === null || _a === void 0 ? void 0 : _a.call(scrollToIndex, highlightedIndex);
|
|
78
80
|
}, [highlightedIndex]);
|
|
81
|
+
const dropdownContentProps = { filterText: filteringValue, closeDropdown };
|
|
82
|
+
const customDropdownHeader = renderDropdownHeader === null || renderDropdownHeader === void 0 ? void 0 : renderDropdownHeader(dropdownContentProps);
|
|
83
|
+
const customDropdownFooter = renderDropdownFooter === null || renderDropdownFooter === void 0 ? void 0 : renderDropdownFooter(dropdownContentProps);
|
|
79
84
|
const filter = (React.createElement(Filter, { clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue, ...getFilterProps() }));
|
|
80
85
|
const trigger = (React.createElement(Trigger, { renderOption: renderOption, ref: triggerRef, placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerVariant: triggerVariant, triggerProps: getTriggerProps(disabled, autoFocus), selectedOption: selectedOption, isOpen: isOpen, inFilteringToken: __inFilteringToken, inlineLabelText: inlineLabelText, ...formFieldContext, controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, selectAriaLabelId) }));
|
|
81
86
|
const isEmpty = !options || options.length === 0;
|
|
@@ -100,11 +105,20 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
|
|
|
100
105
|
},
|
|
101
106
|
hasRecoveryCallback: !!onLoadItems,
|
|
102
107
|
});
|
|
108
|
+
const statusFooter = dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null;
|
|
109
|
+
const { header: dropdownHeader, footer: dropdownFooter } = composeDropdownContent({
|
|
110
|
+
filter,
|
|
111
|
+
customDropdownHeader,
|
|
112
|
+
customDropdownFooter,
|
|
113
|
+
statusFooter,
|
|
114
|
+
dropdownHeaderClass: styles['dropdown-header'],
|
|
115
|
+
dropdownFooterClass: styles['dropdown-footer'],
|
|
116
|
+
});
|
|
103
117
|
const menuProps = {
|
|
104
118
|
...getMenuProps(),
|
|
105
119
|
onLoadMore: handleLoadMore,
|
|
106
120
|
ariaLabelledby: joinStrings(selectAriaLabelId, controlId),
|
|
107
|
-
ariaDescribedby: dropdownStatus.content ? footerId : undefined,
|
|
121
|
+
ariaDescribedby: joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby),
|
|
108
122
|
ariaRequired,
|
|
109
123
|
};
|
|
110
124
|
const announcement = useAnnouncement({
|
|
@@ -127,7 +141,9 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
|
|
|
127
141
|
const hasOptions = useRef(options.length > 0);
|
|
128
142
|
hasOptions.current = hasOptions.current || options.length > 0;
|
|
129
143
|
return (React.createElement("div", { ...baseProps, ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyDown: handleNativeSearch },
|
|
130
|
-
React.createElement(Dropdown, { ...dropdownProps, ariaLabelledby: dropdownProps.ariaRole ? joinStrings(selectAriaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.ariaRole
|
|
144
|
+
React.createElement(Dropdown, { ...dropdownProps, ariaLabelledby: dropdownProps.ariaRole ? joinStrings(selectAriaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.ariaRole
|
|
145
|
+
? joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby)
|
|
146
|
+
: undefined, open: isOpen, stretchTriggerHeight: !!__inFilteringToken, minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth }), maxWidth: getBreakpointValue('xxs'), trigger: trigger, header: dropdownHeader, onMouseDown: handleMouseDown, footer: dropdownFooter, expandToViewport: expandToViewport,
|
|
131
147
|
// Forces dropdown position recalculation when new options are loaded
|
|
132
148
|
contentKey: hasOptions.current.toString(), content: React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, renderOption: renderOption, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, screenReaderContent: announcement, highlightType: highlightType }) }),
|
|
133
149
|
React.createElement("div", { hidden: true, id: selectAriaLabelId }, ariaLabel || inlineLabelText)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/select/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, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport Dropdown from '../dropdown/internal';\nimport { useInternalI18n } from '../i18n/context.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { getBreakpointValue } from '../internal/breakpoints';\nimport DropdownFooter from '../internal/components/dropdown-footer';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport { getDropdownMinWidth } from '../internal/utils/get-dropdown-min-width';\nimport { joinStrings } from '../internal/utils/strings/join-strings.js';\nimport { OptionGroup } from '../types/option';\nimport { SelectProps } from './interfaces';\nimport Filter from './parts/filter';\nimport PlainList, { SelectListProps } from './parts/plain-list';\nimport Trigger from './parts/trigger';\nimport VirtualList from './parts/virtual-list';\nimport { checkOptionValueField } from './utils/check-option-value-field';\nimport { useAnnouncement } from './utils/use-announcement';\nimport { useLoadItems } from './utils/use-load-items';\nimport { useNativeSearch } from './utils/use-native-search';\nimport { useSelect } from './utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface InternalSelectProps extends SomeRequired<SelectProps, 'options'>, InternalBaseComponentProps {\n __inFilteringToken?: 'root' | 'nested';\n}\n\nconst InternalSelect = React.forwardRef(\n (\n {\n options,\n filteringType = 'none',\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\n filteringResultsText,\n inlineLabelText,\n ariaRequired,\n placeholder,\n disabled,\n readOnly,\n ariaLabel,\n statusType = 'finished',\n empty,\n loadingText,\n finishedText,\n errorText,\n noMatch,\n triggerVariant = 'label',\n renderHighlightedAriaLive,\n selectedOption,\n onBlur,\n onFocus,\n onLoadItems,\n onChange,\n virtualScroll,\n expandToViewport,\n autoFocus,\n __inFilteringToken,\n __internalRootRef,\n renderOption,\n ...restProps\n }: InternalSelectProps,\n externalRef: React.Ref<SelectProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const i18n = useInternalI18n('select');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', restProps.errorIconAriaLabel);\n const selectedAriaLabel = i18n('selectedAriaLabel', restProps.selectedAriaLabel);\n const recoveryText = i18n('recoveryText', restProps.recoveryText);\n\n if (restProps.recoveryText && !onLoadItems) {\n warnOnce('Select', '`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\n checkControlled('Select', 'selectedOption', selectedOption, 'onChange', onChange);\n\n checkOptionValueField('Select', 'options', options);\n\n const [filteringValue, setFilteringValue] = useState('');\n\n const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(\n options,\n filteringType,\n filteringValue\n );\n\n const rootRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [triggerWidth, setTriggerWidth] = useState<number | null>(null);\n useResizeObserver(\n () => triggerRef.current,\n entry => entry.borderBoxWidth > 0 && setTriggerWidth(entry.borderBoxWidth)\n );\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\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 selectOption,\n announceSelected,\n focusActiveRef,\n } = useSelect({\n selectedOptions: selectedOption ? [selectedOption] : [],\n updateSelectedOption: option => fireNonCancelableEvent(onChange, { selectedOption: option }),\n options: filteredOptions,\n filteringType,\n onBlur,\n onFocus,\n externalRef,\n fireLoadItems,\n setFilteringValue,\n statusType,\n });\n\n const handleNativeSearch = useNativeSearch({\n isEnabled: filteringType === 'none' && !readOnly,\n options: filteredOptions,\n highlightOption: !isOpen ? selectOption : highlightOption,\n highlightedOption: !isOpen ? selectedOption : highlightedOption?.option,\n });\n\n const selectAriaLabelId = useUniqueId('select-arialabel-');\n const footerId = useUniqueId('footer');\n\n useEffect(() => {\n scrollToIndex.current?.(highlightedIndex);\n }, [highlightedIndex]);\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 {...getFilterProps()}\n />\n );\n\n const trigger = (\n <Trigger\n renderOption={renderOption}\n ref={triggerRef}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n triggerVariant={triggerVariant}\n triggerProps={getTriggerProps(disabled, autoFocus)}\n selectedOption={selectedOption}\n isOpen={isOpen}\n inFilteringToken={__inFilteringToken}\n inlineLabelText={inlineLabelText}\n {...formFieldContext}\n controlId={controlId}\n ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, selectAriaLabelId)}\n />\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\n const dropdownStatus = useDropdownStatus({\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n isEmpty,\n isNoMatch,\n noMatch,\n filteringResultsText: filteredText,\n errorIconAriaLabel,\n onRecoveryClick: () => {\n handleRecoveryClick();\n focusActiveRef();\n },\n hasRecoveryCallback: !!onLoadItems,\n });\n\n const menuProps = {\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: joinStrings(selectAriaLabelId, controlId),\n ariaDescribedby: dropdownStatus.content ? footerId : undefined,\n ariaRequired,\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 ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const handleMouseDown = (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 mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n const dropdownProps = getDropdownProps();\n\n const hasOptions = useRef(options.length > 0);\n hasOptions.current = hasOptions.current || options.length > 0;\n\n return (\n <div\n {...baseProps}\n ref={mergedRef}\n className={clsx(styles.root, baseProps.className)}\n onKeyDown={handleNativeSearch}\n >\n <Dropdown\n {...dropdownProps}\n ariaLabelledby={dropdownProps.ariaRole ? joinStrings(selectAriaLabelId, controlId) : undefined}\n ariaDescribedby={dropdownProps.ariaRole ? (dropdownStatus.content ? footerId : undefined) : undefined}\n open={isOpen}\n stretchTriggerHeight={!!__inFilteringToken}\n minWidth={getDropdownMinWidth({ expandToViewport, triggerWidth })}\n maxWidth={getBreakpointValue('xxs')} // AWSUI-19898\n trigger={trigger}\n header={filter}\n onMouseDown={handleMouseDown}\n footer={\n dropdownStatus.isSticky ? (\n <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n expandToViewport={expandToViewport}\n // Forces dropdown position recalculation when new options are loaded\n contentKey={hasOptions.current.toString()}\n content={\n <ListComponent\n listBottom={\n !dropdownStatus.isSticky ? (\n <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n renderOption={renderOption}\n menuProps={menuProps}\n getOptionProps={getOptionProps}\n filteredOptions={filteredOptions}\n filteringValue={filteringValue}\n ref={scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n screenReaderContent={announcement}\n highlightType={highlightType}\n />\n }\n />\n <div hidden={true} id={selectAriaLabelId}>\n {ariaLabel || inlineLabelText}\n </div>\n </div>\n );\n }\n);\n\nexport default InternalSelect;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/select/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEvH,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAGxE,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,SAA8B,MAAM,oBAAoB,CAAC;AAChE,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EACE,OAAO,EACP,aAAa,GAAG,MAAM,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,UAAU,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,cAAc,GAAG,OAAO,EACxB,yBAAyB,EACzB,cAAc,EACd,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,YAAY,EACZ,uBAAuB,EACvB,GAAG,SAAS,EACQ,EACtB,WAAuC,EACvC,EAAE;;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAExD,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IACpF,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACjF,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAElE,IAAI,SAAS,CAAC,YAAY,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3C,QAAQ,CAAC,QAAQ,EAAE,oEAAoE,CAAC,CAAC;IAC3F,CAAC;IAED,MAAM,EAAE,cAAc,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,YAAY,CAAC;QAC1E,WAAW;QACX,OAAO;QACP,UAAU;KACX,CAAC,CAAC;IAEH,eAAe,CAAC,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAElF,qBAAqB,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAEpD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzD,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,cAAc,CAC7E,OAAO,EACP,aAAa,EACb,cAAc,CACf,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,iBAAiB,CACf,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EACxB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,IAAI,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,CAC3E,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAA,gBAAgB,CAAC,SAAS,mCAAI,aAAa,CAAC;IAE9D,MAAM,aAAa,GAAG,MAAM,CAAgC,IAAI,CAAC,CAAC;IAClE,MAAM,EACJ,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,cAAc,EACd,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,aAAa,GACd,GAAG,SAAS,CAAC;QACZ,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE;QACvD,oBAAoB,EAAE,MAAM,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC;QAC5F,OAAO,EAAE,eAAe;QACxB,aAAa;QACb,MAAM;QACN,OAAO;QACP,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,UAAU;QACV,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,eAAe,CAAC;QACzC,SAAS,EAAE,aAAa,KAAK,MAAM,IAAI,CAAC,QAAQ;QAChD,OAAO,EAAE,eAAe;QACxB,eAAe,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe;QACzD,iBAAiB,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM;KACxE,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;IAC3D,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,aAAa,CAAC,OAAO,8DAAG,gBAAgB,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,oBAAoB,GAAqC,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC;IAC7G,MAAM,oBAAoB,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,oBAAoB,CAAC,CAAC;IAC1E,MAAM,oBAAoB,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,oBAAoB,CAAC,CAAC;IAE1E,MAAM,MAAM,GAAG,CACb,oBAAC,MAAM,IACL,cAAc,EAAE,uBAAuB,EACvC,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,oBAAoB,EACjC,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,cAAc,KACjB,cAAc,EAAE,GACpB,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,oBAAC,OAAO,IACN,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,UAAU,EACf,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,EAClD,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,kBAAkB,EACpC,eAAe,EAAE,eAAe,KAC5B,gBAAgB,EACpB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,WAAW,CAAC,gBAAgB,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAC/E,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,eAAe,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC;IAClE,MAAM,UAAU,GACd,aAAa,KAAK,MAAM,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;IACzG,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/F,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,UAAU;QACV,KAAK;QACL,WAAW;QACX,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,OAAO;QACP,SAAS;QACT,OAAO;QACP,oBAAoB,EAAE,YAAY;QAClC,kBAAkB;QAClB,eAAe,EAAE,GAAG,EAAE;YACpB,mBAAmB,EAAE,CAAC;YACtB,cAAc,EAAE,CAAC;QACnB,CAAC;QACD,mBAAmB,EAAE,CAAC,CAAC,WAAW;KACnC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC7C,oBAAC,cAAc,IAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,GAAI,CAClF,CAAC,CAAC,CAAC,IAAI,CAAC;IACT,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,sBAAsB,CAAC;QAChF,MAAM;QACN,oBAAoB;QACpB,oBAAoB;QACpB,YAAY;QACZ,mBAAmB,EAAE,MAAM,CAAC,iBAAiB,CAAC;QAC9C,mBAAmB,EAAE,MAAM,CAAC,iBAAiB,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG;QAChB,GAAG,YAAY,EAAE;QACjB,UAAU,EAAE,cAAc;QAC1B,cAAc,EAAE,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC;QACzD,eAAe,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,uBAAuB,CAAC;QACpG,YAAY;KACb,CAAC;IAEF,MAAM,YAAY,GAAG,eAAe,CAAC;QACnC,gBAAgB;QAChB,iBAAiB;QACjB,SAAS,EAAE,MAAM,CAAC,EAAE,WAAC,OAAA,MAAA,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,0CAAE,MAAiC,CAAA,EAAA;QAC7E,iBAAiB;QACjB,yBAAyB;KAC1B,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,MAAM,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YACtC,mDAAmD;YACnD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAE3D,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC9C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAE9D,OAAO,CACL,gCACM,SAAS,EACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,kBAAkB;QAE7B,oBAAC,QAAQ,OACH,aAAa,EACjB,cAAc,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC9F,eAAe,EACb,aAAa,CAAC,QAAQ;gBACpB,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,uBAAuB,CAAC;gBACrF,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE,MAAM,EACZ,oBAAoB,EAAE,CAAC,CAAC,kBAAkB,EAC1C,QAAQ,EAAE,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,CAAC,EACjE,QAAQ,EAAE,kBAAkB,CAAC,KAAK,CAAC,EACnC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,cAAc,EACtB,WAAW,EAAE,eAAe,EAC5B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;YAClC,qEAAqE;YACrE,UAAU,EAAE,UAAU,CAAC,OAAO,CAAC,QAAQ,EAAE,EACzC,OAAO,EACL,oBAAC,aAAa,IACZ,UAAU,EACR,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CACzB,oBAAC,cAAc,IAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,GAAI,CAClF,CAAC,CAAC,CAAC,IAAI,EAEV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,aAAa,EAClB,iBAAiB,EAAE,cAAc,CAAC,OAAO,KAAK,IAAI,EAClD,mBAAmB,EAAE,YAAY,EACjC,aAAa,EAAE,aAAa,GAC5B,GAEJ;QACF,6BAAK,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,iBAAiB,IACrC,SAAS,IAAI,eAAe,CACzB,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","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';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport Dropdown from '../dropdown/internal';\nimport { useInternalI18n } from '../i18n/context.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { getBreakpointValue } from '../internal/breakpoints';\nimport DropdownFooter from '../internal/components/dropdown-footer';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport { getDropdownMinWidth } from '../internal/utils/get-dropdown-min-width';\nimport { joinStrings } from '../internal/utils/strings/join-strings.js';\nimport { OptionGroup } from '../types/option';\nimport { SelectProps } from './interfaces';\nimport Filter from './parts/filter';\nimport PlainList, { SelectListProps } from './parts/plain-list';\nimport Trigger from './parts/trigger';\nimport VirtualList from './parts/virtual-list';\nimport { checkOptionValueField } from './utils/check-option-value-field';\nimport { composeDropdownContent } from './utils/dropdown-customization';\nimport { useAnnouncement } from './utils/use-announcement';\nimport { useLoadItems } from './utils/use-load-items';\nimport { useNativeSearch } from './utils/use-native-search';\nimport { useSelect } from './utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface InternalSelectProps extends SomeRequired<SelectProps, 'options'>, InternalBaseComponentProps {\n __inFilteringToken?: 'root' | 'nested';\n}\n\nconst InternalSelect = React.forwardRef(\n (\n {\n options,\n filteringType = 'none',\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\n filteringResultsText,\n inlineLabelText,\n ariaRequired,\n placeholder,\n disabled,\n readOnly,\n ariaLabel,\n statusType = 'finished',\n empty,\n loadingText,\n finishedText,\n errorText,\n noMatch,\n triggerVariant = 'label',\n renderHighlightedAriaLive,\n selectedOption,\n onBlur,\n onFocus,\n onLoadItems,\n onChange,\n virtualScroll,\n expandToViewport,\n autoFocus,\n __inFilteringToken,\n __internalRootRef,\n renderOption,\n renderDropdownHeader,\n renderDropdownFooter,\n dropdownRole,\n dropdownAriaDescribedby,\n ...restProps\n }: InternalSelectProps,\n externalRef: React.Ref<SelectProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const i18n = useInternalI18n('select');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', restProps.errorIconAriaLabel);\n const selectedAriaLabel = i18n('selectedAriaLabel', restProps.selectedAriaLabel);\n const recoveryText = i18n('recoveryText', restProps.recoveryText);\n\n if (restProps.recoveryText && !onLoadItems) {\n warnOnce('Select', '`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\n checkControlled('Select', 'selectedOption', selectedOption, 'onChange', onChange);\n\n checkOptionValueField('Select', 'options', options);\n\n const [filteringValue, setFilteringValue] = useState('');\n\n const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(\n options,\n filteringType,\n filteringValue\n );\n\n const rootRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [triggerWidth, setTriggerWidth] = useState<number | null>(null);\n useResizeObserver(\n () => triggerRef.current,\n entry => entry.borderBoxWidth > 0 && setTriggerWidth(entry.borderBoxWidth)\n );\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\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 selectOption,\n announceSelected,\n focusActiveRef,\n closeDropdown,\n } = useSelect({\n selectedOptions: selectedOption ? [selectedOption] : [],\n updateSelectedOption: option => fireNonCancelableEvent(onChange, { selectedOption: option }),\n options: filteredOptions,\n filteringType,\n onBlur,\n onFocus,\n externalRef,\n fireLoadItems,\n setFilteringValue,\n statusType,\n dropdownRole,\n });\n\n const handleNativeSearch = useNativeSearch({\n isEnabled: filteringType === 'none' && !readOnly,\n options: filteredOptions,\n highlightOption: !isOpen ? selectOption : highlightOption,\n highlightedOption: !isOpen ? selectedOption : highlightedOption?.option,\n });\n\n const selectAriaLabelId = useUniqueId('select-arialabel-');\n const footerId = useUniqueId('footer');\n\n useEffect(() => {\n scrollToIndex.current?.(highlightedIndex);\n }, [highlightedIndex]);\n\n const dropdownContentProps: SelectProps.DropdownContentProps = { filterText: filteringValue, closeDropdown };\n const customDropdownHeader = renderDropdownHeader?.(dropdownContentProps);\n const customDropdownFooter = renderDropdownFooter?.(dropdownContentProps);\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 {...getFilterProps()}\n />\n );\n\n const trigger = (\n <Trigger\n renderOption={renderOption}\n ref={triggerRef}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n triggerVariant={triggerVariant}\n triggerProps={getTriggerProps(disabled, autoFocus)}\n selectedOption={selectedOption}\n isOpen={isOpen}\n inFilteringToken={__inFilteringToken}\n inlineLabelText={inlineLabelText}\n {...formFieldContext}\n controlId={controlId}\n ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, selectAriaLabelId)}\n />\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\n const dropdownStatus = useDropdownStatus({\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n isEmpty,\n isNoMatch,\n noMatch,\n filteringResultsText: filteredText,\n errorIconAriaLabel,\n onRecoveryClick: () => {\n handleRecoveryClick();\n focusActiveRef();\n },\n hasRecoveryCallback: !!onLoadItems,\n });\n\n const statusFooter = dropdownStatus.isSticky ? (\n <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null;\n const { header: dropdownHeader, footer: dropdownFooter } = composeDropdownContent({\n filter,\n customDropdownHeader,\n customDropdownFooter,\n statusFooter,\n dropdownHeaderClass: styles['dropdown-header'],\n dropdownFooterClass: styles['dropdown-footer'],\n });\n\n const menuProps = {\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: joinStrings(selectAriaLabelId, controlId),\n ariaDescribedby: joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby),\n ariaRequired,\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 ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const handleMouseDown = (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 mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n const dropdownProps = getDropdownProps();\n\n const hasOptions = useRef(options.length > 0);\n hasOptions.current = hasOptions.current || options.length > 0;\n\n return (\n <div\n {...baseProps}\n ref={mergedRef}\n className={clsx(styles.root, baseProps.className)}\n onKeyDown={handleNativeSearch}\n >\n <Dropdown\n {...dropdownProps}\n ariaLabelledby={dropdownProps.ariaRole ? joinStrings(selectAriaLabelId, controlId) : undefined}\n ariaDescribedby={\n dropdownProps.ariaRole\n ? joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby)\n : undefined\n }\n open={isOpen}\n stretchTriggerHeight={!!__inFilteringToken}\n minWidth={getDropdownMinWidth({ expandToViewport, triggerWidth })}\n maxWidth={getBreakpointValue('xxs')} // AWSUI-19898\n trigger={trigger}\n header={dropdownHeader}\n onMouseDown={handleMouseDown}\n footer={dropdownFooter}\n expandToViewport={expandToViewport}\n // Forces dropdown position recalculation when new options are loaded\n contentKey={hasOptions.current.toString()}\n content={\n <ListComponent\n listBottom={\n !dropdownStatus.isSticky ? (\n <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n renderOption={renderOption}\n menuProps={menuProps}\n getOptionProps={getOptionProps}\n filteredOptions={filteredOptions}\n filteringValue={filteringValue}\n ref={scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n screenReaderContent={announcement}\n highlightType={highlightType}\n />\n }\n />\n <div hidden={true} id={selectAriaLabelId}>\n {ariaLabel || inlineLabelText}\n </div>\n </div>\n );\n }\n);\n\nexport default InternalSelect;\n"]}
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
145
|
+
.awsui_root_r2vco_6kz8i_145:not(#\9) {
|
|
146
146
|
border-collapse: separate;
|
|
147
147
|
border-spacing: 0;
|
|
148
148
|
box-sizing: border-box;
|
|
@@ -172,4 +172,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
172
172
|
font-family: var(--font-family-base-c9u5cr, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
173
173
|
-webkit-font-smoothing: auto;
|
|
174
174
|
-moz-osx-font-smoothing: auto;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.awsui_dropdown-header_r2vco_6kz8i_177:not(#\9) {
|
|
178
|
+
inline-size: 100%;
|
|
179
|
+
position: relative;
|
|
180
|
+
z-index: 4;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.awsui_dropdown-footer_r2vco_6kz8i_183:not(#\9) {
|
|
184
|
+
inline-size: 100%;
|
|
175
185
|
}
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
5
|
+
"root": "awsui_root_r2vco_6kz8i_145",
|
|
6
|
+
"dropdown-header": "awsui_dropdown-header_r2vco_6kz8i_177",
|
|
7
|
+
"dropdown-footer": "awsui_dropdown-footer_r2vco_6kz8i_183"
|
|
6
8
|
};
|
|
7
9
|
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ComposeDropdownContentProps {
|
|
3
|
+
filter: React.ReactNode;
|
|
4
|
+
customDropdownHeader: React.ReactNode;
|
|
5
|
+
customDropdownFooter: React.ReactNode;
|
|
6
|
+
statusFooter: React.ReactNode;
|
|
7
|
+
dropdownHeaderClass: string;
|
|
8
|
+
dropdownFooterClass: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Builds the dropdown `header` and `footer` nodes shared by Select and Multiselect. When no custom header or
|
|
12
|
+
* custom footer is provided, the header is just the filter and the footer is the built-in sticky status, so the
|
|
13
|
+
* output is identical to the component's original behavior.
|
|
14
|
+
*/
|
|
15
|
+
export declare function composeDropdownContent({ filter, customDropdownHeader, customDropdownFooter, statusFooter, dropdownHeaderClass, dropdownFooterClass, }: ComposeDropdownContentProps): {
|
|
16
|
+
header: React.ReactNode;
|
|
17
|
+
footer: React.ReactNode;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=dropdown-customization.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-customization.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/dropdown-customization.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,2BAA2B;IAEnC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,oBAAoB,EACpB,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,2BAA2B,GAAG;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA2BpF"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Builds the dropdown `header` and `footer` nodes shared by Select and Multiselect. When no custom header or
|
|
6
|
+
* custom footer is provided, the header is just the filter and the footer is the built-in sticky status, so the
|
|
7
|
+
* output is identical to the component's original behavior.
|
|
8
|
+
*/
|
|
9
|
+
export function composeDropdownContent({ filter, customDropdownHeader, customDropdownFooter, statusFooter, dropdownHeaderClass, dropdownFooterClass, }) {
|
|
10
|
+
const headerNode = customDropdownHeader !== null && customDropdownHeader !== void 0 ? customDropdownHeader : null;
|
|
11
|
+
const footerNode = customDropdownFooter !== null && customDropdownFooter !== void 0 ? customDropdownFooter : null;
|
|
12
|
+
// Custom header renders at the top of the dropdown, above the filter (and options list).
|
|
13
|
+
const header = headerNode !== null ? (React.createElement(React.Fragment, null,
|
|
14
|
+
React.createElement("div", { className: dropdownHeaderClass }, headerNode),
|
|
15
|
+
filter)) : (filter);
|
|
16
|
+
// Only wrap the footer in a fragment when a custom footer is present; otherwise keep the original sticky-status node.
|
|
17
|
+
const footer = footerNode !== null ? (React.createElement(React.Fragment, null,
|
|
18
|
+
statusFooter,
|
|
19
|
+
React.createElement("div", { className: dropdownFooterClass }, footerNode))) : (statusFooter);
|
|
20
|
+
return { header, footer };
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=dropdown-customization.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-customization.js","sourceRoot":"","sources":["../../../../src/select/utils/dropdown-customization.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,EACrC,MAAM,EACN,oBAAoB,EACpB,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,GACS;IAC5B,MAAM,UAAU,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,CAAC;IAChD,MAAM,UAAU,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,CAAC;IAEhD,yFAAyF;IACzF,MAAM,MAAM,GACV,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACpB;QACE,6BAAK,SAAS,EAAE,mBAAmB,IAAG,UAAU,CAAO;QACtD,MAAM,CACN,CACJ,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;IAEJ,sHAAsH;IACtH,MAAM,MAAM,GACV,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACpB;QACG,YAAY;QACb,6BAAK,SAAS,EAAE,mBAAmB,IAAG,UAAU,CAAO,CACtD,CACJ,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAC;IAEJ,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAC5B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\ninterface ComposeDropdownContentProps {\n // The filter node (already includes any custom filtering actions, composed by the Filter component).\n filter: React.ReactNode;\n customDropdownHeader: React.ReactNode;\n customDropdownFooter: React.ReactNode;\n statusFooter: React.ReactNode;\n dropdownHeaderClass: string;\n dropdownFooterClass: string;\n}\n\n/**\n * Builds the dropdown `header` and `footer` nodes shared by Select and Multiselect. When no custom header or\n * custom footer is provided, the header is just the filter and the footer is the built-in sticky status, so the\n * output is identical to the component's original behavior.\n */\nexport function composeDropdownContent({\n filter,\n customDropdownHeader,\n customDropdownFooter,\n statusFooter,\n dropdownHeaderClass,\n dropdownFooterClass,\n}: ComposeDropdownContentProps): { header: React.ReactNode; footer: React.ReactNode } {\n const headerNode = customDropdownHeader ?? null;\n const footerNode = customDropdownFooter ?? null;\n\n // Custom header renders at the top of the dropdown, above the filter (and options list).\n const header =\n headerNode !== null ? (\n <>\n <div className={dropdownHeaderClass}>{headerNode}</div>\n {filter}\n </>\n ) : (\n filter\n );\n\n // Only wrap the footer in a fragment when a custom footer is present; otherwise keep the original sticky-status node.\n const footer =\n footerNode !== null ? (\n <>\n {statusFooter}\n <div className={dropdownFooterClass}>{footerNode}</div>\n </>\n ) : (\n statusFooter\n );\n\n return { header, footer };\n}\n"]}
|
|
@@ -6,6 +6,7 @@ import { OptionsListProps } from '../../internal/components/options-list';
|
|
|
6
6
|
import { DropdownStatusProps } from '../../types/dropdown-status';
|
|
7
7
|
import { NonCancelableEventHandler } from '../../types/events';
|
|
8
8
|
import { OptionDefinition } from '../../types/option';
|
|
9
|
+
import { SelectProps } from '../interfaces';
|
|
9
10
|
import { FilterProps } from '../parts/filter';
|
|
10
11
|
import { ItemProps } from '../parts/item';
|
|
11
12
|
export type MenuProps = Omit<OptionsListProps, 'children'> & {
|
|
@@ -29,11 +30,12 @@ interface UseSelectProps {
|
|
|
29
30
|
isAllSelected?: boolean;
|
|
30
31
|
isSomeSelected?: boolean;
|
|
31
32
|
toggleAll?: () => void;
|
|
33
|
+
dropdownRole?: SelectProps.DropdownRole;
|
|
32
34
|
}
|
|
33
35
|
export interface SelectTriggerProps extends ButtonTriggerProps {
|
|
34
36
|
ref: RefObject<HTMLButtonElement>;
|
|
35
37
|
}
|
|
36
|
-
export declare function useSelect({ selectedOptions, updateSelectedOption, options, filteringType, onBlur, onFocus, externalRef, keepOpen, embedded, fireLoadItems, setFilteringValue, useInteractiveGroups, statusType, isAllSelected, isSomeSelected, toggleAll, }: UseSelectProps): {
|
|
38
|
+
export declare function useSelect({ selectedOptions, updateSelectedOption, options, filteringType, onBlur, onFocus, externalRef, keepOpen, embedded, fireLoadItems, setFilteringValue, useInteractiveGroups, statusType, isAllSelected, isSomeSelected, toggleAll, dropdownRole, }: UseSelectProps): {
|
|
37
39
|
isOpen: boolean;
|
|
38
40
|
highlightedOption: DropdownOption | undefined;
|
|
39
41
|
highlightedIndex: number;
|
|
@@ -46,6 +48,7 @@ export declare function useSelect({ selectedOptions, updateSelectedOption, optio
|
|
|
46
48
|
highlightOption: (option: DropdownOption) => void;
|
|
47
49
|
selectOption: (option?: DropdownOption) => void;
|
|
48
50
|
announceSelected: boolean;
|
|
51
|
+
closeDropdown: () => void;
|
|
49
52
|
dialogId: string;
|
|
50
53
|
focusActiveRef: () => void;
|
|
51
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/use-select.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAQ1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAe,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AACtG,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAElF,UAAU,cAAc;IACtB,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,EAAE,mBAAmB,CAAC,UAAU,CAAC;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/use-select.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAQ1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAe,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AACtG,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAElF,UAAU,cAAc;IACtB,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,EAAE,mBAAmB,CAAC,UAAU,CAAC;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACnC;AAED,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,oBAAoB,EACpB,OAAO,EACP,aAAa,EACb,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,oBAA4B,EAC5B,UAAU,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,YAAY,GACb,EAAE,cAAc;;;;;;4BAgHe,IAAI,CAChC,qBAAqB,EACrB,SAAS,GAAG,QAAQ,GAAG,mBAAmB,GAAG,UAAU,CACxD;;0BA4B0B,OAAO,CAAC,WAAW,CAAC;6BAoEf,cAAc,SAAS,MAAM;;4BApJ9B,cAAc;;;;;EAsQ9C"}
|
|
@@ -12,13 +12,15 @@ import { fireNonCancelableEvent } from '../../internal/events';
|
|
|
12
12
|
import useForwardFocus from '../../internal/hooks/forward-focus';
|
|
13
13
|
import { usePrevious } from '../../internal/hooks/use-previous';
|
|
14
14
|
import { connectOptionsByValue } from './connect-options';
|
|
15
|
-
export function useSelect({ selectedOptions, updateSelectedOption, options, filteringType, onBlur, onFocus, externalRef, keepOpen, embedded, fireLoadItems, setFilteringValue, useInteractiveGroups = false, statusType, isAllSelected, isSomeSelected, toggleAll, }) {
|
|
15
|
+
export function useSelect({ selectedOptions, updateSelectedOption, options, filteringType, onBlur, onFocus, externalRef, keepOpen, embedded, fireLoadItems, setFilteringValue, useInteractiveGroups = false, statusType, isAllSelected, isSomeSelected, toggleAll, dropdownRole, }) {
|
|
16
16
|
const interactivityCheck = useInteractiveGroups ? isGroupInteractive : isInteractive;
|
|
17
17
|
const isHighlightable = (option) => !!option && (useInteractiveGroups || option.type !== 'parent');
|
|
18
18
|
const filterRef = useRef(null);
|
|
19
19
|
const triggerRef = useRef(null);
|
|
20
20
|
const menuRef = useRef(null);
|
|
21
21
|
const hasFilter = filteringType !== 'none' && !embedded;
|
|
22
|
+
// Filtering always renders a dialog; `dropdownRole` can additionally force dialog semantics without a filter.
|
|
23
|
+
const isDialog = hasFilter || dropdownRole === 'dialog';
|
|
22
24
|
const activeRef = hasFilter ? filterRef : menuRef;
|
|
23
25
|
const __selectedOptions = connectOptionsByValue(options, selectedOptions);
|
|
24
26
|
const __selectedOptionsSet = new Set(__selectedOptions);
|
|
@@ -104,15 +106,15 @@ export function useSelect({ selectedOptions, updateSelectedOption, options, filt
|
|
|
104
106
|
onFocus: handleFocus,
|
|
105
107
|
onBlur: handleBlur,
|
|
106
108
|
dropdownContentId: dialogId,
|
|
107
|
-
ariaRole:
|
|
109
|
+
ariaRole: isDialog ? 'dialog' : undefined,
|
|
108
110
|
});
|
|
109
111
|
const getTriggerProps = (disabled = false, autoFocus = false) => {
|
|
110
112
|
const triggerProps = {
|
|
111
113
|
ref: triggerRef,
|
|
112
114
|
onFocus: () => closeDropdown(),
|
|
113
115
|
autoFocus,
|
|
114
|
-
ariaHasPopup:
|
|
115
|
-
ariaControls: isOpen ? (
|
|
116
|
+
ariaHasPopup: isDialog ? 'dialog' : 'listbox',
|
|
117
|
+
ariaControls: isOpen ? (isDialog ? dialogId : menuId) : undefined,
|
|
116
118
|
};
|
|
117
119
|
if (!disabled) {
|
|
118
120
|
triggerProps.onMouseDown = (event) => {
|
|
@@ -270,6 +272,20 @@ export function useSelect({ selectedOptions, updateSelectedOption, options, filt
|
|
|
270
272
|
useForwardFocus(externalRef, triggerRef);
|
|
271
273
|
const highlightedGroupSelected = !!highlightedOption && isGroup(highlightedOption.option) && getGroupState(highlightedOption.option).selected;
|
|
272
274
|
const announceSelected = !!highlightedOption && (__selectedOptionsSet.has(highlightedOption) || highlightedGroupSelected);
|
|
275
|
+
// Closes the dropdown and returns focus to the trigger, matching the normal close behavior.
|
|
276
|
+
// Exposed to the public dropdown-customization render props via `DropdownContentProps.closeDropdown`.
|
|
277
|
+
// Focusing the trigger fires its onFocus handler, which already closes the dropdown; only close
|
|
278
|
+
// explicitly when the trigger is already focused (re-focusing it does not fire onFocus), so the
|
|
279
|
+
// close side effects run exactly once.
|
|
280
|
+
const closeDropdownAndRefocus = useCallback(() => {
|
|
281
|
+
const trigger = triggerRef.current;
|
|
282
|
+
if (trigger && trigger === document.activeElement) {
|
|
283
|
+
closeDropdown();
|
|
284
|
+
}
|
|
285
|
+
else {
|
|
286
|
+
trigger === null || trigger === void 0 ? void 0 : trigger.focus();
|
|
287
|
+
}
|
|
288
|
+
}, [closeDropdown]);
|
|
273
289
|
return {
|
|
274
290
|
isOpen,
|
|
275
291
|
highlightedOption,
|
|
@@ -283,6 +299,7 @@ export function useSelect({ selectedOptions, updateSelectedOption, options, filt
|
|
|
283
299
|
highlightOption: highlightOptionWithKeyboard,
|
|
284
300
|
selectOption,
|
|
285
301
|
announceSelected,
|
|
302
|
+
closeDropdown: closeDropdownAndRefocus,
|
|
286
303
|
dialogId,
|
|
287
304
|
focusActiveRef,
|
|
288
305
|
};
|