@cloudscape-design/components 3.0.928 → 3.0.929
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/components/option/interfaces.d.ts +1 -0
- package/internal/components/option/interfaces.d.ts.map +1 -1
- package/internal/components/option/interfaces.js.map +1 -1
- package/internal/components/option/utils/filter-options.d.ts.map +1 -1
- package/internal/components/option/utils/filter-options.js +1 -1
- package/internal/components/option/utils/filter-options.js.map +1 -1
- package/internal/components/option/utils/flatten-options.d.ts.map +1 -1
- package/internal/components/option/utils/flatten-options.js +2 -1
- package/internal/components/option/utils/flatten-options.js.map +1 -1
- package/internal/components/selectable-item/index.d.ts.map +1 -1
- package/internal/components/selectable-item/index.js +5 -2
- package/internal/components/selectable-item/index.js.map +1 -1
- package/internal/components/selectable-item/interfaces.d.ts +3 -0
- package/internal/components/selectable-item/interfaces.d.ts.map +1 -1
- package/internal/components/selectable-item/interfaces.js.map +1 -1
- package/internal/components/selectable-item/styles.css.js +19 -16
- package/internal/components/selectable-item/styles.scoped.css +62 -29
- package/internal/components/selectable-item/styles.selectors.js +19 -16
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/hooks/use-virtual/index.d.ts +2 -1
- package/internal/hooks/use-virtual/index.d.ts.map +1 -1
- package/internal/hooks/use-virtual/index.js +9 -2
- package/internal/hooks/use-virtual/index.js.map +1 -1
- package/internal/hooks/use-virtual/sticky-range-extractor.d.ts +9 -0
- package/internal/hooks/use-virtual/sticky-range-extractor.d.ts.map +1 -0
- package/internal/hooks/use-virtual/sticky-range-extractor.js +8 -0
- package/internal/hooks/use-virtual/sticky-range-extractor.js.map +1 -0
- package/internal/manifest.json +1 -1
- package/internal/vendor/react-virtual.js +1 -1
- package/package.json +1 -1
- package/select/parts/item.d.ts +2 -0
- package/select/parts/item.d.ts.map +1 -1
- package/select/parts/item.js +2 -2
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.d.ts.map +1 -1
- package/select/parts/multiselect-item.js +2 -2
- package/select/parts/multiselect-item.js.map +1 -1
- package/select/parts/plain-list.d.ts +1 -0
- package/select/parts/plain-list.d.ts.map +1 -1
- package/select/parts/plain-list.js +9 -2
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/virtual-list.d.ts.map +1 -1
- package/select/parts/virtual-list.js +12 -6
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/render-options.d.ts +3 -1
- package/select/utils/render-options.d.ts.map +1 -1
- package/select/utils/render-options.js +3 -2
- package/select/utils/render-options.js.map +1 -1
- package/table/interfaces.d.ts +4 -1
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +10 -7
- package/table/internal.js.map +1 -1
- package/table/use-cell-editing.d.ts +4 -4
- package/table/use-cell-editing.d.ts.map +1 -1
- package/table/use-cell-editing.js +2 -2
- package/table/use-cell-editing.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/option/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,OAAO,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,gBAAgB,GAAG,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/option/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,OAAO,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,gBAAgB,GAAG,WAAW,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport { BaseComponentProps } from '../../base-component';\n\ninterface BaseOption {\n value?: string;\n label?: string;\n lang?: string;\n description?: string;\n disabled?: boolean;\n disabledReason?: string;\n labelTag?: string;\n tags?: ReadonlyArray<string>;\n filteringTags?: ReadonlyArray<string>;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n}\n\nexport interface OptionDefinition extends BaseOption {\n __labelPrefix?: string;\n}\n\ninterface InternalOptionDefinition extends OptionDefinition {\n __customIcon?: React.ReactNode;\n}\n\nexport interface OptionGroup extends BaseOption {\n options: ReadonlyArray<OptionDefinition>;\n}\n\nexport interface DropdownOption {\n type?: string;\n disabled?: boolean;\n disabledReason?: string;\n option: OptionDefinition | OptionGroup;\n}\n\nexport interface OptionProps extends BaseComponentProps {\n option?: InternalOptionDefinition;\n triggerVariant?: boolean;\n highlightText?: string;\n highlightedOption?: boolean;\n selectedOption?: boolean;\n isGroupOption?: boolean;\n isGenericGroup?: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport { BaseComponentProps } from '../../base-component';\n\ninterface BaseOption {\n value?: string;\n label?: string;\n lang?: string;\n description?: string;\n disabled?: boolean;\n disabledReason?: string;\n labelTag?: string;\n tags?: ReadonlyArray<string>;\n filteringTags?: ReadonlyArray<string>;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n}\n\nexport interface OptionDefinition extends BaseOption {\n __labelPrefix?: string;\n}\n\ninterface InternalOptionDefinition extends OptionDefinition {\n __customIcon?: React.ReactNode;\n}\n\nexport interface OptionGroup extends BaseOption {\n options: ReadonlyArray<OptionDefinition>;\n}\n\nexport interface DropdownOption {\n type?: string;\n disabled?: boolean;\n disabledReason?: string;\n option: OptionDefinition | OptionGroup;\n afterHeader?: boolean;\n}\n\nexport interface OptionProps extends BaseComponentProps {\n option?: InternalOptionDefinition;\n triggerVariant?: boolean;\n highlightText?: string;\n highlightedOption?: boolean;\n selectedOption?: boolean;\n isGroupOption?: boolean;\n isGenericGroup?: boolean;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-options.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/filter-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO9E,eAAO,MAAM,aAAa,UAAW,MAAM,GAAG,SAAS,cAAc,MAAM,kBAAkB,OAAO,KAAG,OAMtG,CAAC;AAkBF,eAAO,MAAM,aAAa,YACf,cAAc,cAAc,CAAC,cAC1B,MAAM,+BAEjB,cAAc,cAAc,CAgC9B,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,cAAc,YAA6D,CAAC;AAEnH,eAAO,MAAM,kBAAkB,YAAa,cAAc,YAAiC,CAAC;AAE5F,eAAO,MAAM,OAAO,YAAa,gBAAgB,GAAG,WAAW,
|
|
1
|
+
{"version":3,"file":"filter-options.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/filter-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO9E,eAAO,MAAM,aAAa,UAAW,MAAM,GAAG,SAAS,cAAc,MAAM,kBAAkB,OAAO,KAAG,OAMtG,CAAC;AAkBF,eAAO,MAAM,aAAa,YACf,cAAc,cAAc,CAAC,cAC1B,MAAM,+BAEjB,cAAc,cAAc,CAgC9B,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,cAAc,YAA6D,CAAC;AAEnH,eAAO,MAAM,kBAAkB,YAAa,cAAc,YAAiC,CAAC;AAE5F,eAAO,MAAM,OAAO,YAAa,gBAAgB,GAAG,WAAW,0BACV,CAAC"}
|
|
@@ -52,5 +52,5 @@ export const filterOptions = (options, searchText, strictMatching = false) => {
|
|
|
52
52
|
};
|
|
53
53
|
export const isInteractive = (option) => !!option && !option.disabled && option.type !== 'parent';
|
|
54
54
|
export const isGroupInteractive = (option) => !!option && !option.disabled;
|
|
55
|
-
export const isGroup = (option) => !!option && 'options' in option;
|
|
55
|
+
export const isGroup = (option) => !!option && 'options' in option && !!option.options;
|
|
56
56
|
//# sourceMappingURL=filter-options.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-options.js","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/filter-options.ts"],"names":[],"mappings":"AAOA,MAAM,gBAAgB,GAAsB,CAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;AAE1F,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,UAAkB,EAAE,cAAuB,EAAW,EAAE;IAC/G,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACtD,OAAO,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,cAA8B,EAAE,IAAY,EAAE,cAAuB,EAAW,EAAE;IAC7G,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAEtC,MAAM,MAAM,GAAqB,cAAc,CAAC,MAAM,CAAC;IACvD,MAAM,eAAe,GAAG,CAAC,IAAqB,EAAE,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC;IAC3G,MAAM,gBAAgB,GAAG,CAAC,IAAwB,EAAE,EAAE,WACpD,OAAA,MAAA,MAAM,CAAC,IAAI,CAAC,0CAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAA,EAAA,CAAC;IAEhF,MAAM,mBAAmB,GAAyB,CAAC,MAAM,CAAC,CAAC;IAC3D,IAAI,CAAC,cAAc,EAAE;QACnB,mBAAmB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;IAED,OAAO,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAC9F,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,OAAsC,EACtC,UAAkB,EAClB,cAAc,GAAG,KAAK,EACS,EAAE;IACjC,IAAI,UAAU,KAAK,EAAE,EAAE;QACrB,OAAO,OAAO,CAAC;KAChB;IAED,IAAI,YAAY,GAA0B,IAAI,CAAC;IAC/C,IAAI,aAAa,GAAG,KAAK,CAAC;IAC1B,OAAO,OAAO,CAAC,MAAM,CAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACtD,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC5B,aAAa,GAAG,KAAK,CAAC;YACtB,YAAY,GAAG,MAAM,CAAC;YACtB,IAAI,mBAAmB,CAAC,MAAM,EAAE,UAAU,EAAE,cAAc,CAAC,EAAE;gBAC3D,aAAa,GAAG,IAAI,CAAC;gBACrB,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aACxB;YACD,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE;YAC3B,YAAY,GAAG,IAAI,CAAC;YACpB,aAAa,GAAG,KAAK,CAAC;SACvB;QACD,IAAI,aAAa,EAAE;YACjB,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAClB;aAAM,IAAI,mBAAmB,CAAC,MAAM,EAAE,UAAU,EAAE,cAAc,CAAC,EAAE;YAClE,IAAI,YAAY,EAAE;gBAChB,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACvB,YAAY,GAAG,IAAI,CAAC;aACrB;YACD,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAClB;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAuB,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;AAEnH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAuB,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;AAE5F,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,MAAuC,EAAyB,EAAE,CACxF,CAAC,CAAC,MAAM,IAAI,SAAS,IAAI,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../interfaces';\n\ntype SearchableField = 'value' | 'label' | 'description' | 'labelTag';\ntype SearchableTagField = 'tags' | 'filteringTags';\n\nconst searchableFields: SearchableField[] = ['value', 'label', 'description', 'labelTag'];\n\nexport const matchesString = (value: string | undefined, searchText: string, strictMatching: boolean): boolean => {\n if (!value) {\n return false;\n }\n const index = value.toLowerCase().indexOf(searchText);\n return strictMatching ? index === 0 : index > -1;\n};\n\nconst matchesSingleOption = (dropdownOption: DropdownOption, text: string, strictMatching: boolean): boolean => {\n const searchText = text.toLowerCase();\n\n const option: OptionDefinition = dropdownOption.option;\n const searchStrFields = (attr: SearchableField) => matchesString(option[attr], searchText, strictMatching);\n const searchTagsFields = (attr: SearchableTagField) =>\n option[attr]?.some(value => matchesString(value, searchText, strictMatching));\n\n const searchableTagFields: SearchableTagField[] = ['tags'];\n if (!strictMatching) {\n searchableTagFields.push('filteringTags');\n }\n\n return searchableFields.some(searchStrFields) || searchableTagFields.some(searchTagsFields);\n};\n\nexport const filterOptions = (\n options: ReadonlyArray<DropdownOption>,\n searchText: string,\n strictMatching = false\n): ReadonlyArray<DropdownOption> => {\n if (searchText === '') {\n return options;\n }\n\n let currentGroup: DropdownOption | null = null;\n let parentMatched = false;\n return options.reduce<DropdownOption[]>((acc, option) => {\n if (option.type === 'parent') {\n parentMatched = false;\n currentGroup = option;\n if (matchesSingleOption(option, searchText, strictMatching)) {\n parentMatched = true;\n acc.push(currentGroup);\n }\n return acc;\n }\n if (option.type !== 'child') {\n currentGroup = null;\n parentMatched = false;\n }\n if (parentMatched) {\n acc.push(option);\n } else if (matchesSingleOption(option, searchText, strictMatching)) {\n if (currentGroup) {\n acc.push(currentGroup);\n currentGroup = null;\n }\n acc.push(option);\n }\n return acc;\n }, []);\n};\n\nexport const isInteractive = (option?: DropdownOption) => !!option && !option.disabled && option.type !== 'parent';\n\nexport const isGroupInteractive = (option?: DropdownOption) => !!option && !option.disabled;\n\nexport const isGroup = (option?: OptionDefinition | OptionGroup): option is OptionGroup =>\n !!option && 'options' in option;\n"]}
|
|
1
|
+
{"version":3,"file":"filter-options.js","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/filter-options.ts"],"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 { DropdownOption, OptionDefinition, OptionGroup } from '../interfaces';\n\ntype SearchableField = 'value' | 'label' | 'description' | 'labelTag';\ntype SearchableTagField = 'tags' | 'filteringTags';\n\nconst searchableFields: SearchableField[] = ['value', 'label', 'description', 'labelTag'];\n\nexport const matchesString = (value: string | undefined, searchText: string, strictMatching: boolean): boolean => {\n if (!value) {\n return false;\n }\n const index = value.toLowerCase().indexOf(searchText);\n return strictMatching ? index === 0 : index > -1;\n};\n\nconst matchesSingleOption = (dropdownOption: DropdownOption, text: string, strictMatching: boolean): boolean => {\n const searchText = text.toLowerCase();\n\n const option: OptionDefinition = dropdownOption.option;\n const searchStrFields = (attr: SearchableField) => matchesString(option[attr], searchText, strictMatching);\n const searchTagsFields = (attr: SearchableTagField) =>\n option[attr]?.some(value => matchesString(value, searchText, strictMatching));\n\n const searchableTagFields: SearchableTagField[] = ['tags'];\n if (!strictMatching) {\n searchableTagFields.push('filteringTags');\n }\n\n return searchableFields.some(searchStrFields) || searchableTagFields.some(searchTagsFields);\n};\n\nexport const filterOptions = (\n options: ReadonlyArray<DropdownOption>,\n searchText: string,\n strictMatching = false\n): ReadonlyArray<DropdownOption> => {\n if (searchText === '') {\n return options;\n }\n\n let currentGroup: DropdownOption | null = null;\n let parentMatched = false;\n return options.reduce<DropdownOption[]>((acc, option) => {\n if (option.type === 'parent') {\n parentMatched = false;\n currentGroup = option;\n if (matchesSingleOption(option, searchText, strictMatching)) {\n parentMatched = true;\n acc.push(currentGroup);\n }\n return acc;\n }\n if (option.type !== 'child') {\n currentGroup = null;\n parentMatched = false;\n }\n if (parentMatched) {\n acc.push(option);\n } else if (matchesSingleOption(option, searchText, strictMatching)) {\n if (currentGroup) {\n acc.push(currentGroup);\n currentGroup = null;\n }\n acc.push(option);\n }\n return acc;\n }, []);\n};\n\nexport const isInteractive = (option?: DropdownOption) => !!option && !option.disabled && option.type !== 'parent';\n\nexport const isGroupInteractive = (option?: DropdownOption) => !!option && !option.disabled;\n\nexport const isGroup = (option?: OptionDefinition | OptionGroup): option is OptionGroup =>\n !!option && 'options' in option && !!option.options;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-options.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/flatten-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"flatten-options.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/flatten-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9E,eAAO,MAAM,cAAc,YAAa,cAAc,gBAAgB,GAAG,WAAW,CAAC;;;CAmCpF,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
+
import { isGroup } from './filter-options';
|
|
2
3
|
export const flattenOptions = (options) => {
|
|
3
4
|
const parentMap = new Map();
|
|
4
5
|
const flatOptions = options.reduce((acc, option) => {
|
|
5
|
-
if (
|
|
6
|
+
if (isGroup(option)) {
|
|
6
7
|
const { options } = option, rest = __rest(option, ["options"]);
|
|
7
8
|
const parentDropdownOption = { type: 'parent', option };
|
|
8
9
|
const allOptionsDisabled = options.every(option => option.disabled);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatten-options.js","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/flatten-options.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"flatten-options.js","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/flatten-options.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAsD,EAAE,EAAE;IACvF,MAAM,SAAS,GAAG,IAAI,GAAG,EAAkC,CAAC;IAE5D,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACnE,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;YACnB,MAAM,EAAE,OAAO,KAAc,MAAM,EAAf,IAAI,UAAK,MAAM,EAA7B,WAAoB,CAAS,CAAC;YACpC,MAAM,oBAAoB,GAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;YACxE,MAAM,kBAAkB,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACpE,IAAI,MAAM,CAAC,QAAQ,IAAI,kBAAkB,EAAE;gBACzC,oBAAoB,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtC;YACD,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAC/B,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,MAAM,mBAAmB,GAAmB,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;gBAC7E,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;oBACnC,mBAAmB,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACrC;gBACD,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;gBAC9B,SAAS,CAAC,GAAG,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,MAAM,cAAc,GAAmB,EAAE,MAAM,EAAE,CAAC;YAClD,IAAI,MAAM,CAAC,QAAQ,EAAE;gBACnB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;aAChC;YACD,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC1B;QAED,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,WAAW;QACX,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../interfaces';\nimport { isGroup } from './filter-options';\n\nexport const flattenOptions = (options: ReadonlyArray<OptionDefinition | OptionGroup>) => {\n const parentMap = new Map<DropdownOption, DropdownOption>();\n\n const flatOptions = options.reduce<DropdownOption[]>((acc, option) => {\n if (isGroup(option)) {\n const { options, ...rest } = option;\n const parentDropdownOption: DropdownOption = { type: 'parent', option };\n const allOptionsDisabled = options.every(option => option.disabled);\n if (option.disabled || allOptionsDisabled) {\n parentDropdownOption.disabled = true;\n }\n acc.push(parentDropdownOption);\n options.forEach(child => {\n const childDropdownOption: DropdownOption = { type: 'child', option: child };\n if (rest.disabled || child.disabled) {\n childDropdownOption.disabled = true;\n }\n acc.push(childDropdownOption);\n parentMap.set(childDropdownOption, parentDropdownOption);\n });\n } else {\n const dropdownOption: DropdownOption = { option };\n if (option.disabled) {\n dropdownOption.disabled = true;\n }\n acc.push(dropdownOption);\n }\n\n return acc;\n }, []);\n\n return {\n flatOptions,\n parentMap,\n };\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;;AAwH/B,wBAAgD"}
|
|
@@ -9,7 +9,7 @@ import { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';
|
|
|
9
9
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
const SelectableItem = (_a, ref) => {
|
|
12
|
-
var { children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, virtualPosition, padBottom, isNextSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value } = _a, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType", "value"]);
|
|
12
|
+
var { children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, virtualPosition, padBottom, isNextSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value, sticky, afterHeader, withScrollbar } = _a, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType", "value", "sticky", "afterHeader", "withScrollbar"]);
|
|
13
13
|
const _b = getBaseProps(restProps), { className } = _b, rest = __rest(_b, ["className"]);
|
|
14
14
|
const classNames = clsx(className, styles['selectable-item'], {
|
|
15
15
|
[styles.selected]: selected,
|
|
@@ -20,10 +20,13 @@ const SelectableItem = (_a, ref) => {
|
|
|
20
20
|
[styles.child]: isChild,
|
|
21
21
|
[styles['is-keyboard']]: highlightType === 'keyboard',
|
|
22
22
|
[styles.disabled]: disabled,
|
|
23
|
-
[styles.virtual]: virtualPosition !== undefined,
|
|
23
|
+
[styles.virtual]: virtualPosition !== undefined && !sticky,
|
|
24
24
|
[styles['pad-bottom']]: padBottom,
|
|
25
25
|
[styles['next-item-selected']]: isNextSelected,
|
|
26
26
|
[styles.interactiveGroups]: useInteractiveGroups,
|
|
27
|
+
[styles.sticky]: sticky,
|
|
28
|
+
[styles['after-header']]: !!afterHeader,
|
|
29
|
+
[styles['with-scrollbar']]: withScrollbar,
|
|
27
30
|
});
|
|
28
31
|
const contentRef = useRef(null);
|
|
29
32
|
const screenReaderContentRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,gCAAgC,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,cAAc,GAAG,CACrB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n {\n children: content,\n ariaSelected,\n ariaChecked,\n selected,\n highlighted,\n disabled,\n hasBackground,\n isParent,\n isChild,\n virtualPosition,\n padBottom,\n isNextSelected,\n useInteractiveGroups,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightType,\n value,\n sticky,\n afterHeader,\n withScrollbar,\n ...restProps\n }: SelectableItemProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const { className, ...rest } = getBaseProps(restProps);\n const classNames = clsx(className, styles['selectable-item'], {\n [styles.selected]: selected,\n [styles.highlighted]: highlighted,\n [styles['has-background']]: hasBackground,\n [styles.parent]: isParent,\n [analyticsSelectors.parent]: isParent,\n [styles.child]: isChild,\n [styles['is-keyboard']]: highlightType === 'keyboard',\n [styles.disabled]: disabled,\n [styles.virtual]: virtualPosition !== undefined && !sticky,\n [styles['pad-bottom']]: padBottom,\n [styles['next-item-selected']]: isNextSelected,\n [styles.interactiveGroups]: useInteractiveGroups,\n [styles.sticky]: sticky,\n [styles['after-header']]: !!afterHeader,\n [styles['with-scrollbar']]: withScrollbar,\n });\n\n const contentRef = useRef<HTMLDivElement>(null);\n const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n // the item which lost highlight\n // set aria-hidden true when there is announcement content, so that screen reader still announce\n // meaningful content when navigate with screen reader cursor\n // imperatively update to avoid announcement made multiple times when content updates\n if (highlighted && screenReaderContent) {\n if (contentRef.current) {\n contentRef.current.setAttribute('aria-hidden', 'true');\n }\n if (screenReaderContentRef.current) {\n screenReaderContentRef.current.textContent = screenReaderContent;\n }\n }\n }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n const style =\n virtualPosition !== undefined\n ? {\n transform: `translateY(${virtualPosition}px)`,\n }\n : undefined;\n\n const a11yProperties: Record<string, string | number | boolean | undefined> = {\n 'aria-disabled': disabled,\n };\n\n if (isParent && !useInteractiveGroups) {\n a11yProperties['aria-hidden'] = true;\n }\n\n if (ariaSelected !== undefined) {\n a11yProperties['aria-selected'] = ariaSelected;\n }\n\n // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n if (ariaChecked !== undefined) {\n a11yProperties['aria-checked'] = ariaChecked;\n }\n\n if (ariaPosinset && ariaSetsize) {\n a11yProperties['aria-posinset'] = ariaPosinset;\n a11yProperties['aria-setsize'] = ariaSetsize;\n }\n\n if (restProps.ariaDescribedby) {\n a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n }\n\n return (\n <li\n role=\"option\"\n className={classNames}\n style={style}\n {...a11yProperties}\n {...rest}\n {...(isParent || disabled\n ? {}\n : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n >\n <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n {content}\n </div>\n <div className={styles['measure-strut']} ref={ref} />\n <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n </li>\n );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
|
|
@@ -19,6 +19,9 @@ export type SelectableItemProps = BaseComponentProps & {
|
|
|
19
19
|
highlightType?: HighlightType['type'];
|
|
20
20
|
ariaDescribedby?: string;
|
|
21
21
|
value?: string;
|
|
22
|
+
sticky?: boolean;
|
|
23
|
+
afterHeader?: boolean;
|
|
24
|
+
withScrollbar?: boolean;
|
|
22
25
|
} & ({
|
|
23
26
|
ariaSelected?: boolean;
|
|
24
27
|
ariaChecked?: never;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC,CAAC;AAElH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option';\n\nexport type SelectableItemProps = BaseComponentProps & {\n children: React.ReactNode;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n highlightType?: HighlightType['type'];\n ariaDescribedby?: string;\n value?: string;\n} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });\n\nexport interface ItemDataAttributes {\n 'data-group-index'?: string;\n 'data-child-index'?: string;\n 'data-in-group-index'?: string;\n 'data-test-index'?: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option';\n\nexport type SelectableItemProps = BaseComponentProps & {\n children: React.ReactNode;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n highlightType?: HighlightType['type'];\n ariaDescribedby?: string;\n value?: string;\n sticky?: boolean;\n afterHeader?: boolean;\n withScrollbar?: boolean;\n} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });\n\nexport interface ItemDataAttributes {\n 'data-group-index'?: string;\n 'data-child-index'?: string;\n 'data-in-group-index'?: string;\n 'data-test-index'?: string;\n}\n"]}
|
|
@@ -1,21 +1,24 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"selectable-item": "awsui_selectable-
|
|
5
|
-
"pad-bottom": "awsui_pad-
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
4
|
+
"selectable-item": "awsui_selectable-item_15o6u_bg2ke_145",
|
|
5
|
+
"pad-bottom": "awsui_pad-bottom_15o6u_bg2ke_167",
|
|
6
|
+
"virtual": "awsui_virtual_15o6u_bg2ke_171",
|
|
7
|
+
"has-background": "awsui_has-background_15o6u_bg2ke_174",
|
|
8
|
+
"highlighted": "awsui_highlighted_15o6u_bg2ke_177",
|
|
9
|
+
"selected": "awsui_selected_15o6u_bg2ke_177",
|
|
10
|
+
"disabled": "awsui_disabled_15o6u_bg2ke_195",
|
|
11
|
+
"next-item-selected": "awsui_next-item-selected_15o6u_bg2ke_205",
|
|
12
|
+
"is-keyboard": "awsui_is-keyboard_15o6u_bg2ke_217",
|
|
13
|
+
"parent": "awsui_parent_15o6u_bg2ke_221",
|
|
14
|
+
"interactiveGroups": "awsui_interactiveGroups_15o6u_bg2ke_225",
|
|
15
|
+
"child": "awsui_child_15o6u_bg2ke_241",
|
|
16
|
+
"sticky": "awsui_sticky_15o6u_bg2ke_247",
|
|
17
|
+
"with-scrollbar": "awsui_with-scrollbar_15o6u_bg2ke_259",
|
|
18
|
+
"after-header": "awsui_after-header_15o6u_bg2ke_265",
|
|
19
|
+
"measure-strut": "awsui_measure-strut_15o6u_bg2ke_300",
|
|
20
|
+
"measure-strut-first": "awsui_measure-strut-first_15o6u_bg2ke_309",
|
|
21
|
+
"screenreader-content": "awsui_screenreader-content_15o6u_bg2ke_313",
|
|
22
|
+
"option-content": "awsui_option-content_15o6u_bg2ke_319"
|
|
20
23
|
};
|
|
21
24
|
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.awsui_selectable-
|
|
145
|
+
.awsui_selectable-item_15o6u_bg2ke_145:not(#\9) {
|
|
146
146
|
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
147
147
|
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
148
148
|
color: var(--color-text-body-default-7v1jfn, #0f141a);
|
|
@@ -164,17 +164,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
164
164
|
padding-block: calc(var(--space-xxs-p8yyaw, 4px) + var(--border-item-width-yel47s, 2px) - var(--border-divider-list-width-27y3k5, 1px));
|
|
165
165
|
padding-inline: calc(var(--space-field-horizontal-gg19kw, 12px) + var(--border-item-width-yel47s, 2px));
|
|
166
166
|
}
|
|
167
|
-
.awsui_selectable-
|
|
167
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_pad-bottom_15o6u_bg2ke_167:not(#\9) {
|
|
168
168
|
padding-block-end: calc(calc(var(--space-xxs-p8yyaw, 4px) + var(--border-item-width-yel47s, 2px) - var(--border-divider-list-width-27y3k5, 1px)) + var(--space-xxxs-zbmxqb, 2px));
|
|
169
169
|
border-block-end-color: transparent;
|
|
170
170
|
}
|
|
171
|
-
.awsui_selectable-
|
|
171
|
+
.awsui_selectable-item_15o6u_bg2ke_145:not(#\9):not(:first-child), .awsui_selectable-item_15o6u_bg2ke_145.awsui_virtual_15o6u_bg2ke_171:not(#\9) {
|
|
172
172
|
margin-block-start: calc(-1 * var(--border-item-width-yel47s, 2px));
|
|
173
173
|
}
|
|
174
|
-
.awsui_selectable-
|
|
174
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_has-background_15o6u_bg2ke_174:not(#\9) {
|
|
175
175
|
background-color: var(--color-background-dropdown-item-hover-zhzc84, #f3f3f7);
|
|
176
176
|
}
|
|
177
|
-
.awsui_selectable-
|
|
177
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_highlighted_15o6u_bg2ke_177:not(#\9), .awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177:not(#\9) {
|
|
178
178
|
color: var(--color-text-dropdown-item-highlighted-rnfxxj, #0f141a);
|
|
179
179
|
border-width: var(--border-item-width-yel47s, 2px);
|
|
180
180
|
border-start-start-radius: var(--border-radius-item-05df9h, 8px);
|
|
@@ -184,87 +184,120 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
184
184
|
padding-block: var(--space-xxs-p8yyaw, 4px);
|
|
185
185
|
padding-inline: var(--space-field-horizontal-gg19kw, 12px);
|
|
186
186
|
}
|
|
187
|
-
.awsui_selectable-
|
|
187
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_highlighted_15o6u_bg2ke_177.awsui_pad-bottom_15o6u_bg2ke_167:not(#\9), .awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177.awsui_pad-bottom_15o6u_bg2ke_167:not(#\9) {
|
|
188
188
|
padding-block-end: calc(var(--space-xxs-p8yyaw, 4px) + var(--space-xxxs-zbmxqb, 2px));
|
|
189
189
|
}
|
|
190
|
-
.awsui_selectable-
|
|
190
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_highlighted_15o6u_bg2ke_177:not(#\9) {
|
|
191
191
|
z-index: 3;
|
|
192
192
|
background-color: var(--color-background-dropdown-item-hover-zhzc84, #f3f3f7);
|
|
193
193
|
border-color: var(--color-border-dropdown-item-hover-4p0gsi, #8c8c94);
|
|
194
194
|
}
|
|
195
|
-
.awsui_selectable-
|
|
195
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_highlighted_15o6u_bg2ke_177.awsui_disabled_15o6u_bg2ke_195:not(#\9) {
|
|
196
196
|
color: var(--color-text-dropdown-item-dimmed-7c5xo0, #b4b4bb);
|
|
197
197
|
border-color: var(--color-border-dropdown-item-dimmed-hover-6qayyi, #8c8c94);
|
|
198
198
|
background-color: var(--color-background-dropdown-item-dimmed-dlm6wk, transparent);
|
|
199
199
|
}
|
|
200
|
-
.awsui_selectable-
|
|
200
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177:not(#\9) {
|
|
201
201
|
z-index: 2;
|
|
202
202
|
background-color: var(--color-background-dropdown-item-selected-idfej7, #f0fbff);
|
|
203
203
|
border-color: var(--color-border-dropdown-item-selected-rtthnt, #006ce0);
|
|
204
204
|
}
|
|
205
|
-
.awsui_selectable-
|
|
205
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177.awsui_next-item-selected_15o6u_bg2ke_205:not(#\9) {
|
|
206
206
|
border-end-start-radius: 0;
|
|
207
207
|
border-end-end-radius: 0;
|
|
208
208
|
}
|
|
209
|
-
.awsui_selectable-
|
|
209
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177.awsui_highlighted_15o6u_bg2ke_177:not(#\9) {
|
|
210
210
|
border-color: var(--color-border-dropdown-item-hover-4p0gsi, #8c8c94);
|
|
211
211
|
z-index: 3;
|
|
212
212
|
}
|
|
213
|
-
.awsui_selectable-
|
|
213
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177 + .awsui_selectable-item_15o6u_bg2ke_145.awsui_selected_15o6u_bg2ke_177:not(#\9) {
|
|
214
214
|
border-start-start-radius: 0;
|
|
215
215
|
border-start-end-radius: 0;
|
|
216
216
|
}
|
|
217
|
-
.awsui_selectable-
|
|
217
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_highlighted_15o6u_bg2ke_177.awsui_is-keyboard_15o6u_bg2ke_217:not(#\9) {
|
|
218
218
|
border-color: var(--color-border-dropdown-item-focused-5afjvu, #424650);
|
|
219
219
|
box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
220
220
|
}
|
|
221
|
-
.awsui_selectable-
|
|
221
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_parent_15o6u_bg2ke_221:not(#\9) {
|
|
222
222
|
font-weight: bold;
|
|
223
223
|
color: var(--color-text-dropdown-group-label-iy2p4t, #424650);
|
|
224
224
|
}
|
|
225
|
-
.awsui_selectable-
|
|
225
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_parent_15o6u_bg2ke_221:not(#\9):not(.awsui_interactiveGroups_15o6u_bg2ke_225) {
|
|
226
226
|
border-block-start-color: var(--color-border-dropdown-group-2xoluv, #c6c6cd);
|
|
227
227
|
padding-block: var(--space-xs-zb16t3, 8px);
|
|
228
228
|
padding-inline: var(--space-xs-zb16t3, 8px);
|
|
229
229
|
}
|
|
230
|
-
.awsui_selectable-
|
|
230
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_parent_15o6u_bg2ke_221.awsui_interactiveGroups_15o6u_bg2ke_225:not(#\9) {
|
|
231
231
|
padding-block: calc(var(--space-xs-zb16t3, 8px) + var(--border-item-width-yel47s, 2px) - var(--border-divider-list-width-27y3k5, 1px));
|
|
232
232
|
padding-inline: calc(var(--space-field-horizontal-gg19kw, 12px) + var(--border-item-width-yel47s, 2px));
|
|
233
233
|
}
|
|
234
|
-
.awsui_selectable-
|
|
234
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_parent_15o6u_bg2ke_221.awsui_interactiveGroups_15o6u_bg2ke_225.awsui_highlighted_15o6u_bg2ke_177:not(#\9) {
|
|
235
235
|
color: var(--color-text-dropdown-item-highlighted-rnfxxj, #0f141a);
|
|
236
236
|
}
|
|
237
|
-
.awsui_selectable-
|
|
237
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_parent_15o6u_bg2ke_221.awsui_interactiveGroups_15o6u_bg2ke_225.awsui_highlighted_15o6u_bg2ke_177:not(#\9), .awsui_selectable-item_15o6u_bg2ke_145.awsui_parent_15o6u_bg2ke_221.awsui_interactiveGroups_15o6u_bg2ke_225.awsui_selected_15o6u_bg2ke_177:not(#\9) {
|
|
238
238
|
padding-block: var(--space-xs-zb16t3, 8px);
|
|
239
239
|
padding-inline: var(--space-field-horizontal-gg19kw, 12px);
|
|
240
240
|
}
|
|
241
|
-
.awsui_selectable-
|
|
241
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_child_15o6u_bg2ke_241:not(#\9) {
|
|
242
242
|
padding-inline-start: calc(var(--space-xxl-cu2m1r, 32px) + var(--border-item-width-yel47s, 2px));
|
|
243
243
|
}
|
|
244
|
-
.awsui_selectable-
|
|
244
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_child_15o6u_bg2ke_241.awsui_highlighted_15o6u_bg2ke_177:not(#\9), .awsui_selectable-item_15o6u_bg2ke_145.awsui_child_15o6u_bg2ke_241.awsui_selected_15o6u_bg2ke_177:not(#\9) {
|
|
245
245
|
padding-inline-start: var(--space-xxl-cu2m1r, 32px);
|
|
246
246
|
}
|
|
247
|
-
.awsui_selectable-
|
|
247
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9) {
|
|
248
|
+
position: sticky;
|
|
249
|
+
inset-block-start: 0;
|
|
250
|
+
margin-block-end: calc(var(--border-item-width-yel47s, 2px) - var(--border-divider-list-width-27y3k5, 1px));
|
|
251
|
+
z-index: 4;
|
|
252
|
+
}
|
|
253
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9):not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177) {
|
|
254
|
+
border-inline-start-width: var(--border-item-width-yel47s, 2px);
|
|
255
|
+
border-inline-start-color: var(--color-border-dropdown-container-fo7aoz, #b4b4bb);
|
|
256
|
+
border-inline-end-color: var(--color-border-dropdown-container-fo7aoz, #b4b4bb);
|
|
257
|
+
padding-inline: var(--space-field-horizontal-gg19kw, 12px);
|
|
258
|
+
}
|
|
259
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9):not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177):not(.awsui_with-scrollbar_15o6u_bg2ke_259) {
|
|
260
|
+
border-inline-end-width: var(--border-item-width-yel47s, 2px);
|
|
261
|
+
}
|
|
262
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9):not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177).awsui_with-scrollbar_15o6u_bg2ke_259 {
|
|
263
|
+
border-inline-end-width: 0;
|
|
264
|
+
}
|
|
265
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9):not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177):not(.awsui_after-header_15o6u_bg2ke_265) {
|
|
266
|
+
border-start-start-radius: var(--border-radius-item-05df9h, 8px);
|
|
267
|
+
}
|
|
268
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9):not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177):not(.awsui_after-header_15o6u_bg2ke_265):not(.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177):not(.awsui_after-header_15o6u_bg2ke_265).awsui_with-scrollbar_15o6u_bg2ke_259) {
|
|
269
|
+
border-start-end-radius: var(--border-radius-item-05df9h, 8px);
|
|
270
|
+
}
|
|
271
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247:not(#\9):not(.awsui_highlighted_15o6u_bg2ke_177):not(.awsui_selected_15o6u_bg2ke_177).awsui_after-header_15o6u_bg2ke_265 {
|
|
272
|
+
border-block-start-color: var(--color-background-dropdown-item-default-u8emhk, #ffffff);
|
|
273
|
+
}
|
|
274
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247.awsui_disabled_15o6u_bg2ke_195.awsui_highlighted_15o6u_bg2ke_177:not(#\9), .awsui_selectable-item_15o6u_bg2ke_145.awsui_sticky_15o6u_bg2ke_247.awsui_disabled_15o6u_bg2ke_195.awsui_selected_15o6u_bg2ke_177:not(#\9) {
|
|
275
|
+
border-block-end-color: transparent;
|
|
276
|
+
border-block-start-color: transparent;
|
|
277
|
+
border-inline-start-color: transparent;
|
|
278
|
+
border-inline-end-color: transparent;
|
|
279
|
+
}
|
|
280
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_disabled_15o6u_bg2ke_195:not(#\9) {
|
|
248
281
|
color: var(--color-text-dropdown-item-disabled-7fg5u8, #b4b4bb);
|
|
249
282
|
}
|
|
250
|
-
.awsui_selectable-
|
|
283
|
+
.awsui_selectable-item_15o6u_bg2ke_145:not(#\9):not(.awsui_disabled_15o6u_bg2ke_195):not(.awsui_parent_15o6u_bg2ke_221) {
|
|
251
284
|
cursor: pointer;
|
|
252
285
|
}
|
|
253
|
-
.awsui_selectable-
|
|
286
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_interactiveGroups_15o6u_bg2ke_225:not(#\9):not(.awsui_disabled_15o6u_bg2ke_195) {
|
|
254
287
|
cursor: pointer;
|
|
255
288
|
}
|
|
256
|
-
.awsui_selectable-
|
|
289
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_virtual_15o6u_bg2ke_171:not(#\9) {
|
|
257
290
|
position: absolute;
|
|
258
291
|
inset-block-start: var(--border-dropdown-virtual-offset-width-kekgc0, 2px);
|
|
259
292
|
inset-inline-start: 0;
|
|
260
293
|
inline-size: 100%;
|
|
261
294
|
box-sizing: border-box;
|
|
262
295
|
}
|
|
263
|
-
.awsui_selectable-
|
|
296
|
+
.awsui_selectable-item_15o6u_bg2ke_145.awsui_virtual_15o6u_bg2ke_171:not(#\9):first-of-type:not(.awsui_selected_15o6u_bg2ke_177, .awsui_highlighted_15o6u_bg2ke_177) {
|
|
264
297
|
border-block-start-color: var(--color-border-dropdown-item-top-ky64jq, transparent);
|
|
265
298
|
}
|
|
266
299
|
|
|
267
|
-
.awsui_measure-
|
|
300
|
+
.awsui_measure-strut_15o6u_bg2ke_300:not(#\9) {
|
|
268
301
|
position: absolute;
|
|
269
302
|
pointer-events: none;
|
|
270
303
|
block-size: 100%;
|
|
@@ -273,16 +306,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
273
306
|
inset-inline-start: 0;
|
|
274
307
|
padding-block-start: var(--border-divider-list-width-27y3k5, 1px);
|
|
275
308
|
}
|
|
276
|
-
.awsui_measure-strut-
|
|
309
|
+
.awsui_measure-strut-first_15o6u_bg2ke_309:not(#\9) {
|
|
277
310
|
padding-block-end: var(--border-divider-list-width-27y3k5, 1px);
|
|
278
311
|
}
|
|
279
312
|
|
|
280
|
-
.awsui_screenreader-
|
|
313
|
+
.awsui_screenreader-content_15o6u_bg2ke_313:not(#\9) {
|
|
281
314
|
position: absolute !important;
|
|
282
315
|
inset-block-start: -9999px !important;
|
|
283
316
|
inset-inline-start: -9999px !important;
|
|
284
317
|
}
|
|
285
318
|
|
|
286
|
-
.awsui_option-
|
|
319
|
+
.awsui_option-content_15o6u_bg2ke_319:not(#\9) {
|
|
287
320
|
/* used in test-utils */
|
|
288
321
|
}
|
|
@@ -2,21 +2,24 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"selectable-item": "awsui_selectable-
|
|
6
|
-
"pad-bottom": "awsui_pad-
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
5
|
+
"selectable-item": "awsui_selectable-item_15o6u_bg2ke_145",
|
|
6
|
+
"pad-bottom": "awsui_pad-bottom_15o6u_bg2ke_167",
|
|
7
|
+
"virtual": "awsui_virtual_15o6u_bg2ke_171",
|
|
8
|
+
"has-background": "awsui_has-background_15o6u_bg2ke_174",
|
|
9
|
+
"highlighted": "awsui_highlighted_15o6u_bg2ke_177",
|
|
10
|
+
"selected": "awsui_selected_15o6u_bg2ke_177",
|
|
11
|
+
"disabled": "awsui_disabled_15o6u_bg2ke_195",
|
|
12
|
+
"next-item-selected": "awsui_next-item-selected_15o6u_bg2ke_205",
|
|
13
|
+
"is-keyboard": "awsui_is-keyboard_15o6u_bg2ke_217",
|
|
14
|
+
"parent": "awsui_parent_15o6u_bg2ke_221",
|
|
15
|
+
"interactiveGroups": "awsui_interactiveGroups_15o6u_bg2ke_225",
|
|
16
|
+
"child": "awsui_child_15o6u_bg2ke_241",
|
|
17
|
+
"sticky": "awsui_sticky_15o6u_bg2ke_247",
|
|
18
|
+
"with-scrollbar": "awsui_with-scrollbar_15o6u_bg2ke_259",
|
|
19
|
+
"after-header": "awsui_after-header_15o6u_bg2ke_265",
|
|
20
|
+
"measure-strut": "awsui_measure-strut_15o6u_bg2ke_300",
|
|
21
|
+
"measure-strut-first": "awsui_measure-strut-first_15o6u_bg2ke_309",
|
|
22
|
+
"screenreader-content": "awsui_screenreader-content_15o6u_bg2ke_313",
|
|
23
|
+
"option-content": "awsui_option-content_15o6u_bg2ke_319"
|
|
21
24
|
};
|
|
22
25
|
|
package/internal/environment.js
CHANGED
|
@@ -4,6 +4,7 @@ interface UseVirtualProps<Item> {
|
|
|
4
4
|
items: readonly Item[];
|
|
5
5
|
parentRef: React.RefObject<HTMLElement>;
|
|
6
6
|
estimateSize: () => number;
|
|
7
|
+
firstItemSticky?: boolean;
|
|
7
8
|
}
|
|
8
9
|
interface RowVirtualizer {
|
|
9
10
|
virtualItems: VirtualItem[];
|
|
@@ -22,6 +23,6 @@ interface RowVirtualizer {
|
|
|
22
23
|
* The number of item refs assignments is limited to MAX_ITEM_MOUNTS unless items or indices change.
|
|
23
24
|
* That is based on the assumption the item height stays constant after its first render.
|
|
24
25
|
*/
|
|
25
|
-
export declare function useVirtual<Item extends object>({ items, parentRef, estimateSize, }: UseVirtualProps<Item>): RowVirtualizer;
|
|
26
|
+
export declare function useVirtual<Item extends object>({ items, parentRef, estimateSize, firstItemSticky, }: UseVirtualProps<Item>): RowVirtualizer;
|
|
26
27
|
export {};
|
|
27
28
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-virtual/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAmC,WAAW,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-virtual/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAmC,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK1F,UAAU,eAAe,CAAC,IAAI;IAC5B,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,cAAc;IACtB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9C,KAAK,EACL,SAAS,EACT,YAAY,EACZ,eAAe,GAChB,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,cAAc,CAsCxC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useEffect, useMemo, useRef } from 'react';
|
|
4
4
|
import { useVirtual as useVirtualDefault } from '../../vendor/react-virtual';
|
|
5
|
+
import stickyRangeExtractor from './sticky-range-extractor';
|
|
5
6
|
const MAX_ITEM_MOUNTS = 100;
|
|
6
7
|
/**
|
|
7
8
|
* The useVirtual from react-virtual@2 might produce an infinite update loop caused by setting
|
|
@@ -15,8 +16,14 @@ const MAX_ITEM_MOUNTS = 100;
|
|
|
15
16
|
* The number of item refs assignments is limited to MAX_ITEM_MOUNTS unless items or indices change.
|
|
16
17
|
* That is based on the assumption the item height stays constant after its first render.
|
|
17
18
|
*/
|
|
18
|
-
export function useVirtual({ items, parentRef, estimateSize, }) {
|
|
19
|
-
const rowVirtualizer = useVirtualDefault({
|
|
19
|
+
export function useVirtual({ items, parentRef, estimateSize, firstItemSticky, }) {
|
|
20
|
+
const rowVirtualizer = useVirtualDefault({
|
|
21
|
+
size: items.length,
|
|
22
|
+
parentRef,
|
|
23
|
+
estimateSize,
|
|
24
|
+
overscan: 5,
|
|
25
|
+
rangeExtractor: firstItemSticky ? stickyRangeExtractor : undefined,
|
|
26
|
+
});
|
|
20
27
|
// Cache virtual item mounts to limit the amount of mounts per item.
|
|
21
28
|
const measuresCache = useRef(new WeakMap());
|
|
22
29
|
// Clear mounts cache every time indices, items, or size estimate change.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-virtual/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAe,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-virtual/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAe,MAAM,4BAA4B,CAAC;AAC1F,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAE5D,MAAM,eAAe,GAAG,GAAG,CAAC;AAe5B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAsB,EAC9C,KAAK,EACL,SAAS,EACT,YAAY,EACZ,eAAe,GACO;IACtB,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,IAAI,EAAE,KAAK,CAAC,MAAM;QAClB,SAAS;QACT,YAAY;QACZ,QAAQ,EAAE,CAAC;QACX,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;KACnE,CAAC,CAAC;IAEH,oEAAoE;IACpE,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,OAAO,EAAgB,CAAC,CAAC;IAE1D,yEAAyE;IACzE,MAAM,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtF,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtC,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CACH,cAAc,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,iCAC1C,WAAW,KACd,UAAU,EAAE,CAAC,IAAwB,EAAE,EAAE;;YACvC,MAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,mCAAI,CAAC,CAAC;YAC9E,IAAI,YAAY,GAAG,eAAe,EAAE;gBAClC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBAC7B,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;aACvE;QACH,CAAC,IACD,CAAC,EACL,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,CACrC,CAAC;IAEF,OAAO;QACL,YAAY;QACZ,SAAS,EAAE,cAAc,CAAC,SAAS;QACnC,aAAa,EAAE,cAAc,CAAC,aAAa;KAC5C,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useMemo, useRef } from 'react';\n\nimport { useVirtual as useVirtualDefault, VirtualItem } from '../../vendor/react-virtual';\nimport stickyRangeExtractor from './sticky-range-extractor';\n\nconst MAX_ITEM_MOUNTS = 100;\n\ninterface UseVirtualProps<Item> {\n items: readonly Item[];\n parentRef: React.RefObject<HTMLElement>;\n estimateSize: () => number;\n firstItemSticky?: boolean;\n}\n\ninterface RowVirtualizer {\n virtualItems: VirtualItem[];\n totalSize: number;\n scrollToIndex: (index: number) => void;\n}\n\n/**\n * The useVirtual from react-virtual@2 might produce an infinite update loop caused by setting\n * measured item sizes in the render cycle (as part of the measureRef assignment):\n * The sum of all measured item sizes is returned as totalSize which is then set on the list container.\n * Enforcing new container height might result in an items size change e.g. when the content wraps.\n *\n * The infinite update cycle causes React \"Maximum update depth exceeded\" error and can be additionally confirmed\n * by logging the totalSize which should then bounce between two values.\n *\n * The number of item refs assignments is limited to MAX_ITEM_MOUNTS unless items or indices change.\n * That is based on the assumption the item height stays constant after its first render.\n */\nexport function useVirtual<Item extends object>({\n items,\n parentRef,\n estimateSize,\n firstItemSticky,\n}: UseVirtualProps<Item>): RowVirtualizer {\n const rowVirtualizer = useVirtualDefault({\n size: items.length,\n parentRef,\n estimateSize,\n overscan: 5,\n rangeExtractor: firstItemSticky ? stickyRangeExtractor : undefined,\n });\n\n // Cache virtual item mounts to limit the amount of mounts per item.\n const measuresCache = useRef(new WeakMap<Item, number>());\n\n // Clear mounts cache every time indices, items, or size estimate change.\n const indicesKey = rowVirtualizer.virtualItems.map(item => `${item.index}`).join(':');\n useEffect(() => {\n measuresCache.current = new WeakMap();\n }, [indicesKey, items, estimateSize]);\n\n const virtualItems = useMemo(\n () =>\n rowVirtualizer.virtualItems.map(virtualItem => ({\n ...virtualItem,\n measureRef: (node: null | HTMLElement) => {\n const mountedCount = measuresCache.current.get(items[virtualItem.index]) ?? 0;\n if (mountedCount < MAX_ITEM_MOUNTS) {\n virtualItem.measureRef(node);\n measuresCache.current.set(items[virtualItem.index], mountedCount + 1);\n }\n },\n })),\n [items, rowVirtualizer.virtualItems]\n );\n\n return {\n virtualItems,\n totalSize: rowVirtualizer.totalSize,\n scrollToIndex: rowVirtualizer.scrollToIndex,\n };\n}\n"]}
|