@cloudscape-design/components 3.0.245 → 3.0.247
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/annotation-context/annotation/annotation-trigger.d.ts.map +1 -1
- package/annotation-context/annotation/annotation-trigger.js +1 -3
- package/annotation-context/annotation/annotation-trigger.js.map +1 -1
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +30 -30
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/drawer/index.d.ts +3 -21
- package/app-layout/drawer/index.d.ts.map +1 -1
- package/app-layout/drawer/index.js +25 -5
- package/app-layout/drawer/index.js.map +1 -1
- package/app-layout/drawer/interfaces.d.ts +84 -0
- package/app-layout/drawer/interfaces.d.ts.map +1 -0
- package/app-layout/drawer/interfaces.js +2 -0
- package/app-layout/drawer/interfaces.js.map +1 -0
- package/app-layout/drawer/resizable-drawer.d.ts +4 -0
- package/app-layout/drawer/resizable-drawer.d.ts.map +1 -0
- package/app-layout/drawer/resizable-drawer.js +51 -0
- package/app-layout/drawer/resizable-drawer.js.map +1 -0
- package/app-layout/drawer/styles.css.js +10 -5
- package/app-layout/drawer/styles.scoped.css +46 -10
- package/app-layout/drawer/styles.selectors.js +10 -5
- package/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +142 -17
- package/app-layout/index.js.map +1 -1
- package/app-layout/mobile-toolbar/index.d.ts +10 -1
- package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
- package/app-layout/mobile-toolbar/index.js +3 -2
- package/app-layout/mobile-toolbar/index.js.map +1 -1
- package/app-layout/mobile-toolbar/styles.css.js +5 -4
- package/app-layout/mobile-toolbar/styles.scoped.css +11 -7
- package/app-layout/mobile-toolbar/styles.selectors.js +5 -4
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +7 -7
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/test-classes/styles.css.js +18 -13
- package/app-layout/test-classes/styles.scoped.css +33 -13
- package/app-layout/test-classes/styles.selectors.js +18 -13
- package/app-layout/toggles/index.d.ts.map +1 -1
- package/app-layout/toggles/index.js +2 -2
- package/app-layout/toggles/index.js.map +1 -1
- package/app-layout/toggles/interfaces.d.ts +3 -1
- package/app-layout/toggles/interfaces.d.ts.map +1 -1
- package/app-layout/toggles/interfaces.js.map +1 -1
- package/app-layout/utils/use-drawer-focus-control.d.ts +21 -0
- package/app-layout/utils/use-drawer-focus-control.d.ts.map +1 -0
- package/app-layout/utils/use-drawer-focus-control.js +65 -0
- package/app-layout/utils/use-drawer-focus-control.js.map +1 -0
- package/app-layout/visual-refresh/app-bar.d.ts.map +1 -1
- package/app-layout/visual-refresh/app-bar.js +8 -6
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts +13 -5
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +104 -49
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/drawers.d.ts +47 -0
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -0
- package/app-layout/visual-refresh/drawers.js +127 -0
- package/app-layout/visual-refresh/drawers.js.map +1 -0
- package/app-layout/visual-refresh/header.js +2 -2
- package/app-layout/visual-refresh/header.js.map +1 -1
- package/app-layout/visual-refresh/index.d.ts.map +1 -1
- package/app-layout/visual-refresh/index.js +3 -1
- package/app-layout/visual-refresh/index.js.map +1 -1
- package/app-layout/visual-refresh/layout.d.ts.map +1 -1
- package/app-layout/visual-refresh/layout.js +5 -42
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/main.d.ts.map +1 -1
- package/app-layout/visual-refresh/main.js +2 -3
- package/app-layout/visual-refresh/main.js.map +1 -1
- package/app-layout/visual-refresh/navigation.js +2 -2
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/notifications.d.ts.map +1 -1
- package/app-layout/visual-refresh/notifications.js +2 -2
- package/app-layout/visual-refresh/notifications.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +2 -2
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +71 -61
- package/app-layout/visual-refresh/styles.scoped.css +437 -229
- package/app-layout/visual-refresh/styles.selectors.js +71 -61
- package/app-layout/visual-refresh/tools.d.ts.map +1 -1
- package/app-layout/visual-refresh/tools.js +7 -3
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/app-layout/visual-refresh/trigger-button.d.ts +4 -3
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +5 -6
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/area-chart/internal.js +1 -1
- package/area-chart/internal.js.map +1 -1
- package/breadcrumb-group/item/item.d.ts.map +1 -1
- package/breadcrumb-group/item/item.js +2 -5
- package/breadcrumb-group/item/item.js.map +1 -1
- package/breadcrumb-group/item/styles.css.js +9 -9
- package/breadcrumb-group/item/styles.scoped.css +17 -17
- package/breadcrumb-group/item/styles.selectors.js +9 -9
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +2 -3
- package/button/internal.js.map +1 -1
- package/button/styles.css.js +19 -18
- package/button/styles.scoped.css +136 -136
- package/button/styles.selectors.js +19 -18
- package/calendar/grid/index.d.ts.map +1 -1
- package/calendar/grid/index.js +2 -4
- package/calendar/grid/index.js.map +1 -1
- package/calendar/styles.css.js +18 -18
- package/calendar/styles.scoped.css +38 -38
- package/calendar/styles.selectors.js +18 -18
- package/code-editor/styles.css.js +32 -32
- package/code-editor/styles.scoped.css +109 -109
- package/code-editor/styles.selectors.js +32 -32
- package/code-editor/tab-button.d.ts.map +1 -1
- package/code-editor/tab-button.js +2 -4
- package/code-editor/tab-button.js.map +1 -1
- package/date-picker/index.d.ts.map +1 -1
- package/date-picker/index.js +1 -3
- package/date-picker/index.js.map +1 -1
- package/date-picker/styles.css.js +7 -7
- package/date-picker/styles.scoped.css +9 -9
- package/date-picker/styles.selectors.js +7 -7
- package/date-range-picker/calendar/grids/grid.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/grid.js +1 -3
- package/date-range-picker/calendar/grids/grid.js.map +1 -1
- package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/index.js +1 -3
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/date-range-picker/calendar/grids/styles.css.js +25 -25
- package/date-range-picker/calendar/grids/styles.scoped.css +42 -42
- package/date-range-picker/calendar/grids/styles.selectors.js +25 -25
- package/date-range-picker/dropdown.d.ts.map +1 -1
- package/date-range-picker/dropdown.js +1 -3
- package/date-range-picker/dropdown.js.map +1 -1
- package/date-range-picker/styles.css.js +38 -38
- package/date-range-picker/styles.scoped.css +45 -45
- package/date-range-picker/styles.selectors.js +38 -38
- package/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/expandable-section/expandable-section-header.js +3 -7
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/styles.css.js +23 -23
- package/expandable-section/styles.scoped.css +44 -44
- package/expandable-section/styles.selectors.js +23 -23
- package/flashbar/collapsible-flashbar.d.ts.map +1 -1
- package/flashbar/collapsible-flashbar.js +1 -3
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/flashbar/flash.d.ts.map +1 -1
- package/flashbar/flash.js +1 -3
- package/flashbar/flash.js.map +1 -1
- package/flashbar/styles.css.js +45 -45
- package/flashbar/styles.scoped.css +169 -169
- package/flashbar/styles.selectors.js +45 -45
- package/internal/base-component/styles.scoped.css +24 -0
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +8 -4
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +13 -13
- package/internal/components/abstract-switch/styles.scoped.css +19 -19
- package/internal/components/abstract-switch/styles.selectors.js +13 -13
- package/internal/components/button-trigger/index.d.ts.map +1 -1
- package/internal/components/button-trigger/index.js +1 -3
- package/internal/components/button-trigger/index.js.map +1 -1
- package/internal/components/button-trigger/styles.css.js +9 -9
- package/internal/components/button-trigger/styles.scoped.css +23 -23
- package/internal/components/button-trigger/styles.selectors.js +9 -9
- package/internal/components/chart-legend/index.d.ts.map +1 -1
- package/internal/components/chart-legend/index.js +2 -4
- package/internal/components/chart-legend/index.js.map +1 -1
- package/internal/components/chart-legend/styles.css.js +6 -6
- package/internal/components/chart-legend/styles.scoped.css +15 -15
- package/internal/components/chart-legend/styles.selectors.js +6 -6
- package/internal/components/chart-plot/focus-outline.d.ts.map +1 -1
- package/internal/components/chart-plot/focus-outline.js +25 -3
- package/internal/components/chart-plot/focus-outline.js.map +1 -1
- package/internal/components/filtering-token/index.d.ts +2 -1
- package/internal/components/filtering-token/index.d.ts.map +1 -1
- package/internal/components/filtering-token/index.js +3 -5
- package/internal/components/filtering-token/index.js.map +1 -1
- package/internal/components/filtering-token/styles.css.js +7 -7
- package/internal/components/filtering-token/styles.scoped.css +13 -13
- package/internal/components/filtering-token/styles.selectors.js +7 -7
- package/internal/components/menu-dropdown/index.d.ts.map +1 -1
- package/internal/components/menu-dropdown/index.js +2 -4
- package/internal/components/menu-dropdown/index.js.map +1 -1
- package/internal/components/menu-dropdown/styles.css.js +7 -7
- package/internal/components/menu-dropdown/styles.scoped.css +13 -13
- package/internal/components/menu-dropdown/styles.selectors.js +7 -7
- package/internal/components/token-list/index.d.ts +1 -1
- package/internal/components/token-list/index.d.ts.map +1 -1
- package/internal/components/token-list/index.js +3 -3
- package/internal/components/token-list/index.js.map +1 -1
- package/internal/components/token-list/interfaces.d.ts +0 -1
- package/internal/components/token-list/interfaces.d.ts.map +1 -1
- package/internal/components/token-list/interfaces.js.map +1 -1
- package/internal/components/token-list/styles.css.js +9 -9
- package/internal/components/token-list/styles.scoped.css +20 -20
- package/internal/components/token-list/styles.selectors.js +9 -9
- package/internal/components/token-list/token-focus-controller.js +1 -1
- package/internal/components/token-list/token-focus-controller.js.map +1 -1
- package/internal/components/token-list/token-limit-toggle.d.ts.map +1 -1
- package/internal/components/token-list/token-limit-toggle.js +1 -3
- package/internal/components/token-list/token-limit-toggle.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/internal/generated/custom-css-properties/index.js +31 -30
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/generated/styles/tokens.d.ts +2 -0
- package/internal/generated/styles/tokens.js +2 -0
- package/internal/generated/theming/index.cjs +140 -0
- package/internal/generated/theming/index.js +140 -0
- package/internal/hooks/focus-visible/index.d.ts +2 -5
- package/internal/hooks/focus-visible/index.d.ts.map +1 -1
- package/internal/hooks/focus-visible/index.js +42 -22
- package/internal/hooks/focus-visible/index.js.map +1 -1
- package/internal/hooks/use-base-component/index.d.ts.map +1 -1
- package/internal/hooks/use-base-component/index.js +2 -0
- package/internal/hooks/use-base-component/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/link/internal.d.ts.map +1 -1
- package/link/internal.js +1 -3
- package/link/internal.js.map +1 -1
- package/link/styles.css.js +20 -20
- package/link/styles.scoped.css +71 -71
- package/link/styles.selectors.js +20 -20
- package/mixed-line-bar-chart/internal.js +1 -1
- package/mixed-line-bar-chart/internal.js.map +1 -1
- package/package.json +1 -1
- package/pagination/internal.d.ts.map +1 -1
- package/pagination/internal.js +1 -3
- package/pagination/internal.js.map +1 -1
- package/pagination/styles.css.js +9 -9
- package/pagination/styles.scoped.css +23 -23
- package/pagination/styles.selectors.js +9 -9
- package/pie-chart/index.js +1 -1
- package/pie-chart/index.js.map +1 -1
- package/popover/internal.d.ts.map +1 -1
- package/popover/internal.js +1 -3
- package/popover/internal.js.map +1 -1
- package/popover/styles.css.js +50 -50
- package/popover/styles.scoped.css +63 -63
- package/popover/styles.selectors.js +50 -50
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +2 -2
- package/property-filter/index.js.map +1 -1
- package/property-filter/token.d.ts.map +1 -1
- package/property-filter/token.js +1 -1
- package/property-filter/token.js.map +1 -1
- package/segmented-control/segment.d.ts.map +1 -1
- package/segmented-control/segment.js +1 -3
- package/segmented-control/segment.js.map +1 -1
- package/segmented-control/styles.css.js +14 -14
- package/segmented-control/styles.scoped.css +33 -33
- package/segmented-control/styles.selectors.js +14 -14
- package/side-navigation/internal.d.ts.map +1 -1
- package/side-navigation/internal.js +2 -5
- package/side-navigation/internal.js.map +1 -1
- package/side-navigation/styles.css.js +27 -27
- package/side-navigation/styles.scoped.css +37 -37
- package/side-navigation/styles.selectors.js +27 -27
- package/space-between/internal.js +1 -1
- package/space-between/internal.js.map +1 -1
- package/space-between/styles.css.js +20 -28
- package/space-between/styles.scoped.css +37 -101
- package/space-between/styles.selectors.js +20 -28
- package/split-panel/index.d.ts.map +1 -1
- package/split-panel/index.js +1 -3
- package/split-panel/index.js.map +1 -1
- package/split-panel/styles.css.js +59 -59
- package/split-panel/styles.scoped.css +81 -81
- package/split-panel/styles.selectors.js +59 -59
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +3 -3
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +18 -18
- package/table/body-cell/styles.scoped.css +57 -55
- package/table/body-cell/styles.selectors.js +18 -18
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +11 -9
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/styles.css.js +19 -19
- package/table/header-cell/styles.scoped.css +32 -32
- package/table/header-cell/styles.selectors.js +19 -19
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +1 -3
- package/table/internal.js.map +1 -1
- package/table/resizer/styles.css.js +6 -6
- package/table/resizer/styles.scoped.css +11 -11
- package/table/resizer/styles.selectors.js +6 -6
- package/table/styles.css.js +33 -33
- package/table/styles.scoped.css +41 -41
- package/table/styles.selectors.js +33 -33
- package/tabs/index.d.ts.map +1 -1
- package/tabs/index.js +8 -3
- package/tabs/index.js.map +1 -1
- package/tabs/styles.css.js +21 -21
- package/tabs/styles.scoped.css +38 -38
- package/tabs/styles.selectors.js +21 -21
- package/tabs/tab-header-bar.d.ts.map +1 -1
- package/tabs/tab-header-bar.js +9 -3
- package/tabs/tab-header-bar.js.map +1 -1
- package/tag-editor/internal.d.ts.map +1 -1
- package/tag-editor/internal.js +2 -4
- package/tag-editor/internal.js.map +1 -1
- package/tag-editor/styles.css.js +3 -3
- package/tag-editor/styles.scoped.css +10 -10
- package/tag-editor/styles.selectors.js +3 -3
- package/token-group/dismiss-button.d.ts.map +1 -1
- package/token-group/dismiss-button.js +1 -3
- package/token-group/dismiss-button.js.map +1 -1
- package/token-group/internal.js +2 -2
- package/token-group/internal.js.map +1 -1
- package/token-group/styles.css.js +5 -5
- package/token-group/styles.scoped.css +12 -12
- package/token-group/styles.selectors.js +5 -5
- package/token-group/token.d.ts +3 -5
- package/token-group/token.d.ts.map +1 -1
- package/token-group/token.js +2 -2
- package/token-group/token.js.map +1 -1
- package/top-navigation/1.0-beta/internal.d.ts.map +1 -1
- package/top-navigation/1.0-beta/internal.js +1 -3
- package/top-navigation/1.0-beta/internal.js.map +1 -1
- package/top-navigation/1.0-beta/styles.css.js +25 -25
- package/top-navigation/1.0-beta/styles.scoped.css +42 -42
- package/top-navigation/1.0-beta/styles.selectors.js +25 -25
- package/top-navigation/internal.d.ts.map +1 -1
- package/top-navigation/internal.js +1 -3
- package/top-navigation/internal.js.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.d.ts.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.js +3 -7
- package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
- package/top-navigation/styles.css.js +47 -47
- package/top-navigation/styles.scoped.css +66 -66
- package/top-navigation/styles.selectors.js +47 -47
- package/tutorial-panel/components/tutorial-list/index.d.ts.map +1 -1
- package/tutorial-panel/components/tutorial-list/index.js +1 -3
- package/tutorial-panel/components/tutorial-list/index.js.map +1 -1
- package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
- package/tutorial-panel/components/tutorial-list/styles.scoped.css +27 -27
- package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
- package/wizard/styles.css.js +32 -32
- package/wizard/styles.scoped.css +63 -63
- package/wizard/styles.selectors.js +32 -32
- package/wizard/wizard-form.d.ts.map +1 -1
- package/wizard/wizard-form.js +1 -3
- package/wizard/wizard-form.js.map +1 -1
|
@@ -879,6 +879,10 @@ export var preset = {
|
|
|
879
879
|
"light": "{colorGrey200}",
|
|
880
880
|
"dark": "{colorGrey650}"
|
|
881
881
|
},
|
|
882
|
+
"colorBackgroundLayoutPanelTriggerActive": {
|
|
883
|
+
"light": "{colorBlue900}",
|
|
884
|
+
"dark": "{colorBlue400}"
|
|
885
|
+
},
|
|
882
886
|
"colorBackgroundLayoutToggleActive": {
|
|
883
887
|
"light": "{colorGrey650}",
|
|
884
888
|
"dark": "{colorGrey650}"
|
|
@@ -1195,6 +1199,10 @@ export var preset = {
|
|
|
1195
1199
|
"light": "{colorGreyTransparentHeavy}",
|
|
1196
1200
|
"dark": "{colorGreyTransparentHeavy}"
|
|
1197
1201
|
},
|
|
1202
|
+
"colorShadowLayoutPanelTrigger": {
|
|
1203
|
+
"light": "{colorGrey300}",
|
|
1204
|
+
"dark": "{colorGrey650}"
|
|
1205
|
+
},
|
|
1198
1206
|
"colorShadowMedium": {
|
|
1199
1207
|
"light": "{colorGreyTransparent}",
|
|
1200
1208
|
"dark": "{colorGreyTransparent}"
|
|
@@ -1527,6 +1535,14 @@ export var preset = {
|
|
|
1527
1535
|
"light": "{colorBlue600}",
|
|
1528
1536
|
"dark": "{colorBlue500}"
|
|
1529
1537
|
},
|
|
1538
|
+
"colorTextLayoutPanelTriggerHover": {
|
|
1539
|
+
"light": "{colorBlue600}",
|
|
1540
|
+
"dark": "{colorBlue500}"
|
|
1541
|
+
},
|
|
1542
|
+
"colorTextLayoutPanelTriggerActive": {
|
|
1543
|
+
"light": "{colorWhite}",
|
|
1544
|
+
"dark": "{colorGrey800}"
|
|
1545
|
+
},
|
|
1530
1546
|
"colorTextSmall": {
|
|
1531
1547
|
"light": "{colorGrey550}",
|
|
1532
1548
|
"dark": "{colorGrey450}"
|
|
@@ -1563,6 +1579,14 @@ export var preset = {
|
|
|
1563
1579
|
"light": "{colorBlue200}",
|
|
1564
1580
|
"dark": "{colorBlue600}"
|
|
1565
1581
|
},
|
|
1582
|
+
"colorDragPlaceholderActive": {
|
|
1583
|
+
"light": "{colorGrey200}",
|
|
1584
|
+
"dark": "{colorGrey550}"
|
|
1585
|
+
},
|
|
1586
|
+
"colorDragPlaceholderHover": {
|
|
1587
|
+
"light": "{colorBlue200}",
|
|
1588
|
+
"dark": "{colorBlue600}"
|
|
1589
|
+
},
|
|
1566
1590
|
"fontBodyMLineHeight": "22px",
|
|
1567
1591
|
"fontBodyMSize": "14px",
|
|
1568
1592
|
"fontBodySLetterSpacing": "0.005em",
|
|
@@ -2791,6 +2815,10 @@ export var preset = {
|
|
|
2791
2815
|
"light": "{colorGrey650}",
|
|
2792
2816
|
"dark": "{colorGrey650}"
|
|
2793
2817
|
},
|
|
2818
|
+
"colorBackgroundLayoutPanelTriggerActive": {
|
|
2819
|
+
"light": "{colorBlue400}",
|
|
2820
|
+
"dark": "{colorBlue400}"
|
|
2821
|
+
},
|
|
2794
2822
|
"colorBackgroundLayoutToggleActive": {
|
|
2795
2823
|
"light": "{colorGrey650}",
|
|
2796
2824
|
"dark": "{colorGrey650}"
|
|
@@ -3107,6 +3135,10 @@ export var preset = {
|
|
|
3107
3135
|
"light": "{colorGreyTransparentHeavy}",
|
|
3108
3136
|
"dark": "{colorGreyTransparentHeavy}"
|
|
3109
3137
|
},
|
|
3138
|
+
"colorShadowLayoutPanelTrigger": {
|
|
3139
|
+
"light": "{colorGrey650}",
|
|
3140
|
+
"dark": "{colorGrey650}"
|
|
3141
|
+
},
|
|
3110
3142
|
"colorShadowMedium": {
|
|
3111
3143
|
"light": "{colorGreyTransparent}",
|
|
3112
3144
|
"dark": "{colorGreyTransparent}"
|
|
@@ -3439,6 +3471,14 @@ export var preset = {
|
|
|
3439
3471
|
"light": "{colorBlue500}",
|
|
3440
3472
|
"dark": "{colorBlue500}"
|
|
3441
3473
|
},
|
|
3474
|
+
"colorTextLayoutPanelTriggerHover": {
|
|
3475
|
+
"light": "{colorBlue500}",
|
|
3476
|
+
"dark": "{colorBlue500}"
|
|
3477
|
+
},
|
|
3478
|
+
"colorTextLayoutPanelTriggerActive": {
|
|
3479
|
+
"light": "{colorGrey800}",
|
|
3480
|
+
"dark": "{colorGrey800}"
|
|
3481
|
+
},
|
|
3442
3482
|
"colorTextSmall": {
|
|
3443
3483
|
"light": "{colorGrey450}",
|
|
3444
3484
|
"dark": "{colorGrey450}"
|
|
@@ -3474,6 +3514,14 @@ export var preset = {
|
|
|
3474
3514
|
"colorBoardPlaceholderHover": {
|
|
3475
3515
|
"light": "{colorBlue600}",
|
|
3476
3516
|
"dark": "{colorBlue600}"
|
|
3517
|
+
},
|
|
3518
|
+
"colorDragPlaceholderActive": {
|
|
3519
|
+
"light": "{colorGrey550}",
|
|
3520
|
+
"dark": "{colorGrey550}"
|
|
3521
|
+
},
|
|
3522
|
+
"colorDragPlaceholderHover": {
|
|
3523
|
+
"light": "{colorBlue600}",
|
|
3524
|
+
"dark": "{colorBlue600}"
|
|
3477
3525
|
}
|
|
3478
3526
|
}
|
|
3479
3527
|
},
|
|
@@ -3721,6 +3769,10 @@ export var preset = {
|
|
|
3721
3769
|
"light": "{colorGrey650}",
|
|
3722
3770
|
"dark": "{colorGrey650}"
|
|
3723
3771
|
},
|
|
3772
|
+
"colorBackgroundLayoutPanelTriggerActive": {
|
|
3773
|
+
"light": "{colorBlue400}",
|
|
3774
|
+
"dark": "{colorBlue400}"
|
|
3775
|
+
},
|
|
3724
3776
|
"colorBackgroundLayoutToggleActive": {
|
|
3725
3777
|
"light": "{colorGrey650}",
|
|
3726
3778
|
"dark": "{colorGrey650}"
|
|
@@ -4037,6 +4089,10 @@ export var preset = {
|
|
|
4037
4089
|
"light": "{colorGreyTransparentHeavy}",
|
|
4038
4090
|
"dark": "{colorGreyTransparentHeavy}"
|
|
4039
4091
|
},
|
|
4092
|
+
"colorShadowLayoutPanelTrigger": {
|
|
4093
|
+
"light": "{colorGrey650}",
|
|
4094
|
+
"dark": "{colorGrey650}"
|
|
4095
|
+
},
|
|
4040
4096
|
"colorShadowMedium": {
|
|
4041
4097
|
"light": "{colorGreyTransparent}",
|
|
4042
4098
|
"dark": "{colorGreyTransparent}"
|
|
@@ -4369,6 +4425,14 @@ export var preset = {
|
|
|
4369
4425
|
"light": "{colorBlue500}",
|
|
4370
4426
|
"dark": "{colorBlue500}"
|
|
4371
4427
|
},
|
|
4428
|
+
"colorTextLayoutPanelTriggerHover": {
|
|
4429
|
+
"light": "{colorBlue500}",
|
|
4430
|
+
"dark": "{colorBlue500}"
|
|
4431
|
+
},
|
|
4432
|
+
"colorTextLayoutPanelTriggerActive": {
|
|
4433
|
+
"light": "{colorGrey800}",
|
|
4434
|
+
"dark": "{colorGrey800}"
|
|
4435
|
+
},
|
|
4372
4436
|
"colorTextSmall": {
|
|
4373
4437
|
"light": "{colorGrey450}",
|
|
4374
4438
|
"dark": "{colorGrey450}"
|
|
@@ -4404,6 +4468,14 @@ export var preset = {
|
|
|
4404
4468
|
"colorBoardPlaceholderHover": {
|
|
4405
4469
|
"light": "{colorBlue600}",
|
|
4406
4470
|
"dark": "{colorBlue600}"
|
|
4471
|
+
},
|
|
4472
|
+
"colorDragPlaceholderActive": {
|
|
4473
|
+
"light": "{colorGrey550}",
|
|
4474
|
+
"dark": "{colorGrey550}"
|
|
4475
|
+
},
|
|
4476
|
+
"colorDragPlaceholderHover": {
|
|
4477
|
+
"light": "{colorBlue600}",
|
|
4478
|
+
"dark": "{colorBlue600}"
|
|
4407
4479
|
}
|
|
4408
4480
|
}
|
|
4409
4481
|
},
|
|
@@ -4591,6 +4663,10 @@ export var preset = {
|
|
|
4591
4663
|
"light": "{colorGrey200}",
|
|
4592
4664
|
"dark": "{colorGrey650}"
|
|
4593
4665
|
},
|
|
4666
|
+
"colorBackgroundLayoutPanelTriggerActive": {
|
|
4667
|
+
"light": "{colorBlue900}",
|
|
4668
|
+
"dark": "{colorBlue400}"
|
|
4669
|
+
},
|
|
4594
4670
|
"colorBackgroundLayoutToggleActive": {
|
|
4595
4671
|
"light": "{colorGrey650}",
|
|
4596
4672
|
"dark": "{colorGrey650}"
|
|
@@ -4907,6 +4983,10 @@ export var preset = {
|
|
|
4907
4983
|
"light": "{colorGreyTransparentHeavy}",
|
|
4908
4984
|
"dark": "{colorGreyTransparentHeavy}"
|
|
4909
4985
|
},
|
|
4986
|
+
"colorShadowLayoutPanelTrigger": {
|
|
4987
|
+
"light": "{colorGrey300}",
|
|
4988
|
+
"dark": "{colorGrey650}"
|
|
4989
|
+
},
|
|
4910
4990
|
"colorShadowMedium": {
|
|
4911
4991
|
"light": "{colorGreyTransparent}",
|
|
4912
4992
|
"dark": "{colorGreyTransparent}"
|
|
@@ -5239,6 +5319,14 @@ export var preset = {
|
|
|
5239
5319
|
"light": "{colorBlue600}",
|
|
5240
5320
|
"dark": "{colorBlue500}"
|
|
5241
5321
|
},
|
|
5322
|
+
"colorTextLayoutPanelTriggerHover": {
|
|
5323
|
+
"light": "{colorBlue600}",
|
|
5324
|
+
"dark": "{colorBlue500}"
|
|
5325
|
+
},
|
|
5326
|
+
"colorTextLayoutPanelTriggerActive": {
|
|
5327
|
+
"light": "{colorWhite}",
|
|
5328
|
+
"dark": "{colorGrey800}"
|
|
5329
|
+
},
|
|
5242
5330
|
"colorTextSmall": {
|
|
5243
5331
|
"light": "{colorGrey550}",
|
|
5244
5332
|
"dark": "{colorGrey450}"
|
|
@@ -5274,6 +5362,14 @@ export var preset = {
|
|
|
5274
5362
|
"colorBoardPlaceholderHover": {
|
|
5275
5363
|
"light": "{colorBlue200}",
|
|
5276
5364
|
"dark": "{colorBlue600}"
|
|
5365
|
+
},
|
|
5366
|
+
"colorDragPlaceholderActive": {
|
|
5367
|
+
"light": "{colorGrey200}",
|
|
5368
|
+
"dark": "{colorGrey550}"
|
|
5369
|
+
},
|
|
5370
|
+
"colorDragPlaceholderHover": {
|
|
5371
|
+
"light": "{colorBlue200}",
|
|
5372
|
+
"dark": "{colorBlue600}"
|
|
5277
5373
|
}
|
|
5278
5374
|
}
|
|
5279
5375
|
},
|
|
@@ -5461,6 +5557,10 @@ export var preset = {
|
|
|
5461
5557
|
"light": "{colorGrey200}",
|
|
5462
5558
|
"dark": "{colorGrey650}"
|
|
5463
5559
|
},
|
|
5560
|
+
"colorBackgroundLayoutPanelTriggerActive": {
|
|
5561
|
+
"light": "{colorBlue900}",
|
|
5562
|
+
"dark": "{colorBlue400}"
|
|
5563
|
+
},
|
|
5464
5564
|
"colorBackgroundLayoutToggleActive": {
|
|
5465
5565
|
"light": "{colorGrey650}",
|
|
5466
5566
|
"dark": "{colorGrey650}"
|
|
@@ -5777,6 +5877,10 @@ export var preset = {
|
|
|
5777
5877
|
"light": "{colorGreyTransparentHeavy}",
|
|
5778
5878
|
"dark": "{colorGreyTransparentHeavy}"
|
|
5779
5879
|
},
|
|
5880
|
+
"colorShadowLayoutPanelTrigger": {
|
|
5881
|
+
"light": "{colorGrey300}",
|
|
5882
|
+
"dark": "{colorGrey650}"
|
|
5883
|
+
},
|
|
5780
5884
|
"colorShadowMedium": {
|
|
5781
5885
|
"light": "{colorGreyTransparent}",
|
|
5782
5886
|
"dark": "{colorGreyTransparent}"
|
|
@@ -6109,6 +6213,14 @@ export var preset = {
|
|
|
6109
6213
|
"light": "{colorBlue600}",
|
|
6110
6214
|
"dark": "{colorBlue500}"
|
|
6111
6215
|
},
|
|
6216
|
+
"colorTextLayoutPanelTriggerHover": {
|
|
6217
|
+
"light": "{colorBlue600}",
|
|
6218
|
+
"dark": "{colorBlue500}"
|
|
6219
|
+
},
|
|
6220
|
+
"colorTextLayoutPanelTriggerActive": {
|
|
6221
|
+
"light": "{colorWhite}",
|
|
6222
|
+
"dark": "{colorGrey800}"
|
|
6223
|
+
},
|
|
6112
6224
|
"colorTextSmall": {
|
|
6113
6225
|
"light": "{colorGrey550}",
|
|
6114
6226
|
"dark": "{colorGrey450}"
|
|
@@ -6144,6 +6256,14 @@ export var preset = {
|
|
|
6144
6256
|
"colorBoardPlaceholderHover": {
|
|
6145
6257
|
"light": "{colorBlue200}",
|
|
6146
6258
|
"dark": "{colorBlue600}"
|
|
6259
|
+
},
|
|
6260
|
+
"colorDragPlaceholderActive": {
|
|
6261
|
+
"light": "{colorGrey200}",
|
|
6262
|
+
"dark": "{colorGrey550}"
|
|
6263
|
+
},
|
|
6264
|
+
"colorDragPlaceholderHover": {
|
|
6265
|
+
"light": "{colorBlue200}",
|
|
6266
|
+
"dark": "{colorBlue600}"
|
|
6147
6267
|
}
|
|
6148
6268
|
}
|
|
6149
6269
|
}
|
|
@@ -6348,6 +6468,7 @@ export var preset = {
|
|
|
6348
6468
|
"colorBackgroundLayoutMobilePanel": "color",
|
|
6349
6469
|
"colorBackgroundLayoutPanelContent": "color",
|
|
6350
6470
|
"colorBackgroundLayoutPanelHover": "color",
|
|
6471
|
+
"colorBackgroundLayoutPanelTriggerActive": "color",
|
|
6351
6472
|
"colorBackgroundLayoutToggleActive": "color",
|
|
6352
6473
|
"colorBackgroundLayoutToggleDefault": "color",
|
|
6353
6474
|
"colorBackgroundLayoutToggleHover": "color",
|
|
@@ -6427,6 +6548,7 @@ export var preset = {
|
|
|
6427
6548
|
"colorForegroundControlDefault": "color",
|
|
6428
6549
|
"colorForegroundControlDisabled": "color",
|
|
6429
6550
|
"colorShadowDefault": "color",
|
|
6551
|
+
"colorShadowLayoutPanelTrigger": "color",
|
|
6430
6552
|
"colorShadowMedium": "color",
|
|
6431
6553
|
"colorShadowSide": "color",
|
|
6432
6554
|
"colorStrokeCodeEditorResizeHandler": "color",
|
|
@@ -6510,6 +6632,8 @@ export var preset = {
|
|
|
6510
6632
|
"colorTextSegmentActive": "color",
|
|
6511
6633
|
"colorTextSegmentDefault": "color",
|
|
6512
6634
|
"colorTextSegmentHover": "color",
|
|
6635
|
+
"colorTextLayoutPanelTriggerHover": "color",
|
|
6636
|
+
"colorTextLayoutPanelTriggerActive": "color",
|
|
6513
6637
|
"colorTextSmall": "color",
|
|
6514
6638
|
"colorTextStatusError": "color",
|
|
6515
6639
|
"colorTextStatusInactive": "color",
|
|
@@ -6519,6 +6643,8 @@ export var preset = {
|
|
|
6519
6643
|
"colorTextTopNavigationTitle": "color",
|
|
6520
6644
|
"colorBoardPlaceholderActive": "color",
|
|
6521
6645
|
"colorBoardPlaceholderHover": "color",
|
|
6646
|
+
"colorDragPlaceholderActive": "color",
|
|
6647
|
+
"colorDragPlaceholderHover": "color",
|
|
6522
6648
|
"motionDurationExtraFast": "motion",
|
|
6523
6649
|
"motionDurationExtraSlow": "motion",
|
|
6524
6650
|
"motionDurationFast": "motion",
|
|
@@ -7070,6 +7196,8 @@ export var preset = {
|
|
|
7070
7196
|
"colorTextStatusWarning",
|
|
7071
7197
|
"colorBoardPlaceholderActive",
|
|
7072
7198
|
"colorBoardPlaceholderHover",
|
|
7199
|
+
"colorDragPlaceholderActive",
|
|
7200
|
+
"colorDragPlaceholderHover",
|
|
7073
7201
|
"fontFamilyBase",
|
|
7074
7202
|
"fontFamilyMonospace",
|
|
7075
7203
|
"borderRadiusAlert",
|
|
@@ -7365,6 +7493,7 @@ export var preset = {
|
|
|
7365
7493
|
"colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
|
|
7366
7494
|
"colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
|
|
7367
7495
|
"colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
|
|
7496
|
+
"colorBackgroundLayoutPanelTriggerActive": "color-background-layout-panel-trigger-active",
|
|
7368
7497
|
"colorBackgroundLayoutToggleActive": "color-background-layout-toggle-active",
|
|
7369
7498
|
"colorBackgroundLayoutToggleDefault": "color-background-layout-toggle-default",
|
|
7370
7499
|
"colorBackgroundLayoutToggleHover": "color-background-layout-toggle-hover",
|
|
@@ -7444,6 +7573,7 @@ export var preset = {
|
|
|
7444
7573
|
"colorForegroundControlDefault": "color-foreground-control-default",
|
|
7445
7574
|
"colorForegroundControlDisabled": "color-foreground-control-disabled",
|
|
7446
7575
|
"colorShadowDefault": "color-shadow-default",
|
|
7576
|
+
"colorShadowLayoutPanelTrigger": "color-shadow-layout-panel-trigger",
|
|
7447
7577
|
"colorShadowMedium": "color-shadow-medium",
|
|
7448
7578
|
"colorShadowSide": "color-shadow-side",
|
|
7449
7579
|
"colorStrokeCodeEditorResizeHandler": "color-stroke-code-editor-resize-handler",
|
|
@@ -7527,6 +7657,8 @@ export var preset = {
|
|
|
7527
7657
|
"colorTextSegmentActive": "color-text-segment-active",
|
|
7528
7658
|
"colorTextSegmentDefault": "color-text-segment-default",
|
|
7529
7659
|
"colorTextSegmentHover": "color-text-segment-hover",
|
|
7660
|
+
"colorTextLayoutPanelTriggerHover": "color-text-layout-panel-trigger-hover",
|
|
7661
|
+
"colorTextLayoutPanelTriggerActive": "color-text-layout-panel-trigger-active",
|
|
7530
7662
|
"colorTextSmall": "color-text-small",
|
|
7531
7663
|
"colorTextStatusError": "color-text-status-error",
|
|
7532
7664
|
"colorTextStatusInactive": "color-text-status-inactive",
|
|
@@ -7536,6 +7668,8 @@ export var preset = {
|
|
|
7536
7668
|
"colorTextTopNavigationTitle": "color-text-top-navigation-title",
|
|
7537
7669
|
"colorBoardPlaceholderActive": "color-board-placeholder-active",
|
|
7538
7670
|
"colorBoardPlaceholderHover": "color-board-placeholder-hover",
|
|
7671
|
+
"colorDragPlaceholderActive": "color-drag-placeholder-active",
|
|
7672
|
+
"colorDragPlaceholderHover": "color-drag-placeholder-hover",
|
|
7539
7673
|
"fontBodyMLineHeight": "font-body-m-line-height",
|
|
7540
7674
|
"fontBodyMSize": "font-body-m-size",
|
|
7541
7675
|
"fontBodySLetterSpacing": "font-body-s-letter-spacing",
|
|
@@ -8019,6 +8153,7 @@ export var preset = {
|
|
|
8019
8153
|
"colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-9vweqk",
|
|
8020
8154
|
"colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-808qum",
|
|
8021
8155
|
"colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-0bg3gq",
|
|
8156
|
+
"colorBackgroundLayoutPanelTriggerActive": "--color-background-layout-panel-trigger-active-uf4o0r",
|
|
8022
8157
|
"colorBackgroundLayoutToggleActive": "--color-background-layout-toggle-active-d15dki",
|
|
8023
8158
|
"colorBackgroundLayoutToggleDefault": "--color-background-layout-toggle-default-f9hnkv",
|
|
8024
8159
|
"colorBackgroundLayoutToggleHover": "--color-background-layout-toggle-hover-gi0e0b",
|
|
@@ -8098,6 +8233,7 @@ export var preset = {
|
|
|
8098
8233
|
"colorForegroundControlDefault": "--color-foreground-control-default-7ajdem",
|
|
8099
8234
|
"colorForegroundControlDisabled": "--color-foreground-control-disabled-v6a97u",
|
|
8100
8235
|
"colorShadowDefault": "--color-shadow-default-3se70f",
|
|
8236
|
+
"colorShadowLayoutPanelTrigger": "--color-shadow-layout-panel-trigger-t4yazw",
|
|
8101
8237
|
"colorShadowMedium": "--color-shadow-medium-02bwpe",
|
|
8102
8238
|
"colorShadowSide": "--color-shadow-side-07co14",
|
|
8103
8239
|
"colorStrokeCodeEditorResizeHandler": "--color-stroke-code-editor-resize-handler-lop07p",
|
|
@@ -8181,6 +8317,8 @@ export var preset = {
|
|
|
8181
8317
|
"colorTextSegmentActive": "--color-text-segment-active-gc2jjl",
|
|
8182
8318
|
"colorTextSegmentDefault": "--color-text-segment-default-bf7rka",
|
|
8183
8319
|
"colorTextSegmentHover": "--color-text-segment-hover-5pccvg",
|
|
8320
|
+
"colorTextLayoutPanelTriggerHover": "--color-text-layout-panel-trigger-hover-yw2kb4",
|
|
8321
|
+
"colorTextLayoutPanelTriggerActive": "--color-text-layout-panel-trigger-active-mt4zu0",
|
|
8184
8322
|
"colorTextSmall": "--color-text-small-le1y42",
|
|
8185
8323
|
"colorTextStatusError": "--color-text-status-error-5sesl6",
|
|
8186
8324
|
"colorTextStatusInactive": "--color-text-status-inactive-5ei55p",
|
|
@@ -8190,6 +8328,8 @@ export var preset = {
|
|
|
8190
8328
|
"colorTextTopNavigationTitle": "--color-text-top-navigation-title-oypxe3",
|
|
8191
8329
|
"colorBoardPlaceholderActive": "--color-board-placeholder-active-vaxzdf",
|
|
8192
8330
|
"colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
|
|
8331
|
+
"colorDragPlaceholderActive": "--color-drag-placeholder-active-fkpj7i",
|
|
8332
|
+
"colorDragPlaceholderHover": "--color-drag-placeholder-hover-3ohnz1",
|
|
8193
8333
|
"fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
|
|
8194
8334
|
"fontBodyMSize": "--font-body-m-size-sregvd",
|
|
8195
8335
|
"fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
} | {
|
|
4
|
-
'data-awsui-focus-visible'?: undefined;
|
|
5
|
-
};
|
|
1
|
+
export declare function isModifierKey(event: KeyboardEvent): boolean;
|
|
2
|
+
export default function useFocusVisible(): void;
|
|
6
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,WAIjD;AAgCD,MAAM,CAAC,OAAO,UAAU,eAAe,SAatC"}
|
|
@@ -1,29 +1,49 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { useEffect } from 'react';
|
|
3
4
|
import { KeyCode } from '../../keycode';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
5
|
+
export function isModifierKey(event) {
|
|
6
|
+
// we do not want to highlight focused element
|
|
7
|
+
// when special keys are pressed
|
|
8
|
+
return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
|
|
9
|
+
}
|
|
10
|
+
function setIsKeyboard(active) {
|
|
11
|
+
if (active) {
|
|
12
|
+
document.body.setAttribute('data-awsui-focus-visible', 'true');
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
document.body.removeAttribute('data-awsui-focus-visible');
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
function handleMousedown() {
|
|
19
|
+
return setIsKeyboard(false);
|
|
20
|
+
}
|
|
21
|
+
function handleKeydown(event) {
|
|
22
|
+
if (!isModifierKey(event)) {
|
|
23
|
+
setIsKeyboard(true);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
let componentsCount = 0;
|
|
27
|
+
function addListeners() {
|
|
28
|
+
document.addEventListener('mousedown', handleMousedown);
|
|
29
|
+
document.addEventListener('keydown', handleKeydown);
|
|
30
|
+
}
|
|
31
|
+
function removeListeners() {
|
|
32
|
+
document.removeEventListener('mousedown', handleMousedown);
|
|
33
|
+
document.removeEventListener('keydown', handleKeydown);
|
|
34
|
+
}
|
|
35
|
+
export default function useFocusVisible() {
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
if (componentsCount === 0) {
|
|
38
|
+
addListeners();
|
|
39
|
+
}
|
|
40
|
+
componentsCount++;
|
|
19
41
|
return () => {
|
|
20
|
-
|
|
21
|
-
|
|
42
|
+
componentsCount--;
|
|
43
|
+
if (componentsCount === 0) {
|
|
44
|
+
removeListeners();
|
|
45
|
+
}
|
|
22
46
|
};
|
|
23
|
-
},
|
|
24
|
-
});
|
|
25
|
-
export default function useFocusVisible() {
|
|
26
|
-
const visible = useFocusSingleton();
|
|
27
|
-
return visible ? { 'data-awsui-focus-visible': visible } : {};
|
|
47
|
+
}, []);
|
|
28
48
|
}
|
|
29
49
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,8CAA8C;IAC9C,gCAAgC;IAChC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AACjG,CAAC;AAED,SAAS,aAAa,CAAC,MAAe;IACpC,IAAI,MAAM,EAAE;QACV,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;KAChE;SAAM;QACL,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,0BAA0B,CAAC,CAAC;KAC3D;AACH,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC;AAED,SAAS,aAAa,CAAC,KAAoB;IACzC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;QACzB,aAAa,CAAC,IAAI,CAAC,CAAC;KACrB;AACH,CAAC;AAED,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB,SAAS,YAAY;IACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,eAAe;IACtB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,CAAC,EAAE;YACzB,YAAY,EAAE,CAAC;SAChB;QACD,eAAe,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC;YAClB,IAAI,eAAe,KAAK,CAAC,EAAE;gBACzB,eAAe,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect } from 'react';\nimport { KeyCode } from '../../keycode';\n\nexport function isModifierKey(event: KeyboardEvent) {\n // we do not want to highlight focused element\n // when special keys are pressed\n return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n}\n\nfunction setIsKeyboard(active: boolean) {\n if (active) {\n document.body.setAttribute('data-awsui-focus-visible', 'true');\n } else {\n document.body.removeAttribute('data-awsui-focus-visible');\n }\n}\n\nfunction handleMousedown() {\n return setIsKeyboard(false);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (!isModifierKey(event)) {\n setIsKeyboard(true);\n }\n}\n\nlet componentsCount = 0;\n\nfunction addListeners() {\n document.addEventListener('mousedown', handleMousedown);\n document.addEventListener('keydown', handleKeydown);\n}\n\nfunction removeListeners() {\n document.removeEventListener('mousedown', handleMousedown);\n document.removeEventListener('keydown', handleKeydown);\n}\n\nexport default function useFocusVisible() {\n useEffect(() => {\n if (componentsCount === 0) {\n addListeners();\n }\n componentsCount++;\n return () => {\n componentsCount--;\n if (componentsCount === 0) {\n removeListeners();\n }\n };\n }, []);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAMzC,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,aAAa,EAAE,MAAM;;EAKtE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';
|
|
2
2
|
import { useTelemetry } from '../use-telemetry';
|
|
3
3
|
import { PACKAGE_VERSION } from '../../environment';
|
|
4
|
+
import useFocusVisible from '../focus-visible';
|
|
4
5
|
/**
|
|
5
6
|
* This hook is used for components which are exported to customers. The returned __internalRootRef needs to be
|
|
6
7
|
* attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
|
|
@@ -8,6 +9,7 @@ import { PACKAGE_VERSION } from '../../environment';
|
|
|
8
9
|
*/
|
|
9
10
|
export default function useBaseComponent(componentName) {
|
|
10
11
|
useTelemetry(componentName);
|
|
12
|
+
useFocusVisible();
|
|
11
13
|
const elementRef = useComponentMetadata(componentName, PACKAGE_VERSION);
|
|
12
14
|
return { __internalRootRef: elementRef };
|
|
13
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAM/C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,eAAe,EAAE,CAAC;IAClB,MAAM,UAAU,GAAG,oBAAoB,CAAI,aAAa,EAAE,eAAe,CAAC,CAAC;IAC3E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject } from 'react';\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\nimport { useTelemetry } from '../use-telemetry';\nimport { PACKAGE_VERSION } from '../../environment';\nimport useFocusVisible from '../focus-visible';\n\nexport interface InternalBaseComponentProps {\n __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string) {\n useTelemetry(componentName);\n useFocusVisible();\n const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);\n return { __internalRootRef: elementRef };\n}\n"]}
|
package/internal/manifest.json
CHANGED
package/link/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA6G1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}
|
package/link/internal.js
CHANGED
|
@@ -5,7 +5,6 @@ import React, { useRef } from 'react';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import InternalIcon from '../icon/internal';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
|
-
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
9
8
|
import { getBaseProps } from '../internal/base-component';
|
|
10
9
|
import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
|
|
11
10
|
import useForwardFocus from '../internal/hooks/forward-focus';
|
|
@@ -19,7 +18,6 @@ const InternalLink = React.forwardRef((_a, ref) => {
|
|
|
19
18
|
const isButton = !href;
|
|
20
19
|
const specialStyles = ['top-navigation', 'link', 'recovery'];
|
|
21
20
|
const hasSpecialStyle = specialStyles.indexOf(variant) > -1;
|
|
22
|
-
const focusVisible = useFocusVisible();
|
|
23
21
|
const baseProps = getBaseProps(props);
|
|
24
22
|
const anchorTarget = target !== null && target !== void 0 ? target : (external ? '_blank' : undefined);
|
|
25
23
|
const anchorRel = rel !== null && rel !== void 0 ? rel : (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);
|
|
@@ -45,7 +43,7 @@ const InternalLink = React.forwardRef((_a, ref) => {
|
|
|
45
43
|
useForwardFocus(ref, linkRef);
|
|
46
44
|
// Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)
|
|
47
45
|
const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;
|
|
48
|
-
const sharedProps = Object.assign(Object.assign(
|
|
46
|
+
const sharedProps = Object.assign(Object.assign({}, baseProps), {
|
|
49
47
|
// https://github.com/microsoft/TypeScript/issues/36659
|
|
50
48
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
51
49
|
ref: useMergeRefs(linkRef, __internalRootRef), className: clsx(styles.link, baseProps.className, applyButtonStyles ? styles.button : null, styles[getVariantStyle(variant)], styles[getFontSizeStyle(variant, fontSize)], styles[getColorStyle(variant, color)]), 'aria-label': ariaLabel });
|
package/link/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n Omit<LinkProps, 'variant'> & {\n variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n };\n\nconst InternalLink = React.forwardRef(\n (\n {\n variant = 'secondary',\n fontSize = 'body-m',\n color = 'normal',\n external = false,\n target,\n href,\n rel,\n ariaLabel,\n externalIconAriaLabel,\n onFollow,\n children,\n __internalRootRef = null,\n ...props\n }: InternalLinkProps,\n ref: React.Ref<LinkProps.Ref>\n ) => {\n checkSafeUrl('Link', href);\n const isButton = !href;\n const specialStyles = ['top-navigation', 'link', 'recovery'];\n const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n const baseProps = getBaseProps(props);\n const anchorTarget = target ?? (external ? '_blank' : undefined);\n const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n\n const fireFollowEvent = (event: React.SyntheticEvent) => {\n fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n };\n\n const handleLinkClick = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollowEvent(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent) => {\n fireFollowEvent(event);\n };\n\n const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n event.preventDefault();\n fireFollowEvent(event);\n }\n };\n\n const linkRef = useRef<HTMLElement>(null);\n const isVisualRefresh = useVisualRefresh();\n useForwardFocus(ref, linkRef);\n\n // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n const sharedProps = {\n ...baseProps,\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: useMergeRefs(linkRef as any, __internalRootRef),\n className: clsx(\n styles.link,\n baseProps.className,\n applyButtonStyles ? styles.button : null,\n styles[getVariantStyle(variant)],\n styles[getFontSizeStyle(variant, fontSize)],\n styles[getColorStyle(variant, color)]\n ),\n 'aria-label': ariaLabel,\n };\n\n const content = (\n <>\n {children}\n {external && (\n <span className={styles['icon-wrapper']}>\n \n <span\n className={styles.icon}\n aria-label={externalIconAriaLabel}\n role={externalIconAriaLabel ? 'img' : undefined}\n >\n <InternalIcon name=\"external\" size=\"inherit\" />\n </span>\n </span>\n )}\n </>\n );\n\n if (isButton) {\n return (\n <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n {content}\n </a>\n );\n }\n\n return (\n // we dynamically set proper rel in the code above\n // eslint-disable-next-line react/jsx-no-target-blank\n <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n {content}\n </a>\n );\n }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n switch (variant) {\n case 'info':\n return 'font-size-body-s';\n case 'awsui-value-large':\n return 'font-size-display-l';\n default:\n return `font-size-${fontSize}`;\n }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}
|
package/link/styles.css.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"link": "
|
|
5
|
-
"variant-secondary": "awsui_variant-
|
|
6
|
-
"variant-primary": "awsui_variant-
|
|
7
|
-
"variant-info": "awsui_variant-
|
|
8
|
-
"variant-value-large": "awsui_variant-value-
|
|
9
|
-
"variant-top-navigation": "awsui_variant-top-
|
|
10
|
-
"variant-recovery": "awsui_variant-
|
|
11
|
-
"button": "
|
|
12
|
-
"color-inverted": "awsui_color-
|
|
13
|
-
"font-size-body-s": "awsui_font-size-body-
|
|
14
|
-
"font-size-body-m": "awsui_font-size-body-
|
|
15
|
-
"font-size-heading-xs": "awsui_font-size-heading-
|
|
16
|
-
"font-size-heading-s": "awsui_font-size-heading-
|
|
17
|
-
"font-size-heading-m": "awsui_font-size-heading-
|
|
18
|
-
"font-size-heading-l": "awsui_font-size-heading-
|
|
19
|
-
"font-size-heading-xl": "awsui_font-size-heading-
|
|
20
|
-
"font-size-display-l": "awsui_font-size-display-
|
|
21
|
-
"font-size-inherit": "awsui_font-size-
|
|
22
|
-
"icon-wrapper": "awsui_icon-
|
|
23
|
-
"icon": "
|
|
4
|
+
"link": "awsui_link_4c84z_vt4lg_93",
|
|
5
|
+
"variant-secondary": "awsui_variant-secondary_4c84z_vt4lg_140",
|
|
6
|
+
"variant-primary": "awsui_variant-primary_4c84z_vt4lg_177",
|
|
7
|
+
"variant-info": "awsui_variant-info_4c84z_vt4lg_212",
|
|
8
|
+
"variant-value-large": "awsui_variant-value-large_4c84z_vt4lg_249",
|
|
9
|
+
"variant-top-navigation": "awsui_variant-top-navigation_4c84z_vt4lg_283",
|
|
10
|
+
"variant-recovery": "awsui_variant-recovery_4c84z_vt4lg_318",
|
|
11
|
+
"button": "awsui_button_4c84z_vt4lg_353",
|
|
12
|
+
"color-inverted": "awsui_color-inverted_4c84z_vt4lg_390",
|
|
13
|
+
"font-size-body-s": "awsui_font-size-body-s_4c84z_vt4lg_409",
|
|
14
|
+
"font-size-body-m": "awsui_font-size-body-m_4c84z_vt4lg_414",
|
|
15
|
+
"font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_vt4lg_418",
|
|
16
|
+
"font-size-heading-s": "awsui_font-size-heading-s_4c84z_vt4lg_422",
|
|
17
|
+
"font-size-heading-m": "awsui_font-size-heading-m_4c84z_vt4lg_427",
|
|
18
|
+
"font-size-heading-l": "awsui_font-size-heading-l_4c84z_vt4lg_432",
|
|
19
|
+
"font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_vt4lg_437",
|
|
20
|
+
"font-size-display-l": "awsui_font-size-display-l_4c84z_vt4lg_442",
|
|
21
|
+
"font-size-inherit": "awsui_font-size-inherit_4c84z_vt4lg_447",
|
|
22
|
+
"icon-wrapper": "awsui_icon-wrapper_4c84z_vt4lg_453",
|
|
23
|
+
"icon": "awsui_icon_4c84z_vt4lg_453"
|
|
24
24
|
};
|
|
25
25
|
|