@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.
Files changed (341) hide show
  1. package/annotation-context/annotation/annotation-trigger.d.ts.map +1 -1
  2. package/annotation-context/annotation/annotation-trigger.js +1 -3
  3. package/annotation-context/annotation/annotation-trigger.js.map +1 -1
  4. package/annotation-context/annotation/styles.css.js +24 -24
  5. package/annotation-context/annotation/styles.scoped.css +30 -30
  6. package/annotation-context/annotation/styles.selectors.js +24 -24
  7. package/app-layout/drawer/index.d.ts +3 -21
  8. package/app-layout/drawer/index.d.ts.map +1 -1
  9. package/app-layout/drawer/index.js +25 -5
  10. package/app-layout/drawer/index.js.map +1 -1
  11. package/app-layout/drawer/interfaces.d.ts +84 -0
  12. package/app-layout/drawer/interfaces.d.ts.map +1 -0
  13. package/app-layout/drawer/interfaces.js +2 -0
  14. package/app-layout/drawer/interfaces.js.map +1 -0
  15. package/app-layout/drawer/resizable-drawer.d.ts +4 -0
  16. package/app-layout/drawer/resizable-drawer.d.ts.map +1 -0
  17. package/app-layout/drawer/resizable-drawer.js +51 -0
  18. package/app-layout/drawer/resizable-drawer.js.map +1 -0
  19. package/app-layout/drawer/styles.css.js +10 -5
  20. package/app-layout/drawer/styles.scoped.css +46 -10
  21. package/app-layout/drawer/styles.selectors.js +10 -5
  22. package/app-layout/index.d.ts.map +1 -1
  23. package/app-layout/index.js +142 -17
  24. package/app-layout/index.js.map +1 -1
  25. package/app-layout/mobile-toolbar/index.d.ts +10 -1
  26. package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
  27. package/app-layout/mobile-toolbar/index.js +3 -2
  28. package/app-layout/mobile-toolbar/index.js.map +1 -1
  29. package/app-layout/mobile-toolbar/styles.css.js +5 -4
  30. package/app-layout/mobile-toolbar/styles.scoped.css +11 -7
  31. package/app-layout/mobile-toolbar/styles.selectors.js +5 -4
  32. package/app-layout/notifications/styles.css.js +3 -3
  33. package/app-layout/notifications/styles.scoped.css +7 -7
  34. package/app-layout/notifications/styles.selectors.js +3 -3
  35. package/app-layout/test-classes/styles.css.js +18 -13
  36. package/app-layout/test-classes/styles.scoped.css +33 -13
  37. package/app-layout/test-classes/styles.selectors.js +18 -13
  38. package/app-layout/toggles/index.d.ts.map +1 -1
  39. package/app-layout/toggles/index.js +2 -2
  40. package/app-layout/toggles/index.js.map +1 -1
  41. package/app-layout/toggles/interfaces.d.ts +3 -1
  42. package/app-layout/toggles/interfaces.d.ts.map +1 -1
  43. package/app-layout/toggles/interfaces.js.map +1 -1
  44. package/app-layout/utils/use-drawer-focus-control.d.ts +21 -0
  45. package/app-layout/utils/use-drawer-focus-control.d.ts.map +1 -0
  46. package/app-layout/utils/use-drawer-focus-control.js +65 -0
  47. package/app-layout/utils/use-drawer-focus-control.js.map +1 -0
  48. package/app-layout/visual-refresh/app-bar.d.ts.map +1 -1
  49. package/app-layout/visual-refresh/app-bar.js +8 -6
  50. package/app-layout/visual-refresh/app-bar.js.map +1 -1
  51. package/app-layout/visual-refresh/context.d.ts +13 -5
  52. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  53. package/app-layout/visual-refresh/context.js +104 -49
  54. package/app-layout/visual-refresh/context.js.map +1 -1
  55. package/app-layout/visual-refresh/drawers.d.ts +47 -0
  56. package/app-layout/visual-refresh/drawers.d.ts.map +1 -0
  57. package/app-layout/visual-refresh/drawers.js +127 -0
  58. package/app-layout/visual-refresh/drawers.js.map +1 -0
  59. package/app-layout/visual-refresh/header.js +2 -2
  60. package/app-layout/visual-refresh/header.js.map +1 -1
  61. package/app-layout/visual-refresh/index.d.ts.map +1 -1
  62. package/app-layout/visual-refresh/index.js +3 -1
  63. package/app-layout/visual-refresh/index.js.map +1 -1
  64. package/app-layout/visual-refresh/layout.d.ts.map +1 -1
  65. package/app-layout/visual-refresh/layout.js +5 -42
  66. package/app-layout/visual-refresh/layout.js.map +1 -1
  67. package/app-layout/visual-refresh/main.d.ts.map +1 -1
  68. package/app-layout/visual-refresh/main.js +2 -3
  69. package/app-layout/visual-refresh/main.js.map +1 -1
  70. package/app-layout/visual-refresh/navigation.js +2 -2
  71. package/app-layout/visual-refresh/navigation.js.map +1 -1
  72. package/app-layout/visual-refresh/notifications.d.ts.map +1 -1
  73. package/app-layout/visual-refresh/notifications.js +2 -2
  74. package/app-layout/visual-refresh/notifications.js.map +1 -1
  75. package/app-layout/visual-refresh/split-panel.js +2 -2
  76. package/app-layout/visual-refresh/split-panel.js.map +1 -1
  77. package/app-layout/visual-refresh/styles.css.js +71 -61
  78. package/app-layout/visual-refresh/styles.scoped.css +437 -229
  79. package/app-layout/visual-refresh/styles.selectors.js +71 -61
  80. package/app-layout/visual-refresh/tools.d.ts.map +1 -1
  81. package/app-layout/visual-refresh/tools.js +7 -3
  82. package/app-layout/visual-refresh/tools.js.map +1 -1
  83. package/app-layout/visual-refresh/trigger-button.d.ts +4 -3
  84. package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
  85. package/app-layout/visual-refresh/trigger-button.js +5 -6
  86. package/app-layout/visual-refresh/trigger-button.js.map +1 -1
  87. package/area-chart/internal.js +1 -1
  88. package/area-chart/internal.js.map +1 -1
  89. package/breadcrumb-group/item/item.d.ts.map +1 -1
  90. package/breadcrumb-group/item/item.js +2 -5
  91. package/breadcrumb-group/item/item.js.map +1 -1
  92. package/breadcrumb-group/item/styles.css.js +9 -9
  93. package/breadcrumb-group/item/styles.scoped.css +17 -17
  94. package/breadcrumb-group/item/styles.selectors.js +9 -9
  95. package/button/internal.d.ts.map +1 -1
  96. package/button/internal.js +2 -3
  97. package/button/internal.js.map +1 -1
  98. package/button/styles.css.js +19 -18
  99. package/button/styles.scoped.css +136 -136
  100. package/button/styles.selectors.js +19 -18
  101. package/calendar/grid/index.d.ts.map +1 -1
  102. package/calendar/grid/index.js +2 -4
  103. package/calendar/grid/index.js.map +1 -1
  104. package/calendar/styles.css.js +18 -18
  105. package/calendar/styles.scoped.css +38 -38
  106. package/calendar/styles.selectors.js +18 -18
  107. package/code-editor/styles.css.js +32 -32
  108. package/code-editor/styles.scoped.css +109 -109
  109. package/code-editor/styles.selectors.js +32 -32
  110. package/code-editor/tab-button.d.ts.map +1 -1
  111. package/code-editor/tab-button.js +2 -4
  112. package/code-editor/tab-button.js.map +1 -1
  113. package/date-picker/index.d.ts.map +1 -1
  114. package/date-picker/index.js +1 -3
  115. package/date-picker/index.js.map +1 -1
  116. package/date-picker/styles.css.js +7 -7
  117. package/date-picker/styles.scoped.css +9 -9
  118. package/date-picker/styles.selectors.js +7 -7
  119. package/date-range-picker/calendar/grids/grid.d.ts.map +1 -1
  120. package/date-range-picker/calendar/grids/grid.js +1 -3
  121. package/date-range-picker/calendar/grids/grid.js.map +1 -1
  122. package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
  123. package/date-range-picker/calendar/grids/index.js +1 -3
  124. package/date-range-picker/calendar/grids/index.js.map +1 -1
  125. package/date-range-picker/calendar/grids/styles.css.js +25 -25
  126. package/date-range-picker/calendar/grids/styles.scoped.css +42 -42
  127. package/date-range-picker/calendar/grids/styles.selectors.js +25 -25
  128. package/date-range-picker/dropdown.d.ts.map +1 -1
  129. package/date-range-picker/dropdown.js +1 -3
  130. package/date-range-picker/dropdown.js.map +1 -1
  131. package/date-range-picker/styles.css.js +38 -38
  132. package/date-range-picker/styles.scoped.css +45 -45
  133. package/date-range-picker/styles.selectors.js +38 -38
  134. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  135. package/expandable-section/expandable-section-header.js +3 -7
  136. package/expandable-section/expandable-section-header.js.map +1 -1
  137. package/expandable-section/styles.css.js +23 -23
  138. package/expandable-section/styles.scoped.css +44 -44
  139. package/expandable-section/styles.selectors.js +23 -23
  140. package/flashbar/collapsible-flashbar.d.ts.map +1 -1
  141. package/flashbar/collapsible-flashbar.js +1 -3
  142. package/flashbar/collapsible-flashbar.js.map +1 -1
  143. package/flashbar/flash.d.ts.map +1 -1
  144. package/flashbar/flash.js +1 -3
  145. package/flashbar/flash.js.map +1 -1
  146. package/flashbar/styles.css.js +45 -45
  147. package/flashbar/styles.scoped.css +169 -169
  148. package/flashbar/styles.selectors.js +45 -45
  149. package/internal/base-component/styles.scoped.css +24 -0
  150. package/internal/components/abstract-switch/index.d.ts.map +1 -1
  151. package/internal/components/abstract-switch/index.js +8 -4
  152. package/internal/components/abstract-switch/index.js.map +1 -1
  153. package/internal/components/abstract-switch/styles.css.js +13 -13
  154. package/internal/components/abstract-switch/styles.scoped.css +19 -19
  155. package/internal/components/abstract-switch/styles.selectors.js +13 -13
  156. package/internal/components/button-trigger/index.d.ts.map +1 -1
  157. package/internal/components/button-trigger/index.js +1 -3
  158. package/internal/components/button-trigger/index.js.map +1 -1
  159. package/internal/components/button-trigger/styles.css.js +9 -9
  160. package/internal/components/button-trigger/styles.scoped.css +23 -23
  161. package/internal/components/button-trigger/styles.selectors.js +9 -9
  162. package/internal/components/chart-legend/index.d.ts.map +1 -1
  163. package/internal/components/chart-legend/index.js +2 -4
  164. package/internal/components/chart-legend/index.js.map +1 -1
  165. package/internal/components/chart-legend/styles.css.js +6 -6
  166. package/internal/components/chart-legend/styles.scoped.css +15 -15
  167. package/internal/components/chart-legend/styles.selectors.js +6 -6
  168. package/internal/components/chart-plot/focus-outline.d.ts.map +1 -1
  169. package/internal/components/chart-plot/focus-outline.js +25 -3
  170. package/internal/components/chart-plot/focus-outline.js.map +1 -1
  171. package/internal/components/filtering-token/index.d.ts +2 -1
  172. package/internal/components/filtering-token/index.d.ts.map +1 -1
  173. package/internal/components/filtering-token/index.js +3 -5
  174. package/internal/components/filtering-token/index.js.map +1 -1
  175. package/internal/components/filtering-token/styles.css.js +7 -7
  176. package/internal/components/filtering-token/styles.scoped.css +13 -13
  177. package/internal/components/filtering-token/styles.selectors.js +7 -7
  178. package/internal/components/menu-dropdown/index.d.ts.map +1 -1
  179. package/internal/components/menu-dropdown/index.js +2 -4
  180. package/internal/components/menu-dropdown/index.js.map +1 -1
  181. package/internal/components/menu-dropdown/styles.css.js +7 -7
  182. package/internal/components/menu-dropdown/styles.scoped.css +13 -13
  183. package/internal/components/menu-dropdown/styles.selectors.js +7 -7
  184. package/internal/components/token-list/index.d.ts +1 -1
  185. package/internal/components/token-list/index.d.ts.map +1 -1
  186. package/internal/components/token-list/index.js +3 -3
  187. package/internal/components/token-list/index.js.map +1 -1
  188. package/internal/components/token-list/interfaces.d.ts +0 -1
  189. package/internal/components/token-list/interfaces.d.ts.map +1 -1
  190. package/internal/components/token-list/interfaces.js.map +1 -1
  191. package/internal/components/token-list/styles.css.js +9 -9
  192. package/internal/components/token-list/styles.scoped.css +20 -20
  193. package/internal/components/token-list/styles.selectors.js +9 -9
  194. package/internal/components/token-list/token-focus-controller.js +1 -1
  195. package/internal/components/token-list/token-focus-controller.js.map +1 -1
  196. package/internal/components/token-list/token-limit-toggle.d.ts.map +1 -1
  197. package/internal/components/token-list/token-limit-toggle.js +1 -3
  198. package/internal/components/token-list/token-limit-toggle.js.map +1 -1
  199. package/internal/environment.js +1 -1
  200. package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  201. package/internal/generated/custom-css-properties/index.js +31 -30
  202. package/internal/generated/custom-css-properties/index.js.map +1 -1
  203. package/internal/generated/styles/tokens.d.ts +2 -0
  204. package/internal/generated/styles/tokens.js +2 -0
  205. package/internal/generated/theming/index.cjs +140 -0
  206. package/internal/generated/theming/index.js +140 -0
  207. package/internal/hooks/focus-visible/index.d.ts +2 -5
  208. package/internal/hooks/focus-visible/index.d.ts.map +1 -1
  209. package/internal/hooks/focus-visible/index.js +42 -22
  210. package/internal/hooks/focus-visible/index.js.map +1 -1
  211. package/internal/hooks/use-base-component/index.d.ts.map +1 -1
  212. package/internal/hooks/use-base-component/index.js +2 -0
  213. package/internal/hooks/use-base-component/index.js.map +1 -1
  214. package/internal/manifest.json +1 -1
  215. package/link/internal.d.ts.map +1 -1
  216. package/link/internal.js +1 -3
  217. package/link/internal.js.map +1 -1
  218. package/link/styles.css.js +20 -20
  219. package/link/styles.scoped.css +71 -71
  220. package/link/styles.selectors.js +20 -20
  221. package/mixed-line-bar-chart/internal.js +1 -1
  222. package/mixed-line-bar-chart/internal.js.map +1 -1
  223. package/package.json +1 -1
  224. package/pagination/internal.d.ts.map +1 -1
  225. package/pagination/internal.js +1 -3
  226. package/pagination/internal.js.map +1 -1
  227. package/pagination/styles.css.js +9 -9
  228. package/pagination/styles.scoped.css +23 -23
  229. package/pagination/styles.selectors.js +9 -9
  230. package/pie-chart/index.js +1 -1
  231. package/pie-chart/index.js.map +1 -1
  232. package/popover/internal.d.ts.map +1 -1
  233. package/popover/internal.js +1 -3
  234. package/popover/internal.js.map +1 -1
  235. package/popover/styles.css.js +50 -50
  236. package/popover/styles.scoped.css +63 -63
  237. package/popover/styles.selectors.js +50 -50
  238. package/property-filter/index.d.ts.map +1 -1
  239. package/property-filter/index.js +2 -2
  240. package/property-filter/index.js.map +1 -1
  241. package/property-filter/token.d.ts.map +1 -1
  242. package/property-filter/token.js +1 -1
  243. package/property-filter/token.js.map +1 -1
  244. package/segmented-control/segment.d.ts.map +1 -1
  245. package/segmented-control/segment.js +1 -3
  246. package/segmented-control/segment.js.map +1 -1
  247. package/segmented-control/styles.css.js +14 -14
  248. package/segmented-control/styles.scoped.css +33 -33
  249. package/segmented-control/styles.selectors.js +14 -14
  250. package/side-navigation/internal.d.ts.map +1 -1
  251. package/side-navigation/internal.js +2 -5
  252. package/side-navigation/internal.js.map +1 -1
  253. package/side-navigation/styles.css.js +27 -27
  254. package/side-navigation/styles.scoped.css +37 -37
  255. package/side-navigation/styles.selectors.js +27 -27
  256. package/space-between/internal.js +1 -1
  257. package/space-between/internal.js.map +1 -1
  258. package/space-between/styles.css.js +20 -28
  259. package/space-between/styles.scoped.css +37 -101
  260. package/space-between/styles.selectors.js +20 -28
  261. package/split-panel/index.d.ts.map +1 -1
  262. package/split-panel/index.js +1 -3
  263. package/split-panel/index.js.map +1 -1
  264. package/split-panel/styles.css.js +59 -59
  265. package/split-panel/styles.scoped.css +81 -81
  266. package/split-panel/styles.selectors.js +59 -59
  267. package/table/body-cell/index.d.ts.map +1 -1
  268. package/table/body-cell/index.js +3 -3
  269. package/table/body-cell/index.js.map +1 -1
  270. package/table/body-cell/styles.css.js +18 -18
  271. package/table/body-cell/styles.scoped.css +57 -55
  272. package/table/body-cell/styles.selectors.js +18 -18
  273. package/table/header-cell/index.d.ts.map +1 -1
  274. package/table/header-cell/index.js +11 -9
  275. package/table/header-cell/index.js.map +1 -1
  276. package/table/header-cell/styles.css.js +19 -19
  277. package/table/header-cell/styles.scoped.css +32 -32
  278. package/table/header-cell/styles.selectors.js +19 -19
  279. package/table/internal.d.ts.map +1 -1
  280. package/table/internal.js +1 -3
  281. package/table/internal.js.map +1 -1
  282. package/table/resizer/styles.css.js +6 -6
  283. package/table/resizer/styles.scoped.css +11 -11
  284. package/table/resizer/styles.selectors.js +6 -6
  285. package/table/styles.css.js +33 -33
  286. package/table/styles.scoped.css +41 -41
  287. package/table/styles.selectors.js +33 -33
  288. package/tabs/index.d.ts.map +1 -1
  289. package/tabs/index.js +8 -3
  290. package/tabs/index.js.map +1 -1
  291. package/tabs/styles.css.js +21 -21
  292. package/tabs/styles.scoped.css +38 -38
  293. package/tabs/styles.selectors.js +21 -21
  294. package/tabs/tab-header-bar.d.ts.map +1 -1
  295. package/tabs/tab-header-bar.js +9 -3
  296. package/tabs/tab-header-bar.js.map +1 -1
  297. package/tag-editor/internal.d.ts.map +1 -1
  298. package/tag-editor/internal.js +2 -4
  299. package/tag-editor/internal.js.map +1 -1
  300. package/tag-editor/styles.css.js +3 -3
  301. package/tag-editor/styles.scoped.css +10 -10
  302. package/tag-editor/styles.selectors.js +3 -3
  303. package/token-group/dismiss-button.d.ts.map +1 -1
  304. package/token-group/dismiss-button.js +1 -3
  305. package/token-group/dismiss-button.js.map +1 -1
  306. package/token-group/internal.js +2 -2
  307. package/token-group/internal.js.map +1 -1
  308. package/token-group/styles.css.js +5 -5
  309. package/token-group/styles.scoped.css +12 -12
  310. package/token-group/styles.selectors.js +5 -5
  311. package/token-group/token.d.ts +3 -5
  312. package/token-group/token.d.ts.map +1 -1
  313. package/token-group/token.js +2 -2
  314. package/token-group/token.js.map +1 -1
  315. package/top-navigation/1.0-beta/internal.d.ts.map +1 -1
  316. package/top-navigation/1.0-beta/internal.js +1 -3
  317. package/top-navigation/1.0-beta/internal.js.map +1 -1
  318. package/top-navigation/1.0-beta/styles.css.js +25 -25
  319. package/top-navigation/1.0-beta/styles.scoped.css +42 -42
  320. package/top-navigation/1.0-beta/styles.selectors.js +25 -25
  321. package/top-navigation/internal.d.ts.map +1 -1
  322. package/top-navigation/internal.js +1 -3
  323. package/top-navigation/internal.js.map +1 -1
  324. package/top-navigation/parts/overflow-menu/menu-item.d.ts.map +1 -1
  325. package/top-navigation/parts/overflow-menu/menu-item.js +3 -7
  326. package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
  327. package/top-navigation/styles.css.js +47 -47
  328. package/top-navigation/styles.scoped.css +66 -66
  329. package/top-navigation/styles.selectors.js +47 -47
  330. package/tutorial-panel/components/tutorial-list/index.d.ts.map +1 -1
  331. package/tutorial-panel/components/tutorial-list/index.js +1 -3
  332. package/tutorial-panel/components/tutorial-list/index.js.map +1 -1
  333. package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
  334. package/tutorial-panel/components/tutorial-list/styles.scoped.css +27 -27
  335. package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
  336. package/wizard/styles.css.js +32 -32
  337. package/wizard/styles.scoped.css +63 -63
  338. package/wizard/styles.selectors.js +32 -32
  339. package/wizard/wizard-form.d.ts.map +1 -1
  340. package/wizard/wizard-form.js +1 -3
  341. 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 default function useFocusVisible(): {
2
- 'data-awsui-focus-visible': true;
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":"AA2BA,MAAM,CAAC,OAAO,UAAU,eAAe;;;;EAGtC"}
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
- import { createSingletonState } from '../use-singleton-handler';
5
- const useFocusSingleton = createSingletonState({
6
- initialState: false,
7
- factory: setIsKeyboard => {
8
- const handleMousedown = () => setIsKeyboard(false);
9
- const handleKeydown = (event) => {
10
- // we do not want to highlight focused element
11
- // when special keys are pressed
12
- const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
13
- if (!isSpecialKey) {
14
- setIsKeyboard(true);
15
- }
16
- };
17
- document.addEventListener('mousedown', handleMousedown);
18
- document.addEventListener('keydown', handleKeydown);
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
- document.removeEventListener('mousedown', handleMousedown);
21
- document.removeEventListener('keydown', handleKeydown);
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,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,iBAAiB,GAAG,oBAAoB,CAAU;IACtD,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,aAAa,CAAC,EAAE;QACvB,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,8CAA8C;YAC9C,gCAAgC;YAChC,MAAM,YAAY,GAAG,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;YAE7G,IAAI,CAAC,YAAY,EAAE;gBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,0BAA0B,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { KeyCode } from '../../keycode';\nimport { createSingletonState } from '../use-singleton-handler';\n\nconst useFocusSingleton = createSingletonState<boolean>({\n initialState: false,\n factory: setIsKeyboard => {\n const handleMousedown = () => setIsKeyboard(false);\n const handleKeydown = (event: KeyboardEvent) => {\n // we do not want to highlight focused element\n // when special keys are pressed\n const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n\n if (!isSpecialKey) {\n setIsKeyboard(true);\n }\n };\n document.addEventListener('mousedown', handleMousedown);\n document.addEventListener('keydown', handleKeydown);\n return () => {\n document.removeEventListener('mousedown', handleMousedown);\n document.removeEventListener('keydown', handleKeydown);\n };\n },\n});\n\nexport default function useFocusVisible() {\n const visible = useFocusSingleton();\n return visible ? { 'data-awsui-focus-visible': visible } : {};\n}\n"]}
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;AAKzC,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;;EAItE"}
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;AAMpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,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';\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 const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);\n return { __internalRootRef: elementRef };\n}\n"]}
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"]}
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "7ed751a10e2ecf63cec865877bf8a6f75b6f1e54"
2
+ "commit": "471735b67df75c4cb69b1b7b201ef05ca6ddf2df"
3
3
  }
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,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;uCA+G1E,CAAC;AAqBF,eAAe,YAAY,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(Object.assign({}, focusVisible), baseProps), {
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 });
@@ -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,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOhE,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EAcoB,EACpB,GAA6B,EAC7B,EAAE;QAhBF,EACE,OAAO,GAAG,WAAW,EACrB,QAAQ,GAAG,QAAQ,EACnB,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEN,EADf,KAAK,cAbV,wJAcC,CADS;IAIV,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC;IACvB,MAAM,aAAa,GAAG,CAAC,gBAAgB,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,CAAC,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEzF,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;QACtD,mBAAmB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,CAAC;IACjF,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;QAClD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,KAA0B,EAAE,EAAE;QACzD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;YACtE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE9B,2HAA2H;IAC3H,MAAM,iBAAiB,GAAG,QAAQ,IAAI,eAAe,IAAI,CAAC,eAAe,CAAC;IAE1E,MAAM,WAAW,iDACZ,YAAY,GACZ,SAAS;QACZ,uDAAuD;QACvD,8DAA8D;QAC9D,GAAG,EAAE,YAAY,CAAC,OAAc,EAAE,iBAAiB,CAAC,EACpD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,SAAS,CAAC,SAAS,EACnB,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACxC,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,EAChC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAC3C,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CACtC,EACD,YAAY,EAAE,SAAS,GACxB,CAAC;IAEF,MAAM,OAAO,GAAG,CACd;QACG,QAAQ;QACR,QAAQ,IAAI,CACX,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;;YAErC,8BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,qBAAqB,EACjC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBAE/C,oBAAC,YAAY,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,SAAS,GAAG,CAC1C,CACF,CACR,CACA,CACJ,CAAC;IAEF,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,2CAAO,WAAW,IAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,KACtG,OAAO,CACN,CACL,CAAC;KACH;IAED,OAAO;IACL,kDAAkD;IAClD,qDAAqD;IACrD,2CAAO,WAAW,IAAE,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,KAC3F,OAAO,CACN,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,eAAe,CAAC,OAAyD;IAChF,OAAO,WAAW,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC;AACrD,CAAC;AAED,SAAS,gBAAgB,CAAC,OAAqC,EAAE,QAAuC;IACtG,QAAQ,OAAO,EAAE;QACf,KAAK,MAAM;YACT,OAAO,kBAAkB,CAAC;QAC5B,KAAK,mBAAmB;YACtB,OAAO,qBAAqB,CAAC;QAC/B;YACE,OAAO,aAAa,QAAQ,EAAE,CAAC;KAClC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,OAAqC,EAAE,KAAiC;IAC7F,OAAO,SAAS,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;AAC1D,CAAC;AAED,eAAe,YAAY,CAAC","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 useFocusVisible from '../internal/hooks/focus-visible';\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 focusVisible = useFocusVisible();\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 ...focusVisible,\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 &nbsp;\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"]}
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 &nbsp;\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"]}
@@ -1,25 +1,25 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "link": "awsui_link_4c84z_tyyos_93",
5
- "variant-secondary": "awsui_variant-secondary_4c84z_tyyos_140",
6
- "variant-primary": "awsui_variant-primary_4c84z_tyyos_177",
7
- "variant-info": "awsui_variant-info_4c84z_tyyos_212",
8
- "variant-value-large": "awsui_variant-value-large_4c84z_tyyos_249",
9
- "variant-top-navigation": "awsui_variant-top-navigation_4c84z_tyyos_283",
10
- "variant-recovery": "awsui_variant-recovery_4c84z_tyyos_318",
11
- "button": "awsui_button_4c84z_tyyos_353",
12
- "color-inverted": "awsui_color-inverted_4c84z_tyyos_390",
13
- "font-size-body-s": "awsui_font-size-body-s_4c84z_tyyos_409",
14
- "font-size-body-m": "awsui_font-size-body-m_4c84z_tyyos_414",
15
- "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_tyyos_418",
16
- "font-size-heading-s": "awsui_font-size-heading-s_4c84z_tyyos_422",
17
- "font-size-heading-m": "awsui_font-size-heading-m_4c84z_tyyos_427",
18
- "font-size-heading-l": "awsui_font-size-heading-l_4c84z_tyyos_432",
19
- "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_tyyos_437",
20
- "font-size-display-l": "awsui_font-size-display-l_4c84z_tyyos_442",
21
- "font-size-inherit": "awsui_font-size-inherit_4c84z_tyyos_447",
22
- "icon-wrapper": "awsui_icon-wrapper_4c84z_tyyos_453",
23
- "icon": "awsui_icon_4c84z_tyyos_453"
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