@cloudscape-design/components 3.0.929 → 3.0.931

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 (86) hide show
  1. package/app-layout/drawer/index.d.ts.map +1 -1
  2. package/app-layout/drawer/index.js +1 -1
  3. package/app-layout/drawer/index.js.map +1 -1
  4. package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
  5. package/app-layout/mobile-toolbar/index.js +1 -1
  6. package/app-layout/mobile-toolbar/index.js.map +1 -1
  7. package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  8. package/app-layout/visual-refresh/drawers.js +2 -2
  9. package/app-layout/visual-refresh/drawers.js.map +1 -1
  10. package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map +1 -1
  11. package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js +2 -2
  12. package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map +1 -1
  13. package/internal/components/option/interfaces.d.ts +1 -1
  14. package/internal/components/option/interfaces.d.ts.map +1 -1
  15. package/internal/components/option/interfaces.js.map +1 -1
  16. package/internal/components/option/utils/prepare-options.d.ts +1 -0
  17. package/internal/components/option/utils/prepare-options.d.ts.map +1 -1
  18. package/internal/components/option/utils/prepare-options.js +1 -0
  19. package/internal/components/option/utils/prepare-options.js.map +1 -1
  20. package/internal/components/options-list/index.d.ts +1 -0
  21. package/internal/components/options-list/index.d.ts.map +1 -1
  22. package/internal/components/options-list/index.js +2 -2
  23. package/internal/components/options-list/index.js.map +1 -1
  24. package/internal/components/selectable-item/index.d.ts.map +1 -1
  25. package/internal/components/selectable-item/index.js +2 -1
  26. package/internal/components/selectable-item/index.js.map +1 -1
  27. package/internal/components/selectable-item/interfaces.d.ts +1 -0
  28. package/internal/components/selectable-item/interfaces.d.ts.map +1 -1
  29. package/internal/components/selectable-item/interfaces.js.map +1 -1
  30. package/internal/components/selectable-item/styles.css.js +20 -19
  31. package/internal/components/selectable-item/styles.scoped.css +41 -37
  32. package/internal/components/selectable-item/styles.selectors.js +20 -19
  33. package/internal/environment.js +1 -1
  34. package/internal/environment.json +1 -1
  35. package/internal/manifest.json +1 -1
  36. package/multiselect/interfaces.d.ts +11 -2
  37. package/multiselect/interfaces.d.ts.map +1 -1
  38. package/multiselect/interfaces.js.map +1 -1
  39. package/multiselect/internal.d.ts.map +1 -1
  40. package/multiselect/internal.js +5 -3
  41. package/multiselect/internal.js.map +1 -1
  42. package/multiselect/use-multiselect.d.ts +7 -4
  43. package/multiselect/use-multiselect.d.ts.map +1 -1
  44. package/multiselect/use-multiselect.js +33 -9
  45. package/multiselect/use-multiselect.js.map +1 -1
  46. package/package.json +1 -1
  47. package/select/internal.js +1 -1
  48. package/select/internal.js.map +1 -1
  49. package/select/parts/common.d.ts +2 -0
  50. package/select/parts/common.d.ts.map +1 -0
  51. package/select/parts/common.js +4 -0
  52. package/select/parts/common.js.map +1 -0
  53. package/select/parts/multiselect-item.d.ts.map +1 -1
  54. package/select/parts/multiselect-item.js +3 -2
  55. package/select/parts/multiselect-item.js.map +1 -1
  56. package/select/parts/plain-list.d.ts.map +1 -1
  57. package/select/parts/plain-list.js +22 -14
  58. package/select/parts/plain-list.js.map +1 -1
  59. package/select/parts/styles.css.js +20 -21
  60. package/select/parts/styles.scoped.css +26 -30
  61. package/select/parts/styles.selectors.js +20 -21
  62. package/select/parts/trigger.d.ts.map +1 -1
  63. package/select/parts/trigger.js +1 -1
  64. package/select/parts/trigger.js.map +1 -1
  65. package/select/parts/virtual-list.d.ts.map +1 -1
  66. package/select/parts/virtual-list.js +26 -9
  67. package/select/parts/virtual-list.js.map +1 -1
  68. package/select/utils/render-options.d.ts +4 -3
  69. package/select/utils/render-options.d.ts.map +1 -1
  70. package/select/utils/render-options.js +5 -5
  71. package/select/utils/render-options.js.map +1 -1
  72. package/select/utils/scroll-to-index.d.ts +5 -0
  73. package/select/utils/scroll-to-index.d.ts.map +1 -0
  74. package/select/utils/scroll-to-index.js +14 -0
  75. package/select/utils/scroll-to-index.js.map +1 -0
  76. package/select/utils/use-select.d.ts +4 -1
  77. package/select/utils/use-select.d.ts.map +1 -1
  78. package/select/utils/use-select.js +18 -9
  79. package/select/utils/use-select.js.map +1 -1
  80. package/test-utils/dom/internal/dropdown-host.d.ts +20 -2
  81. package/test-utils/dom/internal/dropdown-host.js +33 -2
  82. package/test-utils/dom/internal/dropdown-host.js.map +1 -1
  83. package/test-utils/selectors/internal/dropdown-host.d.ts +1 -0
  84. package/test-utils/selectors/internal/dropdown-host.js +6 -0
  85. package/test-utils/selectors/internal/dropdown-host.js.map +1 -1
  86. package/test-utils/tsconfig.tsbuildinfo +1 -1
