npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1091 → 3.0.1093 - Mend

@cloudscape-design/components-themeable 3.0.1091 → 3.0.1093

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.

Files changed (152) hide show

package/lib/internal/template/select/parts/plain-list.js CHANGED Viewed

@@ -2,13 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
-import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import OptionsList from '../../internal/components/options-list';
 import { renderOptions } from '../utils/render-options';
 import scrollToIndex from '../utils/scroll-to-index';
 import { fallbackItemHeight } from './common';
 import styles from './styles.css.js';
 const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, }, ref) => {
+    const idPrefix = useUniqueId('select-list-');
     const stickyOptionRef = useRef(null);
     const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);
     const [width, menuMeasureRef] = useContainerQuery(rect => {
@@ -35,6 +36,7 @@ const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue,
             options: filteredOptions,
             getOptionProps,
             filteringValue,
+            idPrefix,
             highlightType,
             checkboxes,
             hasDropdownStatus,
@@ -44,7 +46,7 @@ const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue,
             stickyOptionRef,
             withScrollbar,
         }),
-        listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
+        listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
 };
 export default forwardRef(PlainList);
 //# sourceMappingURL=plain-list.js.map

package/lib/internal/template/select/parts/plain-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;~~AAG7E~~,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,aAAa,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,MAAM,SAAS,GAAG,CAChB,EACE,SAAS,EACT,cAAc,EACd,eAAe,EACf,cAAc,EACd,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GACD,EAClB,GAA6C,EAC7C,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/G,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE;QACvD,IAAI,eAAe,CAAC,OAAO,EAAE;YAC3B,sHAAsH;YACtH,0FAA0F;YAE1F,qHAAqH;YACrH,uBAAuB;YACvB,wBAAwB,CAAC,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SAChE;QACD,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC;IAE9B,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAExD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC,KAAa,EAAE,EAAE;QACtB,MAAM,QAAQ,GAAG,iBAAiB,IAAI,KAAK,KAAK,CAAC,CAAC;QAClD,IAAI,aAAa,CAAC,SAAS,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;YAC3D,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;SACnD;IACH,CAAC,EACD,CAAC,iBAAiB,EAAE,aAAa,CAAC,SAAS,EAAE,OAAO,CAAC,CACtD,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAE3D,OAAO,CACL,oBAAC,WAAW,oBAAK,SAAS,IAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,EAAE,qBAAqB;QACnF,aAAa,CAAC;YACb,OAAO,EAAE,eAAe;YACxB,cAAc;YACd,cAAc;YACd,aAAa;YACb,UAAU;YACV,iBAAiB;YACjB,oBAAoB;YACpB,mBAAmB;YACnB,iBAAiB;YACjB,eAAe;YACf,aAAa;SACd,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,~~4BAAI~~,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,~~IAC/C~~,UAAU,~~CACR~~,~~CACN~~,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport OptionsList from '../../internal/components/options-list';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { renderOptions } from '../utils/render-options';\nimport scrollToIndex from '../utils/scroll-to-index';\nimport { GetOptionProps, MenuProps } from '../utils/use-select';\nimport { fallbackItemHeight } from './common';\n\nimport styles from './styles.css.js';\n\nexport interface SelectListProps {\n menuProps: MenuProps;\n getOptionProps: GetOptionProps;\n filteredOptions: ReadonlyArray<DropdownOption>;\n filteringValue: string;\n highlightType: HighlightType;\n checkboxes?: boolean;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n firstOptionSticky?: boolean;\n}\n\nexport namespace SelectListProps {\n export type SelectListRef = (index: number) => void;\n}\n\nconst PlainList = (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n) => {\n const stickyOptionRef = useRef<HTMLDivElement>(null);\n const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);\n\n const [width, menuMeasureRef] = useContainerQuery(rect => {\n if (stickyOptionRef.current) {\n // Cannot use container query on the sticky option individually because it is not rendered until the dropdown is open.\n // Not expecting the sticky option to change size without the dropdown also changing size.\n\n // The effects of using the sticky option block size to set the menu scroll padding are covered by integration tests.\n // istanbul ignore next\n setStickyOptionBlockSize(stickyOptionRef.current.clientHeight);\n }\n return { inner: rect.contentBoxWidth, outer: rect.borderBoxWidth };\n });\n\n const menuRef = menuProps.ref;\n\n const mergedRef = useMergeRefs(menuMeasureRef, menuRef);\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n const isSticky = firstOptionSticky && index === 0;\n if (highlightType.moveFocus && menuRef.current && !isSticky) {\n scrollToIndex({ index, menuEl: menuRef.current });\n }\n },\n [firstOptionSticky, highlightType.moveFocus, menuRef]\n );\n\n const withScrollbar = !!width && width.inner < width.outer;\n\n return (\n <OptionsList {...menuProps} ref={mergedRef} stickyItemBlockSize={stickyOptionBlockSize}>\n {renderOptions({\n options: filteredOptions,\n getOptionProps,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n stickyOptionRef,\n withScrollbar,\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default forwardRef(PlainList);\n"]}
1	+ {"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport OptionsList from '../../internal/components/options-list';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { renderOptions } from '../utils/render-options';\nimport scrollToIndex from '../utils/scroll-to-index';\nimport { GetOptionProps, MenuProps } from '../utils/use-select';\nimport { fallbackItemHeight } from './common';\n\nimport styles from './styles.css.js';\n\nexport interface SelectListProps {\n menuProps: MenuProps;\n getOptionProps: GetOptionProps;\n filteredOptions: ReadonlyArray<DropdownOption>;\n filteringValue: string;\n highlightType: HighlightType;\n checkboxes?: boolean;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n firstOptionSticky?: boolean;\n}\n\nexport namespace SelectListProps {\n export type SelectListRef = (index: number) => void;\n}\n\nconst PlainList = (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n) => {\n const idPrefix = useUniqueId('select-list-');\n const stickyOptionRef = useRef<HTMLDivElement>(null);\n const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);\n\n const [width, menuMeasureRef] = useContainerQuery(rect => {\n if (stickyOptionRef.current) {\n // Cannot use container query on the sticky option individually because it is not rendered until the dropdown is open.\n // Not expecting the sticky option to change size without the dropdown also changing size.\n\n // The effects of using the sticky option block size to set the menu scroll padding are covered by integration tests.\n // istanbul ignore next\n setStickyOptionBlockSize(stickyOptionRef.current.clientHeight);\n }\n return { inner: rect.contentBoxWidth, outer: rect.borderBoxWidth };\n });\n\n const menuRef = menuProps.ref;\n\n const mergedRef = useMergeRefs(menuMeasureRef, menuRef);\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n const isSticky = firstOptionSticky && index === 0;\n if (highlightType.moveFocus && menuRef.current && !isSticky) {\n scrollToIndex({ index, menuEl: menuRef.current });\n }\n },\n [firstOptionSticky, highlightType.moveFocus, menuRef]\n );\n\n const withScrollbar = !!width && width.inner < width.outer;\n\n return (\n <OptionsList {...menuProps} ref={mergedRef} stickyItemBlockSize={stickyOptionBlockSize}>\n {renderOptions({\n options: filteredOptions,\n getOptionProps,\n filteringValue,\n idPrefix,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n stickyOptionRef,\n withScrollbar,\n })}\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default forwardRef(PlainList);\n"]}

package/lib/internal/template/select/parts/styles.css.js CHANGED Viewed

@@ -1,26 +1,27 @@
     import './styles.scoped.css';
     export default {
-  "placeholder": "awsui_placeholder_dwuol_1d3u0_145",
-  "item": "awsui_item_dwuol_1d3u0_150",
-  "checkbox": "awsui_checkbox_dwuol_1d3u0_154",
-  "filter": "awsui_filter_dwuol_1d3u0_163",
-  "trigger": "awsui_trigger_dwuol_1d3u0_168",
-  "layout-strut": "awsui_layout-strut_dwuol_1d3u0_174",
-  "list-bottom": "awsui_list-bottom_dwuol_1d3u0_180",
-  "selected-icon": "awsui_selected-icon_dwuol_1d3u0_184",
-  "show-label-tag": "awsui_show-label-tag_dwuol_1d3u0_188",
-  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_1d3u0_192",
-  "inline-token-list": "awsui_inline-token-list_dwuol_1d3u0_199",
-  "inline-token": "awsui_inline-token_dwuol_1d3u0_192",
-  "visual-refresh": "awsui_visual-refresh_dwuol_1d3u0_229",
-  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_1d3u0_236",
-  "inline-token-counter": "awsui_inline-token-counter_dwuol_1d3u0_242",
-  "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_1d3u0_246",
-  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_1d3u0_252",
-  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_1d3u0_256",
-  "inline-label": "awsui_inline-label_dwuol_1d3u0_252",
-  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_1d3u0_282",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_1d3u0_287"
+  "placeholder": "awsui_placeholder_dwuol_pay5s_145",
+  "item": "awsui_item_dwuol_pay5s_150",
+  "checkbox": "awsui_checkbox_dwuol_pay5s_154",
+  "option-group": "awsui_option-group_dwuol_pay5s_163",
+  "filter": "awsui_filter_dwuol_pay5s_167",
+  "trigger": "awsui_trigger_dwuol_pay5s_172",
+  "layout-strut": "awsui_layout-strut_dwuol_pay5s_178",
+  "list-bottom": "awsui_list-bottom_dwuol_pay5s_184",
+  "selected-icon": "awsui_selected-icon_dwuol_pay5s_188",
+  "show-label-tag": "awsui_show-label-tag_dwuol_pay5s_192",
+  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_pay5s_196",
+  "inline-token-list": "awsui_inline-token-list_dwuol_pay5s_203",
+  "inline-token": "awsui_inline-token_dwuol_pay5s_196",
+  "visual-refresh": "awsui_visual-refresh_dwuol_pay5s_233",
+  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_pay5s_240",
+  "inline-token-counter": "awsui_inline-token-counter_dwuol_pay5s_246",
+  "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_pay5s_250",
+  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_pay5s_256",
+  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_pay5s_260",
+  "inline-label": "awsui_inline-label_dwuol_pay5s_256",
+  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_pay5s_286",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_pay5s_291"
 };

package/lib/internal/template/select/parts/styles.scoped.css CHANGED Viewed

@@ -142,16 +142,16 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_placeholder_dwuol_1d3u0_145:not(#\9) {
+.awsui_placeholder_dwuol_pay5s_145:not(#\9) {
   color: var(--color-text-input-placeholder-hvcry0, #687078);
   font-style: italic;
 }
-.awsui_item_dwuol_1d3u0_150:not(#\9) {
+.awsui_item_dwuol_pay5s_150:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_item_dwuol_1d3u0_150 > .awsui_checkbox_dwuol_1d3u0_154:not(#\9) {
+.awsui_item_dwuol_pay5s_150 > .awsui_checkbox_dwuol_pay5s_154:not(#\9) {
   position: relative;
   min-block-size: var(--size-control-lkpwjy, 14px);
   min-inline-size: var(--size-control-lkpwjy, 14px);
@@ -160,43 +160,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-end: var(--space-field-horizontal-n5peob, 8px);
 }
-.awsui_filter_dwuol_1d3u0_163:not(#\9) {
+.awsui_option-group_dwuol_pay5s_163:not(#\9):not(:first-child) {
+  margin-block-start: calc(-1 * var(--border-item-width-acvlhx, 1px));
+}
+.awsui_filter_dwuol_pay5s_167:not(#\9) {
   z-index: 4;
   flex-shrink: 0;
 }
-.awsui_trigger_dwuol_1d3u0_168:not(#\9) {
+.awsui_trigger_dwuol_pay5s_172:not(#\9) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_layout-strut_dwuol_1d3u0_174:not(#\9) {
+.awsui_layout-strut_dwuol_pay5s_178:not(#\9) {
   inline-size: 100%;
   position: relative;
   transform: translate3d(0, 0, 0);
 }
-.awsui_list-bottom_dwuol_1d3u0_180:not(#\9) {
+.awsui_list-bottom_dwuol_pay5s_184:not(#\9) {
   /* used in unit-tests */
 }
-.awsui_selected-icon_dwuol_1d3u0_184:not(#\9) {
+.awsui_selected-icon_dwuol_pay5s_188:not(#\9) {
   color: var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_show-label-tag_dwuol_1d3u0_188 > .awsui_selected-icon_dwuol_1d3u0_184:not(#\9) {
+.awsui_show-label-tag_dwuol_pay5s_192 > .awsui_selected-icon_dwuol_pay5s_188:not(#\9) {
   padding-inline-start: var(--space-scaled-s-gjhvjd, 12px);
 }
-.awsui_inline-token-trigger_dwuol_1d3u0_192:not(#\9) {
+.awsui_inline-token-trigger_dwuol_pay5s_196:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   column-gap: var(--space-xxs-jnczic, 4px);
   inline-size: 100%;
 }
-.awsui_inline-token-list_dwuol_1d3u0_199:not(#\9) {
+.awsui_inline-token-list_dwuol_pay5s_203:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -206,10 +210,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mask-image: linear-gradient(270deg, transparent, white 20px, white);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_inline-token-list_dwuol_1d3u0_199:not(#\9):dir(rtl) {
+.awsui_inline-token-list_dwuol_pay5s_203:not(#\9):dir(rtl) {
   mask-image: linear-gradient(-270deg, transparent, white 20px, white);
 }
-.awsui_inline-token-list_dwuol_1d3u0_199 > .awsui_inline-token_dwuol_1d3u0_192:not(#\9) {
+.awsui_inline-token-list_dwuol_pay5s_203 > .awsui_inline-token_dwuol_pay5s_196:not(#\9) {
   display: flex;
   align-items: center;
   min-inline-size: max-content;
@@ -226,38 +230,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-body-default-5qid0u, #16191f);
 }
-.awsui_visual-refresh_dwuol_1d3u0_229 > .awsui_inline-token-list_dwuol_1d3u0_199 > .awsui_inline-token_dwuol_1d3u0_192:not(#\9) {
+.awsui_visual-refresh_dwuol_pay5s_233 > .awsui_inline-token-list_dwuol_pay5s_203 > .awsui_inline-token_dwuol_pay5s_196:not(#\9) {
   border-start-start-radius: var(--border-radius-badge-o70tla, 16px);
   border-start-end-radius: var(--border-radius-badge-o70tla, 16px);
   border-end-start-radius: var(--border-radius-badge-o70tla, 16px);
   border-end-end-radius: var(--border-radius-badge-o70tla, 16px);
 }
-.awsui_inline-token-hidden-placeholder_dwuol_1d3u0_236:not(#\9) {
+.awsui_inline-token-hidden-placeholder_dwuol_pay5s_240:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
 }
-.awsui_inline-token-counter_dwuol_1d3u0_242:not(#\9) {
+.awsui_inline-token-counter_dwuol_pay5s_246:not(#\9) {
   white-space: nowrap;
 }
-.awsui_inline-token-trigger--disabled_dwuol_1d3u0_246 > .awsui_inline-token-list_dwuol_1d3u0_199 > .awsui_inline-token_dwuol_1d3u0_192:not(#\9) {
+.awsui_inline-token-trigger--disabled_dwuol_pay5s_250 > .awsui_inline-token-list_dwuol_pay5s_203 > .awsui_inline-token_dwuol_pay5s_196:not(#\9) {
   border-color: var(--color-border-control-disabled-c9dn39, #d5dbdb);
   background-color: var(--color-background-container-content-aemn43, #ffffff);
   color: var(--color-text-disabled-bhrk1i, #aab7b8);
 }
-.awsui_inline-label-trigger-wrapper_dwuol_1d3u0_252:not(#\9) {
+.awsui_inline-label-trigger-wrapper_dwuol_pay5s_256:not(#\9) {
   margin-block-start: -7px;
 }
-.awsui_inline-label-wrapper_dwuol_1d3u0_256:not(#\9) {
+.awsui_inline-label-wrapper_dwuol_pay5s_260:not(#\9) {
   margin-block-start: calc(var(--space-scaled-xs-sppte9, 8px) * -1);
 }
-.awsui_inline-label_dwuol_1d3u0_252:not(#\9) {
+.awsui_inline-label_dwuol_pay5s_256:not(#\9) {
   background: linear-gradient(to bottom, var(--color-background-layout-main-05m5y6, #f2f3f3), var(--color-background-input-default-1z2buq, #ffffff));
   border-start-start-radius: 2px;
   border-start-end-radius: 2px;
@@ -279,11 +283,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 1;
 }
-.awsui_inline-label-inline-tokens_dwuol_1d3u0_282:not(#\9) {
+.awsui_inline-label-inline-tokens_dwuol_pay5s_286:not(#\9) {
   padding-block-end: 0;
   transform: translateY(-1.5px);
 }
-.awsui_disabled-reason-tooltip_dwuol_1d3u0_287:not(#\9) {
+.awsui_disabled-reason-tooltip_dwuol_pay5s_291:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/select/parts/styles.selectors.js CHANGED Viewed

@@ -2,26 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_dwuol_1d3u0_145",
-  "item": "awsui_item_dwuol_1d3u0_150",
-  "checkbox": "awsui_checkbox_dwuol_1d3u0_154",
-  "filter": "awsui_filter_dwuol_1d3u0_163",
-  "trigger": "awsui_trigger_dwuol_1d3u0_168",
-  "layout-strut": "awsui_layout-strut_dwuol_1d3u0_174",
-  "list-bottom": "awsui_list-bottom_dwuol_1d3u0_180",
-  "selected-icon": "awsui_selected-icon_dwuol_1d3u0_184",
-  "show-label-tag": "awsui_show-label-tag_dwuol_1d3u0_188",
-  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_1d3u0_192",
-  "inline-token-list": "awsui_inline-token-list_dwuol_1d3u0_199",
-  "inline-token": "awsui_inline-token_dwuol_1d3u0_192",
-  "visual-refresh": "awsui_visual-refresh_dwuol_1d3u0_229",
-  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_1d3u0_236",
-  "inline-token-counter": "awsui_inline-token-counter_dwuol_1d3u0_242",
-  "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_1d3u0_246",
-  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_1d3u0_252",
-  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_1d3u0_256",
-  "inline-label": "awsui_inline-label_dwuol_1d3u0_252",
-  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_1d3u0_282",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_1d3u0_287"
+  "placeholder": "awsui_placeholder_dwuol_pay5s_145",
+  "item": "awsui_item_dwuol_pay5s_150",
+  "checkbox": "awsui_checkbox_dwuol_pay5s_154",
+  "option-group": "awsui_option-group_dwuol_pay5s_163",
+  "filter": "awsui_filter_dwuol_pay5s_167",
+  "trigger": "awsui_trigger_dwuol_pay5s_172",
+  "layout-strut": "awsui_layout-strut_dwuol_pay5s_178",
+  "list-bottom": "awsui_list-bottom_dwuol_pay5s_184",
+  "selected-icon": "awsui_selected-icon_dwuol_pay5s_188",
+  "show-label-tag": "awsui_show-label-tag_dwuol_pay5s_192",
+  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_pay5s_196",
+  "inline-token-list": "awsui_inline-token-list_dwuol_pay5s_203",
+  "inline-token": "awsui_inline-token_dwuol_pay5s_196",
+  "visual-refresh": "awsui_visual-refresh_dwuol_pay5s_233",
+  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_pay5s_240",
+  "inline-token-counter": "awsui_inline-token-counter_dwuol_pay5s_246",
+  "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_pay5s_250",
+  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_pay5s_256",
+  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_pay5s_260",
+  "inline-label": "awsui_inline-label_dwuol_pay5s_256",
+  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_pay5s_286",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_pay5s_291"
 };

package/lib/internal/template/select/parts/virtual-list.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAUpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;~~AA0H~~/C,wBAAuC"}
1	+ {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAUpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AA4H/C,wBAAuC"}

package/lib/internal/template/select/parts/virtual-list.js CHANGED Viewed

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
-import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import OptionsList from '../../internal/components/options-list';
 import { useVirtual } from '../../internal/hooks/use-virtual';
 import { renderOptions } from '../utils/render-options';
@@ -52,11 +52,13 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
     }, [firstOptionSticky, highlightType.moveFocus, scrollToIndex]);
     const stickySize = firstOptionSticky ? virtualItems[0].size : 0;
     const withScrollbar = !!width && width.inner < width.outer;
+    const idPrefix = useUniqueId('select-list-');
     const finalOptions = renderOptions({
         options: virtualItems.map(({ index }) => filteredOptions[index]),
         getOptionProps,
         filteringValue,
         highlightType,
+        idPrefix,
         checkboxes,
         hasDropdownStatus,
         virtualItems,
@@ -68,11 +70,11 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
     return (React.createElement(OptionsList, Object.assign({}, menuProps, { stickyItemBlockSize: stickySize, ref: menuRef }),
         finalOptions,
         React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: totalSize - stickySize } }),
-        listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
+        listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
 });
 const VirtualListClosed = forwardRef(({ menuProps, listBottom }, ref) => {
     useImperativeHandle(ref, () => () => { }, []);
-    return (React.createElement(OptionsList, Object.assign({}, menuProps, { ref: menuProps.ref }), listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
+    return (React.createElement(OptionsList, Object.assign({}, menuProps, { ref: menuProps.ref }), listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
 });
 export default forwardRef(VirtualList);
 //# sourceMappingURL=virtual-list.js.map

package/lib/internal/template/select/parts/virtual-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;~~AAE7E~~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~~4BAAI~~,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,~~IAC/C~~,UAAU,~~CACR~~,~~CACN~~,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,iBAAiB,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAmB,EAAE,GAA6C,EAAE,EAAE;IAC5F,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,WAAW,oBAAK,SAAS,IAAE,GAAG,EAAE,SAAS,CAAC,GAAG,KAC3C,UAAU,CAAC,CAAC,CAAC,CACZ,~~4BAAI~~,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,~~IAC/C~~,UAAU,~~CACR~~,~~CACN~~,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useVirtual } from '../../internal/hooks/use-virtual';\nimport { renderOptions } from '../utils/render-options';\nimport customScrollToIndex from '../utils/scroll-to-index';\nimport { fallbackItemHeight } from './common';\nimport { SelectListProps } from './plain-list';\n\nimport styles from './styles.css.js';\n\nconst VirtualList = (props: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n return props.menuProps.open ? <VirtualListOpen {...props} ref={ref} /> : <VirtualListClosed {...props} ref={ref} />;\n};\n\nconst VirtualListOpen = forwardRef(\n (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n ) => {\n // update component, when it gets wider or narrower to reposition items\n const [width, menuMeasureRef] = useContainerQuery(\n rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }),\n []\n );\n const menuRefObject = useRef(null);\n const menuRef = useMergeRefs(menuMeasureRef, menuRefObject, menuProps.ref);\n const previousHighlightedIndex = useRef<number>();\n const { virtualItems, totalSize, scrollToIndex } = useVirtual({\n items: filteredOptions,\n parentRef: menuRefObject,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (filteringValue property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => fallbackItemHeight, [width?.inner, filteringValue]),\n firstItemSticky: firstOptionSticky,\n });\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n if (highlightType.moveFocus) {\n const movingUp = previousHighlightedIndex.current !== undefined && index < previousHighlightedIndex.current;\n if (firstOptionSticky && movingUp && index !== 0 && menuRefObject.current) {\n // React-Virtual v2 does not offer a proper way to handle sticky elements when scrolling,\n // so until we upgrade to v3, use our own scroll implementation\n // to prevent newly highlighted element from being covered by the sticky element\n // when moving the highlight upwards in the list.\n\n // Scrolling behavior is covered by integration tests.\n // istanbul ignore next\n customScrollToIndex({\n index,\n menuEl: menuRefObject?.current,\n });\n } else {\n scrollToIndex(index);\n }\n }\n previousHighlightedIndex.current = index;\n },\n [firstOptionSticky, highlightType.moveFocus, scrollToIndex]\n );\n\n const stickySize = firstOptionSticky ? virtualItems[0].size : 0;\n const withScrollbar = !!width && width.inner < width.outer;\n\n const finalOptions = renderOptions({\n options: virtualItems.map(({ index }) => filteredOptions[index]),\n getOptionProps,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n withScrollbar,\n });\n\n return (\n <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef}>\n {finalOptions}\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: totalSize - stickySize }}\n />\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nconst VirtualListClosed = forwardRef(\n ({ menuProps, listBottom }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n useImperativeHandle(ref, () => () => {}, []);\n return (\n <OptionsList {...menuProps} ref={menuProps.ref}>\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nexport default forwardRef(VirtualList);\n"]}
1	+ {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useVirtual } from '../../internal/hooks/use-virtual';\nimport { renderOptions } from '../utils/render-options';\nimport customScrollToIndex from '../utils/scroll-to-index';\nimport { fallbackItemHeight } from './common';\nimport { SelectListProps } from './plain-list';\n\nimport styles from './styles.css.js';\n\nconst VirtualList = (props: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n return props.menuProps.open ? <VirtualListOpen {...props} ref={ref} /> : <VirtualListClosed {...props} ref={ref} />;\n};\n\nconst VirtualListOpen = forwardRef(\n (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n ) => {\n // update component, when it gets wider or narrower to reposition items\n const [width, menuMeasureRef] = useContainerQuery(\n rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }),\n []\n );\n const menuRefObject = useRef(null);\n const menuRef = useMergeRefs(menuMeasureRef, menuRefObject, menuProps.ref);\n const previousHighlightedIndex = useRef<number>();\n const { virtualItems, totalSize, scrollToIndex } = useVirtual({\n items: filteredOptions,\n parentRef: menuRefObject,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (filteringValue property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => fallbackItemHeight, [width?.inner, filteringValue]),\n firstItemSticky: firstOptionSticky,\n });\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n if (highlightType.moveFocus) {\n const movingUp = previousHighlightedIndex.current !== undefined && index < previousHighlightedIndex.current;\n if (firstOptionSticky && movingUp && index !== 0 && menuRefObject.current) {\n // React-Virtual v2 does not offer a proper way to handle sticky elements when scrolling,\n // so until we upgrade to v3, use our own scroll implementation\n // to prevent newly highlighted element from being covered by the sticky element\n // when moving the highlight upwards in the list.\n\n // Scrolling behavior is covered by integration tests.\n // istanbul ignore next\n customScrollToIndex({\n index,\n menuEl: menuRefObject?.current,\n });\n } else {\n scrollToIndex(index);\n }\n }\n previousHighlightedIndex.current = index;\n },\n [firstOptionSticky, highlightType.moveFocus, scrollToIndex]\n );\n\n const stickySize = firstOptionSticky ? virtualItems[0].size : 0;\n const withScrollbar = !!width && width.inner < width.outer;\n\n const idPrefix = useUniqueId('select-list-');\n const finalOptions = renderOptions({\n options: virtualItems.map(({ index }) => filteredOptions[index]),\n getOptionProps,\n filteringValue,\n highlightType,\n idPrefix,\n checkboxes,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n withScrollbar,\n });\n\n return (\n <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef}>\n {finalOptions}\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: totalSize - stickySize }}\n />\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nconst VirtualListClosed = forwardRef(\n ({ menuProps, listBottom }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n useImperativeHandle(ref, () => () => {}, []);\n return (\n <OptionsList {...menuProps} ref={menuProps.ref}>\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nexport default forwardRef(VirtualList);\n"]}

package/lib/internal/template/select/utils/render-options.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface RenderOptionProps {
     getOptionProps: any;
     filteringValue: string;
     highlightType: HighlightType;
+    idPrefix: string;
     checkboxes?: boolean;
     hasDropdownStatus?: boolean;
     virtualItems?: VirtualItem[];
@@ -17,6 +18,6 @@ interface RenderOptionProps {
     firstOptionSticky?: boolean;
     stickyOptionRef?: React.Ref<HTMLDivElement>;
 }
-export declare const renderOptions: ({ options, getOptionProps, filteringValue, highlightType, checkboxes, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }: RenderOptionProps) => JSX.Element[];
+export declare const renderOptions: ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }: RenderOptionProps) => JSX.Element[];
 export {};
 //# sourceMappingURL=render-options.d.ts.map

package/lib/internal/template/select/utils/render-options.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;~~AAC7E~~,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;~~AAKlE~~,UAAU,iBAAiB;IACzB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,~~wNAcvB~~,iBAAiB,~~kBAiCnB~~,CAAC"}
1	+ {"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAMlE,UAAU,iBAAiB;IACzB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,kOAevB,iBAAiB,kBAgEnB,CAAC"}

package/lib/internal/template/select/utils/render-options.js CHANGED Viewed

@@ -1,25 +1,45 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import { unflattenOptions } from '../../internal/components/option/utils/unflatten-options';
 import Item from '../parts/item';
 import MultiselectItem from '../parts/multiselect-item';
+import OptionGroup from '../parts/option-group';
 import { getItemProps } from './get-item-props';
-export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }) => {
-    return options.map((option, index) => {
+export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }) => {
+    const getNestedItemProps = ({ index, option }) => {
         const virtualItem = virtualItems && virtualItems[index];
         const globalIndex = virtualItem ? virtualItem.index : index;
-        const props = getItemProps({
+        return getItemProps({
             option,
             index: globalIndex,
             getOptionProps,
             filteringValue: option.type === 'select-all' ? '' : filteringValue,
             checkboxes,
         });
+    };
+    const renderListItem = (props, index) => {
+        const virtualItem = virtualItems && virtualItems[index];
+        const globalIndex = virtualItem ? virtualItem.index : index;
         const isLastItem = index === options.length - 1;
         const padBottom = !hasDropdownStatus && isLastItem;
         const ListItem = useInteractiveGroups ? MultiselectItem : Item;
         const isSticky = firstOptionSticky && globalIndex === 0;
         return (React.createElement(ListItem, Object.assign({ key: globalIndex }, props, { virtualPosition: virtualItem && virtualItem.start, ref: isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky })));
+    };
+    const unflattenedOptions = unflattenOptions(options);
+    return unflattenedOptions.map(nestedDropdownOption => {
+        var _a;
+        const index = nestedDropdownOption.index;
+        const props = getNestedItemProps(nestedDropdownOption);
+        if (nestedDropdownOption.type === 'parent') {
+            const { children } = nestedDropdownOption;
+            const optionId = (_a = props.id) !== null && _a !== void 0 ? _a : `${idPrefix}-option-${index}`;
+            return (React.createElement(OptionGroup, { key: index, virtual: (virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems[index]) !== undefined, ariaLabelledby: optionId, ariaDisabled: props['aria-disabled'] },
+                renderListItem(props, index),
+                children.map(child => (React.createElement(React.Fragment, { key: child.index }, renderListItem(getNestedItemProps(child), child.index))))));
+        }
+        return renderListItem(props, index);
     });
 };
 //# sourceMappingURL=render-options.js.map

package/lib/internal/template/select/utils/render-options.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"render-options.js","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAK1B~~,OAAO,IAAI,MAAM,eAAe,CAAC;AACjC,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;~~AAkBhD~~,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,UAAU,GAAG,KAAK,EAClB,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,eAAe,GACG,EAAE,EAAE;IACtB,~~OAAO~~,~~OAAO~~,~~CAAC,~~GAAG,CAAC,~~CAAC~~,~~MAAM~~,EAAE,~~KAAK~~,EAAE,EAAE;~~QACnC~~,MAAM,WAAW,GAAG,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5D,~~MAAM~~,~~KAAK,GAAG,~~YAAY,CAAC;~~YACzB~~,MAAM;YACN,KAAK,EAAE,WAAW;YAClB,cAAc;YACd,cAAc,EAAE,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;YAClE,UAAU;SACX,CAAC,CAAC;~~QAEH~~,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,MAAM,SAAS,GAAG,CAAC,iBAAiB,IAAI,UAAU,CAAC;QACnD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,MAAM,QAAQ,GAAG,iBAAiB,IAAI,WAAW,KAAK,CAAC,CAAC;QAExD,OAAO,CACL,oBAAC,QAAQ,kBACP,GAAG,EAAE,WAAW,IACZ,KAAK,IACT,eAAe,EAAE,WAAW,IAAI,WAAW,CAAC,KAAK,EACjD,GAAG,EAAE,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,UAAU,EAC1F,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,WAAW,GAAG,CAAC,EAC7B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,CAAC,IAAI,EACjC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,QAAQ,IAChB,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { VirtualItem } from '../../internal/vendor/react-virtual';\nimport Item from '../parts/item';\nimport MultiselectItem from '../parts/multiselect-item';\nimport { getItemProps } from './get-item-props';\n\ninterface RenderOptionProps {\n options: ReadonlyArray<DropdownOption>;\n getOptionProps: any;\n filteringValue: string;\n highlightType: HighlightType;\n checkboxes?: boolean;\n hasDropdownStatus?: boolean;\n virtualItems?: VirtualItem[];\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaSetsize?: number;\n withScrollbar: boolean;\n firstOptionSticky?: boolean;\n stickyOptionRef?: React.Ref<HTMLDivElement>;\n}\n\nexport const renderOptions = ({\n options,\n getOptionProps,\n filteringValue,\n highlightType,\n checkboxes = false,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n ariaSetsize,\n withScrollbar,\n firstOptionSticky,\n stickyOptionRef,\n}: RenderOptionProps) => {\n ~~return~~ ~~options.map~~(~~(option~~, ~~index~~) => {\n const virtualItem = virtualItems && virtualItems[index];\n const globalIndex = virtualItem ? virtualItem.index : index;\n ~~const~~ ~~props =~~ getItemProps({\n option,\n index: globalIndex,\n getOptionProps,\n filteringValue: option.type === 'select-all' ? '' : filteringValue,\n checkboxes,\n });\n\n const isLastItem = index === options.length - 1;\n const padBottom = !hasDropdownStatus && isLastItem;\n const ListItem = useInteractiveGroups ? MultiselectItem : Item;\n const isSticky = firstOptionSticky && globalIndex === 0;\n\n return (\n <ListItem\n key={globalIndex}\n {...props}\n virtualPosition={virtualItem && virtualItem.start}\n ref={isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef}\n padBottom={padBottom}\n screenReaderContent={screenReaderContent}\n ariaPosinset={globalIndex + 1}\n ariaSetsize={ariaSetsize}\n highlightType={highlightType.type}\n withScrollbar={withScrollbar}\n sticky={isSticky}\n />\n );\n });\n};\n"]}
1	+ {"version":3,"file":"render-options.js","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport { NestedDropdownOption, unflattenOptions } from '../../internal/components/option/utils/unflatten-options';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { VirtualItem } from '../../internal/vendor/react-virtual';\nimport Item from '../parts/item';\nimport MultiselectItem from '../parts/multiselect-item';\nimport OptionGroup from '../parts/option-group';\nimport { getItemProps } from './get-item-props';\n\ninterface RenderOptionProps {\n options: ReadonlyArray<DropdownOption>;\n getOptionProps: any;\n filteringValue: string;\n highlightType: HighlightType;\n idPrefix: string;\n checkboxes?: boolean;\n hasDropdownStatus?: boolean;\n virtualItems?: VirtualItem[];\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaSetsize?: number;\n withScrollbar: boolean;\n firstOptionSticky?: boolean;\n stickyOptionRef?: React.Ref<HTMLDivElement>;\n}\n\nexport const renderOptions = ({\n options,\n getOptionProps,\n filteringValue,\n highlightType,\n idPrefix,\n checkboxes = false,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n ariaSetsize,\n withScrollbar,\n firstOptionSticky,\n stickyOptionRef,\n}: RenderOptionProps) => {\n const getNestedItemProps = ({ index, option }: NestedDropdownOption) => {\n const virtualItem = virtualItems && virtualItems[index];\n const globalIndex = virtualItem ? virtualItem.index : index;\n return getItemProps({\n option,\n index: globalIndex,\n getOptionProps,\n filteringValue: option.type === 'select-all' ? '' : filteringValue,\n checkboxes,\n });\n };\n\n const renderListItem = (props: any, index: number) => {\n const virtualItem = virtualItems && virtualItems[index];\n const globalIndex = virtualItem ? virtualItem.index : index;\n\n const isLastItem = index === options.length - 1;\n const padBottom = !hasDropdownStatus && isLastItem;\n const ListItem = useInteractiveGroups ? MultiselectItem : Item;\n const isSticky = firstOptionSticky && globalIndex === 0;\n\n return (\n <ListItem\n key={globalIndex}\n {...props}\n virtualPosition={virtualItem && virtualItem.start}\n ref={isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef}\n padBottom={padBottom}\n screenReaderContent={screenReaderContent}\n ariaPosinset={globalIndex + 1}\n ariaSetsize={ariaSetsize}\n highlightType={highlightType.type}\n withScrollbar={withScrollbar}\n sticky={isSticky}\n />\n );\n };\n\n const unflattenedOptions = unflattenOptions(options);\n return unflattenedOptions.map(nestedDropdownOption => {\n const index = nestedDropdownOption.index;\n const props = getNestedItemProps(nestedDropdownOption);\n\n if (nestedDropdownOption.type === 'parent') {\n const { children } = nestedDropdownOption;\n const optionId = props.id ?? `${idPrefix}-option-${index}`;\n return (\n <OptionGroup\n key={index}\n virtual={virtualItems?.[index] !== undefined}\n ariaLabelledby={optionId}\n ariaDisabled={props['aria-disabled']}\n >\n {renderListItem(props, index)}\n {children.map(child => (\n <React.Fragment key={child.index}>{renderListItem(getNestedItemProps(child), child.index)}</React.Fragment>\n ))}\n </OptionGroup>\n );\n }\n\n return renderListItem(props, index);\n });\n};\n"]}

package/lib/internal/template/select/utils/use-select.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { NonCancelableEventHandler } from '../../internal/events';
 import { FilterProps } from '../parts/filter';
 import { ItemProps } from '../parts/item';
 export type MenuProps = Omit<OptionsListProps, 'children'> & {
-    ref: React.RefObject<HTMLUListElement>;
+    ref: React.RefObject<HTMLDivElement>;
 };
 export type GetOptionProps = (option: DropdownOption, index: number) => ItemProps;
 interface UseSelectProps {

package/lib/internal/template/select/utils/use-select.d.ts.map CHANGED Viewed

	@@ -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;AAKzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,6CAA6C,CAAC;AAE5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAG1F,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,~~gBAAgB~~,CAAC,CAAA;CAAE,CAAC;~~AACxG~~,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;CACxB;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,GACV,EAAE,cAAc;;;;;;4BA6Ge,KAC5B,aAAa,EACb,SAAS,GAAG,QAAQ,GAAG,mBAAmB,GAAG,qBAAqB,CACnE;;0BA4B0B,QAAQ,WAAW,CAAC;6BAoEf,cAAc,SAAS,MAAM;;4BApJ9B,cAAc;;;~~EA4O9C~~"}
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;AAKzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,6CAA6C,CAAC;AAE5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAG1F,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;CACxB;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,GACV,EAAE,cAAc;;;;;;4BA6Ge,KAC5B,aAAa,EACb,SAAS,GAAG,QAAQ,GAAG,mBAAmB,GAAG,qBAAqB,CACnE;;0BA4B0B,QAAQ,WAAW,CAAC;6BAoEf,cAAc,SAAS,MAAM;;4BApJ9B,cAAc;;;EAkP9C"}

package/lib/internal/template/select/utils/use-select.js CHANGED Viewed

@@ -189,7 +189,7 @@ export function useSelect({ selectedOptions, updateSelectedOption, options, filt
         };
     };
     const getOptionProps = (option, index) => {
-        var _a;
+        var _a, _b;
         const isSelectAll = option.type === 'select-all';
         const highlighted = option === highlightedOption;
         const groupState = isGroup(option.option) ? getGroupState(option.option) : undefined;
@@ -198,12 +198,17 @@ export function useSelect({ selectedOptions, updateSelectedOption, options, filt
         const isNextSelected = !!nextOption && isGroup(nextOption)
             ? getGroupState(nextOption).selected
             : __selectedOptions.indexOf(options[index + 1]) > -1;
+        const previousOption = (_b = options[index - 1]) === null || _b === void 0 ? void 0 : _b.option;
+        const isPreviousSelected = !!previousOption && isGroup(previousOption)
+            ? getGroupState(previousOption).selected
+            : __selectedOptions.indexOf(options[index - 1]) > -1;
         const optionProps = {
             key: index,
             option,
             highlighted,
             selected,
             isNextSelected,
+            isPreviousSelected,
             indeterminate: !!(groupState === null || groupState === void 0 ? void 0 : groupState.indeterminate) || (isSelectAll && !isAllSelected && isSomeSelected),
             ['data-mouse-target']: isHighlightable(option) ? index : -1,
             id: getOptionId(menuId, index),