@cloudscape-design/components 3.0.720 → 3.0.722
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/alert/styles.css.js +25 -25
- package/alert/styles.scoped.css +131 -43
- package/alert/styles.selectors.js +25 -25
- package/anchor-navigation/styles.css.js +8 -8
- package/anchor-navigation/styles.scoped.css +106 -18
- package/anchor-navigation/styles.selectors.js +8 -8
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +122 -34
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/classic.js +15 -15
- package/app-layout/classic.js.map +1 -1
- package/app-layout/content-wrapper/styles.css.js +3 -3
- package/app-layout/content-wrapper/styles.scoped.css +56 -8
- package/app-layout/content-wrapper/styles.selectors.js +3 -3
- package/app-layout/drawer/styles.css.js +13 -13
- package/app-layout/drawer/styles.scoped.css +109 -21
- package/app-layout/drawer/styles.selectors.js +13 -13
- package/app-layout/internal.d.ts.map +1 -1
- package/app-layout/internal.js +3 -2
- package/app-layout/internal.js.map +1 -1
- package/app-layout/mobile-toolbar/styles.css.js +8 -8
- package/app-layout/mobile-toolbar/styles.scoped.css +58 -10
- package/app-layout/mobile-toolbar/styles.selectors.js +8 -8
- package/app-layout/split-panel/styles.css.js +2 -2
- package/app-layout/split-panel/styles.scoped.css +50 -6
- package/app-layout/split-panel/styles.selectors.js +2 -2
- package/app-layout/styles.css.js +16 -16
- package/app-layout/styles.scoped.css +69 -21
- package/app-layout/styles.selectors.js +16 -16
- package/app-layout/toggles/styles.css.js +2 -2
- package/app-layout/toggles/styles.scoped.css +92 -8
- package/app-layout/toggles/styles.selectors.js +2 -2
- package/app-layout/utils/feature-flags.d.ts +1 -1
- package/app-layout/utils/feature-flags.d.ts.map +1 -1
- package/app-layout/utils/feature-flags.js +5 -1
- package/app-layout/utils/feature-flags.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +82 -82
- package/app-layout/visual-refresh/styles.scoped.css +216 -169
- package/app-layout/visual-refresh/styles.selectors.js +82 -82
- package/app-layout/visual-refresh-toolbar/drawer/styles.css.js +6 -6
- package/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +92 -8
- package/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +6 -6
- package/app-layout/visual-refresh-toolbar/index.js +1 -1
- package/app-layout/visual-refresh-toolbar/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
- package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +60 -12
- package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
- package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +16 -16
- package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +76 -28
- package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +16 -16
- package/app-layout/visual-refresh-toolbar/split-panel/styles.css.js +1 -1
- package/app-layout/visual-refresh-toolbar/split-panel/styles.scoped.css +47 -3
- package/app-layout/visual-refresh-toolbar/split-panel/styles.selectors.js +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/styles.css.js +12 -12
- package/app-layout/visual-refresh-toolbar/toolbar/styles.scoped.css +60 -16
- package/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js +12 -12
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js +6 -6
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scoped.css +66 -22
- package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js +6 -6
- package/area-chart/styles.css.js +6 -6
- package/area-chart/styles.scoped.css +99 -15
- package/area-chart/styles.selectors.js +6 -6
- package/attribute-editor/styles.css.js +14 -14
- package/attribute-editor/styles.scoped.css +76 -28
- package/attribute-editor/styles.selectors.js +14 -14
- package/badge/styles.css.js +5 -5
- package/badge/styles.scoped.css +51 -7
- package/badge/styles.selectors.js +5 -5
- package/box/styles.css.js +191 -191
- package/box/styles.scoped.css +306 -241
- package/box/styles.selectors.js +191 -191
- package/breadcrumb-group/item/styles.css.js +9 -9
- package/breadcrumb-group/item/styles.scoped.css +63 -19
- package/breadcrumb-group/item/styles.selectors.js +9 -9
- package/breadcrumb-group/styles.css.js +7 -7
- package/breadcrumb-group/styles.scoped.css +58 -14
- package/breadcrumb-group/styles.selectors.js +7 -7
- package/button/styles.css.js +20 -20
- package/button/styles.scoped.css +204 -156
- package/button/styles.selectors.js +20 -20
- package/button-dropdown/category-elements/styles.css.js +14 -14
- package/button-dropdown/category-elements/styles.scoped.css +70 -28
- package/button-dropdown/category-elements/styles.selectors.js +14 -14
- package/button-dropdown/item-element/styles.css.js +12 -12
- package/button-dropdown/item-element/styles.scoped.css +60 -16
- package/button-dropdown/item-element/styles.selectors.js +12 -12
- package/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
- package/button-dropdown/mobile-expandable-group/styles.scoped.css +51 -7
- package/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
- package/button-dropdown/styles.css.js +16 -16
- package/button-dropdown/styles.scoped.css +70 -26
- package/button-dropdown/styles.selectors.js +16 -16
- package/button-group/styles.css.js +4 -4
- package/button-group/styles.scoped.css +86 -6
- package/button-group/styles.selectors.js +4 -4
- package/calendar/styles.css.js +21 -21
- package/calendar/styles.scoped.css +95 -47
- package/calendar/styles.selectors.js +21 -21
- package/cards/styles.css.js +39 -39
- package/cards/styles.scoped.css +108 -58
- package/cards/styles.selectors.js +39 -39
- package/checkbox/styles.css.js +3 -3
- package/checkbox/styles.scoped.css +51 -7
- package/checkbox/styles.selectors.js +3 -3
- package/code-editor/resizable-box/styles.css.js +3 -3
- package/code-editor/resizable-box/styles.scoped.css +52 -8
- package/code-editor/resizable-box/styles.selectors.js +3 -3
- package/code-editor/styles.css.js +33 -33
- package/code-editor/styles.scoped.css +191 -139
- package/code-editor/styles.selectors.js +33 -33
- package/collection-preferences/content-display/styles.css.js +11 -11
- package/collection-preferences/content-display/styles.scoped.css +107 -19
- package/collection-preferences/content-display/styles.selectors.js +11 -11
- package/collection-preferences/styles.css.js +37 -37
- package/collection-preferences/styles.scoped.css +224 -48
- package/collection-preferences/styles.selectors.js +37 -37
- package/column-layout/flexible-column-layout/styles.css.js +5 -5
- package/column-layout/flexible-column-layout/styles.scoped.css +87 -7
- package/column-layout/flexible-column-layout/styles.selectors.js +5 -5
- package/column-layout/styles.css.js +13 -13
- package/column-layout/styles.scoped.css +125 -45
- package/column-layout/styles.selectors.js +13 -13
- package/container/styles.css.js +30 -30
- package/container/styles.scoped.css +140 -56
- package/container/styles.selectors.js +30 -30
- package/content-layout/styles.css.js +14 -14
- package/content-layout/styles.scoped.css +62 -18
- package/content-layout/styles.selectors.js +14 -14
- package/date-picker/styles.css.js +7 -7
- package/date-picker/styles.scoped.css +55 -11
- package/date-picker/styles.selectors.js +7 -7
- package/date-range-picker/calendar/grids/styles.css.js +28 -28
- package/date-range-picker/calendar/grids/styles.scoped.css +89 -45
- package/date-range-picker/calendar/grids/styles.selectors.js +28 -28
- package/date-range-picker/relative-range/styles.css.js +9 -9
- package/date-range-picker/relative-range/styles.scoped.css +59 -15
- package/date-range-picker/relative-range/styles.selectors.js +9 -9
- package/date-range-picker/styles.css.js +39 -39
- package/date-range-picker/styles.scoped.css +100 -52
- package/date-range-picker/styles.selectors.js +39 -39
- package/drawer/implementation.d.ts.map +1 -1
- package/drawer/implementation.js +3 -2
- package/drawer/implementation.js.map +1 -1
- package/drawer/styles.css.js +4 -4
- package/drawer/styles.scoped.css +92 -12
- package/drawer/styles.selectors.js +4 -4
- package/expandable-section/styles.css.js +32 -32
- package/expandable-section/styles.scoped.css +121 -69
- package/expandable-section/styles.selectors.js +32 -32
- package/file-upload/dropzone/styles.css.js +2 -2
- package/file-upload/dropzone/styles.scoped.css +84 -4
- package/file-upload/dropzone/styles.selectors.js +2 -2
- package/file-upload/file-input/styles.css.js +4 -4
- package/file-upload/file-input/styles.scoped.css +93 -9
- package/file-upload/file-input/styles.selectors.js +4 -4
- package/flashbar/styles.css.js +47 -47
- package/flashbar/styles.scoped.css +240 -244
- package/flashbar/styles.selectors.js +47 -47
- package/form/styles.css.js +8 -8
- package/form/styles.scoped.css +54 -10
- package/form/styles.selectors.js +8 -8
- package/form-field/styles.css.js +24 -24
- package/form-field/styles.scoped.css +84 -40
- package/form-field/styles.selectors.js +24 -24
- package/grid/styles.css.js +53 -53
- package/grid/styles.scoped.css +100 -56
- package/grid/styles.selectors.js +53 -53
- package/header/styles.css.js +34 -34
- package/header/styles.scoped.css +132 -52
- package/header/styles.selectors.js +34 -34
- package/help-panel/implementation.d.ts.map +1 -1
- package/help-panel/implementation.js +3 -2
- package/help-panel/implementation.js.map +1 -1
- package/help-panel/styles.css.js +5 -5
- package/help-panel/styles.scoped.css +149 -69
- package/help-panel/styles.selectors.js +5 -5
- package/hotspot/styles.css.js +7 -7
- package/hotspot/styles.scoped.css +89 -9
- package/hotspot/styles.selectors.js +7 -7
- package/icon/styles.css.js +38 -38
- package/icon/styles.scoped.css +168 -84
- package/icon/styles.selectors.js +38 -38
- package/input/styles.css.js +13 -13
- package/input/styles.scoped.css +82 -46
- package/input/styles.selectors.js +13 -13
- package/internal/base-component/styles.scoped.css +9 -9
- package/internal/components/abstract-switch/styles.css.js +13 -13
- package/internal/components/abstract-switch/styles.scoped.css +66 -22
- package/internal/components/abstract-switch/styles.selectors.js +13 -13
- package/internal/components/button-trigger/styles.css.js +11 -11
- package/internal/components/button-trigger/styles.scoped.css +84 -36
- package/internal/components/button-trigger/styles.selectors.js +11 -11
- package/internal/components/chart-filter/styles.css.js +3 -3
- package/internal/components/chart-filter/styles.scoped.css +49 -5
- package/internal/components/chart-filter/styles.selectors.js +3 -3
- package/internal/components/chart-legend/styles.css.js +6 -6
- package/internal/components/chart-legend/styles.scoped.css +67 -19
- package/internal/components/chart-legend/styles.selectors.js +6 -6
- package/internal/components/chart-plot/styles.css.js +5 -5
- package/internal/components/chart-plot/styles.scoped.css +51 -7
- package/internal/components/chart-plot/styles.selectors.js +5 -5
- package/internal/components/chart-popover/styles.css.js +3 -3
- package/internal/components/chart-popover/styles.scoped.css +49 -5
- package/internal/components/chart-popover/styles.selectors.js +3 -3
- package/internal/components/chart-series-details/styles.css.js +20 -20
- package/internal/components/chart-series-details/styles.scoped.css +89 -37
- package/internal/components/chart-series-details/styles.selectors.js +20 -20
- package/internal/components/chart-series-marker/styles.css.js +5 -5
- package/internal/components/chart-series-marker/styles.scoped.css +53 -9
- package/internal/components/chart-series-marker/styles.selectors.js +5 -5
- package/internal/components/chart-wrapper/styles.css.js +9 -9
- package/internal/components/chart-wrapper/styles.scoped.css +91 -11
- package/internal/components/chart-wrapper/styles.selectors.js +9 -9
- package/internal/components/checkbox-icon/styles.css.js +9 -9
- package/internal/components/checkbox-icon/styles.scoped.css +55 -11
- package/internal/components/checkbox-icon/styles.selectors.js +9 -9
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +89 -41
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/components/dropdown-footer/styles.css.js +3 -3
- package/internal/components/dropdown-footer/styles.scoped.css +49 -5
- package/internal/components/dropdown-footer/styles.selectors.js +3 -3
- package/internal/components/dropdown-status/styles.css.js +2 -2
- package/internal/components/dropdown-status/styles.scoped.css +48 -4
- package/internal/components/dropdown-status/styles.selectors.js +2 -2
- package/internal/components/handle/styles.css.js +2 -2
- package/internal/components/handle/styles.scoped.css +52 -8
- package/internal/components/handle/styles.selectors.js +2 -2
- package/internal/components/menu-dropdown/styles.css.js +7 -7
- package/internal/components/menu-dropdown/styles.scoped.css +59 -15
- package/internal/components/menu-dropdown/styles.selectors.js +7 -7
- package/internal/components/option/styles.css.js +17 -17
- package/internal/components/option/styles.scoped.css +79 -31
- package/internal/components/option/styles.selectors.js +17 -17
- package/internal/components/options-list/styles.css.js +2 -2
- package/internal/components/options-list/styles.scoped.css +48 -4
- package/internal/components/options-list/styles.selectors.js +2 -2
- package/internal/components/panel-resize-handle/styles.css.js +5 -5
- package/internal/components/panel-resize-handle/styles.scoped.css +56 -12
- package/internal/components/panel-resize-handle/styles.selectors.js +5 -5
- package/internal/components/screenreader-only/styles.css.js +1 -1
- package/internal/components/screenreader-only/styles.scoped.css +47 -3
- package/internal/components/screenreader-only/styles.selectors.js +1 -1
- package/internal/components/selectable-item/styles.css.js +16 -16
- package/internal/components/selectable-item/styles.scoped.css +78 -40
- package/internal/components/selectable-item/styles.selectors.js +16 -16
- package/internal/components/token-list/styles.css.js +9 -9
- package/internal/components/token-list/styles.scoped.css +106 -22
- package/internal/components/token-list/styles.selectors.js +9 -9
- package/internal/components/tooltip/index.d.ts.map +1 -1
- package/internal/components/tooltip/index.js +2 -4
- package/internal/components/tooltip/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/internal/plugins/helpers/use-global-breadcrumbs.js +2 -2
- package/internal/plugins/helpers/use-global-breadcrumbs.js.map +1 -1
- package/key-value-pairs/styles.css.js +8 -8
- package/key-value-pairs/styles.scoped.css +55 -11
- package/key-value-pairs/styles.selectors.js +8 -8
- package/link/styles.css.js +20 -20
- package/link/styles.scoped.css +117 -73
- package/link/styles.selectors.js +20 -20
- package/mixed-line-bar-chart/styles.css.js +11 -11
- package/mixed-line-bar-chart/styles.scoped.css +107 -23
- package/mixed-line-bar-chart/styles.selectors.js +11 -11
- package/modal/styles.css.js +23 -23
- package/modal/styles.scoped.css +95 -43
- package/modal/styles.selectors.js +23 -23
- package/multiselect/styles.css.js +2 -2
- package/multiselect/styles.scoped.css +48 -4
- package/multiselect/styles.selectors.js +2 -2
- package/package.json +1 -1
- package/pagination/styles.css.js +9 -9
- package/pagination/styles.scoped.css +69 -25
- package/pagination/styles.selectors.js +9 -9
- package/pie-chart/styles.css.js +27 -27
- package/pie-chart/styles.scoped.css +104 -52
- package/pie-chart/styles.selectors.js +27 -27
- package/popover/container.d.ts +1 -1
- package/popover/container.d.ts.map +1 -1
- package/popover/container.js.map +1 -1
- package/popover/internal.d.ts +2 -1
- package/popover/internal.d.ts.map +1 -1
- package/popover/internal.js.map +1 -1
- package/popover/styles.css.js +52 -52
- package/popover/styles.scoped.css +297 -77
- package/popover/styles.selectors.js +52 -52
- package/progress-bar/styles.css.js +19 -19
- package/progress-bar/styles.scoped.css +195 -35
- package/progress-bar/styles.selectors.js +19 -19
- package/prompt-input/styles.css.js +8 -8
- package/prompt-input/styles.scoped.css +70 -30
- package/prompt-input/styles.selectors.js +8 -8
- package/property-filter/filtering-token/index.d.ts +2 -0
- package/property-filter/filtering-token/index.d.ts.map +1 -1
- package/property-filter/filtering-token/index.js +2 -2
- package/property-filter/filtering-token/index.js.map +1 -1
- package/property-filter/filtering-token/styles.css.js +18 -18
- package/property-filter/filtering-token/styles.scoped.css +89 -41
- package/property-filter/filtering-token/styles.selectors.js +18 -18
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +5 -195
- package/property-filter/index.js.map +1 -1
- package/property-filter/internal.d.ts +26 -0
- package/property-filter/internal.d.ts.map +1 -0
- package/property-filter/internal.js +201 -0
- package/property-filter/internal.js.map +1 -0
- package/property-filter/styles.css.js +38 -38
- package/property-filter/styles.scoped.css +85 -41
- package/property-filter/styles.selectors.js +38 -38
- package/property-filter/token-editor.d.ts +2 -10
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +36 -29
- package/property-filter/token-editor.js.map +1 -1
- package/property-filter/token.d.ts +2 -1
- package/property-filter/token.d.ts.map +1 -1
- package/property-filter/token.js +4 -7
- package/property-filter/token.js.map +1 -1
- package/radio-group/styles.css.js +10 -10
- package/radio-group/styles.scoped.css +62 -18
- package/radio-group/styles.selectors.js +10 -10
- package/s3-resource-selector/s3-in-context/styles.css.js +7 -7
- package/s3-resource-selector/s3-in-context/styles.scoped.css +9 -11
- package/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
- package/s3-resource-selector/s3-modal/styles.css.js +3 -3
- package/s3-resource-selector/s3-modal/styles.scoped.css +85 -5
- package/s3-resource-selector/s3-modal/styles.selectors.js +3 -3
- package/segmented-control/styles.css.js +15 -15
- package/segmented-control/styles.scoped.css +90 -38
- package/segmented-control/styles.selectors.js +15 -15
- package/select/parts/styles.css.js +21 -21
- package/select/parts/styles.scoped.css +68 -24
- package/select/parts/styles.selectors.js +21 -21
- package/select/styles.css.js +1 -1
- package/select/styles.scoped.css +47 -3
- package/select/styles.selectors.js +1 -1
- package/side-navigation/implementation.d.ts.map +1 -1
- package/side-navigation/implementation.js +3 -2
- package/side-navigation/implementation.js.map +1 -1
- package/side-navigation/styles.css.js +29 -29
- package/side-navigation/styles.scoped.css +87 -43
- package/side-navigation/styles.selectors.js +29 -29
- package/slider/styles.css.js +26 -26
- package/slider/styles.scoped.css +126 -78
- package/slider/styles.selectors.js +26 -26
- package/space-between/styles.css.js +23 -23
- package/space-between/styles.scoped.css +70 -26
- package/space-between/styles.selectors.js +23 -23
- package/spinner/styles.css.js +13 -13
- package/spinner/styles.scoped.css +69 -21
- package/spinner/styles.selectors.js +13 -13
- package/split-panel/bottom.d.ts.map +1 -1
- package/split-panel/bottom.js +3 -2
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/icons/styles.css.js +22 -22
- package/split-panel/icons/styles.scoped.css +70 -26
- package/split-panel/icons/styles.selectors.js +22 -22
- package/split-panel/implementation.d.ts.map +1 -1
- package/split-panel/implementation.js +3 -2
- package/split-panel/implementation.js.map +1 -1
- package/split-panel/side.d.ts.map +1 -1
- package/split-panel/side.js +4 -3
- package/split-panel/side.js.map +1 -1
- package/split-panel/styles.css.js +27 -27
- package/split-panel/styles.scoped.css +142 -50
- package/split-panel/styles.selectors.js +27 -27
- package/status-indicator/styles.css.js +23 -23
- package/status-indicator/styles.scoped.css +75 -31
- package/status-indicator/styles.selectors.js +23 -23
- package/table/body-cell/styles.css.js +47 -47
- package/table/body-cell/styles.scoped.css +398 -360
- package/table/body-cell/styles.selectors.js +47 -47
- package/table/expandable-rows/styles.css.js +3 -3
- package/table/expandable-rows/styles.scoped.css +65 -17
- package/table/expandable-rows/styles.selectors.js +3 -3
- package/table/header-cell/styles.css.js +26 -26
- package/table/header-cell/styles.scoped.css +115 -67
- package/table/header-cell/styles.selectors.js +26 -26
- package/table/resizer/styles.css.js +8 -8
- package/table/resizer/styles.scoped.css +60 -16
- package/table/resizer/styles.selectors.js +8 -8
- package/table/selection/styles.css.js +3 -3
- package/table/selection/styles.scoped.css +49 -5
- package/table/selection/styles.selectors.js +3 -3
- package/table/sticky-scrollbar/styles.css.js +6 -6
- package/table/sticky-scrollbar/styles.scoped.css +89 -9
- package/table/sticky-scrollbar/styles.selectors.js +6 -6
- package/table/styles.css.js +34 -34
- package/table/styles.scoped.css +91 -43
- package/table/styles.selectors.js +34 -34
- package/tabs/styles.css.js +28 -28
- package/tabs/styles.scoped.css +139 -51
- package/tabs/styles.selectors.js +28 -28
- package/tag-editor/styles.css.js +3 -3
- package/tag-editor/styles.scoped.css +56 -12
- package/tag-editor/styles.selectors.js +3 -3
- package/text-content/styles.css.js +1 -1
- package/text-content/styles.scoped.css +107 -63
- package/text-content/styles.selectors.js +1 -1
- package/text-filter/styles.css.js +3 -3
- package/text-filter/styles.scoped.css +49 -5
- package/text-filter/styles.selectors.js +3 -3
- package/textarea/styles.css.js +5 -5
- package/textarea/styles.scoped.css +62 -22
- package/textarea/styles.selectors.js +5 -5
- package/tiles/styles.css.js +30 -30
- package/tiles/styles.scoped.css +159 -75
- package/tiles/styles.selectors.js +30 -30
- package/toggle/styles.css.js +10 -10
- package/toggle/styles.scoped.css +63 -19
- package/toggle/styles.selectors.js +10 -10
- package/token-group/styles.css.js +10 -10
- package/token-group/styles.scoped.css +72 -24
- package/token-group/styles.selectors.js +10 -10
- package/top-navigation/1.0-beta/styles.css.js +25 -25
- package/top-navigation/1.0-beta/styles.scoped.css +88 -44
- package/top-navigation/1.0-beta/styles.selectors.js +25 -25
- package/top-navigation/styles.css.js +47 -47
- package/top-navigation/styles.scoped.css +118 -70
- package/top-navigation/styles.selectors.js +47 -47
- package/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
- package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +103 -23
- package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
- package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
- package/tutorial-panel/components/tutorial-list/styles.scoped.css +119 -31
- package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
- package/tutorial-panel/styles.css.js +1 -1
- package/tutorial-panel/styles.scoped.css +83 -3
- package/tutorial-panel/styles.selectors.js +1 -1
- package/wizard/styles.css.js +30 -30
- package/wizard/styles.scoped.css +104 -60
- package/wizard/styles.selectors.js +30 -30
|
@@ -66,6 +66,50 @@
|
|
|
66
66
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
67
67
|
SPDX-License-Identifier: Apache-2.0
|
|
68
68
|
*/
|
|
69
|
+
/*
|
|
70
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
71
|
+
SPDX-License-Identifier: Apache-2.0
|
|
72
|
+
*/
|
|
73
|
+
/*
|
|
74
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
75
|
+
SPDX-License-Identifier: Apache-2.0
|
|
76
|
+
*/
|
|
77
|
+
/*
|
|
78
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
79
|
+
SPDX-License-Identifier: Apache-2.0
|
|
80
|
+
*/
|
|
81
|
+
/*
|
|
82
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
83
|
+
SPDX-License-Identifier: Apache-2.0
|
|
84
|
+
*/
|
|
85
|
+
/*
|
|
86
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
87
|
+
SPDX-License-Identifier: Apache-2.0
|
|
88
|
+
*/
|
|
89
|
+
/*
|
|
90
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
|
+
SPDX-License-Identifier: Apache-2.0
|
|
92
|
+
*/
|
|
93
|
+
/*
|
|
94
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
|
+
SPDX-License-Identifier: Apache-2.0
|
|
96
|
+
*/
|
|
97
|
+
/*
|
|
98
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
|
+
SPDX-License-Identifier: Apache-2.0
|
|
100
|
+
*/
|
|
101
|
+
/*
|
|
102
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
103
|
+
SPDX-License-Identifier: Apache-2.0
|
|
104
|
+
*/
|
|
105
|
+
/*
|
|
106
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
107
|
+
SPDX-License-Identifier: Apache-2.0
|
|
108
|
+
*/
|
|
109
|
+
/*
|
|
110
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
111
|
+
SPDX-License-Identifier: Apache-2.0
|
|
112
|
+
*/
|
|
69
113
|
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
70
114
|
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
71
115
|
/*
|
|
@@ -84,6 +128,14 @@
|
|
|
84
128
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
85
129
|
SPDX-License-Identifier: Apache-2.0
|
|
86
130
|
*/
|
|
131
|
+
/*
|
|
132
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
133
|
+
SPDX-License-Identifier: Apache-2.0
|
|
134
|
+
*/
|
|
135
|
+
/*
|
|
136
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
137
|
+
SPDX-License-Identifier: Apache-2.0
|
|
138
|
+
*/
|
|
87
139
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
88
140
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
89
141
|
/*
|
|
@@ -98,133 +150,133 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
98
150
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
151
|
SPDX-License-Identifier: Apache-2.0
|
|
100
152
|
*/
|
|
101
|
-
|
|
153
|
+
/*
|
|
154
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
155
|
+
SPDX-License-Identifier: Apache-2.0
|
|
156
|
+
*/
|
|
157
|
+
.awsui_segment__path_1edmh_1sa1x_157:not(#\9) {
|
|
102
158
|
transition: opacity var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
|
|
103
159
|
}
|
|
104
160
|
@media (prefers-reduced-motion: reduce) {
|
|
105
|
-
.
|
|
161
|
+
.awsui_segment__path_1edmh_1sa1x_157:not(#\9) {
|
|
106
162
|
animation: none;
|
|
107
163
|
transition: none;
|
|
108
164
|
}
|
|
109
165
|
}
|
|
110
|
-
.awsui-motion-disabled .
|
|
166
|
+
.awsui-motion-disabled .awsui_segment__path_1edmh_1sa1x_157:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_1sa1x_157:not(#\9) {
|
|
111
167
|
animation: none;
|
|
112
168
|
transition: none;
|
|
113
169
|
}
|
|
114
170
|
|
|
115
|
-
.
|
|
171
|
+
.awsui_segment_1edmh_1sa1x_157:not(#\9) {
|
|
116
172
|
transition: opacity var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
|
|
117
173
|
}
|
|
118
174
|
@media (prefers-reduced-motion: reduce) {
|
|
119
|
-
.
|
|
175
|
+
.awsui_segment_1edmh_1sa1x_157:not(#\9) {
|
|
120
176
|
animation: none;
|
|
121
177
|
transition: none;
|
|
122
178
|
}
|
|
123
179
|
}
|
|
124
|
-
.awsui-motion-disabled .
|
|
180
|
+
.awsui-motion-disabled .awsui_segment_1edmh_1sa1x_157:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1sa1x_157:not(#\9) {
|
|
125
181
|
animation: none;
|
|
126
182
|
transition: none;
|
|
127
183
|
}
|
|
128
|
-
.
|
|
184
|
+
.awsui_segment_1edmh_1sa1x_157 > .awsui_segment__hover_1edmh_1sa1x_184:not(#\9) {
|
|
129
185
|
transition: opacity var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
|
|
130
186
|
}
|
|
131
187
|
@media (prefers-reduced-motion: reduce) {
|
|
132
|
-
.
|
|
188
|
+
.awsui_segment_1edmh_1sa1x_157 > .awsui_segment__hover_1edmh_1sa1x_184:not(#\9) {
|
|
133
189
|
animation: none;
|
|
134
190
|
transition: none;
|
|
135
191
|
}
|
|
136
192
|
}
|
|
137
|
-
.awsui-motion-disabled .
|
|
193
|
+
.awsui-motion-disabled .awsui_segment_1edmh_1sa1x_157 > .awsui_segment__hover_1edmh_1sa1x_184:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1sa1x_157 > .awsui_segment__hover_1edmh_1sa1x_184:not(#\9) {
|
|
138
194
|
animation: none;
|
|
139
195
|
transition: none;
|
|
140
196
|
}
|
|
141
197
|
|
|
142
|
-
.
|
|
198
|
+
.awsui_label_1edmh_1sa1x_198:not(#\9) {
|
|
143
199
|
transition: opacity var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
|
|
144
200
|
}
|
|
145
201
|
@media (prefers-reduced-motion: reduce) {
|
|
146
|
-
.
|
|
202
|
+
.awsui_label_1edmh_1sa1x_198:not(#\9) {
|
|
147
203
|
animation: none;
|
|
148
204
|
transition: none;
|
|
149
205
|
}
|
|
150
206
|
}
|
|
151
|
-
.awsui-motion-disabled .
|
|
207
|
+
.awsui-motion-disabled .awsui_label_1edmh_1sa1x_198:not(#\9), .awsui-mode-entering .awsui_label_1edmh_1sa1x_198:not(#\9) {
|
|
152
208
|
animation: none;
|
|
153
209
|
transition: none;
|
|
154
210
|
}
|
|
155
211
|
|
|
156
|
-
|
|
157
|
-
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
158
|
-
SPDX-License-Identifier: Apache-2.0
|
|
159
|
-
*/
|
|
160
|
-
.awsui_root_1edmh_14ng5_160:not(#\9) {
|
|
212
|
+
.awsui_root_1edmh_1sa1x_212:not(#\9) {
|
|
161
213
|
/* used in test-utils */
|
|
162
214
|
}
|
|
163
215
|
|
|
164
|
-
.
|
|
216
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--small_1edmh_1sa1x_216:not(#\9) {
|
|
165
217
|
min-block-size: calc(2 * (50px + var(--space-xs-zb16t3, 8px) + calc(2 * var(--line-height-body-m-30ar75, 20px))));
|
|
166
218
|
}
|
|
167
|
-
.
|
|
219
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--small_1edmh_1sa1x_216.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
168
220
|
min-block-size: calc(2 * (30px + calc(2 * var(--line-height-body-m-30ar75, 20px))));
|
|
169
221
|
}
|
|
170
|
-
.
|
|
222
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--small_1edmh_1sa1x_216.awsui_content--without-labels_1edmh_1sa1x_222:not(#\9) {
|
|
171
223
|
min-block-size: calc(2 * (50px + var(--space-xs-zb16t3, 8px)));
|
|
172
224
|
}
|
|
173
|
-
.
|
|
225
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--small_1edmh_1sa1x_216.awsui_content--without-labels_1edmh_1sa1x_222.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
174
226
|
min-block-size: calc(2 * (30px));
|
|
175
227
|
}
|
|
176
|
-
.
|
|
228
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--medium_1edmh_1sa1x_228:not(#\9) {
|
|
177
229
|
min-block-size: calc(2 * (100px + var(--space-s-34lx8l, 12px) + calc(2 * var(--line-height-body-m-30ar75, 20px))));
|
|
178
230
|
}
|
|
179
|
-
.
|
|
231
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--medium_1edmh_1sa1x_228.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
180
232
|
min-block-size: calc(2 * (100px + calc(2 * var(--line-height-body-m-30ar75, 20px))));
|
|
181
233
|
}
|
|
182
|
-
.
|
|
234
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--medium_1edmh_1sa1x_228.awsui_content--without-labels_1edmh_1sa1x_222:not(#\9) {
|
|
183
235
|
min-block-size: calc(2 * (100px + var(--space-s-34lx8l, 12px)));
|
|
184
236
|
}
|
|
185
|
-
.
|
|
237
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--medium_1edmh_1sa1x_228.awsui_content--without-labels_1edmh_1sa1x_222.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
186
238
|
min-block-size: calc(2 * (100px));
|
|
187
239
|
}
|
|
188
|
-
.
|
|
240
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--large_1edmh_1sa1x_240:not(#\9) {
|
|
189
241
|
min-block-size: calc(2 * (140px + var(--space-s-34lx8l, 12px) + calc(2 * var(--line-height-body-m-30ar75, 20px))));
|
|
190
242
|
}
|
|
191
|
-
.
|
|
243
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--large_1edmh_1sa1x_240.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
192
244
|
min-block-size: calc(2 * (140px + calc(2 * var(--line-height-body-m-30ar75, 20px))));
|
|
193
245
|
}
|
|
194
|
-
.
|
|
246
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--large_1edmh_1sa1x_240.awsui_content--without-labels_1edmh_1sa1x_222:not(#\9) {
|
|
195
247
|
min-block-size: calc(2 * (140px + var(--space-s-34lx8l, 12px)));
|
|
196
248
|
}
|
|
197
|
-
.
|
|
249
|
+
.awsui_content_1edmh_1sa1x_216.awsui_content--large_1edmh_1sa1x_240.awsui_content--without-labels_1edmh_1sa1x_222.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
198
250
|
min-block-size: calc(2 * (140px));
|
|
199
251
|
}
|
|
200
252
|
|
|
201
|
-
.awsui_content--fit-
|
|
253
|
+
.awsui_content--fit-height_1edmh_1sa1x_219:not(#\9) {
|
|
202
254
|
flex: 1;
|
|
203
255
|
}
|
|
204
256
|
|
|
205
|
-
.awsui_status-
|
|
257
|
+
.awsui_status-container_1edmh_1sa1x_257:not(#\9) {
|
|
206
258
|
/* used in test utils */
|
|
207
259
|
}
|
|
208
260
|
|
|
209
|
-
.awsui_chart-
|
|
261
|
+
.awsui_chart-container_1edmh_1sa1x_261:not(#\9) {
|
|
210
262
|
display: flex;
|
|
211
263
|
flex: 1;
|
|
212
264
|
}
|
|
213
|
-
.awsui_chart-container--fit-
|
|
265
|
+
.awsui_chart-container--fit-height_1edmh_1sa1x_265:not(#\9) {
|
|
214
266
|
block-size: 100%;
|
|
215
267
|
min-block-size: inherit;
|
|
216
268
|
}
|
|
217
269
|
|
|
218
|
-
.awsui_chart-container-chart-
|
|
270
|
+
.awsui_chart-container-chart-plot_1edmh_1sa1x_270:not(#\9) {
|
|
219
271
|
display: contents;
|
|
220
272
|
}
|
|
221
|
-
.awsui_chart-container-chart-plot--fit-
|
|
273
|
+
.awsui_chart-container-chart-plot--fit-height_1edmh_1sa1x_273:not(#\9) {
|
|
222
274
|
display: block;
|
|
223
275
|
position: absolute;
|
|
224
276
|
inset: 0;
|
|
225
277
|
}
|
|
226
278
|
|
|
227
|
-
.awsui_inner-
|
|
279
|
+
.awsui_inner-content_1edmh_1sa1x_279:not(#\9) {
|
|
228
280
|
display: flex;
|
|
229
281
|
position: absolute;
|
|
230
282
|
flex-direction: column;
|
|
@@ -235,53 +287,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
235
287
|
pointer-events: none;
|
|
236
288
|
}
|
|
237
289
|
|
|
238
|
-
.
|
|
290
|
+
.awsui_segment__highlight_1edmh_1sa1x_290:not(#\9) {
|
|
239
291
|
stroke: none;
|
|
240
292
|
opacity: 0;
|
|
241
293
|
}
|
|
242
294
|
|
|
243
|
-
.
|
|
295
|
+
.awsui_segment_1edmh_1sa1x_157:not(#\9) {
|
|
244
296
|
stroke: var(--color-background-container-content-4un1ap, #ffffff);
|
|
245
297
|
stroke-width: 2px;
|
|
246
298
|
stroke-linejoin: round;
|
|
247
299
|
opacity: 1;
|
|
248
300
|
cursor: pointer;
|
|
249
301
|
}
|
|
250
|
-
.
|
|
302
|
+
.awsui_segment_1edmh_1sa1x_157:not(#\9):focus {
|
|
251
303
|
outline: none;
|
|
252
304
|
}
|
|
253
|
-
.
|
|
305
|
+
.awsui_segment_1edmh_1sa1x_157.awsui_segment--dimmed_1edmh_1sa1x_305:not(#\9) {
|
|
254
306
|
opacity: 0.35;
|
|
255
307
|
}
|
|
256
|
-
.
|
|
308
|
+
.awsui_segment_1edmh_1sa1x_157.awsui_segment--highlighted_1edmh_1sa1x_308 > .awsui_segment__highlight_1edmh_1sa1x_290:not(#\9), .awsui_segment_1edmh_1sa1x_157:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_1sa1x_305) > .awsui_segment__highlight_1edmh_1sa1x_290 {
|
|
257
309
|
opacity: 1;
|
|
258
310
|
}
|
|
259
311
|
|
|
260
|
-
.
|
|
312
|
+
.awsui_label_1edmh_1sa1x_198:not(#\9) {
|
|
261
313
|
color: var(--color-text-heading-default-lstrpn, #000716);
|
|
262
314
|
opacity: 1;
|
|
263
315
|
/* stylelint-disable-next-line selector-max-type */
|
|
264
316
|
/* stylelint-disable-next-line selector-max-type */
|
|
265
317
|
}
|
|
266
|
-
.
|
|
318
|
+
.awsui_label_1edmh_1sa1x_198 > line:not(#\9) {
|
|
267
319
|
stroke: var(--color-stroke-chart-line-ppq5nh, #7d8998);
|
|
268
320
|
stroke-width: var(--border-divider-section-width-1061zr, 1px);
|
|
269
321
|
}
|
|
270
|
-
.
|
|
322
|
+
.awsui_label_1edmh_1sa1x_198 > div:not(#\9) {
|
|
271
323
|
margin-block-start: -0.75em;
|
|
272
324
|
}
|
|
273
|
-
.
|
|
325
|
+
.awsui_label_1edmh_1sa1x_198.awsui_label--dimmed_1edmh_1sa1x_325:not(#\9) {
|
|
274
326
|
opacity: 0.35;
|
|
275
327
|
}
|
|
276
|
-
.
|
|
328
|
+
.awsui_label_1edmh_1sa1x_198.awsui_label--align-right_1edmh_1sa1x_328:not(#\9) {
|
|
277
329
|
/* stylelint-disable-next-line selector-max-type */
|
|
278
330
|
}
|
|
279
|
-
.
|
|
331
|
+
.awsui_label_1edmh_1sa1x_198.awsui_label--align-right_1edmh_1sa1x_328 > div:not(#\9) {
|
|
280
332
|
text-align: end;
|
|
281
333
|
}
|
|
282
334
|
|
|
283
335
|
/* stylelint-disable-next-line selector-max-type */
|
|
284
|
-
.awsui_label-
|
|
336
|
+
.awsui_label-text_1edmh_1sa1x_336 > text:not(#\9) {
|
|
285
337
|
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
286
338
|
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
287
339
|
font-weight: var(--font-display-label-weight-815ja9, 700);
|
|
@@ -289,22 +341,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
289
341
|
dominant-baseline: middle;
|
|
290
342
|
}
|
|
291
343
|
|
|
292
|
-
text.
|
|
344
|
+
text.awsui_label__description_1edmh_1sa1x_344:not(#\9) {
|
|
293
345
|
font-size: var(--font-chart-detail-size-1n389u, 12px);
|
|
294
346
|
font-weight: 400;
|
|
295
347
|
color: var(--color-text-group-label-jpw8sm, #414d5c);
|
|
296
348
|
fill: var(--color-text-group-label-jpw8sm, #414d5c);
|
|
297
349
|
}
|
|
298
350
|
|
|
299
|
-
.awsui_label-
|
|
351
|
+
.awsui_label-line_1edmh_1sa1x_351:not(#\9) {
|
|
300
352
|
/* used in component code */
|
|
301
353
|
}
|
|
302
354
|
|
|
303
|
-
.awsui_label--
|
|
355
|
+
.awsui_label--highlighted_1edmh_1sa1x_355:not(#\9) {
|
|
304
356
|
/* used in test-utils */
|
|
305
357
|
}
|
|
306
358
|
|
|
307
|
-
.awsui_popover-
|
|
359
|
+
.awsui_popover-header_1edmh_1sa1x_359:not(#\9) {
|
|
308
360
|
display: inline-flex;
|
|
309
361
|
align-items: flex-start;
|
|
310
362
|
}
|
|
@@ -2,32 +2,32 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"segment__path": "
|
|
6
|
-
"segment": "
|
|
7
|
-
"segment__hover": "
|
|
8
|
-
"label": "
|
|
9
|
-
"root": "
|
|
10
|
-
"content": "
|
|
11
|
-
"content--small": "awsui_content--
|
|
12
|
-
"content--fit-height": "awsui_content--fit-
|
|
13
|
-
"content--without-labels": "awsui_content--without-
|
|
14
|
-
"content--medium": "awsui_content--
|
|
15
|
-
"content--large": "awsui_content--
|
|
16
|
-
"status-container": "awsui_status-
|
|
17
|
-
"chart-container": "awsui_chart-
|
|
18
|
-
"chart-container--fit-height": "awsui_chart-container--fit-
|
|
19
|
-
"chart-container-chart-plot": "awsui_chart-container-chart-
|
|
20
|
-
"chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-
|
|
21
|
-
"inner-content": "awsui_inner-
|
|
22
|
-
"segment__highlight": "
|
|
23
|
-
"segment--dimmed": "awsui_segment--
|
|
24
|
-
"segment--highlighted": "awsui_segment--
|
|
25
|
-
"label--dimmed": "awsui_label--
|
|
26
|
-
"label--align-right": "awsui_label--align-
|
|
27
|
-
"label-text": "awsui_label-
|
|
28
|
-
"label__description": "
|
|
29
|
-
"label-line": "awsui_label-
|
|
30
|
-
"label--highlighted": "awsui_label--
|
|
31
|
-
"popover-header": "awsui_popover-
|
|
5
|
+
"segment__path": "awsui_segment__path_1edmh_1sa1x_157",
|
|
6
|
+
"segment": "awsui_segment_1edmh_1sa1x_157",
|
|
7
|
+
"segment__hover": "awsui_segment__hover_1edmh_1sa1x_184",
|
|
8
|
+
"label": "awsui_label_1edmh_1sa1x_198",
|
|
9
|
+
"root": "awsui_root_1edmh_1sa1x_212",
|
|
10
|
+
"content": "awsui_content_1edmh_1sa1x_216",
|
|
11
|
+
"content--small": "awsui_content--small_1edmh_1sa1x_216",
|
|
12
|
+
"content--fit-height": "awsui_content--fit-height_1edmh_1sa1x_219",
|
|
13
|
+
"content--without-labels": "awsui_content--without-labels_1edmh_1sa1x_222",
|
|
14
|
+
"content--medium": "awsui_content--medium_1edmh_1sa1x_228",
|
|
15
|
+
"content--large": "awsui_content--large_1edmh_1sa1x_240",
|
|
16
|
+
"status-container": "awsui_status-container_1edmh_1sa1x_257",
|
|
17
|
+
"chart-container": "awsui_chart-container_1edmh_1sa1x_261",
|
|
18
|
+
"chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1sa1x_265",
|
|
19
|
+
"chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1sa1x_270",
|
|
20
|
+
"chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1sa1x_273",
|
|
21
|
+
"inner-content": "awsui_inner-content_1edmh_1sa1x_279",
|
|
22
|
+
"segment__highlight": "awsui_segment__highlight_1edmh_1sa1x_290",
|
|
23
|
+
"segment--dimmed": "awsui_segment--dimmed_1edmh_1sa1x_305",
|
|
24
|
+
"segment--highlighted": "awsui_segment--highlighted_1edmh_1sa1x_308",
|
|
25
|
+
"label--dimmed": "awsui_label--dimmed_1edmh_1sa1x_325",
|
|
26
|
+
"label--align-right": "awsui_label--align-right_1edmh_1sa1x_328",
|
|
27
|
+
"label-text": "awsui_label-text_1edmh_1sa1x_336",
|
|
28
|
+
"label__description": "awsui_label__description_1edmh_1sa1x_344",
|
|
29
|
+
"label-line": "awsui_label-line_1edmh_1sa1x_351",
|
|
30
|
+
"label--highlighted": "awsui_label--highlighted_1edmh_1sa1x_355",
|
|
31
|
+
"popover-header": "awsui_popover-header_1edmh_1sa1x_359"
|
|
32
32
|
};
|
|
33
33
|
|
package/popover/container.d.ts
CHANGED
|
@@ -18,7 +18,7 @@ export interface PopoverContainerProps {
|
|
|
18
18
|
arrow: (position: InternalPosition | null) => React.ReactNode;
|
|
19
19
|
children: React.ReactNode;
|
|
20
20
|
renderWithPortal?: boolean;
|
|
21
|
-
size: PopoverProps.Size;
|
|
21
|
+
size: PopoverProps.Size | 'content';
|
|
22
22
|
fixedWidth: boolean;
|
|
23
23
|
variant?: 'annotation';
|
|
24
24
|
keepPosition?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,GACtB,EAAE,qBAAqB,eAgGvB"}
|
package/popover/container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverContainerProps {\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<HTMLElement | SVGElement>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n position: PopoverProps.Position;\n zIndex?: React.CSSProperties['zIndex'];\n arrow: (position: InternalPosition | null) => React.ReactNode;\n children: React.ReactNode;\n renderWithPortal?: boolean;\n size: PopoverProps.Size;\n fixedWidth: boolean;\n variant?: 'annotation';\n // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n keepPosition?: boolean;\n // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n}\n\nexport default function PopoverContainer({\n position,\n trackRef,\n trackKey,\n arrow,\n children,\n zIndex,\n renderWithPortal,\n size,\n fixedWidth,\n variant,\n keepPosition,\n allowScrollToFit,\n allowVerticalOverflow,\n}: PopoverContainerProps) {\n const bodyRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n // Updates the position handler.\n const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef } = usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition: position,\n renderWithPortal,\n keepPosition,\n });\n\n // Recalculate position when properties change.\n useLayoutEffect(() => {\n updatePositionHandler();\n }, [updatePositionHandler, trackKey]);\n\n // Recalculate position when content size changes.\n useResizeObserver(contentRef, () => {\n updatePositionHandler(true);\n });\n\n // Recalculate position on DOM events.\n useLayoutEffect(() => {\n /*\n This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n and by tracking the click event we can adapt the popover's position to the new layout.\n\n TODO: extend this to Enter and Spacebar?\n */\n\n const onClick = (event: UIEvent | KeyboardEvent) => {\n if (\n // Do not update position if keepPosition is true.\n keepPosition ||\n // If the click was on the trigger, this will make the popover appear or disappear,\n // so no need to update its position either in this case.\n nodeContains(trackRef.current, event.target)\n ) {\n return;\n }\n\n requestAnimationFrame(() => {\n updatePositionHandler();\n });\n };\n\n const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());\n const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n window.addEventListener('click', onClick);\n window.addEventListener('resize', updatePositionOnResize);\n window.addEventListener('scroll', refreshPosition, true);\n\n return () => {\n window.removeEventListener('click', onClick);\n window.removeEventListener('resize', updatePositionOnResize);\n window.removeEventListener('scroll', refreshPosition, true);\n };\n }, [keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n return (\n <div\n ref={popoverRef}\n style={{ ...popoverStyle, zIndex }}\n className={clsx(styles.container, isRefresh && styles.refresh)}\n >\n <div\n ref={arrowRef}\n className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n aria-hidden={true}\n >\n {arrow(internalPosition)}\n </div>\n\n <div\n ref={bodyRef}\n className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n [styles['fixed-width']]: fixedWidth,\n [styles[`container-body-variant-${variant}`]]: variant,\n })}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverContainerProps {\n /** References the element the container is positioned against. */\n trackRef: React.RefObject<HTMLElement | SVGElement>;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n position: PopoverProps.Position;\n zIndex?: React.CSSProperties['zIndex'];\n arrow: (position: InternalPosition | null) => React.ReactNode;\n children: React.ReactNode;\n renderWithPortal?: boolean;\n size: PopoverProps.Size | 'content';\n fixedWidth: boolean;\n variant?: 'annotation';\n // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n keepPosition?: boolean;\n // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n}\n\nexport default function PopoverContainer({\n position,\n trackRef,\n trackKey,\n arrow,\n children,\n zIndex,\n renderWithPortal,\n size,\n fixedWidth,\n variant,\n keepPosition,\n allowScrollToFit,\n allowVerticalOverflow,\n}: PopoverContainerProps) {\n const bodyRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const isRefresh = useVisualRefresh();\n\n // Updates the position handler.\n const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef } = usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition: position,\n renderWithPortal,\n keepPosition,\n });\n\n // Recalculate position when properties change.\n useLayoutEffect(() => {\n updatePositionHandler();\n }, [updatePositionHandler, trackKey]);\n\n // Recalculate position when content size changes.\n useResizeObserver(contentRef, () => {\n updatePositionHandler(true);\n });\n\n // Recalculate position on DOM events.\n useLayoutEffect(() => {\n /*\n This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n and by tracking the click event we can adapt the popover's position to the new layout.\n\n TODO: extend this to Enter and Spacebar?\n */\n\n const onClick = (event: UIEvent | KeyboardEvent) => {\n if (\n // Do not update position if keepPosition is true.\n keepPosition ||\n // If the click was on the trigger, this will make the popover appear or disappear,\n // so no need to update its position either in this case.\n nodeContains(trackRef.current, event.target)\n ) {\n return;\n }\n\n requestAnimationFrame(() => {\n updatePositionHandler();\n });\n };\n\n const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());\n const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n window.addEventListener('click', onClick);\n window.addEventListener('resize', updatePositionOnResize);\n window.addEventListener('scroll', refreshPosition, true);\n\n return () => {\n window.removeEventListener('click', onClick);\n window.removeEventListener('resize', updatePositionOnResize);\n window.removeEventListener('scroll', refreshPosition, true);\n };\n }, [keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n return (\n <div\n ref={popoverRef}\n style={{ ...popoverStyle, zIndex }}\n className={clsx(styles.container, isRefresh && styles.refresh)}\n >\n <div\n ref={arrowRef}\n className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n aria-hidden={true}\n >\n {arrow(internalPosition)}\n </div>\n\n <div\n ref={bodyRef}\n className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n [styles['fixed-width']]: fixedWidth,\n [styles[`container-body-variant-${variant}`]]: variant,\n })}\n >\n <div ref={contentRef}>{children}</div>\n </div>\n </div>\n );\n}\n"]}
|
package/popover/internal.d.ts
CHANGED
|
@@ -2,9 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { NonCancelableEventHandler } from '../internal/events/index';
|
|
3
3
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
4
|
import { PopoverProps } from './interfaces';
|
|
5
|
-
export interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType'>, InternalBaseComponentProps {
|
|
5
|
+
export interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {
|
|
6
6
|
__onOpen?: NonCancelableEventHandler<null>;
|
|
7
7
|
triggerType?: PopoverProps.TriggerType | 'filtering-token';
|
|
8
|
+
size: PopoverProps.Size | 'content';
|
|
8
9
|
}
|
|
9
10
|
export interface InternalPopoverRef {
|
|
10
11
|
dismissPopover: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAU7F,OAAO,EAA0B,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC7F,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,EAAE,0BAA0B;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAU7F,OAAO,EAA0B,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC7F,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,MAAM,CAAC,EAAE,0BAA0B;IAClH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,YAAY,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAC3D,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC7B;;AAED,wBAAiD"}
|
package/popover/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport Portal from '../internal/components/portal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType'>, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n triggerType?: PopoverProps.TriggerType | 'filtering-token';\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n focus: HTMLElement['focus'];\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n wrapTriggerText = true,\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n focus: () => {\n setVisible(false);\n focusTrigger();\n },\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n {visible && (\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n )}\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n triggerType === 'filtering-token' && styles['root-filtering-token']\n )}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n </span>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport Portal from '../internal/components/portal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n triggerType?: PopoverProps.TriggerType | 'filtering-token';\n size: PopoverProps.Size | 'content';\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n focus: HTMLElement['focus'];\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n wrapTriggerText = true,\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n focus: () => {\n setVisible(false);\n focusTrigger();\n },\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n {visible && (\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n )}\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n triggerType === 'filtering-token' && styles['root-filtering-token']\n )}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n </span>\n );\n}\n"]}
|