@@ -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,OAAO,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAGzE,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGxD,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,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,iBAAiB,CAC/C,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EACrE,EAAE,CACH,CAAC;IAEF,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,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CAAc,uBAAuB,KAAK,IAAI,CAAC,CAAC;QAC3F,IAAI,aAAa,CAAC,SAAS,IAAI,IAAI,EAAE;YACnC,uFAAuF;YACvF,IAAI,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,YAAY,MAAK,SAAS,IAAI,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,YAAY,IAAG,EAAE,EAAE;gBACrF,sGAAsG;gBACtG,qBAAqB,CAAC,IAAI,CAAC,CAAC;aAC7B;SACF;IACH,CAAC,EACD,CAAC,aAAa,EAAE,OAAO,CAAC,CACzB,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;QACvC,aAAa,CAAC;YACb,OAAO,EAAE,eAAe;YACxB,cAAc;YACd,cAAc;YACd,aAAa;YACb,UAAU;YACV,iBAAiB;YACjB,oBAAoB;YACpB,mBAAmB;YACnB,aAAa,EAAE,aAAa;YAC5B,iBAAiB;SAClB,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 } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\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 { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\nimport { renderOptions } from '../utils/render-options';\nimport { GetOptionProps, MenuProps } from '../utils/use-select';\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 [width, menuMeasureRef] = useContainerQuery(\n rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }),\n []\n );\n\n const menuRef = menuProps.ref;\n\n const mergedRef = useMergeRefs(menuMeasureRef, menuRef);\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n const item = menuRef.current?.querySelector<HTMLElement>(`[data-mouse-target=\"${index}\"]`);\n if (highlightType.moveFocus && item) {\n // In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318\n if (menuRef.current?.clientHeight !== undefined && menuRef.current?.clientHeight > 15) {\n /* istanbul ignore next: clientHeight always returns 0 in JSDOM, the line is covered by integ tests */\n scrollElementIntoView(item);\n }\n }\n },\n [highlightType, menuRef]\n );\n\n const withScrollbar = !!width && width.inner < width.outer;\n\n return (\n <OptionsList {...menuProps} ref={mergedRef}>\n {renderOptions({\n options: filteredOptions,\n getOptionProps,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n useInteractiveGroups,\n screenReaderContent,\n withScrollbar: withScrollbar,\n firstOptionSticky,\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":"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;AAGzE,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,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';\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 { useMergeRefs } from '../../internal/hooks/use-merge-refs';\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,26 +1,25 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "placeholder": "awsui_placeholder_dwuol_etz7p_145",
5
- "item": "awsui_item_dwuol_etz7p_150",
6
- "checkbox": "awsui_checkbox_dwuol_etz7p_154",
7
- "filter": "awsui_filter_dwuol_etz7p_163",
8
- "trigger": "awsui_trigger_dwuol_etz7p_168",
9
- "layout-strut": "awsui_layout-strut_dwuol_etz7p_174",
10
- "list-bottom": "awsui_list-bottom_dwuol_etz7p_180",
11
- "selected-icon": "awsui_selected-icon_dwuol_etz7p_184",
12
- "show-label-tag": "awsui_show-label-tag_dwuol_etz7p_188",
13
- "inline-token-trigger": "awsui_inline-token-trigger_dwuol_etz7p_192",
14
- "inline-token-list": "awsui_inline-token-list_dwuol_etz7p_199",
15
- "inline-token": "awsui_inline-token_dwuol_etz7p_192",
16
- "visual-refresh": "awsui_visual-refresh_dwuol_etz7p_229",
17
- "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_etz7p_236",
18
- "inline-token-counter": "awsui_inline-token-counter_dwuol_etz7p_242",
19
- "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_etz7p_246",
20
- "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_etz7p_252",
21
- "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_etz7p_256",
22
- "inline-label": "awsui_inline-label_dwuol_etz7p_252",
23
- "inline-label-disabled": "awsui_inline-label-disabled_dwuol_etz7p_278",
24
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_etz7p_286"
4
+ "placeholder": "awsui_placeholder_dwuol_ti6bo_145",
5
+ "item": "awsui_item_dwuol_ti6bo_150",
6
+ "checkbox": "awsui_checkbox_dwuol_ti6bo_154",
7
+ "filter": "awsui_filter_dwuol_ti6bo_163",
8
+ "trigger": "awsui_trigger_dwuol_ti6bo_168",
9
+ "layout-strut": "awsui_layout-strut_dwuol_ti6bo_174",
10
+ "list-bottom": "awsui_list-bottom_dwuol_ti6bo_180",
11
+ "selected-icon": "awsui_selected-icon_dwuol_ti6bo_184",
12
+ "show-label-tag": "awsui_show-label-tag_dwuol_ti6bo_188",
13
+ "inline-token-trigger": "awsui_inline-token-trigger_dwuol_ti6bo_192",
14
+ "inline-token-list": "awsui_inline-token-list_dwuol_ti6bo_199",
15
+ "inline-token": "awsui_inline-token_dwuol_ti6bo_192",
16
+ "visual-refresh": "awsui_visual-refresh_dwuol_ti6bo_229",
17
+ "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_ti6bo_236",
18
+ "inline-token-counter": "awsui_inline-token-counter_dwuol_ti6bo_242",
19
+ "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_ti6bo_246",
20
+ "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_ti6bo_252",
21
+ "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_ti6bo_256",
22
+ "inline-label": "awsui_inline-label_dwuol_ti6bo_252",
23
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_ti6bo_282"
25
24
  };
26
25
 
