@cloudscape-design/components-themeable 3.0.663 → 3.0.665
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/visual-refresh/background.scss +0 -19
- package/lib/internal/scss/app-layout/visual-refresh/breadcrumbs.scss +0 -10
- package/lib/internal/scss/app-layout/visual-refresh/drawers.scss +0 -2
- package/lib/internal/scss/app-layout/visual-refresh/layout.scss +0 -9
- package/lib/internal/scss/app-layout/visual-refresh/notifications.scss +11 -1
- package/lib/internal/scss/app-layout/visual-refresh/tools.scss +0 -2
- package/lib/internal/scss/box/styles.scss +2 -5
- package/lib/internal/scss/button-dropdown/item-element/styles.scss +2 -1
- package/lib/internal/scss/code-editor/background-inline-svg.scss +0 -2
- package/lib/internal/scss/container/styles.scss +10 -2
- package/lib/internal/scss/drawer/styles.scss +2 -1
- package/lib/internal/scss/flashbar/collapsible.scss +0 -1
- package/lib/internal/scss/help-panel/styles.scss +11 -2
- package/lib/internal/scss/icon/mixins.scss +2 -1
- package/lib/internal/scss/input/styles.scss +2 -2
- package/lib/internal/scss/internal/components/abstract-switch/styles.scss +2 -2
- package/lib/internal/scss/internal/components/chart-popover-footer/styles.scss +1 -1
- package/lib/internal/scss/internal/components/token-list/styles.scss +0 -1
- package/lib/internal/scss/internal/styles/direction.scss +1 -2
- package/lib/internal/scss/internal/styles/forms/mixins.scss +2 -1
- package/lib/internal/scss/popover/body.scss +1 -2
- package/lib/internal/scss/popover/styles.scss +5 -0
- package/lib/internal/scss/s3-resource-selector/s3-in-context/styles.scss +1 -1
- package/lib/internal/scss/split-panel/styles.scss +0 -1
- package/lib/internal/scss/table/styles.scss +0 -2
- package/lib/internal/scss/textarea/styles.scss +1 -1
- package/lib/internal/scss/token-group/styles.scss +0 -1
- package/lib/internal/scss/tutorial-panel/components/tutorial-list/styles.scss +0 -1
- package/lib/internal/scss/wizard/styles.scss +4 -1
- package/lib/internal/template/alert/styles.css.js +25 -25
- package/lib/internal/template/alert/styles.scoped.css +39 -41
- package/lib/internal/template/alert/styles.selectors.js +25 -25
- package/lib/internal/template/anchor-navigation/styles.css.js +8 -8
- package/lib/internal/template/anchor-navigation/styles.scoped.css +18 -20
- package/lib/internal/template/anchor-navigation/styles.selectors.js +8 -8
- package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +31 -32
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
- package/lib/internal/template/app-layout/content-wrapper/styles.css.js +3 -3
- package/lib/internal/template/app-layout/content-wrapper/styles.scoped.css +6 -8
- package/lib/internal/template/app-layout/content-wrapper/styles.selectors.js +3 -3
- package/lib/internal/template/app-layout/drawer/index.js +2 -2
- package/lib/internal/template/app-layout/drawer/index.js.map +1 -1
- package/lib/internal/template/app-layout/drawer/styles.css.js +13 -13
- package/lib/internal/template/app-layout/drawer/styles.scoped.css +21 -23
- package/lib/internal/template/app-layout/drawer/styles.selectors.js +13 -13
- package/lib/internal/template/app-layout/mobile-toolbar/index.js +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/index.js.map +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/styles.css.js +8 -8
- package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css +8 -10
- package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js +8 -8
- package/lib/internal/template/app-layout/skeleton/styles.css.js +11 -11
- package/lib/internal/template/app-layout/skeleton/styles.scoped.css +20 -22
- package/lib/internal/template/app-layout/skeleton/styles.selectors.js +11 -11
- package/lib/internal/template/app-layout/split-panel/styles.css.js +2 -2
- package/lib/internal/template/app-layout/split-panel/styles.scoped.css +2 -4
- package/lib/internal/template/app-layout/split-panel/styles.selectors.js +2 -2
- package/lib/internal/template/app-layout/styles.css.js +16 -16
- package/lib/internal/template/app-layout/styles.scoped.css +19 -21
- package/lib/internal/template/app-layout/styles.selectors.js +16 -16
- package/lib/internal/template/app-layout/toggles/styles.css.js +2 -2
- package/lib/internal/template/app-layout/toggles/styles.scoped.css +6 -8
- package/lib/internal/template/app-layout/toggles/styles.selectors.js +2 -2
- package/lib/internal/template/app-layout/utils/sticky-offsets.d.ts +1 -1
- package/lib/internal/template/app-layout/utils/sticky-offsets.d.ts.map +1 -1
- package/lib/internal/template/app-layout/utils/sticky-offsets.js +2 -2
- package/lib/internal/template/app-layout/utils/sticky-offsets.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/background.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/background.js +2 -5
- package/lib/internal/template/app-layout/visual-refresh/background.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.js +1 -2
- package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/context.d.ts +0 -2
- package/lib/internal/template/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/context.js +2 -7
- package/lib/internal/template/app-layout/visual-refresh/context.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/layout.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/layout.js +1 -3
- package/lib/internal/template/app-layout/visual-refresh/layout.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/main.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/main.js +2 -4
- package/lib/internal/template/app-layout/visual-refresh/main.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/navigation.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/navigation.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/notifications.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/notifications.js +3 -1
- package/lib/internal/template/app-layout/visual-refresh/notifications.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +82 -83
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +169 -196
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +82 -83
- package/lib/internal/template/app-layout/visual-refresh/tools.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/tools.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.d.ts +0 -6
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.js +0 -6
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.js.map +1 -1
- package/lib/internal/template/area-chart/styles.css.js +6 -6
- package/lib/internal/template/area-chart/styles.scoped.css +9 -11
- package/lib/internal/template/area-chart/styles.selectors.js +6 -6
- package/lib/internal/template/attribute-editor/styles.css.js +14 -14
- package/lib/internal/template/attribute-editor/styles.scoped.css +24 -26
- package/lib/internal/template/attribute-editor/styles.selectors.js +14 -14
- package/lib/internal/template/badge/styles.css.js +5 -5
- package/lib/internal/template/badge/styles.scoped.css +5 -7
- package/lib/internal/template/badge/styles.selectors.js +5 -5
- package/lib/internal/template/box/styles.css.js +191 -191
- package/lib/internal/template/box/styles.scoped.css +248 -446
- package/lib/internal/template/box/styles.selectors.js +191 -191
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +8 -8
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +16 -18
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +8 -8
- package/lib/internal/template/breadcrumb-group/styles.css.js +7 -7
- package/lib/internal/template/breadcrumb-group/styles.scoped.css +12 -14
- package/lib/internal/template/breadcrumb-group/styles.selectors.js +7 -7
- package/lib/internal/template/button/styles.css.js +19 -19
- package/lib/internal/template/button/styles.scoped.css +153 -155
- package/lib/internal/template/button/styles.selectors.js +19 -19
- package/lib/internal/template/button-dropdown/category-elements/category-element.js +1 -1
- package/lib/internal/template/button-dropdown/category-elements/category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/styles.css.js +14 -14
- package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +24 -25
- package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +14 -14
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +11 -11
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +16 -17
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +11 -11
- package/lib/internal/template/button-dropdown/mobile-expandable-group/mobile-expandable-group.js +1 -1
- package/lib/internal/template/button-dropdown/mobile-expandable-group/mobile-expandable-group.js.map +1 -1
- package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
- package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.scoped.css +5 -7
- package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
- package/lib/internal/template/button-dropdown/styles.css.js +15 -15
- package/lib/internal/template/button-dropdown/styles.scoped.css +22 -24
- package/lib/internal/template/button-dropdown/styles.selectors.js +15 -15
- package/lib/internal/template/calendar/styles.css.js +20 -20
- package/lib/internal/template/calendar/styles.scoped.css +42 -44
- package/lib/internal/template/calendar/styles.selectors.js +20 -20
- package/lib/internal/template/cards/styles.css.js +39 -39
- package/lib/internal/template/cards/styles.scoped.css +50 -52
- package/lib/internal/template/cards/styles.selectors.js +39 -39
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +5 -7
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/code-editor/resizable-box/styles.css.js +3 -3
- package/lib/internal/template/code-editor/resizable-box/styles.scoped.css +8 -10
- package/lib/internal/template/code-editor/resizable-box/styles.selectors.js +3 -3
- package/lib/internal/template/code-editor/styles.css.js +32 -32
- package/lib/internal/template/code-editor/styles.scoped.css +177 -211
- package/lib/internal/template/code-editor/styles.selectors.js +32 -32
- package/lib/internal/template/collection-preferences/content-display/styles.css.js +11 -11
- package/lib/internal/template/collection-preferences/content-display/styles.scoped.css +17 -21
- package/lib/internal/template/collection-preferences/content-display/styles.selectors.js +11 -11
- package/lib/internal/template/collection-preferences/styles.css.js +37 -37
- package/lib/internal/template/collection-preferences/styles.scoped.css +44 -52
- package/lib/internal/template/collection-preferences/styles.selectors.js +37 -37
- package/lib/internal/template/column-layout/styles.css.js +13 -13
- package/lib/internal/template/column-layout/styles.scoped.css +43 -45
- package/lib/internal/template/column-layout/styles.selectors.js +13 -13
- package/lib/internal/template/container/internal.d.ts.map +1 -1
- package/lib/internal/template/container/internal.js +7 -25
- package/lib/internal/template/container/internal.js.map +1 -1
- package/lib/internal/template/container/styles.css.js +30 -29
- package/lib/internal/template/container/styles.scoped.css +60 -55
- package/lib/internal/template/container/styles.selectors.js +30 -29
- package/lib/internal/template/container/use-sticky-header.d.ts +3 -2
- package/lib/internal/template/container/use-sticky-header.d.ts.map +1 -1
- package/lib/internal/template/container/use-sticky-header.js +5 -3
- package/lib/internal/template/container/use-sticky-header.js.map +1 -1
- package/lib/internal/template/content-layout/internal.js +2 -2
- package/lib/internal/template/content-layout/internal.js.map +1 -1
- package/lib/internal/template/content-layout/styles.css.js +14 -14
- package/lib/internal/template/content-layout/styles.scoped.css +16 -18
- package/lib/internal/template/content-layout/styles.selectors.js +14 -14
- package/lib/internal/template/date-picker/styles.css.js +7 -7
- package/lib/internal/template/date-picker/styles.scoped.css +9 -11
- package/lib/internal/template/date-picker/styles.selectors.js +7 -7
- package/lib/internal/template/date-range-picker/calendar/grids/styles.css.js +27 -27
- package/lib/internal/template/date-range-picker/calendar/grids/styles.scoped.css +42 -44
- package/lib/internal/template/date-range-picker/calendar/grids/styles.selectors.js +27 -27
- package/lib/internal/template/date-range-picker/relative-range/styles.css.js +9 -9
- package/lib/internal/template/date-range-picker/relative-range/styles.scoped.css +13 -15
- package/lib/internal/template/date-range-picker/relative-range/styles.selectors.js +9 -9
- package/lib/internal/template/date-range-picker/styles.css.js +39 -39
- package/lib/internal/template/date-range-picker/styles.scoped.css +48 -50
- package/lib/internal/template/date-range-picker/styles.selectors.js +39 -39
- package/lib/internal/template/drawer/implementation.js +2 -2
- package/lib/internal/template/drawer/implementation.js.map +1 -1
- package/lib/internal/template/drawer/styles.css.js +3 -3
- package/lib/internal/template/drawer/styles.scoped.css +10 -11
- package/lib/internal/template/drawer/styles.selectors.js +3 -3
- package/lib/internal/template/expandable-section/styles.css.js +32 -32
- package/lib/internal/template/expandable-section/styles.scoped.css +65 -66
- package/lib/internal/template/expandable-section/styles.selectors.js +32 -32
- package/lib/internal/template/file-upload/dropzone/styles.css.js +2 -2
- package/lib/internal/template/file-upload/dropzone/styles.scoped.css +2 -4
- package/lib/internal/template/file-upload/dropzone/styles.selectors.js +2 -2
- package/lib/internal/template/file-upload/file-input/styles.css.js +4 -4
- package/lib/internal/template/file-upload/file-input/styles.scoped.css +7 -9
- package/lib/internal/template/file-upload/file-input/styles.selectors.js +4 -4
- package/lib/internal/template/flashbar/styles.css.js +47 -47
- package/lib/internal/template/flashbar/styles.scoped.css +146 -154
- package/lib/internal/template/flashbar/styles.selectors.js +47 -47
- package/lib/internal/template/form/styles.css.js +8 -8
- package/lib/internal/template/form/styles.scoped.css +8 -10
- package/lib/internal/template/form/styles.selectors.js +8 -8
- package/lib/internal/template/form-field/styles.css.js +24 -24
- package/lib/internal/template/form-field/styles.scoped.css +38 -40
- package/lib/internal/template/form-field/styles.selectors.js +24 -24
- package/lib/internal/template/grid/styles.css.js +53 -53
- package/lib/internal/template/grid/styles.scoped.css +54 -56
- package/lib/internal/template/grid/styles.selectors.js +53 -53
- package/lib/internal/template/header/styles.css.js +34 -34
- package/lib/internal/template/header/styles.scoped.css +50 -52
- package/lib/internal/template/header/styles.selectors.js +34 -34
- package/lib/internal/template/help-panel/implementation.js +2 -2
- package/lib/internal/template/help-panel/implementation.js.map +1 -1
- package/lib/internal/template/help-panel/styles.css.js +4 -4
- package/lib/internal/template/help-panel/styles.scoped.css +78 -68
- package/lib/internal/template/help-panel/styles.selectors.js +4 -4
- package/lib/internal/template/hotspot/styles.css.js +7 -7
- package/lib/internal/template/hotspot/styles.scoped.css +7 -9
- package/lib/internal/template/hotspot/styles.selectors.js +7 -7
- package/lib/internal/template/icon/icons.js +1 -1
- package/lib/internal/template/icon/interfaces.d.ts +1 -1
- package/lib/internal/template/icon/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon/interfaces.js.map +1 -1
- package/lib/internal/template/icon/styles.css.js +37 -37
- package/lib/internal/template/icon/styles.scoped.css +84 -67
- package/lib/internal/template/icon/styles.selectors.js +37 -37
- package/lib/internal/template/input/styles.css.js +13 -13
- package/lib/internal/template/input/styles.scoped.css +34 -36
- package/lib/internal/template/input/styles.selectors.js +13 -13
- package/lib/internal/template/internal/analytics/index.d.ts +7 -1
- package/lib/internal/template/internal/analytics/index.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/index.js +10 -0
- package/lib/internal/template/internal/analytics/index.js.map +1 -1
- package/lib/internal/template/internal/analytics/interfaces.d.ts +12 -0
- package/lib/internal/template/internal/analytics/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/interfaces.js.map +1 -1
- package/lib/internal/template/internal/base-component/index.d.ts +5 -3
- package/lib/internal/template/internal/base-component/index.d.ts.map +1 -1
- package/lib/internal/template/internal/base-component/index.js.map +1 -1
- package/lib/internal/template/internal/components/abstract-switch/styles.css.js +13 -13
- package/lib/internal/template/internal/components/abstract-switch/styles.scoped.css +23 -26
- package/lib/internal/template/internal/components/abstract-switch/styles.selectors.js +13 -13
- package/lib/internal/template/internal/components/button-trigger/styles.css.js +11 -11
- package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +26 -28
- package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +11 -11
- package/lib/internal/template/internal/components/cartesian-chart/inline-start-labels.js +1 -1
- package/lib/internal/template/internal/components/cartesian-chart/inline-start-labels.js.map +1 -1
- package/lib/internal/template/internal/components/chart-filter/styles.css.js +3 -3
- package/lib/internal/template/internal/components/chart-filter/styles.scoped.css +3 -5
- package/lib/internal/template/internal/components/chart-filter/styles.selectors.js +3 -3
- package/lib/internal/template/internal/components/chart-legend/styles.css.js +6 -6
- package/lib/internal/template/internal/components/chart-legend/styles.scoped.css +15 -17
- package/lib/internal/template/internal/components/chart-legend/styles.selectors.js +6 -6
- package/lib/internal/template/internal/components/chart-plot/styles.css.js +5 -5
- package/lib/internal/template/internal/components/chart-plot/styles.scoped.css +5 -7
- package/lib/internal/template/internal/components/chart-plot/styles.selectors.js +5 -5
- package/lib/internal/template/internal/components/chart-popover/styles.css.js +3 -3
- package/lib/internal/template/internal/components/chart-popover/styles.scoped.css +3 -5
- package/lib/internal/template/internal/components/chart-popover/styles.selectors.js +3 -3
- package/lib/internal/template/internal/components/chart-popover-footer/styles.css.js +1 -1
- package/lib/internal/template/internal/components/chart-popover-footer/styles.scoped.css +3 -3
- package/lib/internal/template/internal/components/chart-popover-footer/styles.selectors.js +1 -1
- package/lib/internal/template/internal/components/chart-series-details/styles.css.js +20 -20
- package/lib/internal/template/internal/components/chart-series-details/styles.scoped.css +33 -35
- package/lib/internal/template/internal/components/chart-series-details/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/chart-series-marker/styles.css.js +5 -5
- package/lib/internal/template/internal/components/chart-series-marker/styles.scoped.css +7 -9
- package/lib/internal/template/internal/components/chart-series-marker/styles.selectors.js +5 -5
- package/lib/internal/template/internal/components/chart-wrapper/styles.css.js +9 -9
- package/lib/internal/template/internal/components/chart-wrapper/styles.scoped.css +9 -11
- package/lib/internal/template/internal/components/chart-wrapper/styles.selectors.js +9 -9
- package/lib/internal/template/internal/components/checkbox-icon/styles.css.js +7 -7
- package/lib/internal/template/internal/components/checkbox-icon/styles.scoped.css +8 -10
- package/lib/internal/template/internal/components/checkbox-icon/styles.selectors.js +7 -7
- package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.scoped.css +41 -41
- package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/dropdown-footer/styles.css.js +3 -3
- package/lib/internal/template/internal/components/dropdown-footer/styles.scoped.css +3 -5
- package/lib/internal/template/internal/components/dropdown-footer/styles.selectors.js +3 -3
- package/lib/internal/template/internal/components/dropdown-status/styles.css.js +2 -2
- package/lib/internal/template/internal/components/dropdown-status/styles.scoped.css +2 -4
- package/lib/internal/template/internal/components/dropdown-status/styles.selectors.js +2 -2
- package/lib/internal/template/internal/components/filtering-token/styles.css.js +7 -7
- package/lib/internal/template/internal/components/filtering-token/styles.scoped.css +13 -15
- package/lib/internal/template/internal/components/filtering-token/styles.selectors.js +7 -7
- package/lib/internal/template/internal/components/handle/styles.css.js +2 -2
- package/lib/internal/template/internal/components/handle/styles.scoped.css +6 -8
- package/lib/internal/template/internal/components/handle/styles.selectors.js +2 -2
- package/lib/internal/template/internal/components/menu-dropdown/styles.css.js +7 -7
- package/lib/internal/template/internal/components/menu-dropdown/styles.scoped.css +13 -15
- package/lib/internal/template/internal/components/menu-dropdown/styles.selectors.js +7 -7
- package/lib/internal/template/internal/components/option/highlight-match.d.ts.map +1 -1
- package/lib/internal/template/internal/components/option/highlight-match.js +1 -2
- package/lib/internal/template/internal/components/option/highlight-match.js.map +1 -1
- package/lib/internal/template/internal/components/option/index.js +2 -2
- package/lib/internal/template/internal/components/option/index.js.map +1 -1
- package/lib/internal/template/internal/components/option/styles.css.js +17 -17
- package/lib/internal/template/internal/components/option/styles.scoped.css +29 -31
- package/lib/internal/template/internal/components/option/styles.selectors.js +17 -17
- package/lib/internal/template/internal/components/options-list/styles.css.js +2 -2
- package/lib/internal/template/internal/components/options-list/styles.scoped.css +2 -4
- package/lib/internal/template/internal/components/options-list/styles.selectors.js +2 -2
- package/lib/internal/template/internal/components/panel-resize-handle/styles.css.js +5 -5
- package/lib/internal/template/internal/components/panel-resize-handle/styles.scoped.css +10 -12
- package/lib/internal/template/internal/components/panel-resize-handle/styles.selectors.js +5 -5
- package/lib/internal/template/internal/components/screenreader-only/styles.css.js +1 -1
- package/lib/internal/template/internal/components/screenreader-only/styles.scoped.css +1 -3
- package/lib/internal/template/internal/components/screenreader-only/styles.selectors.js +1 -1
- package/lib/internal/template/internal/components/selectable-item/styles.css.js +16 -16
- package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +29 -31
- package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +16 -16
- package/lib/internal/template/internal/components/token-list/styles.css.js +9 -9
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +20 -23
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +9 -9
- package/lib/internal/template/internal/context/reset-contexts-for-modal.d.ts.map +1 -1
- package/lib/internal/template/internal/context/reset-contexts-for-modal.js +6 -8
- package/lib/internal/template/internal/context/reset-contexts-for-modal.js.map +1 -1
- package/lib/internal/template/internal/context/single-tab-stop-navigation-context.d.ts +16 -2
- package/lib/internal/template/internal/context/single-tab-stop-navigation-context.d.ts.map +1 -1
- package/lib/internal/template/internal/context/single-tab-stop-navigation-context.js +51 -1
- package/lib/internal/template/internal/context/single-tab-stop-navigation-context.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.d.ts +10 -0
- package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.d.ts.map +1 -0
- package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.js +47 -0
- package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.js.map +1 -0
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +71 -73
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/mixed-line-bar-chart/styles.css.js +11 -11
- package/lib/internal/template/mixed-line-bar-chart/styles.scoped.css +17 -19
- package/lib/internal/template/mixed-line-bar-chart/styles.selectors.js +11 -11
- package/lib/internal/template/modal/styles.css.js +23 -23
- package/lib/internal/template/modal/styles.scoped.css +38 -40
- package/lib/internal/template/modal/styles.selectors.js +23 -23
- package/lib/internal/template/multiselect/styles.css.js +2 -2
- package/lib/internal/template/multiselect/styles.scoped.css +2 -4
- package/lib/internal/template/multiselect/styles.selectors.js +2 -2
- package/lib/internal/template/pagination/styles.css.js +9 -9
- package/lib/internal/template/pagination/styles.scoped.css +23 -25
- package/lib/internal/template/pagination/styles.selectors.js +9 -9
- package/lib/internal/template/pie-chart/styles.css.js +27 -27
- package/lib/internal/template/pie-chart/styles.scoped.css +48 -50
- package/lib/internal/template/pie-chart/styles.selectors.js +27 -27
- package/lib/internal/template/popover/index.d.ts +1 -1
- package/lib/internal/template/popover/index.d.ts.map +1 -1
- package/lib/internal/template/popover/index.js +2 -2
- package/lib/internal/template/popover/index.js.map +1 -1
- package/lib/internal/template/popover/interfaces.d.ts +5 -0
- package/lib/internal/template/popover/interfaces.d.ts.map +1 -1
- package/lib/internal/template/popover/interfaces.js.map +1 -1
- package/lib/internal/template/popover/internal.js +2 -2
- package/lib/internal/template/popover/internal.js.map +1 -1
- package/lib/internal/template/popover/styles.css.js +50 -49
- package/lib/internal/template/popover/styles.scoped.css +78 -78
- package/lib/internal/template/popover/styles.selectors.js +50 -49
- package/lib/internal/template/progress-bar/styles.css.js +19 -19
- package/lib/internal/template/progress-bar/styles.scoped.css +33 -37
- package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
- package/lib/internal/template/property-filter/styles.css.js +32 -32
- package/lib/internal/template/property-filter/styles.scoped.css +34 -36
- package/lib/internal/template/property-filter/styles.selectors.js +32 -32
- package/lib/internal/template/radio-group/styles.css.js +9 -9
- package/lib/internal/template/radio-group/styles.scoped.css +15 -17
- package/lib/internal/template/radio-group/styles.selectors.js +9 -9
- package/lib/internal/template/s3-resource-selector/s3-in-context/styles.css.js +7 -7
- package/lib/internal/template/s3-resource-selector/s3-in-context/styles.scoped.css +9 -9
- package/lib/internal/template/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
- package/lib/internal/template/segmented-control/styles.css.js +14 -14
- package/lib/internal/template/segmented-control/styles.scoped.css +33 -35
- package/lib/internal/template/segmented-control/styles.selectors.js +14 -14
- package/lib/internal/template/select/parts/styles.css.js +16 -16
- package/lib/internal/template/select/parts/styles.scoped.css +18 -19
- package/lib/internal/template/select/parts/styles.selectors.js +16 -16
- package/lib/internal/template/select/styles.css.js +1 -1
- package/lib/internal/template/select/styles.scoped.css +1 -3
- package/lib/internal/template/select/styles.selectors.js +1 -1
- package/lib/internal/template/side-navigation/styles.css.js +28 -28
- package/lib/internal/template/side-navigation/styles.scoped.css +38 -40
- package/lib/internal/template/side-navigation/styles.selectors.js +28 -28
- package/lib/internal/template/slider/internal.js +1 -1
- package/lib/internal/template/slider/internal.js.map +1 -1
- package/lib/internal/template/slider/slider-labels.js +1 -1
- package/lib/internal/template/slider/slider-labels.js.map +1 -1
- package/lib/internal/template/slider/styles.css.js +25 -25
- package/lib/internal/template/slider/styles.scoped.css +62 -64
- package/lib/internal/template/slider/styles.selectors.js +25 -25
- package/lib/internal/template/slider/tick-marks.js +2 -2
- package/lib/internal/template/slider/tick-marks.js.map +1 -1
- package/lib/internal/template/space-between/styles.css.js +23 -23
- package/lib/internal/template/space-between/styles.scoped.css +24 -26
- package/lib/internal/template/space-between/styles.selectors.js +23 -23
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +20 -21
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/split-panel/icons/styles.css.js +22 -22
- package/lib/internal/template/split-panel/icons/styles.scoped.css +28 -24
- package/lib/internal/template/split-panel/icons/styles.selectors.js +22 -22
- package/lib/internal/template/split-panel/side.js +3 -3
- package/lib/internal/template/split-panel/side.js.map +1 -1
- package/lib/internal/template/split-panel/styles.css.js +26 -26
- package/lib/internal/template/split-panel/styles.scoped.css +41 -46
- package/lib/internal/template/split-panel/styles.selectors.js +26 -26
- package/lib/internal/template/status-indicator/styles.css.js +23 -23
- package/lib/internal/template/status-indicator/styles.scoped.css +29 -31
- package/lib/internal/template/status-indicator/styles.selectors.js +23 -23
- package/lib/internal/template/table/body-cell/styles.css.js +45 -45
- package/lib/internal/template/table/body-cell/styles.scoped.css +175 -174
- package/lib/internal/template/table/body-cell/styles.selectors.js +45 -45
- package/lib/internal/template/table/expandable-rows/styles.css.js +3 -3
- package/lib/internal/template/table/expandable-rows/styles.scoped.css +15 -15
- package/lib/internal/template/table/expandable-rows/styles.selectors.js +3 -3
- package/lib/internal/template/table/header-cell/styles.css.js +26 -26
- package/lib/internal/template/table/header-cell/styles.scoped.css +54 -54
- package/lib/internal/template/table/header-cell/styles.selectors.js +26 -26
- package/lib/internal/template/table/internal.d.ts.map +1 -1
- package/lib/internal/template/table/internal.js +23 -17
- package/lib/internal/template/table/internal.js.map +1 -1
- package/lib/internal/template/table/resizer/styles.css.js +8 -8
- package/lib/internal/template/table/resizer/styles.scoped.css +14 -16
- package/lib/internal/template/table/resizer/styles.selectors.js +8 -8
- package/lib/internal/template/table/selection/selection-control.js +1 -1
- package/lib/internal/template/table/selection/selection-control.js.map +1 -1
- package/lib/internal/template/table/selection/styles.css.js +3 -3
- package/lib/internal/template/table/selection/styles.scoped.css +3 -5
- package/lib/internal/template/table/selection/styles.selectors.js +3 -3
- package/lib/internal/template/table/sticky-scrollbar/styles.css.js +6 -6
- package/lib/internal/template/table/sticky-scrollbar/styles.scoped.css +7 -9
- package/lib/internal/template/table/sticky-scrollbar/styles.selectors.js +6 -6
- package/lib/internal/template/table/styles.css.js +34 -34
- package/lib/internal/template/table/styles.scoped.css +39 -43
- package/lib/internal/template/table/styles.selectors.js +34 -34
- package/lib/internal/template/table/table-role/grid-navigation.d.ts.map +1 -1
- package/lib/internal/template/table/table-role/grid-navigation.js +40 -67
- package/lib/internal/template/table/table-role/grid-navigation.js.map +1 -1
- package/lib/internal/template/table/thead.d.ts +1 -0
- package/lib/internal/template/table/thead.d.ts.map +1 -1
- package/lib/internal/template/table/thead.js +5 -2
- package/lib/internal/template/table/thead.js.map +1 -1
- package/lib/internal/template/table/tools-header.d.ts +2 -1
- package/lib/internal/template/table/tools-header.d.ts.map +1 -1
- package/lib/internal/template/table/tools-header.js +4 -4
- package/lib/internal/template/table/tools-header.js.map +1 -1
- package/lib/internal/template/tabs/styles.css.js +22 -22
- package/lib/internal/template/tabs/styles.scoped.css +42 -46
- package/lib/internal/template/tabs/styles.selectors.js +22 -22
- package/lib/internal/template/tabs/tab-header-bar.d.ts.map +1 -1
- package/lib/internal/template/tabs/tab-header-bar.js +19 -47
- package/lib/internal/template/tabs/tab-header-bar.js.map +1 -1
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +10 -12
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +60 -62
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/text-filter/styles.css.js +3 -3
- package/lib/internal/template/text-filter/styles.scoped.css +3 -5
- package/lib/internal/template/text-filter/styles.selectors.js +3 -3
- package/lib/internal/template/textarea/styles.css.js +5 -5
- package/lib/internal/template/textarea/styles.scoped.css +15 -17
- package/lib/internal/template/textarea/styles.selectors.js +5 -5
- package/lib/internal/template/tiles/styles.css.js +29 -29
- package/lib/internal/template/tiles/styles.scoped.css +70 -72
- package/lib/internal/template/tiles/styles.selectors.js +29 -29
- package/lib/internal/template/toggle/styles.css.js +8 -8
- package/lib/internal/template/toggle/styles.scoped.css +15 -16
- package/lib/internal/template/toggle/styles.selectors.js +8 -8
- package/lib/internal/template/token-group/dismiss-button.d.ts.map +1 -1
- package/lib/internal/template/token-group/dismiss-button.js +1 -2
- package/lib/internal/template/token-group/dismiss-button.js.map +1 -1
- package/lib/internal/template/token-group/styles.css.js +9 -9
- package/lib/internal/template/token-group/styles.scoped.css +19 -22
- package/lib/internal/template/token-group/styles.selectors.js +9 -9
- package/lib/internal/template/top-navigation/1.0-beta/styles.css.js +25 -25
- package/lib/internal/template/top-navigation/1.0-beta/styles.scoped.css +42 -44
- package/lib/internal/template/top-navigation/1.0-beta/styles.selectors.js +25 -25
- package/lib/internal/template/top-navigation/styles.css.js +47 -47
- package/lib/internal/template/top-navigation/styles.scoped.css +66 -68
- package/lib/internal/template/top-navigation/styles.selectors.js +47 -47
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +21 -23
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
- package/lib/internal/template/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
- package/lib/internal/template/tutorial-panel/components/tutorial-list/styles.scoped.css +27 -30
- package/lib/internal/template/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
- package/lib/internal/template/tutorial-panel/styles.css.js +1 -1
- package/lib/internal/template/tutorial-panel/styles.scoped.css +1 -3
- package/lib/internal/template/tutorial-panel/styles.selectors.js +1 -1
- package/lib/internal/template/wizard/styles.css.js +30 -30
- package/lib/internal/template/wizard/styles.scoped.css +62 -61
- package/lib/internal/template/wizard/styles.selectors.js +30 -30
- package/lib/internal/template/wizard/wizard-form-header.js +1 -1
- package/lib/internal/template/wizard/wizard-form-header.js.map +1 -1
- package/lib/internal/template/wizard/wizard-form.js +1 -1
- package/lib/internal/template/wizard/wizard-form.js.map +1 -1
- package/lib/internal/template/wizard/wizard-navigation.js +3 -3
- package/lib/internal/template/wizard/wizard-navigation.js.map +1 -1
- package/package.json +1 -1
- package/lib/internal/template/internal/context/app-layout-context.d.ts +0 -8
- package/lib/internal/template/internal/context/app-layout-context.d.ts.map +0 -1
- package/lib/internal/template/internal/context/app-layout-context.js +0 -9
- package/lib/internal/template/internal/context/app-layout-context.js.map +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useRef } from 'react';
|
|
4
4
|
import { useEffect, useMemo } from 'react';
|
|
5
5
|
import { defaultIsSuppressed, findTableRowByAriaRowIndex, findTableRowCellByAriaColIndex, focusNextElement, getClosestCell, isElementDisabled, isTableCell, } from './utils';
|
|
6
6
|
import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
|
|
7
7
|
import { nodeBelongs } from '../../internal/utils/node-belongs';
|
|
8
8
|
import { getAllFocusables } from '../../internal/components/focus-lock/utils';
|
|
9
|
-
import {
|
|
9
|
+
import { SingleTabStopNavigationProvider, } from '../../internal/context/single-tab-stop-navigation-context';
|
|
10
10
|
import handleKey, { isEventLike } from '../../internal/utils/handle-key';
|
|
11
11
|
import { KeyCode } from '../../internal/keycode';
|
|
12
12
|
/**
|
|
@@ -14,7 +14,8 @@ import { KeyCode } from '../../internal/keycode';
|
|
|
14
14
|
* See grid-navigation.md
|
|
15
15
|
*/
|
|
16
16
|
export function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }) {
|
|
17
|
-
const
|
|
17
|
+
const navigationAPI = useRef(null);
|
|
18
|
+
const gridNavigation = useMemo(() => new GridNavigationProcessor(navigationAPI), []);
|
|
18
19
|
const getTableStable = useStableCallback(getTable);
|
|
19
20
|
// Initialize the processor with the table container assuming it is mounted synchronously and only once.
|
|
20
21
|
useEffect(() => {
|
|
@@ -34,10 +35,7 @@ export function GridNavigationProvider({ keyboardNavigation, pageSize, getTable,
|
|
|
34
35
|
gridNavigation.refresh();
|
|
35
36
|
}
|
|
36
37
|
});
|
|
37
|
-
return (React.createElement(
|
|
38
|
-
navigationActive: keyboardNavigation,
|
|
39
|
-
registerFocusable: gridNavigation.registerFocusable,
|
|
40
|
-
} }, children));
|
|
38
|
+
return (React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: keyboardNavigation, getNextFocusTarget: gridNavigation.getNextFocusTarget, isElementSuppressed: gridNavigation.isElementSuppressed, onRegisterFocusable: gridNavigation.onRegisterFocusable, onUnregisterFocusable: gridNavigation.onUnregisterFocusable }, children));
|
|
41
39
|
}
|
|
42
40
|
/**
|
|
43
41
|
* This helper encapsulates the grid navigation behaviors which are:
|
|
@@ -46,38 +44,23 @@ export function GridNavigationProvider({ keyboardNavigation, pageSize, getTable,
|
|
|
46
44
|
* 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.
|
|
47
45
|
*/
|
|
48
46
|
class GridNavigationProcessor {
|
|
49
|
-
constructor() {
|
|
47
|
+
constructor(navigationAPI) {
|
|
50
48
|
// Props
|
|
51
49
|
this._pageSize = 0;
|
|
52
50
|
this._table = null;
|
|
53
51
|
// State
|
|
54
52
|
this.focusedCell = null;
|
|
55
53
|
this.keepUserIndex = false;
|
|
56
|
-
this.
|
|
57
|
-
|
|
58
|
-
this.focusablesState = new WeakMap();
|
|
59
|
-
this.focusTarget = null;
|
|
60
|
-
this.registerFocusable = (focusableElement, changeHandler) => {
|
|
61
|
-
var _a, _b;
|
|
62
|
-
this.focusables.add(focusableElement);
|
|
63
|
-
this.focusHandlers.set(focusableElement, changeHandler);
|
|
64
|
-
const isFocusable = (_a = this.focusablesState.get(focusableElement)) !== null && _a !== void 0 ? _a : false;
|
|
65
|
-
const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);
|
|
66
|
-
if (newIsFocusable !== isFocusable) {
|
|
67
|
-
this.focusablesState.set(focusableElement, newIsFocusable);
|
|
68
|
-
changeHandler(newIsFocusable);
|
|
69
|
-
}
|
|
54
|
+
this.onRegisterFocusable = (focusableElement) => {
|
|
55
|
+
var _a;
|
|
70
56
|
// When newly registered element belongs to the focused cell the focus must transition to it.
|
|
71
|
-
const focusedElement = (
|
|
57
|
+
const focusedElement = (_a = this.focusedCell) === null || _a === void 0 ? void 0 : _a.element;
|
|
72
58
|
if (focusedElement && isTableCell(focusedElement) && focusedElement.contains(focusableElement)) {
|
|
73
59
|
// Scroll is unnecessary when moving focus from a cell to element within the cell.
|
|
74
60
|
focusableElement.focus({ preventScroll: true });
|
|
75
61
|
}
|
|
76
|
-
return () => this.unregisterFocusable(focusableElement);
|
|
77
62
|
};
|
|
78
|
-
this.
|
|
79
|
-
this.focusables.delete(focusable);
|
|
80
|
-
this.focusHandlers.delete(focusable);
|
|
63
|
+
this.onUnregisterFocusable = (focusable) => {
|
|
81
64
|
const isUnregisteringFocusedNode = nodeBelongs(focusable, document.activeElement);
|
|
82
65
|
if (isUnregisteringFocusedNode) {
|
|
83
66
|
// Wait for unmounted node to get removed from the DOM.
|
|
@@ -90,7 +73,28 @@ class GridNavigationProcessor {
|
|
|
90
73
|
}, 0);
|
|
91
74
|
}
|
|
92
75
|
};
|
|
76
|
+
this.getNextFocusTarget = () => {
|
|
77
|
+
var _a;
|
|
78
|
+
const cell = this.focusedCell;
|
|
79
|
+
const firstTableCell = this.table.querySelector('td,th');
|
|
80
|
+
// A single element of the table is made user-focusable.
|
|
81
|
+
// It defaults to the first interactive element of the first cell or the first cell itself otherwise.
|
|
82
|
+
let focusTarget = (_a = (firstTableCell && this.getFocusablesFrom(firstTableCell)[0])) !== null && _a !== void 0 ? _a : firstTableCell;
|
|
83
|
+
// When a navigation-focused element is present in the table it is used for user-navigation instead.
|
|
84
|
+
if (cell) {
|
|
85
|
+
focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });
|
|
86
|
+
}
|
|
87
|
+
return focusTarget;
|
|
88
|
+
};
|
|
89
|
+
this.isElementSuppressed = (element) => {
|
|
90
|
+
// Omit calculation as irrelevant until the table receives focus.
|
|
91
|
+
if (!this.focusedCell) {
|
|
92
|
+
return false;
|
|
93
|
+
}
|
|
94
|
+
return !element || defaultIsSuppressed(element);
|
|
95
|
+
};
|
|
93
96
|
this.onFocusin = (event) => {
|
|
97
|
+
var _a;
|
|
94
98
|
if (!(event.target instanceof HTMLElement)) {
|
|
95
99
|
return;
|
|
96
100
|
}
|
|
@@ -98,7 +102,7 @@ class GridNavigationProcessor {
|
|
|
98
102
|
if (!this.focusedCell) {
|
|
99
103
|
return;
|
|
100
104
|
}
|
|
101
|
-
this.updateFocusTarget();
|
|
105
|
+
(_a = this._navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
|
|
102
106
|
// Focusing on cell is not eligible when it contains focusable elements in the content.
|
|
103
107
|
// If content focusables are available - move the focus to the first one.
|
|
104
108
|
const focusedElement = this.focusedCell.element;
|
|
@@ -133,7 +137,7 @@ class GridNavigationProcessor {
|
|
|
133
137
|
const invalidModifierCombination = (modifiersPressed && !event.ctrlKey) ||
|
|
134
138
|
(event.ctrlKey && event.keyCode !== KeyCode.home && event.keyCode !== KeyCode.end);
|
|
135
139
|
if (invalidModifierCombination ||
|
|
136
|
-
this.
|
|
140
|
+
this.isElementSuppressed(document.activeElement) ||
|
|
137
141
|
!this.isRegistered(document.activeElement) ||
|
|
138
142
|
keys.indexOf(event.keyCode) === -1) {
|
|
139
143
|
return;
|
|
@@ -156,16 +160,15 @@ class GridNavigationProcessor {
|
|
|
156
160
|
: this.moveFocusBy(from, { y: 0, x: Infinity }),
|
|
157
161
|
});
|
|
158
162
|
};
|
|
163
|
+
this._navigationAPI = navigationAPI;
|
|
159
164
|
}
|
|
160
165
|
init(table) {
|
|
161
166
|
this._table = table;
|
|
162
167
|
this.table.addEventListener('focusin', this.onFocusin);
|
|
163
168
|
this.table.addEventListener('keydown', this.onKeydown);
|
|
164
|
-
this.updateFocusTarget();
|
|
165
169
|
this.cleanup = () => {
|
|
166
170
|
this.table.removeEventListener('focusin', this.onFocusin);
|
|
167
171
|
this.table.removeEventListener('keydown', this.onKeydown);
|
|
168
|
-
this.focusables.forEach(this.unregisterFocusable);
|
|
169
172
|
};
|
|
170
173
|
}
|
|
171
174
|
cleanup() {
|
|
@@ -177,11 +180,11 @@ class GridNavigationProcessor {
|
|
|
177
180
|
refresh() {
|
|
178
181
|
// Timeout ensures the newly rendered content elements are registered.
|
|
179
182
|
setTimeout(() => {
|
|
180
|
-
var _a;
|
|
183
|
+
var _a, _b;
|
|
181
184
|
if (this._table) {
|
|
182
185
|
// Update focused cell indices in case table rows, columns, or firstIndex change.
|
|
183
186
|
this.updateFocusedCell((_a = this.focusedCell) === null || _a === void 0 ? void 0 : _a.element);
|
|
184
|
-
this.updateFocusTarget();
|
|
187
|
+
(_b = this._navigationAPI.current) === null || _b === void 0 ? void 0 : _b.updateFocusTarget();
|
|
185
188
|
}
|
|
186
189
|
}, 0);
|
|
187
190
|
}
|
|
@@ -202,27 +205,9 @@ class GridNavigationProcessor {
|
|
|
202
205
|
}
|
|
203
206
|
focusNextElement(this.getNextFocusable(cell, delta));
|
|
204
207
|
}
|
|
205
|
-
updateFocusTarget() {
|
|
206
|
-
var _a;
|
|
207
|
-
this.focusTarget = this.getSingleFocusable();
|
|
208
|
-
for (const focusableElement of this.focusables) {
|
|
209
|
-
const isFocusable = (_a = this.focusablesState.get(focusableElement)) !== null && _a !== void 0 ? _a : false;
|
|
210
|
-
const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);
|
|
211
|
-
if (newIsFocusable !== isFocusable) {
|
|
212
|
-
this.focusablesState.set(focusableElement, newIsFocusable);
|
|
213
|
-
this.focusHandlers.get(focusableElement)(newIsFocusable);
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
isSuppressed(element) {
|
|
218
|
-
// Omit calculation as irrelevant until the table receives focus.
|
|
219
|
-
if (!this.focusedCell) {
|
|
220
|
-
return false;
|
|
221
|
-
}
|
|
222
|
-
return !element || defaultIsSuppressed(element);
|
|
223
|
-
}
|
|
224
208
|
isRegistered(element) {
|
|
225
|
-
|
|
209
|
+
var _a, _b;
|
|
210
|
+
return !element || ((_b = (_a = this._navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element)) !== null && _b !== void 0 ? _b : false);
|
|
226
211
|
}
|
|
227
212
|
updateFocusedCell(focusedElement) {
|
|
228
213
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -291,21 +276,9 @@ class GridNavigationProcessor {
|
|
|
291
276
|
}
|
|
292
277
|
return (_a = targetCellFocusables[focusIndex]) !== null && _a !== void 0 ? _a : targetCell;
|
|
293
278
|
}
|
|
294
|
-
getSingleFocusable() {
|
|
295
|
-
var _a;
|
|
296
|
-
const cell = this.focusedCell;
|
|
297
|
-
const firstTableCell = this.table.querySelector('td,th');
|
|
298
|
-
// A single element of the table is made user-focusable.
|
|
299
|
-
// It defaults to the first interactive element of the first cell or the first cell itself otherwise.
|
|
300
|
-
let focusTarget = (_a = (firstTableCell && this.getFocusablesFrom(firstTableCell)[0])) !== null && _a !== void 0 ? _a : firstTableCell;
|
|
301
|
-
// When a navigation-focused element is present in the table it is used for user-navigation instead.
|
|
302
|
-
if (cell) {
|
|
303
|
-
focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });
|
|
304
|
-
}
|
|
305
|
-
return focusTarget;
|
|
306
|
-
}
|
|
307
279
|
getFocusablesFrom(target) {
|
|
308
|
-
|
|
280
|
+
const isElementRegistered = (element) => { var _a; return (_a = this._navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element); };
|
|
281
|
+
return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
|
|
309
282
|
}
|
|
310
283
|
}
|
|
311
284
|
//# sourceMappingURL=grid-navigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-navigation.js","sourceRoot":"","sources":["../../../../src/table/table-role/grid-navigation.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\n\nimport React from 'react';\nimport { useEffect, useMemo } from 'react';\nimport {\n defaultIsSuppressed,\n findTableRowByAriaRowIndex,\n findTableRowCellByAriaColIndex,\n focusNextElement,\n getClosestCell,\n isElementDisabled,\n isTableCell,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { getAllFocusables } from '../../internal/components/focus-lock/utils';\nimport {\n SingleTabStopNavigationContext,\n FocusableChangeHandler,\n} from '../../internal/context/single-tab-stop-navigation-context';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { KeyCode } from '../../internal/keycode';\n\n/**\n * Makes table navigable with keyboard commands.\n * See grid-navigation.md\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n const gridNavigation = useMemo(() => new GridNavigationProcessor(), []);\n\n const getTableStable = useStableCallback(getTable);\n\n // Initialize the processor with the table container assuming it is mounted synchronously and only once.\n useEffect(() => {\n if (keyboardNavigation) {\n const table = getTableStable();\n table && gridNavigation.init(table);\n }\n return () => gridNavigation.cleanup();\n }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n // Notify the processor of the props change.\n useEffect(() => {\n gridNavigation.update({ pageSize });\n }, [gridNavigation, pageSize]);\n\n // Notify the processor of the new render.\n useEffect(() => {\n if (keyboardNavigation) {\n gridNavigation.refresh();\n }\n });\n\n return (\n <SingleTabStopNavigationContext.Provider\n value={{\n navigationActive: keyboardNavigation,\n registerFocusable: gridNavigation.registerFocusable,\n }}\n >\n {children}\n </SingleTabStopNavigationContext.Provider>\n );\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.\n */\nclass GridNavigationProcessor {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n\n // State\n private focusedCell: null | FocusedCell = null;\n private keepUserIndex = false;\n private focusables = new Set<Element>();\n private focusHandlers = new Map<Element, FocusableChangeHandler>();\n private focusablesState = new WeakMap<Element, boolean>();\n private focusTarget: null | Element = null;\n\n public init(table: HTMLTableElement) {\n this._table = table;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('keydown', this.onKeydown);\n\n this.updateFocusTarget();\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('keydown', this.onKeydown);\n this.focusables.forEach(this.unregisterFocusable);\n };\n }\n\n public cleanup() {\n // Do nothing before initialized.\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n public refresh() {\n // Timeout ensures the newly rendered content elements are registered.\n setTimeout(() => {\n if (this._table) {\n // Update focused cell indices in case table rows, columns, or firstIndex change.\n this.updateFocusedCell(this.focusedCell?.element);\n this.updateFocusTarget();\n }\n }, 0);\n }\n\n public registerFocusable = (focusableElement: HTMLElement, changeHandler: FocusableChangeHandler) => {\n this.focusables.add(focusableElement);\n this.focusHandlers.set(focusableElement, changeHandler);\n const isFocusable = this.focusablesState.get(focusableElement) ?? false;\n const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n if (newIsFocusable !== isFocusable) {\n this.focusablesState.set(focusableElement, newIsFocusable);\n changeHandler(newIsFocusable);\n }\n // When newly registered element belongs to the focused cell the focus must transition to it.\n const focusedElement = this.focusedCell?.element;\n if (focusedElement && isTableCell(focusedElement) && focusedElement.contains(focusableElement)) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n focusableElement.focus({ preventScroll: true });\n }\n return () => this.unregisterFocusable(focusableElement);\n };\n\n public unregisterFocusable = (focusable: Element) => {\n this.focusables.delete(focusable);\n this.focusHandlers.delete(focusable);\n\n const isUnregisteringFocusedNode = nodeBelongs(focusable, document.activeElement);\n if (isUnregisteringFocusedNode) {\n // Wait for unmounted node to get removed from the DOM.\n setTimeout(() => {\n // If the focused cell appears to be no longer attached to the table we need to re-apply\n // focus to a cell with the same or closest position.\n if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {\n this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });\n }\n }, 0);\n }\n };\n\n private get pageSize() {\n return this._pageSize;\n }\n\n private get table(): HTMLTableElement {\n if (!this._table) {\n throw new Error('Invariant violation: GridNavigationProcessor is used before initialization.');\n }\n return this._table;\n }\n\n private onFocusin = (event: FocusEvent) => {\n if (!(event.target instanceof HTMLElement)) {\n return;\n }\n\n this.updateFocusedCell(event.target);\n if (!this.focusedCell) {\n return;\n }\n\n this.updateFocusTarget();\n\n // Focusing on cell is not eligible when it contains focusable elements in the content.\n // If content focusables are available - move the focus to the first one.\n const focusedElement = this.focusedCell.element;\n const nextTarget = isTableCell(focusedElement) ? this.getFocusablesFrom(focusedElement)[0] : null;\n if (nextTarget) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n nextTarget.focus({ preventScroll: true });\n } else {\n this.keepUserIndex = false;\n }\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const keys = [\n KeyCode.up,\n KeyCode.down,\n KeyCode.left,\n KeyCode.right,\n KeyCode.pageUp,\n KeyCode.pageDown,\n KeyCode.home,\n KeyCode.end,\n ];\n const ctrlKey = event.ctrlKey ? 1 : 0;\n const altKey = event.altKey ? 1 : 0;\n const shiftKey = event.shiftKey ? 1 : 0;\n const metaKey = event.metaKey ? 1 : 0;\n const modifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n const invalidModifierCombination =\n (modifiersPressed && !event.ctrlKey) ||\n (event.ctrlKey && event.keyCode !== KeyCode.home && event.keyCode !== KeyCode.end);\n\n if (\n invalidModifierCombination ||\n this.isSuppressed(document.activeElement) ||\n !this.isRegistered(document.activeElement) ||\n keys.indexOf(event.keyCode) === -1\n ) {\n return;\n }\n\n const from = this.focusedCell;\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onBlockStart: () => this.moveFocusBy(from, { y: -1, x: 0 }),\n onBlockEnd: () => this.moveFocusBy(from, { y: 1, x: 0 }),\n onInlineStart: () => this.moveFocusBy(from, { y: 0, x: -1 }),\n onInlineEnd: () => this.moveFocusBy(from, { y: 0, x: 1 }),\n onPageUp: () => this.moveFocusBy(from, { y: -this.pageSize, x: 0 }),\n onPageDown: () => this.moveFocusBy(from, { y: this.pageSize, x: 0 }),\n onHome: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: -Infinity, x: -Infinity })\n : this.moveFocusBy(from, { y: 0, x: -Infinity }),\n onEnd: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: Infinity, x: Infinity })\n : this.moveFocusBy(from, { y: 0, x: Infinity }),\n });\n };\n\n private moveFocusBy(cell: FocusedCell, delta: { x: number; y: number }) {\n // For vertical moves preserve column- and element indices set by user.\n // It allows keeping indices while moving over disabled actions or cells with colspan > 1.\n if (delta.y !== 0 && delta.x === 0) {\n this.keepUserIndex = true;\n }\n focusNextElement(this.getNextFocusable(cell, delta));\n }\n\n private updateFocusTarget() {\n this.focusTarget = this.getSingleFocusable();\n for (const focusableElement of this.focusables) {\n const isFocusable = this.focusablesState.get(focusableElement) ?? false;\n const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n if (newIsFocusable !== isFocusable) {\n this.focusablesState.set(focusableElement, newIsFocusable);\n this.focusHandlers.get(focusableElement)!(newIsFocusable);\n }\n }\n }\n\n private isSuppressed(element: null | Element) {\n // Omit calculation as irrelevant until the table receives focus.\n if (!this.focusedCell) {\n return false;\n }\n return !element || defaultIsSuppressed(element);\n }\n\n private isRegistered(element: null | Element) {\n return !element || this.focusables.has(element);\n }\n\n private updateFocusedCell(focusedElement?: HTMLElement): void {\n if (!focusedElement) {\n return;\n }\n\n const cellElement = getClosestCell(focusedElement);\n const rowElement = cellElement?.closest('tr');\n if (!cellElement || !rowElement) {\n return;\n }\n\n const colIndex = parseInt(cellElement.getAttribute('aria-colindex') ?? '');\n const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex') ?? '');\n if (isNaN(colIndex) || isNaN(rowIndex)) {\n return;\n }\n\n const cellFocusables = this.getFocusablesFrom(cellElement);\n const elementIndex = cellFocusables.indexOf(focusedElement);\n\n const prevColIndex = this.focusedCell?.colIndex ?? -1;\n const prevElementIndex = this.focusedCell?.elementIndex ?? -1;\n this.focusedCell = {\n rowIndex,\n colIndex: this.keepUserIndex && prevColIndex !== -1 ? prevColIndex : colIndex,\n elementIndex: this.keepUserIndex && prevElementIndex !== -1 ? prevElementIndex : elementIndex,\n element: focusedElement,\n };\n }\n\n private getNextFocusable(from: FocusedCell, delta: { y: number; x: number }) {\n // Find next row to move focus into (can be null if the top/bottom is reached).\n const targetAriaRowIndex = from.rowIndex + delta.y;\n const targetRow = findTableRowByAriaRowIndex(this.table, targetAriaRowIndex, delta.y);\n if (!targetRow) {\n return null;\n }\n\n // Return next interactive cell content element if available.\n const cellElement = getClosestCell(from.element);\n const cellFocusables = cellElement ? this.getFocusablesFrom(cellElement) : [];\n const nextElementIndex = from.elementIndex + delta.x;\n const isValidDirection = !!delta.x;\n const isValidIndex = from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length;\n const isTargetDifferent = from.element !== cellFocusables[nextElementIndex];\n if (isValidDirection && isValidIndex && isTargetDifferent) {\n return cellFocusables[nextElementIndex];\n }\n\n // Find next cell to focus or move focus into (can be null if the left/right edge is reached).\n const targetAriaColIndex = from.colIndex + delta.x;\n const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n if (!targetCell) {\n return null;\n }\n\n // When target cell matches the current cell it means we reached the left or right boundary.\n if (targetCell === cellElement && delta.x !== 0) {\n return null;\n }\n\n const targetCellFocusables = this.getFocusablesFrom(targetCell);\n\n // When delta.x = 0 keep element index if possible.\n let focusIndex = from.elementIndex;\n // Use first element index when moving to the right or to extreme left.\n if ((isFinite(delta.x) && delta.x > 0) || delta.x === -Infinity) {\n focusIndex = 0;\n }\n // Use last element index when moving to the left or to extreme right.\n if ((isFinite(delta.x) && delta.x < 0) || delta.x === Infinity) {\n focusIndex = targetCellFocusables.length - 1;\n }\n\n return targetCellFocusables[focusIndex] ?? targetCell;\n }\n\n private getSingleFocusable() {\n const cell = this.focusedCell;\n const firstTableCell = this.table.querySelector('td,th') as null | HTMLTableCellElement;\n\n // A single element of the table is made user-focusable.\n // It defaults to the first interactive element of the first cell or the first cell itself otherwise.\n let focusTarget: null | HTMLElement =\n (firstTableCell && this.getFocusablesFrom(firstTableCell)[0]) ?? firstTableCell;\n\n // When a navigation-focused element is present in the table it is used for user-navigation instead.\n if (cell) {\n focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });\n }\n\n return focusTarget;\n }\n\n private getFocusablesFrom(target: HTMLElement) {\n return getAllFocusables(target).filter(el => this.focusables.has(el) && !isElementDisabled(el));\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"grid-navigation.js","sourceRoot":"","sources":["../../../../src/table/table-role/grid-navigation.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\n\nimport React, { useRef } from 'react';\nimport { useEffect, useMemo } from 'react';\nimport {\n defaultIsSuppressed,\n findTableRowByAriaRowIndex,\n findTableRowCellByAriaColIndex,\n focusNextElement,\n getClosestCell,\n isElementDisabled,\n isTableCell,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { getAllFocusables } from '../../internal/components/focus-lock/utils';\nimport {\n SingleTabStopNavigationProvider,\n SingleTabStopNavigationAPI,\n} from '../../internal/context/single-tab-stop-navigation-context';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { KeyCode } from '../../internal/keycode';\n\n/**\n * Makes table navigable with keyboard commands.\n * See grid-navigation.md\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n const gridNavigation = useMemo(() => new GridNavigationProcessor(navigationAPI), []);\n\n const getTableStable = useStableCallback(getTable);\n\n // Initialize the processor with the table container assuming it is mounted synchronously and only once.\n useEffect(() => {\n if (keyboardNavigation) {\n const table = getTableStable();\n table && gridNavigation.init(table);\n }\n return () => gridNavigation.cleanup();\n }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n // Notify the processor of the props change.\n useEffect(() => {\n gridNavigation.update({ pageSize });\n }, [gridNavigation, pageSize]);\n\n // Notify the processor of the new render.\n useEffect(() => {\n if (keyboardNavigation) {\n gridNavigation.refresh();\n }\n });\n\n return (\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={keyboardNavigation}\n getNextFocusTarget={gridNavigation.getNextFocusTarget}\n isElementSuppressed={gridNavigation.isElementSuppressed}\n onRegisterFocusable={gridNavigation.onRegisterFocusable}\n onUnregisterFocusable={gridNavigation.onUnregisterFocusable}\n >\n {children}\n </SingleTabStopNavigationProvider>\n );\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.\n */\nclass GridNavigationProcessor {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n private _navigationAPI: { current: null | SingleTabStopNavigationAPI };\n\n // State\n private focusedCell: null | FocusedCell = null;\n private keepUserIndex = false;\n\n constructor(navigationAPI: { current: null | SingleTabStopNavigationAPI }) {\n this._navigationAPI = navigationAPI;\n }\n\n public init(table: HTMLTableElement) {\n this._table = table;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('keydown', this.onKeydown);\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('keydown', this.onKeydown);\n };\n }\n\n public cleanup() {\n // Do nothing before initialized.\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n public refresh() {\n // Timeout ensures the newly rendered content elements are registered.\n setTimeout(() => {\n if (this._table) {\n // Update focused cell indices in case table rows, columns, or firstIndex change.\n this.updateFocusedCell(this.focusedCell?.element);\n this._navigationAPI.current?.updateFocusTarget();\n }\n }, 0);\n }\n\n public onRegisterFocusable = (focusableElement: HTMLElement) => {\n // When newly registered element belongs to the focused cell the focus must transition to it.\n const focusedElement = this.focusedCell?.element;\n if (focusedElement && isTableCell(focusedElement) && focusedElement.contains(focusableElement)) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n focusableElement.focus({ preventScroll: true });\n }\n };\n\n public onUnregisterFocusable = (focusable: Element) => {\n const isUnregisteringFocusedNode = nodeBelongs(focusable, document.activeElement);\n if (isUnregisteringFocusedNode) {\n // Wait for unmounted node to get removed from the DOM.\n setTimeout(() => {\n // If the focused cell appears to be no longer attached to the table we need to re-apply\n // focus to a cell with the same or closest position.\n if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {\n this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });\n }\n }, 0);\n }\n };\n\n public getNextFocusTarget = () => {\n const cell = this.focusedCell;\n const firstTableCell = this.table.querySelector('td,th') as null | HTMLTableCellElement;\n\n // A single element of the table is made user-focusable.\n // It defaults to the first interactive element of the first cell or the first cell itself otherwise.\n let focusTarget: null | HTMLElement =\n (firstTableCell && this.getFocusablesFrom(firstTableCell)[0]) ?? firstTableCell;\n\n // When a navigation-focused element is present in the table it is used for user-navigation instead.\n if (cell) {\n focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });\n }\n\n return focusTarget;\n };\n\n public isElementSuppressed = (element: null | Element) => {\n // Omit calculation as irrelevant until the table receives focus.\n if (!this.focusedCell) {\n return false;\n }\n return !element || defaultIsSuppressed(element);\n };\n\n private get pageSize() {\n return this._pageSize;\n }\n\n private get table(): HTMLTableElement {\n if (!this._table) {\n throw new Error('Invariant violation: GridNavigationProcessor is used before initialization.');\n }\n return this._table;\n }\n\n private onFocusin = (event: FocusEvent) => {\n if (!(event.target instanceof HTMLElement)) {\n return;\n }\n\n this.updateFocusedCell(event.target);\n if (!this.focusedCell) {\n return;\n }\n\n this._navigationAPI.current?.updateFocusTarget();\n\n // Focusing on cell is not eligible when it contains focusable elements in the content.\n // If content focusables are available - move the focus to the first one.\n const focusedElement = this.focusedCell.element;\n const nextTarget = isTableCell(focusedElement) ? this.getFocusablesFrom(focusedElement)[0] : null;\n if (nextTarget) {\n // Scroll is unnecessary when moving focus from a cell to element within the cell.\n nextTarget.focus({ preventScroll: true });\n } else {\n this.keepUserIndex = false;\n }\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const keys = [\n KeyCode.up,\n KeyCode.down,\n KeyCode.left,\n KeyCode.right,\n KeyCode.pageUp,\n KeyCode.pageDown,\n KeyCode.home,\n KeyCode.end,\n ];\n const ctrlKey = event.ctrlKey ? 1 : 0;\n const altKey = event.altKey ? 1 : 0;\n const shiftKey = event.shiftKey ? 1 : 0;\n const metaKey = event.metaKey ? 1 : 0;\n const modifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n const invalidModifierCombination =\n (modifiersPressed && !event.ctrlKey) ||\n (event.ctrlKey && event.keyCode !== KeyCode.home && event.keyCode !== KeyCode.end);\n\n if (\n invalidModifierCombination ||\n this.isElementSuppressed(document.activeElement) ||\n !this.isRegistered(document.activeElement) ||\n keys.indexOf(event.keyCode) === -1\n ) {\n return;\n }\n\n const from = this.focusedCell;\n event.preventDefault();\n\n isEventLike(event) &&\n handleKey(event, {\n onBlockStart: () => this.moveFocusBy(from, { y: -1, x: 0 }),\n onBlockEnd: () => this.moveFocusBy(from, { y: 1, x: 0 }),\n onInlineStart: () => this.moveFocusBy(from, { y: 0, x: -1 }),\n onInlineEnd: () => this.moveFocusBy(from, { y: 0, x: 1 }),\n onPageUp: () => this.moveFocusBy(from, { y: -this.pageSize, x: 0 }),\n onPageDown: () => this.moveFocusBy(from, { y: this.pageSize, x: 0 }),\n onHome: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: -Infinity, x: -Infinity })\n : this.moveFocusBy(from, { y: 0, x: -Infinity }),\n onEnd: () =>\n event.ctrlKey\n ? this.moveFocusBy(from, { y: Infinity, x: Infinity })\n : this.moveFocusBy(from, { y: 0, x: Infinity }),\n });\n };\n\n private moveFocusBy(cell: FocusedCell, delta: { x: number; y: number }) {\n // For vertical moves preserve column- and element indices set by user.\n // It allows keeping indices while moving over disabled actions or cells with colspan > 1.\n if (delta.y !== 0 && delta.x === 0) {\n this.keepUserIndex = true;\n }\n focusNextElement(this.getNextFocusable(cell, delta));\n }\n\n private isRegistered(element: null | Element): boolean {\n return !element || (this._navigationAPI.current?.isRegistered(element) ?? false);\n }\n\n private updateFocusedCell(focusedElement?: HTMLElement): void {\n if (!focusedElement) {\n return;\n }\n\n const cellElement = getClosestCell(focusedElement);\n const rowElement = cellElement?.closest('tr');\n if (!cellElement || !rowElement) {\n return;\n }\n\n const colIndex = parseInt(cellElement.getAttribute('aria-colindex') ?? '');\n const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex') ?? '');\n if (isNaN(colIndex) || isNaN(rowIndex)) {\n return;\n }\n\n const cellFocusables = this.getFocusablesFrom(cellElement);\n const elementIndex = cellFocusables.indexOf(focusedElement);\n\n const prevColIndex = this.focusedCell?.colIndex ?? -1;\n const prevElementIndex = this.focusedCell?.elementIndex ?? -1;\n this.focusedCell = {\n rowIndex,\n colIndex: this.keepUserIndex && prevColIndex !== -1 ? prevColIndex : colIndex,\n elementIndex: this.keepUserIndex && prevElementIndex !== -1 ? prevElementIndex : elementIndex,\n element: focusedElement,\n };\n }\n\n private getNextFocusable(from: FocusedCell, delta: { y: number; x: number }) {\n // Find next row to move focus into (can be null if the top/bottom is reached).\n const targetAriaRowIndex = from.rowIndex + delta.y;\n const targetRow = findTableRowByAriaRowIndex(this.table, targetAriaRowIndex, delta.y);\n if (!targetRow) {\n return null;\n }\n\n // Return next interactive cell content element if available.\n const cellElement = getClosestCell(from.element);\n const cellFocusables = cellElement ? this.getFocusablesFrom(cellElement) : [];\n const nextElementIndex = from.elementIndex + delta.x;\n const isValidDirection = !!delta.x;\n const isValidIndex = from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length;\n const isTargetDifferent = from.element !== cellFocusables[nextElementIndex];\n if (isValidDirection && isValidIndex && isTargetDifferent) {\n return cellFocusables[nextElementIndex];\n }\n\n // Find next cell to focus or move focus into (can be null if the left/right edge is reached).\n const targetAriaColIndex = from.colIndex + delta.x;\n const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n if (!targetCell) {\n return null;\n }\n\n // When target cell matches the current cell it means we reached the left or right boundary.\n if (targetCell === cellElement && delta.x !== 0) {\n return null;\n }\n\n const targetCellFocusables = this.getFocusablesFrom(targetCell);\n\n // When delta.x = 0 keep element index if possible.\n let focusIndex = from.elementIndex;\n // Use first element index when moving to the right or to extreme left.\n if ((isFinite(delta.x) && delta.x > 0) || delta.x === -Infinity) {\n focusIndex = 0;\n }\n // Use last element index when moving to the left or to extreme right.\n if ((isFinite(delta.x) && delta.x < 0) || delta.x === Infinity) {\n focusIndex = targetCellFocusables.length - 1;\n }\n\n return targetCellFocusables[focusIndex] ?? targetCell;\n }\n\n private getFocusablesFrom(target: HTMLElement) {\n const isElementRegistered = (element: Element) => this._navigationAPI.current?.isRegistered(element);\n return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n }\n}\n"]}
|
|
@@ -29,6 +29,7 @@ export interface TheadProps {
|
|
|
29
29
|
onFocusedComponentChange?: (focusId: null | string) => void;
|
|
30
30
|
tableRole: TableRole;
|
|
31
31
|
isExpandable?: boolean;
|
|
32
|
+
setLastUserAction: (name: string) => void;
|
|
32
33
|
}
|
|
33
34
|
declare const Thead: React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
34
35
|
export default Thead;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAkC,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA8B,SAAS,EAAE,MAAM,cAAc,CAAC;AAKrE,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,cAAc,CAAC;IACzC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC9D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAkC,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA8B,SAAS,EAAE,MAAM,cAAc,CAAC;AAKrE,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,cAAc,CAAC;IACzC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC9D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,QAAA,MAAM,KAAK,wFAiIV,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -15,7 +15,7 @@ import { getTableHeaderRowRoleProps } from './table-role';
|
|
|
15
15
|
import { TableThElement } from './header-cell/th-element';
|
|
16
16
|
import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
|
|
17
17
|
import { Divider } from './resizer';
|
|
18
|
-
const Thead = React.forwardRef(({ selectionType, getSelectAllProps, columnDefinitions, sortingColumn, sortingDisabled, sortingDescending, resizableColumns, variant, wrapLines, onFocusMove, onSortingChange, onResizeFinish, singleSelectionHeaderAriaLabel, stripedRows, sticky = false, hidden = false, stuck = false, stickyState, selectionColumnId, focusedComponent, onFocusedComponentChange, tableRole, resizerRoleDescription, isExpandable, }, outerRef) => {
|
|
18
|
+
const Thead = React.forwardRef(({ selectionType, getSelectAllProps, columnDefinitions, sortingColumn, sortingDisabled, sortingDescending, resizableColumns, variant, wrapLines, onFocusMove, onSortingChange, onResizeFinish, singleSelectionHeaderAriaLabel, stripedRows, sticky = false, hidden = false, stuck = false, stickyState, selectionColumnId, focusedComponent, onFocusedComponentChange, tableRole, resizerRoleDescription, isExpandable, setLastUserAction, }, outerRef) => {
|
|
19
19
|
const isVisualRefresh = useVisualRefresh();
|
|
20
20
|
const headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles[`header-cell-variant-${variant}`], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
|
|
21
21
|
const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header'], isVisualRefresh && styles['is-visual-refresh']);
|
|
@@ -34,7 +34,10 @@ const Thead = React.forwardRef(({ selectionType, getSelectAllProps, columnDefini
|
|
|
34
34
|
React.createElement(Divider, { className: styles['resize-divider'] }))) : null,
|
|
35
35
|
columnDefinitions.map((column, colIndex) => {
|
|
36
36
|
const columnId = getColumnKey(column, colIndex);
|
|
37
|
-
return (React.createElement(TableHeaderCell, { key: columnId, style: getColumnStyles(sticky, columnId), className: headerCellClass, tabIndex: sticky ? -1 : 0, focusedComponent: focusedComponent, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: selectionType ? colIndex + 1 : colIndex, columnId: columnId, updateColumn: updateColumn, onResizeFinish: () => onResizeFinish(columnWidths), resizableColumns: resizableColumns, onClick: detail =>
|
|
37
|
+
return (React.createElement(TableHeaderCell, { key: columnId, style: getColumnStyles(sticky, columnId), className: headerCellClass, tabIndex: sticky ? -1 : 0, focusedComponent: focusedComponent, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: selectionType ? colIndex + 1 : colIndex, columnId: columnId, updateColumn: updateColumn, onResizeFinish: () => onResizeFinish(columnWidths), resizableColumns: resizableColumns, onClick: detail => {
|
|
38
|
+
setLastUserAction('sorting');
|
|
39
|
+
fireNonCancelableEvent(onSortingChange, detail);
|
|
40
|
+
}, isEditable: !!column.editConfig, stickyState: stickyState, cellRef: node => setCell(sticky, columnId, node), tableRole: tableRole, resizerRoleDescription: resizerRoleDescription,
|
|
38
41
|
// Expandable option is only applicable to the first data column of the table.
|
|
39
42
|
// When present, the header content receives extra padding to match the first offset in the data cells.
|
|
40
43
|
isExpandable: colIndex === 0 && isExpandable }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAkB,MAAM,aAAa,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AAExE,OAAO,EAAE,0BAA0B,EAAa,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA6BpC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,WAAW,EACX,eAAe,EACf,cAAc,EACd,8BAA8B,EAC9B,WAAW,EACX,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,SAAS,EACT,sBAAsB,EACtB,YAAY,GACD,EACb,QAAwC,EACxC,EAAE;IACF,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,eAAe,GAAG,IAAI,CAC1B,gBAAgB,CAAC,aAAa,CAAC,EAC/B,gBAAgB,CAAC,uBAAuB,OAAO,EAAE,CAAC,EAClD,MAAM,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,EAChD,KAAK,IAAI,gBAAgB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,IAAI,gBAAgB,CAAC,kBAAkB,CAAC,EACnD,eAAe,IAAI,gBAAgB,CAAC,mBAAmB,CAAC,CACzD,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAI,CAC7B,MAAM,CAAC,mBAAmB,CAAC,EAC3B,MAAM,CAAC,0BAA0B,CAAC,EAClC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAC/C,CAAC;IAEF,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;IAEnF,OAAO,CACL,+BAAO,SAAS,EAAE,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;QACvD,4CACM,YAAY,CAAC,GAAG,IACpB,GAAG,EAAE,QAAQ,mBACE,CAAC,IACZ,0BAA0B,CAAC,EAAE,SAAS,EAAE,CAAC,IAC7C,OAAO,EAAE,KAAK,CAAC,EAAE;;gBACf,MAAM,mBAAmB,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC;gBAC1G,MAAM,OAAO,GAAG,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,YAAY,CAAC,eAAe,CAAC,mCAAI,IAAI,CAAC;gBAC3E,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAG,OAAO,CAAC,CAAC;YACtC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAG,IAAI,CAAC;YAE7C,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,EAAE,MAAM,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,EACtG,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,EACX,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAE,WAAW;gBAEvB,iBAAiB,CAAC,CAAC,CAAC,CACnB,oBAAC,gBAAgB,kBACf,WAAW,EAAE,KAAK,CAAC,EAAE;wBACnB,WAAY,CAAC,KAAK,CAAC,MAAqB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBACpD,CAAC,EACD,gBAAgB,EAAE,gBAAgB,IAC9B,iBAAiB,EAAE,EACnB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,QAAE,8BAA8B,CAAoB,CACtE;gBACD,oBAAC,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,GAAI,CACjC,CAClB,CAAC,CAAC,CAAC,IAAI;YAEP,iBAAiB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;gBAC1C,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;gBAChD,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,EACxC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,aAAa,EAClC,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EACjD,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,YAAY,CAAC,EAClD,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,sBAAsB,CAAC,eAAe,EAAE,MAAM,CAAC,EAClE,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,EAC/B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAChD,SAAS,EAAE,SAAS,EACpB,sBAAsB,EAAE,sBAAsB;oBAC9C,8EAA8E;oBAC9E,uGAAuG;oBACvG,YAAY,EAAE,QAAQ,KAAK,CAAC,IAAI,YAAY,GAC5C,CACH,CAAC;YACJ,CAAC,CAAC,CACC,CACC,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport { SelectionControl, focusMarkers, SelectionProps } from './selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { StickyColumnsModel } from './sticky-columns';\nimport { getTableHeaderRowRoleProps, TableRole } from './table-role';\nimport { TableThElement } from './header-cell/th-element';\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { Divider } from './resizer';\n\nexport interface TheadProps {\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n getSelectAllProps?: () => SelectionProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onResizeFinish: (newWidths: Map<PropertyKey, number>) => void;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n resizerRoleDescription?: string;\n stripedRows?: boolean;\n stickyState: StickyColumnsModel;\n selectionColumnId: PropertyKey;\n focusedComponent?: null | string;\n onFocusedComponentChange?: (focusId: null | string) => void;\n tableRole: TableRole;\n isExpandable?: boolean;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n selectionType,\n getSelectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n sticky = false,\n hidden = false,\n stuck = false,\n stickyState,\n selectionColumnId,\n focusedComponent,\n onFocusedComponentChange,\n tableRole,\n resizerRoleDescription,\n isExpandable,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck'],\n stripedRows && headerCellStyles['has-striped-rows'],\n isVisualRefresh && headerCellStyles['is-visual-refresh']\n );\n\n const selectionCellClass = clsx(\n styles['selection-control'],\n styles['selection-control-header'],\n isVisualRefresh && styles['is-visual-refresh']\n );\n\n const { getColumnStyles, columnWidths, updateColumn, setCell } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr\n {...focusMarkers.all}\n ref={outerRef}\n aria-rowindex={1}\n {...getTableHeaderRowRoleProps({ tableRole })}\n onFocus={event => {\n const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));\n const focusId = focusControlElement?.getAttribute('data-focus-id') ?? null;\n onFocusedComponentChange?.(focusId);\n }}\n onBlur={() => onFocusedComponentChange?.(null)}\n >\n {selectionType ? (\n <TableThElement\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n hidden={hidden}\n tableRole={tableRole}\n colIndex={0}\n focusedComponent={focusedComponent}\n columnId={selectionColumnId}\n stickyState={stickyState}\n >\n {getSelectAllProps ? (\n <SelectionControl\n onFocusDown={event => {\n onFocusMove!(event.target as HTMLElement, -1, +1);\n }}\n focusedComponent={focusedComponent}\n {...getSelectAllProps()}\n {...(sticky ? { tabIndex: -1 } : {})}\n />\n ) : (\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n )}\n <Divider className={styles['resize-divider']} />\n </TableThElement>\n ) : null}\n\n {columnDefinitions.map((column, colIndex) => {\n const columnId = getColumnKey(column, colIndex);\n return (\n <TableHeaderCell\n key={columnId}\n style={getColumnStyles(sticky, columnId)}\n className={headerCellClass}\n tabIndex={sticky ? -1 : 0}\n focusedComponent={focusedComponent}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n hidden={hidden}\n colIndex={selectionType ? colIndex + 1 : colIndex}\n columnId={columnId}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n isEditable={!!column.editConfig}\n stickyState={stickyState}\n cellRef={node => setCell(sticky, columnId, node)}\n tableRole={tableRole}\n resizerRoleDescription={resizerRoleDescription}\n // Expandable option is only applicable to the first data column of the table.\n // When present, the header content receives extra padding to match the first offset in the data cells.\n isExpandable={colIndex === 0 && isExpandable}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
|
|
1
|
+
{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport { SelectionControl, focusMarkers, SelectionProps } from './selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { StickyColumnsModel } from './sticky-columns';\nimport { getTableHeaderRowRoleProps, TableRole } from './table-role';\nimport { TableThElement } from './header-cell/th-element';\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { Divider } from './resizer';\n\nexport interface TheadProps {\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n getSelectAllProps?: () => SelectionProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onResizeFinish: (newWidths: Map<PropertyKey, number>) => void;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n resizerRoleDescription?: string;\n stripedRows?: boolean;\n stickyState: StickyColumnsModel;\n selectionColumnId: PropertyKey;\n focusedComponent?: null | string;\n onFocusedComponentChange?: (focusId: null | string) => void;\n tableRole: TableRole;\n isExpandable?: boolean;\n setLastUserAction: (name: string) => void;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n selectionType,\n getSelectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n stripedRows,\n sticky = false,\n hidden = false,\n stuck = false,\n stickyState,\n selectionColumnId,\n focusedComponent,\n onFocusedComponentChange,\n tableRole,\n resizerRoleDescription,\n isExpandable,\n setLastUserAction,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const isVisualRefresh = useVisualRefresh();\n\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck'],\n stripedRows && headerCellStyles['has-striped-rows'],\n isVisualRefresh && headerCellStyles['is-visual-refresh']\n );\n\n const selectionCellClass = clsx(\n styles['selection-control'],\n styles['selection-control-header'],\n isVisualRefresh && styles['is-visual-refresh']\n );\n\n const { getColumnStyles, columnWidths, updateColumn, setCell } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr\n {...focusMarkers.all}\n ref={outerRef}\n aria-rowindex={1}\n {...getTableHeaderRowRoleProps({ tableRole })}\n onFocus={event => {\n const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));\n const focusId = focusControlElement?.getAttribute('data-focus-id') ?? null;\n onFocusedComponentChange?.(focusId);\n }}\n onBlur={() => onFocusedComponentChange?.(null)}\n >\n {selectionType ? (\n <TableThElement\n className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n hidden={hidden}\n tableRole={tableRole}\n colIndex={0}\n focusedComponent={focusedComponent}\n columnId={selectionColumnId}\n stickyState={stickyState}\n >\n {getSelectAllProps ? (\n <SelectionControl\n onFocusDown={event => {\n onFocusMove!(event.target as HTMLElement, -1, +1);\n }}\n focusedComponent={focusedComponent}\n {...getSelectAllProps()}\n {...(sticky ? { tabIndex: -1 } : {})}\n />\n ) : (\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n )}\n <Divider className={styles['resize-divider']} />\n </TableThElement>\n ) : null}\n\n {columnDefinitions.map((column, colIndex) => {\n const columnId = getColumnKey(column, colIndex);\n return (\n <TableHeaderCell\n key={columnId}\n style={getColumnStyles(sticky, columnId)}\n className={headerCellClass}\n tabIndex={sticky ? -1 : 0}\n focusedComponent={focusedComponent}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n hidden={hidden}\n colIndex={selectionType ? colIndex + 1 : colIndex}\n columnId={columnId}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => {\n setLastUserAction('sorting');\n fireNonCancelableEvent(onSortingChange, detail);\n }}\n isEditable={!!column.editConfig}\n stickyState={stickyState}\n cellRef={node => setCell(sticky, columnId, node)}\n tableRole={tableRole}\n resizerRoleDescription={resizerRoleDescription}\n // Expandable option is only applicable to the first data column of the table.\n // When present, the header content receives extra padding to match the first offset in the data cells.\n isExpandable={colIndex === 0 && isExpandable}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
|
|
@@ -4,7 +4,8 @@ interface ToolsHeaderProps {
|
|
|
4
4
|
filter?: React.ReactNode;
|
|
5
5
|
pagination?: React.ReactNode;
|
|
6
6
|
preferences?: React.ReactNode;
|
|
7
|
+
setLastUserAction?: (name: string) => void;
|
|
7
8
|
}
|
|
8
|
-
export default function ToolsHeader({ header, filter, pagination, preferences }: ToolsHeaderProps): JSX.Element;
|
|
9
|
+
export default function ToolsHeader({ header, filter, pagination, preferences, setLastUserAction }: ToolsHeaderProps): JSX.Element;
|
|
9
10
|
export {};
|
|
10
11
|
//# sourceMappingURL=tools-header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tools-header.d.ts","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"tools-header.d.ts","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,eAwCnH"}
|
|
@@ -6,7 +6,7 @@ import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import { CollectionLabelContext } from '../internal/context/collection-label-context';
|
|
8
8
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
9
|
-
export default function ToolsHeader({ header, filter, pagination, preferences }) {
|
|
9
|
+
export default function ToolsHeader({ header, filter, pagination, preferences, setLastUserAction }) {
|
|
10
10
|
const [breakpoint, ref] = useContainerBreakpoints(['xs']);
|
|
11
11
|
const isHeaderString = typeof header === 'string';
|
|
12
12
|
const assignHeaderId = useContext(CollectionLabelContext).assignId;
|
|
@@ -19,9 +19,9 @@ export default function ToolsHeader({ header, filter, pagination, preferences })
|
|
|
19
19
|
return (React.createElement(React.Fragment, null,
|
|
20
20
|
isHeaderString ? React.createElement("span", { id: headingId }, header) : header,
|
|
21
21
|
hasTools && (React.createElement("div", { ref: ref, className: clsx(styles.tools, isSmall && styles['tools-small']) },
|
|
22
|
-
filter && React.createElement("div", { className: styles['tools-filtering'] }, filter),
|
|
22
|
+
filter && (React.createElement("div", { className: styles['tools-filtering'], onClickCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('filter'), onKeyDownCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('filter') }, filter)),
|
|
23
23
|
React.createElement("div", { className: styles['tools-align-right'] },
|
|
24
|
-
pagination && React.createElement("div", { className: styles['tools-pagination'] }, pagination),
|
|
25
|
-
preferences && React.createElement("div", { className: styles['tools-preferences'] }, preferences))))));
|
|
24
|
+
pagination && (React.createElement("div", { className: styles['tools-pagination'], onClickCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('pagination') }, pagination)),
|
|
25
|
+
preferences && (React.createElement("div", { className: styles['tools-preferences'], onClickCapture: () => setLastUserAction === null || setLastUserAction === void 0 ? void 0 : setLastUserAction('preferences') }, preferences)))))));
|
|
26
26
|
}
|
|
27
27
|
//# sourceMappingURL=tools-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tools-header.js","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"tools-header.js","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAoB;IAClH,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC;IAClD,MAAM,cAAc,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC,QAAQ,CAAC;IACnE,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,EAAE;QAClD,cAAc,CAAC,SAAS,CAAC,CAAC;KAC3B;IACD,MAAM,OAAO,GAAG,UAAU,KAAK,SAAS,CAAC;IACzC,MAAM,QAAQ,GAAG,MAAM,IAAI,UAAU,IAAI,WAAW,CAAC;IACrD,OAAO,CACL;QACG,cAAc,CAAC,CAAC,CAAC,8BAAM,EAAE,EAAE,SAAS,IAAG,MAAM,CAAQ,CAAC,CAAC,CAAC,MAAM;QAC9D,QAAQ,IAAI,CACX,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC;YAC3E,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,QAAQ,CAAC,EACnD,gBAAgB,EAAE,GAAG,EAAE,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,QAAQ,CAAC,IAEpD,MAAM,CACH,CACP;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACxC,UAAU,IAAI,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,YAAY,CAAC,IAChG,UAAU,CACP,CACP;gBACA,WAAW,IAAI,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,aAAa,CAAC,IAClG,WAAW,CACR,CACP,CACG,CACF,CACP,CACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport styles from './styles.css.js';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\ninterface ToolsHeaderProps {\n header: React.ReactNode;\n filter?: React.ReactNode;\n pagination?: React.ReactNode;\n preferences?: React.ReactNode;\n setLastUserAction?: (name: string) => void;\n}\n\nexport default function ToolsHeader({ header, filter, pagination, preferences, setLastUserAction }: ToolsHeaderProps) {\n const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n const isHeaderString = typeof header === 'string';\n const assignHeaderId = useContext(CollectionLabelContext).assignId;\n const headingId = useUniqueId('heading');\n if (assignHeaderId !== undefined && isHeaderString) {\n assignHeaderId(headingId);\n }\n const isSmall = breakpoint === 'default';\n const hasTools = filter || pagination || preferences;\n return (\n <>\n {isHeaderString ? <span id={headingId}>{header}</span> : header}\n {hasTools && (\n <div ref={ref} className={clsx(styles.tools, isSmall && styles['tools-small'])}>\n {filter && (\n <div\n className={styles['tools-filtering']}\n onClickCapture={() => setLastUserAction?.('filter')}\n onKeyDownCapture={() => setLastUserAction?.('filter')}\n >\n {filter}\n </div>\n )}\n <div className={styles['tools-align-right']}>\n {pagination && (\n <div className={styles['tools-pagination']} onClickCapture={() => setLastUserAction?.('pagination')}>\n {pagination}\n </div>\n )}\n {preferences && (\n <div className={styles['tools-preferences']} onClickCapture={() => setLastUserAction?.('preferences')}>\n {preferences}\n </div>\n )}\n </div>\n </div>\n )}\n </>\n );\n}\n"]}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"tabs-header": "awsui_tabs-
|
|
5
|
-
"tabs-header-list": "awsui_tabs-header-
|
|
6
|
-
"pagination-button": "awsui_pagination-
|
|
7
|
-
"pagination-button-left": "awsui_pagination-button-
|
|
8
|
-
"pagination-button-left-scrollable": "awsui_pagination-button-left-
|
|
9
|
-
"pagination-button-right": "awsui_pagination-button-
|
|
10
|
-
"pagination-button-right-scrollable": "awsui_pagination-button-right-
|
|
11
|
-
"tabs-tab": "awsui_tabs-
|
|
12
|
-
"tabs-tab-label": "awsui_tabs-tab-
|
|
13
|
-
"tabs-tab-link": "awsui_tabs-tab-
|
|
14
|
-
"refresh": "
|
|
15
|
-
"tabs-tab-disabled": "awsui_tabs-tab-
|
|
16
|
-
"tabs-tab-active": "awsui_tabs-tab-
|
|
17
|
-
"tabs-header-with-divider": "awsui_tabs-header-with-
|
|
18
|
-
"root": "
|
|
19
|
-
"tabs": "
|
|
20
|
-
"tabs-content": "awsui_tabs-
|
|
21
|
-
"fit-height": "awsui_fit-
|
|
22
|
-
"tabs-content-active": "awsui_tabs-content-
|
|
23
|
-
"tabs-content-wrapper": "awsui_tabs-content-
|
|
24
|
-
"with-paddings": "awsui_with-
|
|
25
|
-
"tabs-container-content-wrapper": "awsui_tabs-container-content-
|
|
4
|
+
"tabs-header": "awsui_tabs-header_14rmt_1f77r_194",
|
|
5
|
+
"tabs-header-list": "awsui_tabs-header-list_14rmt_1f77r_202",
|
|
6
|
+
"pagination-button": "awsui_pagination-button_14rmt_1f77r_219",
|
|
7
|
+
"pagination-button-left": "awsui_pagination-button-left_14rmt_1f77r_226",
|
|
8
|
+
"pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1f77r_229",
|
|
9
|
+
"pagination-button-right": "awsui_pagination-button-right_14rmt_1f77r_233",
|
|
10
|
+
"pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1f77r_236",
|
|
11
|
+
"tabs-tab": "awsui_tabs-tab_14rmt_1f77r_241",
|
|
12
|
+
"tabs-tab-label": "awsui_tabs-tab-label_14rmt_1f77r_253",
|
|
13
|
+
"tabs-tab-link": "awsui_tabs-tab-link_14rmt_1f77r_269",
|
|
14
|
+
"refresh": "awsui_refresh_14rmt_1f77r_288",
|
|
15
|
+
"tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1f77r_339",
|
|
16
|
+
"tabs-tab-active": "awsui_tabs-tab-active_14rmt_1f77r_374",
|
|
17
|
+
"tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1f77r_381",
|
|
18
|
+
"root": "awsui_root_14rmt_1f77r_385",
|
|
19
|
+
"tabs": "awsui_tabs_14rmt_1f77r_194",
|
|
20
|
+
"tabs-content": "awsui_tabs-content_14rmt_1f77r_426",
|
|
21
|
+
"fit-height": "awsui_fit-height_14rmt_1f77r_430",
|
|
22
|
+
"tabs-content-active": "awsui_tabs-content-active_14rmt_1f77r_436",
|
|
23
|
+
"tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1f77r_450",
|
|
24
|
+
"with-paddings": "awsui_with-paddings_14rmt_1f77r_450",
|
|
25
|
+
"tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1f77r_461"
|
|
26
26
|
};
|
|
27
27
|
|