@@ -142,16 +142,16 @@
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
- .awsui_placeholder_dwuol_etz7p_145:not(#\9) {
145
+ .awsui_placeholder_dwuol_ti6bo_145:not(#\9) {
146
146
  color: var(--color-text-input-placeholder-f3x213, #656871);
147
147
  font-style: italic;
148
148
  }
149
149
 
150
- .awsui_item_dwuol_etz7p_150:not(#\9) {
150
+ .awsui_item_dwuol_ti6bo_150:not(#\9) {
151
151
  display: flex;
152
152
  align-items: center;
153
153
  }
154
- .awsui_item_dwuol_etz7p_150 > .awsui_checkbox_dwuol_etz7p_154:not(#\9) {
154
+ .awsui_item_dwuol_ti6bo_150 > .awsui_checkbox_dwuol_ti6bo_154:not(#\9) {
155
155
  position: relative;
156
156
  min-block-size: var(--size-control-28i7hr, 16px);
157
157
  min-inline-size: var(--size-control-28i7hr, 16px);
@@ -160,43 +160,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
160
160
  margin-inline-end: var(--space-field-horizontal-gg19kw, 12px);
161
161
  }
162
162
 
163
- .awsui_filter_dwuol_etz7p_163:not(#\9) {
163
+ .awsui_filter_dwuol_ti6bo_163:not(#\9) {
164
164
  z-index: 4;
165
165
  flex-shrink: 0;
166
166
  }
167
167
 
168
- .awsui_trigger_dwuol_etz7p_168:not(#\9) {
168
+ .awsui_trigger_dwuol_ti6bo_168:not(#\9) {
169
169
  white-space: nowrap;
170
170
  overflow: hidden;
171
171
  text-overflow: ellipsis;
172
172
  }
173
173
 
174
- .awsui_layout-strut_dwuol_etz7p_174:not(#\9) {
174
+ .awsui_layout-strut_dwuol_ti6bo_174:not(#\9) {
175
175
  inline-size: 100%;
176
176
  position: relative;
177
177
  transform: translate3d(0, 0, 0);
178
178
  }
179
179
 
180
- .awsui_list-bottom_dwuol_etz7p_180:not(#\9) {
180
+ .awsui_list-bottom_dwuol_ti6bo_180:not(#\9) {
181
181
  /* used in unit-tests */
182
182
  }
183
183
 
184
- .awsui_selected-icon_dwuol_etz7p_184:not(#\9) {
184
+ .awsui_selected-icon_dwuol_ti6bo_184:not(#\9) {
185
185
  color: var(--color-border-item-focused-nv6mhz, #006ce0);
186
186
  }
187
187
 
188
- .awsui_show-label-tag_dwuol_etz7p_188 > .awsui_selected-icon_dwuol_etz7p_184:not(#\9) {
188
+ .awsui_show-label-tag_dwuol_ti6bo_188 > .awsui_selected-icon_dwuol_ti6bo_184:not(#\9) {
189
189
  padding-inline-start: var(--space-scaled-s-aqzyko, 12px);
190
190
  }
191
191
 
192
- .awsui_inline-token-trigger_dwuol_etz7p_192:not(#\9) {
192
+ .awsui_inline-token-trigger_dwuol_ti6bo_192:not(#\9) {
193
193
  display: flex;
194
194
  flex-wrap: nowrap;
195
195
  column-gap: var(--space-xxs-p8yyaw, 4px);
196
196
  inline-size: 100%;
197
197
  }
198
198
 
199
- .awsui_inline-token-list_dwuol_etz7p_199:not(#\9) {
199
+ .awsui_inline-token-list_dwuol_ti6bo_199:not(#\9) {
200
200
  display: flex;
201
201
  flex-wrap: nowrap;
202
202
  align-items: center;
@@ -207,11 +207,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
207
207
  mask-image: linear-gradient(270deg, transparent, white 20px, white);
208
208
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
209
209
  }
210
- .awsui_inline-token-list_dwuol_etz7p_199:not(#\9):dir(rtl) {
210
+ .awsui_inline-token-list_dwuol_ti6bo_199:not(#\9):dir(rtl) {
211
211
  -webkit-mask-image: linear-gradient(-270deg, transparent, white 20px, white);
212
212
  mask-image: linear-gradient(-270deg, transparent, white 20px, white);
213
213
  }
214
- .awsui_inline-token-list_dwuol_etz7p_199 > .awsui_inline-token_dwuol_etz7p_192:not(#\9) {
214
+ .awsui_inline-token-list_dwuol_ti6bo_199 > .awsui_inline-token_dwuol_ti6bo_192:not(#\9) {
215
215
  display: flex;
216
216
  align-items: center;
217
217
  min-inline-size: max-content;
@@ -228,40 +228,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
228
228
  color: var(--color-text-body-default-7v1jfn, #0f141a);
229
229
  }
230
230
 
231
- .awsui_visual-refresh_dwuol_etz7p_229 > .awsui_inline-token-list_dwuol_etz7p_199 > .awsui_inline-token_dwuol_etz7p_192:not(#\9) {
231
+ .awsui_visual-refresh_dwuol_ti6bo_229 > .awsui_inline-token-list_dwuol_ti6bo_199 > .awsui_inline-token_dwuol_ti6bo_192:not(#\9) {
232
232
  border-start-start-radius: var(--border-radius-badge-0z09dt, 4px);
233
233
  border-start-end-radius: var(--border-radius-badge-0z09dt, 4px);
234
234
  border-end-start-radius: var(--border-radius-badge-0z09dt, 4px);
235
235
  border-end-end-radius: var(--border-radius-badge-0z09dt, 4px);
236
236
  }
237
237
 
238
- .awsui_inline-token-hidden-placeholder_dwuol_etz7p_236:not(#\9) {
238
+ .awsui_inline-token-hidden-placeholder_dwuol_ti6bo_236:not(#\9) {
239
239
  position: absolute !important;
240
240
  inset-block-start: -9999px !important;
241
241
  inset-inline-start: -9999px !important;
242
242
  }
243
243
 
244
- .awsui_inline-token-counter_dwuol_etz7p_242:not(#\9) {
244
+ .awsui_inline-token-counter_dwuol_ti6bo_242:not(#\9) {
245
245
  white-space: nowrap;
246
246
  }
247
247
 
248
- .awsui_inline-token-trigger--disabled_dwuol_etz7p_246 > .awsui_inline-token-list_dwuol_etz7p_199 > .awsui_inline-token_dwuol_etz7p_192:not(#\9) {
248
+ .awsui_inline-token-trigger--disabled_dwuol_ti6bo_246 > .awsui_inline-token-list_dwuol_ti6bo_199 > .awsui_inline-token_dwuol_ti6bo_192:not(#\9) {
249
249
  border-color: var(--color-border-control-disabled-qc5csz, #dedee3);
250
250
  background-color: var(--color-background-container-content-z79u4u, #ffffff);
251
251
  color: var(--color-text-disabled-e4vsj4, #b4b4bb);
252
252
  }
253
253
 
254
- .awsui_inline-label-trigger-wrapper_dwuol_etz7p_252:not(#\9) {
254
+ .awsui_inline-label-trigger-wrapper_dwuol_ti6bo_252:not(#\9) {
255
255
  margin-block-start: -7px;
256
256
  }
257
257
 
258
- .awsui_inline-label-wrapper_dwuol_etz7p_256:not(#\9) {
258
+ .awsui_inline-label-wrapper_dwuol_ti6bo_256:not(#\9) {
259
259
  margin-block-start: calc(var(--space-scaled-xs-26e2du, 8px) * -1);
260
260
  }
261
261
 
262
- .awsui_inline-label_dwuol_etz7p_252:not(#\9) {
263
- background-image: linear-gradient(to bottom, transparent calc(100% - (var(--border-width-field-h1g7tw, 2px) + var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) + 5px)), var(--color-background-input-default-u56ls1, #ffffff) 1px);
264
- background-position: bottom;
262
+ .awsui_inline-label_dwuol_ti6bo_252:not(#\9) {
263
+ background: var(--color-background-container-header-clzg6q, #ffffff);
264
+ border-start-start-radius: 2px;
265
+ border-start-end-radius: 2px;
266
+ border-end-start-radius: 2px;
267
+ border-end-end-radius: 2px;
265
268
  box-sizing: border-box;
266
269
  display: inline-block;
267
270
  color: var(--color-text-form-label-5nbxa6, #0f141a);
@@ -277,14 +280,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
277
280
  max-inline-size: calc(100% - 2 * var(--space-field-horizontal-gg19kw, 12px));
278
281
  z-index: 1;
279
282
  }
280
- .awsui_inline-label_dwuol_etz7p_252.awsui_inline-label-disabled_dwuol_etz7p_278:not(#\9) {
281
- background: var(--color-background-container-header-clzg6q, #ffffff);
282
- border-start-start-radius: 2px;
283
- border-start-end-radius: 2px;
284
- border-end-start-radius: 2px;
285
- border-end-end-radius: 2px;
286
- }
287
283
 
288
- .awsui_disabled-reason-tooltip_dwuol_etz7p_286:not(#\9) {
284
+ .awsui_disabled-reason-tooltip_dwuol_ti6bo_282:not(#\9) {
289
285
  /* used in test-utils or tests */
290
286
  }
@@ -2,26 +2,25 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "placeholder": "awsui_placeholder_dwuol_etz7p_145",
6
- "item": "awsui_item_dwuol_etz7p_150",
7
- "checkbox": "awsui_checkbox_dwuol_etz7p_154",
8
- "filter": "awsui_filter_dwuol_etz7p_163",
9
- "trigger": "awsui_trigger_dwuol_etz7p_168",
10
- "layout-strut": "awsui_layout-strut_dwuol_etz7p_174",
11
- "list-bottom": "awsui_list-bottom_dwuol_etz7p_180",
12
- "selected-icon": "awsui_selected-icon_dwuol_etz7p_184",
13
- "show-label-tag": "awsui_show-label-tag_dwuol_etz7p_188",
14
- "inline-token-trigger": "awsui_inline-token-trigger_dwuol_etz7p_192",
15
- "inline-token-list": "awsui_inline-token-list_dwuol_etz7p_199",
16
- "inline-token": "awsui_inline-token_dwuol_etz7p_192",
17
- "visual-refresh": "awsui_visual-refresh_dwuol_etz7p_229",
18
- "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_etz7p_236",
19
- "inline-token-counter": "awsui_inline-token-counter_dwuol_etz7p_242",
20
- "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_etz7p_246",
21
- "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_etz7p_252",
22
- "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_etz7p_256",
23
- "inline-label": "awsui_inline-label_dwuol_etz7p_252",
24
- "inline-label-disabled": "awsui_inline-label-disabled_dwuol_etz7p_278",
25
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_etz7p_286"
5
+ "placeholder": "awsui_placeholder_dwuol_ti6bo_145",
6
+ "item": "awsui_item_dwuol_ti6bo_150",
7
+ "checkbox": "awsui_checkbox_dwuol_ti6bo_154",
8
+ "filter": "awsui_filter_dwuol_ti6bo_163",
9
+ "trigger": "awsui_trigger_dwuol_ti6bo_168",
10
+ "layout-strut": "awsui_layout-strut_dwuol_ti6bo_174",
11
+ "list-bottom": "awsui_list-bottom_dwuol_ti6bo_180",
12
+ "selected-icon": "awsui_selected-icon_dwuol_ti6bo_184",
13
+ "show-label-tag": "awsui_show-label-tag_dwuol_ti6bo_188",
14
+ "inline-token-trigger": "awsui_inline-token-trigger_dwuol_ti6bo_192",
15
+ "inline-token-list": "awsui_inline-token-list_dwuol_ti6bo_199",
16
+ "inline-token": "awsui_inline-token_dwuol_ti6bo_192",
17
+ "visual-refresh": "awsui_visual-refresh_dwuol_ti6bo_229",
18
+ "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_ti6bo_236",
19
+ "inline-token-counter": "awsui_inline-token-counter_dwuol_ti6bo_242",
20
+ "inline-token-trigger--disabled": "awsui_inline-token-trigger--disabled_dwuol_ti6bo_246",
21
+ "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_ti6bo_252",
22
+ "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_ti6bo_256",
23
+ "inline-label": "awsui_inline-label_dwuol_ti6bo_252",
24
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_ti6bo_282"
26
25
  };
27
26
 
@@ -1 +1 @@
1
- {"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAK5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACnD;AAED,QAAA,MAAM,OAAO,wFAiHZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAK5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC;IAC9E,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACnD;AAED,QAAA,MAAM,OAAO,wFA8GZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -44,7 +44,7 @@ const Trigger = React.forwardRef(({ ariaLabelledby, ariaDescribedby, controlId,
44
44
  const mergedRef = useMergeRefs(triggerProps.ref, ref);
45
45
  const triggerButton = (React.createElement(ButtonTrigger, Object.assign({}, triggerProps, { id: id, ref: mergedRef, pressed: !!isOpen, disabled: disabled, readOnly: readOnly, invalid: invalid, warning: warning && !invalid, inFilteringToken: inFilteringToken, inlineTokens: triggerVariant === 'tokens', ariaDescribedby: ariaDescribedby, ariaLabelledby: ariaLabelledbyIds }), triggerContent));
46
46
  return (React.createElement(React.Fragment, null, inlineLabelText ? (React.createElement("div", { className: styles['inline-label-wrapper'] },
47
- React.createElement("label", { htmlFor: controlId, className: clsx(styles['inline-label'], disabled && styles['inline-label-disabled']) }, inlineLabelText),
47
+ React.createElement("label", { htmlFor: controlId, className: styles['inline-label'] }, inlineLabelText),
48
48
  React.createElement("div", { className: styles['inline-label-trigger-wrapper'] }, triggerButton))) : (React.createElement(React.Fragment, null, triggerButton))));
49
49
  });
50
50
  export default Trigger;
@@ -1 +1 @@
1
- {"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAerC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,CACE,EACE,cAAc,EACd,eAAe,EACf,SAAS,EACT,OAAO,EACP,eAAe,EACf,OAAO,EACP,YAAY,EACZ,cAAc,EACd,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,QAAQ,EACR,QAAQ,GACK,EACf,GAAiC,EACjC,EAAE;IACF,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,WAAW,EAAE,CAAC;IAClC,MAAM,EAAE,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,WAAW,CAAC;IACpC,MAAM,gBAAgB,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAEzD,IAAI,iBAAiB,GAAG,WAAW,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAEtE,IAAI,cAAc,GAAG,IAAI,CAAC;IAC1B,IAAI,cAAc,KAAK,QAAQ,EAAE;QAC/B,IAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAAE;YAC3B,cAAc,GAAG,CACf,8BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,sBAAsB,CAAC,EAC9B,QAAQ,IAAI,MAAM,CAAC,gCAAgC,CAAC,EACpD,eAAe,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAC5C;gBAED,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IACzC,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACrC,8BAAM,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,IAC5C,KAAK,CACD,CACR,CAAC,CACG;gBACP,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,EAAE,gBAAgB;oBACnE,8BAAM,SAAS,EAAE,MAAM,CAAC,iCAAiC,CAAC,IAAG,WAAW,CAAQ;oBAChF;;wBAAQ,eAAe,CAAC,MAAM;4BAAS,CAClC,CACF,CACR,CAAC;YACF,iBAAiB,GAAG,cAAc,CAAC;SACpC;aAAM;YACL,cAAc,GAAG,CACf,+CAAoB,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,gBAAgB,IACjG,WAAW,CACP,CACR,CAAC;SACH;KACF;SAAM,IAAI,CAAC,cAAc,EAAE;QAC1B,cAAc,GAAG,CACf,+CAAoB,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,gBAAgB,IACjG,WAAW,CACP,CACR,CAAC;KACH;SAAM,IAAI,cAAc,KAAK,QAAQ,EAAE;QACtC,cAAc,GAAG,oBAAC,MAAM,IAAC,EAAE,EAAE,gBAAgB,EAAE,MAAM,kCAAO,cAAc,KAAE,QAAQ,KAAI,cAAc,EAAE,IAAI,GAAI,CAAC;KAClH;SAAM;QACL,cAAc,GAAG,CACf,8BAAM,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAClD,cAAc,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACxC,CACR,CAAC;KACH;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,CACpB,oBAAC,aAAa,oBACR,YAAY,IAChB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,MAAM,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,IAAI,CAAC,OAAO,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,cAAc,KAAK,QAAQ,EACzC,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,iBAAiB,KAEhC,cAAc,CACD,CACjB,CAAC;IACF,OAAO,CACL,0CACG,eAAe,CAAC,CAAC,CAAC,CACjB,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QAC5C,+BACE,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAEnF,eAAe,CACV;QACR,6BAAK,SAAS,EAAE,MAAM,CAAC,8BAA8B,CAAC,IAAG,aAAa,CAAO,CACzE,CACP,CAAC,CAAC,CAAC,CACF,0CAAG,aAAa,CAAI,CACrB,CACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport Option from '../../internal/components/option';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport { SelectProps } from '../interfaces';\nimport { SelectTriggerProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n placeholder: string | undefined;\n disabled: boolean | undefined;\n readOnly?: boolean;\n triggerProps: SelectTriggerProps;\n selectedOption: OptionDefinition | null;\n inlineLabelText?: string;\n isOpen?: boolean;\n triggerVariant?: SelectProps.TriggerVariant | MultiselectProps.TriggerVariant;\n inFilteringToken?: 'root' | 'nested';\n selectedOptions?: ReadonlyArray<OptionDefinition>;\n}\n\nconst Trigger = React.forwardRef(\n (\n {\n ariaLabelledby,\n ariaDescribedby,\n controlId,\n invalid,\n inlineLabelText,\n warning,\n triggerProps,\n selectedOption,\n selectedOptions,\n triggerVariant,\n inFilteringToken,\n isOpen,\n placeholder,\n disabled,\n readOnly,\n }: TriggerProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n const generatedId = useUniqueId();\n const id = controlId ?? generatedId;\n const triggerContentId = useUniqueId('trigger-content-');\n\n let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);\n\n let triggerContent = null;\n if (triggerVariant === 'tokens') {\n if (selectedOptions?.length) {\n triggerContent = (\n <span\n className={clsx(\n styles['inline-token-trigger'],\n disabled && styles['inline-token-trigger--disabled'],\n isVisualRefresh && styles['visual-refresh']\n )}\n >\n <span className={styles['inline-token-list']}>\n {selectedOptions.map(({ label }, i) => (\n <span key={i} className={styles['inline-token']}>\n {label}\n </span>\n ))}\n </span>\n <span className={styles['inline-token-counter']} id={triggerContentId}>\n <span className={styles['inline-token-hidden-placeholder']}>{placeholder}</span>\n <span>({selectedOptions.length})</span>\n </span>\n </span>\n );\n ariaLabelledbyIds = ariaLabelledby;\n } else {\n triggerContent = (\n <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n {placeholder}\n </span>\n );\n }\n } else if (!selectedOption) {\n triggerContent = (\n <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n {placeholder}\n </span>\n );\n } else if (triggerVariant === 'option') {\n triggerContent = <Option id={triggerContentId} option={{ ...selectedOption, disabled }} triggerVariant={true} />;\n } else {\n triggerContent = (\n <span id={triggerContentId} className={styles.trigger}>\n {selectedOption.label || selectedOption.value}\n </span>\n );\n }\n\n const mergedRef = useMergeRefs(triggerProps.ref, ref);\n const triggerButton = (\n <ButtonTrigger\n {...triggerProps}\n id={id}\n ref={mergedRef}\n pressed={!!isOpen}\n disabled={disabled}\n readOnly={readOnly}\n invalid={invalid}\n warning={warning && !invalid}\n inFilteringToken={inFilteringToken}\n inlineTokens={triggerVariant === 'tokens'}\n ariaDescribedby={ariaDescribedby}\n ariaLabelledby={ariaLabelledbyIds}\n >\n {triggerContent}\n </ButtonTrigger>\n );\n return (\n <>\n {inlineLabelText ? (\n <div className={styles['inline-label-wrapper']}>\n <label\n htmlFor={controlId}\n className={clsx(styles['inline-label'], disabled && styles['inline-label-disabled'])}\n >\n {inlineLabelText}\n </label>\n <div className={styles['inline-label-trigger-wrapper']}>{triggerButton}</div>\n </div>\n ) : (\n <>{triggerButton}</>\n )}\n </>\n );\n }\n);\n\nexport default Trigger;\n"]}
1
+ {"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport Option from '../../internal/components/option';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport { SelectProps } from '../interfaces';\nimport { SelectTriggerProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n placeholder: string | undefined;\n disabled: boolean | undefined;\n readOnly?: boolean;\n triggerProps: SelectTriggerProps;\n selectedOption: OptionDefinition | null;\n inlineLabelText?: string;\n isOpen?: boolean;\n triggerVariant?: SelectProps.TriggerVariant | MultiselectProps.TriggerVariant;\n inFilteringToken?: 'root' | 'nested';\n selectedOptions?: ReadonlyArray<OptionDefinition>;\n}\n\nconst Trigger = React.forwardRef(\n (\n {\n ariaLabelledby,\n ariaDescribedby,\n controlId,\n invalid,\n inlineLabelText,\n warning,\n triggerProps,\n selectedOption,\n selectedOptions,\n triggerVariant,\n inFilteringToken,\n isOpen,\n placeholder,\n disabled,\n readOnly,\n }: TriggerProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n const generatedId = useUniqueId();\n const id = controlId ?? generatedId;\n const triggerContentId = useUniqueId('trigger-content-');\n\n let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);\n\n let triggerContent = null;\n if (triggerVariant === 'tokens') {\n if (selectedOptions?.length) {\n triggerContent = (\n <span\n className={clsx(\n styles['inline-token-trigger'],\n disabled && styles['inline-token-trigger--disabled'],\n isVisualRefresh && styles['visual-refresh']\n )}\n >\n <span className={styles['inline-token-list']}>\n {selectedOptions.map(({ label }, i) => (\n <span key={i} className={styles['inline-token']}>\n {label}\n </span>\n ))}\n </span>\n <span className={styles['inline-token-counter']} id={triggerContentId}>\n <span className={styles['inline-token-hidden-placeholder']}>{placeholder}</span>\n <span>({selectedOptions.length})</span>\n </span>\n </span>\n );\n ariaLabelledbyIds = ariaLabelledby;\n } else {\n triggerContent = (\n <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n {placeholder}\n </span>\n );\n }\n } else if (!selectedOption) {\n triggerContent = (\n <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n {placeholder}\n </span>\n );\n } else if (triggerVariant === 'option') {\n triggerContent = <Option id={triggerContentId} option={{ ...selectedOption, disabled }} triggerVariant={true} />;\n } else {\n triggerContent = (\n <span id={triggerContentId} className={styles.trigger}>\n {selectedOption.label || selectedOption.value}\n </span>\n );\n }\n\n const mergedRef = useMergeRefs(triggerProps.ref, ref);\n const triggerButton = (\n <ButtonTrigger\n {...triggerProps}\n id={id}\n ref={mergedRef}\n pressed={!!isOpen}\n disabled={disabled}\n readOnly={readOnly}\n invalid={invalid}\n warning={warning && !invalid}\n inFilteringToken={inFilteringToken}\n inlineTokens={triggerVariant === 'tokens'}\n ariaDescribedby={ariaDescribedby}\n ariaLabelledby={ariaLabelledbyIds}\n >\n {triggerContent}\n </ButtonTrigger>\n );\n return (\n <>\n {inlineLabelText ? (\n <div className={styles['inline-label-wrapper']}>\n <label htmlFor={controlId} className={styles['inline-label']}>\n {inlineLabelText}\n </label>\n <div className={styles['inline-label-trigger-wrapper']}>{triggerButton}</div>\n </div>\n ) : (\n <>{triggerButton}</>\n )}\n </>\n );\n }\n);\n\nexport default Trigger;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAQpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AA2G/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;;AA0H/C,wBAAuC"}
@@ -6,6 +6,8 @@ import OptionsList from '../../internal/components/options-list';
6
6
  import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
7
7
  import { useVirtual } from '../../internal/hooks/use-virtual';
8
8
  import { renderOptions } from '../utils/render-options';
9
+ import customScrollToIndex from '../utils/scroll-to-index';
10
+ import { fallbackItemHeight } from './common';
9
11
  import styles from './styles.css.js';
10
12
  const VirtualList = (props, ref) => {
11
13
  return props.menuProps.open ? React.createElement(VirtualListOpen, Object.assign({}, props, { ref: ref })) : React.createElement(VirtualListClosed, Object.assign({}, props, { ref: ref }));
@@ -15,6 +17,7 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
15
17
  const [width, menuMeasureRef] = useContainerQuery(rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }), []);
16
18
  const menuRefObject = useRef(null);
17
19
  const menuRef = useMergeRefs(menuMeasureRef, menuRefObject, menuProps.ref);
20
+ const previousHighlightedIndex = useRef();
18
21
  const { virtualItems, totalSize, scrollToIndex } = useVirtual({
19
22
  items: filteredOptions,
20
23
  parentRef: menuRefObject,
@@ -23,17 +26,32 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
23
26
  // 1: because the component got resized (width property got updated)
24
27
  // 2: because the option changed its content (filteringValue property controls the highlight and the visibility of hidden tags)
25
28
  // eslint-disable-next-line react-hooks/exhaustive-deps
26
- estimateSize: useCallback(() => 31, [width === null || width === void 0 ? void 0 : width.inner, filteringValue]),
29
+ estimateSize: useCallback(() => fallbackItemHeight, [width === null || width === void 0 ? void 0 : width.inner, filteringValue]),
27
30
  firstItemSticky: firstOptionSticky,
28
31
  });
29
32
  useImperativeHandle(ref, () => (index) => {
30
- const isSticky = index === 0 && firstOptionSticky;
31
- if (highlightType.moveFocus && !isSticky) {
32
- scrollToIndex(index);
33
+ if (highlightType.moveFocus) {
34
+ const movingUp = previousHighlightedIndex.current !== undefined && index < previousHighlightedIndex.current;
35
+ if (firstOptionSticky && movingUp && index !== 0 && menuRefObject.current) {
36
+ // React-Virtual v2 does not offer a proper way to handle sticky elements when scrolling,
37
+ // so until we upgrade to v3, use our own scroll implementation
38
+ // to prevent newly highlighted element from being covered by the sticky element
39
+ // when moving the highlight upwards in the list.
40
+ // Scrolling behavior is covered by integration tests.
41
+ // istanbul ignore next
42
+ customScrollToIndex({
43
+ index,
44
+ menuEl: menuRefObject === null || menuRefObject === void 0 ? void 0 : menuRefObject.current,
45
+ });
46
+ }
47
+ else {
48
+ scrollToIndex(index);
49
+ }
33
50
  }
34
- }, [highlightType, scrollToIndex, firstOptionSticky]);
51
+ previousHighlightedIndex.current = index;
52
+ }, [firstOptionSticky, highlightType.moveFocus, scrollToIndex]);
35
53
  const stickySize = firstOptionSticky ? virtualItems[0].size : 0;
36
- const hasScrollbar = !!width && width.inner < width.outer;
54
+ const withScrollbar = !!width && width.inner < width.outer;
37
55
  const finalOptions = renderOptions({
38
56
  options: virtualItems.map(({ index }) => filteredOptions[index]),
39
57
  getOptionProps,
@@ -44,11 +62,10 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
44
62
  virtualItems,
45
63
  useInteractiveGroups,
46
64
  screenReaderContent,
47
- ariaSetsize: filteredOptions.length,
48
- withScrollbar: hasScrollbar,
49
65
  firstOptionSticky,
66
+ withScrollbar,
50
67
  });
51
- return (React.createElement(OptionsList, Object.assign({}, menuProps, { ref: menuRef }),
68
+ return (React.createElement(OptionsList, Object.assign({}, menuProps, { stickyItemBlockSize: stickySize, ref: menuRef }),
52
69
  finalOptions,
53
70
  React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: totalSize - stickySize } }),
54
71
  listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
@@ -1 +1 @@
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';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { useVirtual } from '../../internal/hooks/use-virtual';\nimport { renderOptions } from '../utils/render-options';\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 { 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(() => 31, [width?.inner, filteringValue]),\n firstItemSticky: firstOptionSticky,\n });\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n const isSticky = index === 0 && firstOptionSticky;\n if (highlightType.moveFocus && !isSticky) {\n scrollToIndex(index);\n }\n },\n [highlightType, scrollToIndex, firstOptionSticky]\n );\n\n const stickySize = firstOptionSticky ? virtualItems[0].size : 0;\n const hasScrollbar = !!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 ariaSetsize: filteredOptions.length,\n withScrollbar: hasScrollbar,\n firstOptionSticky,\n });\n\n return (\n <OptionsList {...menuProps} 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';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\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,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { DropdownOption } from '../../internal/components/option/interfaces';
3
3
  import { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';
4
4
  import { VirtualItem } from '../../internal/vendor/react-virtual';
@@ -13,9 +13,10 @@ interface RenderOptionProps {
13
13
  useInteractiveGroups?: boolean;
14
14
  screenReaderContent?: string;
15
15
  ariaSetsize?: number;
16
- withScrollbar?: boolean;
16
+ withScrollbar: boolean;
17
17
  firstOptionSticky?: boolean;
18
+ stickyOptionRef?: React.Ref<HTMLDivElement>;
18
19
  }
19
- export declare const renderOptions: ({ options, getOptionProps, filteringValue, highlightType, checkboxes, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, }: RenderOptionProps) => JSX.Element[];
20
+ export declare const renderOptions: ({ options, getOptionProps, filteringValue, highlightType, checkboxes, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }: RenderOptionProps) => JSX.Element[];
20
21
  export {};
21
22
  //# sourceMappingURL=render-options.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":";AAIA,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,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,uMAavB,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;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"}
@@ -2,9 +2,9 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import Item from '../parts/item';
5
- import MutliselectItem from '../parts/multiselect-item';
5
+ import MultiselectItem from '../parts/multiselect-item';
6
6
  import { getItemProps } from './get-item-props';
7
- export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, }) => {
7
+ export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }) => {
8
8
  return options.map((option, index) => {
9
9
  const virtualItem = virtualItems && virtualItems[index];
10
10
  const globalIndex = virtualItem ? virtualItem.index : index;
@@ -12,14 +12,14 @@ export const renderOptions = ({ options, getOptionProps, filteringValue, highlig
12
12
  option,
13
13
  index: globalIndex,
14
14
  getOptionProps,
15
- filteringValue,
15
+ filteringValue: option.type === 'select-all' ? '' : filteringValue,
16
16
  checkboxes,
17
17
  });
18
18
  const isLastItem = index === options.length - 1;
19
19
  const padBottom = !hasDropdownStatus && isLastItem;
20
- const ListItem = useInteractiveGroups ? MutliselectItem : Item;
20
+ const ListItem = useInteractiveGroups ? MultiselectItem : Item;
21
21
  const isSticky = firstOptionSticky && globalIndex === 0;
22
- return (React.createElement(ListItem, Object.assign({ key: globalIndex }, props, { virtualPosition: !isSticky && virtualItem && virtualItem.start, ref: virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky })));
22
+ 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 })));
23
23
  });
24
24
  };
25
25
  //# sourceMappingURL=render-options.js.map
@@ -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;AAiBhD,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,GACC,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;YACd,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,CAAC,QAAQ,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAC9D,GAAG,EAAE,WAAW,IAAI,WAAW,CAAC,UAAU,EAC1C,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 MutliselectItem 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}\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}: 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,\n checkboxes,\n });\n\n const isLastItem = index === options.length - 1;\n const padBottom = !hasDropdownStatus && isLastItem;\n const ListItem = useInteractiveGroups ? MutliselectItem : Item;\n const isSticky = firstOptionSticky && globalIndex === 0;\n\n return (\n <ListItem\n key={globalIndex}\n {...props}\n virtualPosition={!isSticky && virtualItem && virtualItem.start}\n ref={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":"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"]}
@@ -0,0 +1,5 @@
1
+ export default function ({ index, menuEl }: {
2
+ index: number;
3
+ menuEl: HTMLElement;
4
+ }): void;
5
+ //# sourceMappingURL=scroll-to-index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll-to-index.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/scroll-to-index.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,QAUjF"}
@@ -0,0 +1,14 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
4
+ export default function ({ index, menuEl }) {
5
+ const item = menuEl.querySelector(`[data-mouse-target="${index}"]`);
6
+ if (item) {
7
+ // In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318
8
+ if (menuEl.clientHeight !== undefined && menuEl.clientHeight > 15) {
9
+ /* istanbul ignore next: clientHeight always returns 0 in JSDOM, the line is covered by integ tests */
10
+ scrollElementIntoView(item);
11
+ }
12
+ }
13
+ }
14
+ //# sourceMappingURL=scroll-to-index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll-to-index.js","sourceRoot":"","sources":["../../../../src/select/utils/scroll-to-index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AAEnF,MAAM,CAAC,OAAO,WAAW,EAAE,KAAK,EAAE,MAAM,EAA0C;IAChF,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAc,uBAAuB,KAAK,IAAI,CAAC,CAAC;IAEjF,IAAI,IAAI,EAAE;QACR,uFAAuF;QACvF,IAAI,MAAM,CAAC,YAAY,KAAK,SAAS,IAAI,MAAM,CAAC,YAAY,GAAG,EAAE,EAAE;YACjE,sGAAsG;YACtG,qBAAqB,CAAC,IAAI,CAAC,CAAC;SAC7B;KACF;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\n\nexport default function ({ index, menuEl }: { index: number; menuEl: HTMLElement }) {\n const item = menuEl.querySelector<HTMLElement>(`[data-mouse-target=\"${index}\"]`);\n\n if (item) {\n // In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318\n if (menuEl.clientHeight !== undefined && menuEl.clientHeight > 15) {\n /* istanbul ignore next: clientHeight always returns 0 in JSDOM, the line is covered by integ tests */\n scrollElementIntoView(item);\n }\n }\n}\n"]}
@@ -25,11 +25,14 @@ interface UseSelectProps {
25
25
  setFilteringValue?: (filteringText: string) => void;
26
26
  useInteractiveGroups?: boolean;
27
27
  statusType: DropdownStatusProps.StatusType;
28
+ isAllSelected?: boolean;
29
+ isSomeSelected?: boolean;
30
+ toggleAll?: () => void;
28
31
  }
29
32
  export interface SelectTriggerProps extends ButtonTriggerProps {
30
33
  ref: RefObject<HTMLButtonElement>;
31
34
  }
32
- export declare function useSelect({ selectedOptions, updateSelectedOption, options, filteringType, onBlur, onFocus, externalRef, keepOpen, embedded, fireLoadItems, setFilteringValue, useInteractiveGroups, statusType, }: UseSelectProps): {
35
+ export declare function useSelect({ selectedOptions, updateSelectedOption, options, filteringType, onBlur, onFocus, externalRef, keepOpen, embedded, fireLoadItems, setFilteringValue, useInteractiveGroups, statusType, isAllSelected, isSomeSelected, toggleAll, }: UseSelectProps): {
33
36
  isOpen: boolean;
34
37
  highlightedOption: DropdownOption | undefined;
35
38
  highlightedIndex: number;