@cloudscape-design/components 3.0.334 → 3.0.336

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 (327) hide show
  1. package/alert/styles.css.js +19 -19
  2. package/alert/styles.scoped.css +33 -33
  3. package/alert/styles.selectors.js +19 -19
  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/index.js +3 -3
  8. package/app-layout/index.js.map +1 -1
  9. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  10. package/app-layout/visual-refresh/context.js +3 -3
  11. package/app-layout/visual-refresh/context.js.map +1 -1
  12. package/app-layout/visual-refresh/styles.css.js +69 -69
  13. package/app-layout/visual-refresh/styles.scoped.css +168 -168
  14. package/app-layout/visual-refresh/styles.selectors.js +69 -69
  15. package/attribute-editor/styles.css.js +14 -14
  16. package/attribute-editor/styles.scoped.css +27 -27
  17. package/attribute-editor/styles.selectors.js +14 -14
  18. package/autosuggest/virtual-list.d.ts.map +1 -1
  19. package/autosuggest/virtual-list.js +2 -2
  20. package/autosuggest/virtual-list.js.map +1 -1
  21. package/badge/styles.css.js +5 -5
  22. package/badge/styles.scoped.css +7 -7
  23. package/badge/styles.selectors.js +5 -5
  24. package/box/styles.css.js +189 -189
  25. package/box/styles.scoped.css +238 -238
  26. package/box/styles.selectors.js +189 -189
  27. package/breadcrumb-group/styles.css.js +7 -7
  28. package/breadcrumb-group/styles.scoped.css +14 -14
  29. package/breadcrumb-group/styles.selectors.js +7 -7
  30. package/button/styles.css.js +20 -20
  31. package/button/styles.scoped.css +154 -154
  32. package/button/styles.selectors.js +20 -20
  33. package/button-dropdown/index.d.ts.map +1 -1
  34. package/button-dropdown/index.js +2 -2
  35. package/button-dropdown/index.js.map +1 -1
  36. package/button-dropdown/interfaces.d.ts +31 -0
  37. package/button-dropdown/interfaces.d.ts.map +1 -1
  38. package/button-dropdown/interfaces.js.map +1 -1
  39. package/button-dropdown/internal.d.ts.map +1 -1
  40. package/button-dropdown/internal.js +52 -7
  41. package/button-dropdown/internal.js.map +1 -1
  42. package/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
  43. package/button-dropdown/mobile-expandable-group/styles.scoped.css +6 -6
  44. package/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
  45. package/button-dropdown/styles.css.js +14 -8
  46. package/button-dropdown/styles.scoped.css +44 -14
  47. package/button-dropdown/styles.selectors.js +14 -8
  48. package/button-dropdown/utils/use-button-dropdown.d.ts +1 -0
  49. package/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  50. package/button-dropdown/utils/use-button-dropdown.js +1 -0
  51. package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  52. package/calendar/styles.css.js +18 -18
  53. package/calendar/styles.scoped.css +40 -40
  54. package/calendar/styles.selectors.js +18 -18
  55. package/cards/index.js +5 -4
  56. package/cards/index.js.map +1 -1
  57. package/cards/styles.css.js +38 -38
  58. package/cards/styles.scoped.css +55 -55
  59. package/cards/styles.selectors.js +38 -38
  60. package/checkbox/styles.css.js +3 -3
  61. package/checkbox/styles.scoped.css +7 -7
  62. package/checkbox/styles.selectors.js +3 -3
  63. package/code-editor/index.js +2 -2
  64. package/code-editor/index.js.map +1 -1
  65. package/code-editor/status-bar.d.ts.map +1 -1
  66. package/code-editor/status-bar.js +3 -3
  67. package/code-editor/status-bar.js.map +1 -1
  68. package/code-editor/styles.css.js +32 -32
  69. package/code-editor/styles.scoped.css +129 -129
  70. package/code-editor/styles.selectors.js +32 -32
  71. package/collection-preferences/content-display/styles.css.js +11 -11
  72. package/collection-preferences/content-display/styles.scoped.css +19 -19
  73. package/collection-preferences/content-display/styles.selectors.js +11 -11
  74. package/collection-preferences/styles.css.js +37 -37
  75. package/collection-preferences/styles.scoped.css +47 -47
  76. package/collection-preferences/styles.selectors.js +37 -37
  77. package/column-layout/flexible-column-layout/index.d.ts.map +1 -1
  78. package/column-layout/flexible-column-layout/index.js +2 -2
  79. package/column-layout/flexible-column-layout/index.js.map +1 -1
  80. package/column-layout/styles.css.js +13 -13
  81. package/column-layout/styles.scoped.css +44 -44
  82. package/column-layout/styles.selectors.js +13 -13
  83. package/container/styles.css.js +28 -28
  84. package/container/styles.scoped.css +52 -52
  85. package/container/styles.selectors.js +28 -28
  86. package/date-picker/styles.css.js +7 -7
  87. package/date-picker/styles.scoped.css +10 -10
  88. package/date-picker/styles.selectors.js +7 -7
  89. package/date-range-picker/styles.css.js +38 -38
  90. package/date-range-picker/styles.scoped.css +48 -48
  91. package/date-range-picker/styles.selectors.js +38 -38
  92. package/expandable-section/styles.css.js +29 -29
  93. package/expandable-section/styles.scoped.css +65 -65
  94. package/expandable-section/styles.selectors.js +29 -29
  95. package/flashbar/styles.css.js +46 -46
  96. package/flashbar/styles.scoped.css +160 -160
  97. package/flashbar/styles.selectors.js +46 -46
  98. package/form/styles.css.js +9 -9
  99. package/form/styles.scoped.css +9 -9
  100. package/form/styles.selectors.js +9 -9
  101. package/form-field/styles.css.js +19 -19
  102. package/form-field/styles.scoped.css +31 -31
  103. package/form-field/styles.selectors.js +19 -19
  104. package/grid/styles.css.js +53 -53
  105. package/grid/styles.scoped.css +55 -55
  106. package/grid/styles.selectors.js +53 -53
  107. package/header/styles.css.js +44 -44
  108. package/header/styles.scoped.css +50 -50
  109. package/header/styles.selectors.js +44 -44
  110. package/help-panel/styles.css.js +4 -4
  111. package/help-panel/styles.scoped.css +70 -69
  112. package/help-panel/styles.selectors.js +4 -4
  113. package/icon/styles.css.js +21 -21
  114. package/icon/styles.scoped.css +50 -50
  115. package/icon/styles.selectors.js +21 -21
  116. package/input/internal.js +1 -1
  117. package/input/internal.js.map +1 -1
  118. package/input/styles.css.js +12 -12
  119. package/input/styles.scoped.css +35 -35
  120. package/input/styles.selectors.js +12 -12
  121. package/internal/base-component/styles.scoped.css +8 -7
  122. package/internal/components/button-trigger/styles.css.js +9 -9
  123. package/internal/components/button-trigger/styles.scoped.css +26 -26
  124. package/internal/components/button-trigger/styles.selectors.js +9 -9
  125. package/internal/components/cartesian-chart/labels-measure.d.ts.map +1 -1
  126. package/internal/components/cartesian-chart/labels-measure.js +2 -2
  127. package/internal/components/cartesian-chart/labels-measure.js.map +1 -1
  128. package/internal/components/chart-filter/styles.css.js +3 -3
  129. package/internal/components/chart-filter/styles.scoped.css +4 -4
  130. package/internal/components/chart-filter/styles.selectors.js +3 -3
  131. package/internal/components/chart-legend/styles.css.js +6 -6
  132. package/internal/components/chart-legend/styles.scoped.css +16 -16
  133. package/internal/components/chart-legend/styles.selectors.js +6 -6
  134. package/internal/components/chart-popover/styles.css.js +3 -3
  135. package/internal/components/chart-popover/styles.scoped.css +4 -4
  136. package/internal/components/chart-popover/styles.selectors.js +3 -3
  137. package/internal/components/chart-series-details/styles.css.js +5 -5
  138. package/internal/components/chart-series-details/styles.scoped.css +10 -10
  139. package/internal/components/chart-series-details/styles.selectors.js +5 -5
  140. package/internal/components/chart-series-marker/styles.css.js +5 -5
  141. package/internal/components/chart-series-marker/styles.scoped.css +8 -8
  142. package/internal/components/chart-series-marker/styles.selectors.js +5 -5
  143. package/internal/components/chart-wrapper/styles.css.js +6 -6
  144. package/internal/components/chart-wrapper/styles.scoped.css +9 -9
  145. package/internal/components/chart-wrapper/styles.selectors.js +6 -6
  146. package/internal/components/dropdown/styles.css.js +20 -20
  147. package/internal/components/dropdown/styles.scoped.css +36 -36
  148. package/internal/components/dropdown/styles.selectors.js +20 -20
  149. package/internal/components/dropdown-footer/styles.css.js +3 -3
  150. package/internal/components/dropdown-footer/styles.scoped.css +4 -4
  151. package/internal/components/dropdown-footer/styles.selectors.js +3 -3
  152. package/internal/components/dropdown-status/index.d.ts.map +1 -1
  153. package/internal/components/dropdown-status/index.js +1 -1
  154. package/internal/components/dropdown-status/index.js.map +1 -1
  155. package/internal/components/dropdown-status/styles.css.js +2 -2
  156. package/internal/components/dropdown-status/styles.scoped.css +3 -3
  157. package/internal/components/dropdown-status/styles.selectors.js +2 -2
  158. package/internal/components/menu-dropdown/styles.css.js +7 -7
  159. package/internal/components/menu-dropdown/styles.scoped.css +14 -14
  160. package/internal/components/menu-dropdown/styles.selectors.js +7 -7
  161. package/internal/components/option/styles.css.js +17 -17
  162. package/internal/components/option/styles.scoped.css +31 -31
  163. package/internal/components/option/styles.selectors.js +17 -17
  164. package/internal/components/options-list/styles.css.js +2 -2
  165. package/internal/components/options-list/styles.scoped.css +3 -3
  166. package/internal/components/options-list/styles.selectors.js +2 -2
  167. package/internal/components/selectable-item/styles.css.js +16 -16
  168. package/internal/components/selectable-item/styles.scoped.css +29 -29
  169. package/internal/components/selectable-item/styles.selectors.js +16 -16
  170. package/internal/components/token-list/styles.css.js +9 -9
  171. package/internal/components/token-list/styles.scoped.css +21 -21
  172. package/internal/components/token-list/styles.selectors.js +9 -9
  173. package/internal/environment.js +1 -1
  174. package/internal/generated/theming/index.cjs +24 -13
  175. package/internal/generated/theming/index.js +24 -13
  176. package/internal/hooks/container-queries/index.d.ts +0 -2
  177. package/internal/hooks/container-queries/index.d.ts.map +1 -1
  178. package/internal/hooks/container-queries/index.js +2 -1
  179. package/internal/hooks/container-queries/index.js.map +1 -1
  180. package/internal/hooks/container-queries/use-container-breakpoints.d.ts.map +1 -1
  181. package/internal/hooks/container-queries/use-container-breakpoints.js +2 -2
  182. package/internal/hooks/container-queries/use-container-breakpoints.js.map +1 -1
  183. package/internal/hooks/container-queries/use-resize-observer.d.ts +1 -1
  184. package/internal/hooks/container-queries/use-resize-observer.d.ts.map +1 -1
  185. package/internal/hooks/container-queries/use-resize-observer.js +0 -2
  186. package/internal/hooks/container-queries/use-resize-observer.js.map +1 -1
  187. package/internal/hooks/use-dynamic-overlap/index.js +2 -2
  188. package/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
  189. package/internal/manifest.json +1 -1
  190. package/internal/utils/use-container-width.d.ts.map +1 -1
  191. package/internal/utils/use-container-width.js +5 -3
  192. package/internal/utils/use-container-width.js.map +1 -1
  193. package/link/styles.css.js +20 -20
  194. package/link/styles.scoped.css +73 -73
  195. package/link/styles.selectors.js +20 -20
  196. package/modal/internal.d.ts.map +1 -1
  197. package/modal/internal.js +2 -1
  198. package/modal/internal.js.map +1 -1
  199. package/modal/styles.css.js +23 -23
  200. package/modal/styles.scoped.css +40 -40
  201. package/modal/styles.selectors.js +23 -23
  202. package/multiselect/styles.css.js +1 -1
  203. package/multiselect/styles.scoped.css +2 -2
  204. package/multiselect/styles.selectors.js +1 -1
  205. package/package.json +1 -1
  206. package/pagination/styles.css.js +9 -9
  207. package/pagination/styles.scoped.css +24 -24
  208. package/pagination/styles.selectors.js +9 -9
  209. package/pie-chart/styles.css.js +23 -23
  210. package/pie-chart/styles.scoped.css +42 -42
  211. package/pie-chart/styles.selectors.js +23 -23
  212. package/popover/styles.css.js +50 -50
  213. package/popover/styles.scoped.css +66 -66
  214. package/popover/styles.selectors.js +50 -50
  215. package/progress-bar/styles.css.js +18 -18
  216. package/progress-bar/styles.scoped.css +35 -35
  217. package/progress-bar/styles.selectors.js +18 -18
  218. package/property-filter/index.d.ts.map +1 -1
  219. package/property-filter/index.js +2 -3
  220. package/property-filter/index.js.map +1 -1
  221. package/property-filter/styles.css.js +29 -29
  222. package/property-filter/styles.scoped.css +32 -32
  223. package/property-filter/styles.selectors.js +29 -29
  224. package/property-filter/token-editor.d.ts.map +1 -1
  225. package/property-filter/token-editor.js +2 -2
  226. package/property-filter/token-editor.js.map +1 -1
  227. package/radio-group/styles.css.js +9 -9
  228. package/radio-group/styles.scoped.css +17 -17
  229. package/radio-group/styles.selectors.js +9 -9
  230. package/s3-resource-selector/s3-in-context/styles.css.js +7 -7
  231. package/s3-resource-selector/s3-in-context/styles.scoped.css +9 -9
  232. package/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
  233. package/segmented-control/styles.css.js +14 -14
  234. package/segmented-control/styles.scoped.css +35 -35
  235. package/segmented-control/styles.selectors.js +14 -14
  236. package/select/parts/virtual-list.js +2 -2
  237. package/select/parts/virtual-list.js.map +1 -1
  238. package/select/styles.css.js +1 -1
  239. package/select/styles.scoped.css +2 -2
  240. package/select/styles.selectors.js +1 -1
  241. package/side-navigation/styles.css.js +27 -27
  242. package/side-navigation/styles.scoped.css +39 -39
  243. package/side-navigation/styles.selectors.js +27 -27
  244. package/spinner/styles.css.js +13 -13
  245. package/spinner/styles.scoped.css +20 -20
  246. package/spinner/styles.selectors.js +13 -13
  247. package/split-panel/styles.css.js +56 -56
  248. package/split-panel/styles.scoped.css +78 -78
  249. package/split-panel/styles.selectors.js +56 -56
  250. package/status-indicator/internal.d.ts +6 -3
  251. package/status-indicator/internal.d.ts.map +1 -1
  252. package/status-indicator/internal.js +2 -2
  253. package/status-indicator/internal.js.map +1 -1
  254. package/status-indicator/styles.css.js +22 -20
  255. package/status-indicator/styles.scoped.css +33 -28
  256. package/status-indicator/styles.selectors.js +22 -20
  257. package/table/internal.d.ts.map +1 -1
  258. package/table/internal.js +6 -4
  259. package/table/internal.js.map +1 -1
  260. package/table/sticky-scrollbar/styles.css.js +4 -4
  261. package/table/sticky-scrollbar/styles.scoped.css +4 -5
  262. package/table/sticky-scrollbar/styles.selectors.js +4 -4
  263. package/table/styles.css.js +34 -34
  264. package/table/styles.scoped.css +43 -43
  265. package/table/styles.selectors.js +34 -34
  266. package/tabs/styles.css.js +21 -21
  267. package/tabs/styles.scoped.css +39 -39
  268. package/tabs/styles.selectors.js +21 -21
  269. package/tabs/tab-header-bar.js +2 -2
  270. package/tabs/tab-header-bar.js.map +1 -1
  271. package/test-utils/dom/button-dropdown/index.d.ts +2 -0
  272. package/test-utils/dom/button-dropdown/index.js +6 -1
  273. package/test-utils/dom/button-dropdown/index.js.map +1 -1
  274. package/test-utils/selectors/button-dropdown/index.d.ts +2 -0
  275. package/test-utils/selectors/button-dropdown/index.js +6 -1
  276. package/test-utils/selectors/button-dropdown/index.js.map +1 -1
  277. package/test-utils/tsconfig.tsbuildinfo +1 -1
  278. package/text-content/styles.css.js +1 -1
  279. package/text-content/styles.scoped.css +64 -64
  280. package/text-content/styles.selectors.js +1 -1
  281. package/text-filter/styles.css.js +3 -3
  282. package/text-filter/styles.scoped.css +4 -4
  283. package/text-filter/styles.selectors.js +3 -3
  284. package/textarea/styles.css.js +4 -4
  285. package/textarea/styles.scoped.css +14 -14
  286. package/textarea/styles.selectors.js +4 -4
  287. package/tiles/styles.css.js +28 -28
  288. package/tiles/styles.scoped.css +70 -70
  289. package/tiles/styles.selectors.js +28 -28
  290. package/toggle/styles.css.js +8 -8
  291. package/toggle/styles.scoped.css +15 -15
  292. package/toggle/styles.selectors.js +8 -8
  293. package/token-group/styles.css.js +7 -7
  294. package/token-group/styles.scoped.css +17 -17
  295. package/token-group/styles.selectors.js +7 -7
  296. package/top-navigation/1.0-beta/styles.css.js +25 -25
  297. package/top-navigation/1.0-beta/styles.scoped.css +43 -43
  298. package/top-navigation/1.0-beta/styles.selectors.js +25 -25
  299. package/top-navigation/1.0-beta/use-top-navigation.d.ts.map +1 -1
  300. package/top-navigation/1.0-beta/use-top-navigation.js +2 -1
  301. package/top-navigation/1.0-beta/use-top-navigation.js.map +1 -1
  302. package/top-navigation/styles.css.js +47 -47
  303. package/top-navigation/styles.scoped.css +70 -70
  304. package/top-navigation/styles.selectors.js +47 -47
  305. package/top-navigation/use-top-navigation.d.ts.map +1 -1
  306. package/top-navigation/use-top-navigation.js +2 -1
  307. package/top-navigation/use-top-navigation.js.map +1 -1
  308. package/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
  309. package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +23 -23
  310. package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
  311. package/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
  312. package/tutorial-panel/components/tutorial-list/styles.scoped.css +30 -30
  313. package/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
  314. package/tutorial-panel/styles.css.js +1 -1
  315. package/tutorial-panel/styles.scoped.css +2 -2
  316. package/tutorial-panel/styles.selectors.js +1 -1
  317. package/wizard/styles.css.js +31 -31
  318. package/wizard/styles.scoped.css +63 -63
  319. package/wizard/styles.selectors.js +31 -31
  320. package/internal/hooks/container-queries/interfaces.d.ts +0 -10
  321. package/internal/hooks/container-queries/interfaces.d.ts.map +0 -1
  322. package/internal/hooks/container-queries/interfaces.js +0 -4
  323. package/internal/hooks/container-queries/interfaces.js.map +0 -1
  324. package/internal/hooks/container-queries/use-container-query.d.ts +0 -22
  325. package/internal/hooks/container-queries/use-container-query.d.ts.map +0 -1
  326. package/internal/hooks/container-queries/use-container-query.js +0 -32
  327. package/internal/hooks/container-queries/use-container-query.js.map +0 -1
@@ -2,13 +2,19 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "button-dropdown": "awsui_button-dropdown_sne0l_14ox4_93",
6
- "items-list-container": "awsui_items-list-container_sne0l_14ox4_97",
7
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_14ox4_1",
8
- "rotate-up": "awsui_rotate-up_sne0l_14ox4_114",
9
- "rotate-down": "awsui_rotate-down_sne0l_14ox4_129",
10
- "header": "awsui_header_sne0l_14ox4_144",
11
- "title": "awsui_title_sne0l_14ox4_153",
12
- "description": "awsui_description_sne0l_14ox4_154"
5
+ "button-dropdown": "awsui_button-dropdown_sne0l_2839s_93",
6
+ "items-list-container": "awsui_items-list-container_sne0l_2839s_97",
7
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_2839s_1",
8
+ "rotate-up": "awsui_rotate-up_sne0l_2839s_114",
9
+ "rotate-down": "awsui_rotate-down_sne0l_2839s_129",
10
+ "header": "awsui_header_sne0l_2839s_144",
11
+ "title": "awsui_title_sne0l_2839s_153",
12
+ "description": "awsui_description_sne0l_2839s_154",
13
+ "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_2839s_158",
14
+ "trigger-item": "awsui_trigger-item_sne0l_2839s_161",
15
+ "trigger-button": "awsui_trigger-button_sne0l_2839s_164",
16
+ "visual-refresh": "awsui_visual-refresh_sne0l_2839s_176",
17
+ "split-trigger": "awsui_split-trigger_sne0l_2839s_158",
18
+ "dropdown-trigger": "awsui_dropdown-trigger_sne0l_2839s_184"
13
19
  };
14
20
 
@@ -17,6 +17,7 @@ interface UseButtonDropdownApi extends HighlightProps {
17
17
  toggleDropdown: (options?: {
18
18
  moveHighlightOnOpen?: boolean;
19
19
  }) => void;
20
+ closeDropdown: () => void;
20
21
  setIsUsingMouse: (isUsingMouse: boolean) => void;
21
22
  }
22
23
  export declare function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFocus, hasExpandableGroups, isInRestrictedView, expandToViewport, }: UseButtonDropdownOptions): UseButtonDropdownApi;
@@ -1 +1 @@
1
- {"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAuB,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAKtG,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,YAAY,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,GACzB,EAAE,wBAAwB,GAAG,oBAAoB,CAiKjD"}
1
+ {"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAuB,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAKtG,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,YAAY,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,GACzB,EAAE,wBAAwB,GAAG,oBAAoB,CAkKjD"}
@@ -145,6 +145,7 @@ export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFo
145
145
  onItemActivate,
146
146
  onGroupToggle,
147
147
  toggleDropdown,
148
+ closeDropdown,
148
149
  setIsUsingMouse,
149
150
  };
150
151
  }
@@ -1 +1 @@
1
- {"version":3,"file":"use-button-dropdown.js","sourceRoot":"lib/default/","sources":["button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport { fireCancelableEvent, CancelableEventHandler, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { getItemTarget, isItemGroup, isLinkItem } from './utils';\nimport useHighlightedMenu from './use-highlighted-menu';\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onReturnFocus: () => void;\n expandToViewport?: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen) {\n moveHighlight(1);\n }\n openStateProps.toggleDropdown();\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const details = {\n id: item.id || 'undefined',\n href: item.href,\n external: item.external,\n target: getItemTarget(item),\n };\n if (onItemFollow && item.href && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n onReturnFocus();\n closeDropdown();\n };\n\n const doVerticalNavigation = (direction: -1 | 1) => {\n if (isOpen) {\n moveHighlight(direction);\n }\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n doVerticalNavigation(1);\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n doVerticalNavigation(-1);\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.tab: {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // We need to handle activating items with Space separately because there is a bug\n // in Firefox where changing the focus during a Space keydown event it will trigger\n // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n toggleDropdown,\n setIsUsingMouse,\n };\n}\n"]}
1
+ {"version":3,"file":"use-button-dropdown.js","sourceRoot":"lib/default/","sources":["button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport { fireCancelableEvent, CancelableEventHandler, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { getItemTarget, isItemGroup, isLinkItem } from './utils';\nimport useHighlightedMenu from './use-highlighted-menu';\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onReturnFocus: () => void;\n expandToViewport?: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n closeDropdown: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen) {\n moveHighlight(1);\n }\n openStateProps.toggleDropdown();\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const details = {\n id: item.id || 'undefined',\n href: item.href,\n external: item.external,\n target: getItemTarget(item),\n };\n if (onItemFollow && item.href && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n onReturnFocus();\n closeDropdown();\n };\n\n const doVerticalNavigation = (direction: -1 | 1) => {\n if (isOpen) {\n moveHighlight(direction);\n }\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n doVerticalNavigation(1);\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n doVerticalNavigation(-1);\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.tab: {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // We need to handle activating items with Space separately because there is a bug\n // in Firefox where changing the focus during a Space keydown event it will trigger\n // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n };\n}\n"]}
@@ -1,23 +1,23 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "calendar": "awsui_calendar_1ykar_1keiv_93",
5
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1keiv_1",
6
- "root": "awsui_root_1ykar_1keiv_124",
7
- "calendar-inner": "awsui_calendar-inner_1ykar_1keiv_143",
8
- "calendar-header": "awsui_calendar-header_1ykar_1keiv_146",
9
- "calendar-header-month": "awsui_calendar-header-month_1ykar_1keiv_151",
10
- "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1keiv_158",
11
- "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1keiv_161",
12
- "calendar-grid": "awsui_calendar-grid_1ykar_1keiv_164",
13
- "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1keiv_168",
14
- "calendar-day-header": "awsui_calendar-day-header_1ykar_1keiv_174",
15
- "calendar-day": "awsui_calendar-day_1ykar_1keiv_174",
16
- "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1keiv_191",
17
- "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1keiv_198",
18
- "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1keiv_205",
19
- "calendar-day-today": "awsui_calendar-day-today_1ykar_1keiv_208",
20
- "day-inner": "awsui_day-inner_1ykar_1keiv_223",
21
- "calendar-week": "awsui_calendar-week_1ykar_1keiv_288"
4
+ "calendar": "awsui_calendar_1ykar_1rnk0_93",
5
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1rnk0_1",
6
+ "root": "awsui_root_1ykar_1rnk0_124",
7
+ "calendar-inner": "awsui_calendar-inner_1ykar_1rnk0_143",
8
+ "calendar-header": "awsui_calendar-header_1ykar_1rnk0_146",
9
+ "calendar-header-month": "awsui_calendar-header-month_1ykar_1rnk0_151",
10
+ "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1rnk0_158",
11
+ "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1rnk0_161",
12
+ "calendar-grid": "awsui_calendar-grid_1ykar_1rnk0_164",
13
+ "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1rnk0_168",
14
+ "calendar-day-header": "awsui_calendar-day-header_1ykar_1rnk0_174",
15
+ "calendar-day": "awsui_calendar-day_1ykar_1rnk0_174",
16
+ "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1rnk0_191",
17
+ "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1rnk0_198",
18
+ "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1rnk0_205",
19
+ "calendar-day-today": "awsui_calendar-day-today_1ykar_1rnk0_208",
20
+ "day-inner": "awsui_day-inner_1ykar_1rnk0_223",
21
+ "calendar-week": "awsui_calendar-week_1ykar_1rnk0_288"
22
22
  };
23
23
 
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_calendar_1ykar_1keiv_93:not(#\9) {
94
- animation: awsui_awsui-motion-fade-in-0_1ykar_1keiv_1 var(--motion-duration-show-quick-fkbsov, 135ms) var(--motion-easing-show-quick-17va6f, ease-out);
93
+ .awsui_calendar_1ykar_1rnk0_93:not(#\9) {
94
+ animation: awsui_awsui-motion-fade-in-0_1ykar_1rnk0_1 var(--motion-duration-show-quick-fkbsov, 135ms) var(--motion-easing-show-quick-17va6f, ease-out);
95
95
  animation-fill-mode: both;
96
96
  }
97
- @keyframes awsui_awsui-motion-fade-in-0_1ykar_1keiv_1 {
97
+ @keyframes awsui_awsui-motion-fade-in-0_1ykar_1rnk0_1 {
98
98
  from {
99
99
  opacity: 0;
100
100
  }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
103
103
  }
104
104
  }
105
105
  @media (prefers-reduced-motion: reduce) {
106
- .awsui_calendar_1ykar_1keiv_93:not(#\9) {
106
+ .awsui_calendar_1ykar_1rnk0_93:not(#\9) {
107
107
  animation: none;
108
108
  transition: none;
109
109
  }
110
110
  }
111
- .awsui-motion-disabled .awsui_calendar_1ykar_1keiv_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_1keiv_93:not(#\9) {
111
+ .awsui-motion-disabled .awsui_calendar_1ykar_1rnk0_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_1rnk0_93:not(#\9) {
112
112
  animation: none;
113
113
  transition: none;
114
114
  }
@@ -121,11 +121,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
121
121
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
122
122
  SPDX-License-Identifier: Apache-2.0
123
123
  */
124
- .awsui_root_1ykar_1keiv_124:not(#\9) {
124
+ .awsui_root_1ykar_1rnk0_124:not(#\9) {
125
125
  /* used in test-utils */
126
126
  }
127
127
 
128
- .awsui_calendar_1ykar_1keiv_93:not(#\9) {
128
+ .awsui_calendar_1ykar_1rnk0_93:not(#\9) {
129
129
  display: block;
130
130
  width: var(--size-calendar-grid-width-5g8y2e, 238px);
131
131
  overflow: auto;
@@ -159,84 +159,84 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
159
159
  word-spacing: normal;
160
160
  box-sizing: border-box;
161
161
  font-size: var(--font-body-m-size-7dign1, 14px);
162
- line-height: var(--font-body-m-line-height-rfgrp9, 22px);
162
+ line-height: var(--font-body-m-line-height-ghizru, 20px);
163
163
  color: var(--color-text-body-default-su7kuo, #000716);
164
164
  font-weight: 400;
165
165
  font-family: var(--font-family-base-wn913o, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
166
166
  -webkit-font-smoothing: auto;
167
167
  -moz-osx-font-smoothing: auto;
168
168
  }
169
- .awsui_calendar-inner_1ykar_1keiv_143:not(#\9) {
169
+ .awsui_calendar-inner_1ykar_1rnk0_143:not(#\9) {
170
170
  margin: var(--space-xs-edba2s, 8px);
171
171
  }
172
- .awsui_calendar-header_1ykar_1keiv_146:not(#\9) {
172
+ .awsui_calendar-header_1ykar_1rnk0_146:not(#\9) {
173
173
  display: flex;
174
174
  justify-content: space-between;
175
175
  align-items: center;
176
176
  }
177
- .awsui_calendar-header-month_1ykar_1keiv_151:not(#\9) {
177
+ .awsui_calendar-header-month_1ykar_1rnk0_151:not(#\9) {
178
178
  font-size: var(--font-body-m-size-7dign1, 14px);
179
- line-height: var(--font-body-m-line-height-rfgrp9, 22px);
179
+ line-height: var(--font-body-m-line-height-ghizru, 20px);
180
180
  font-weight: 700;
181
181
  color: var(--color-text-dropdown-item-default-dyep5n, #000716);
182
182
  margin: 0;
183
183
  }
184
- .awsui_calendar-next-month-btn_1ykar_1keiv_158:not(#\9) {
184
+ .awsui_calendar-next-month-btn_1ykar_1rnk0_158:not(#\9) {
185
185
  /* used for identifying element */
186
186
  }
187
- .awsui_calendar-prev-month-btn_1ykar_1keiv_161:not(#\9) {
187
+ .awsui_calendar-prev-month-btn_1ykar_1rnk0_161:not(#\9) {
188
188
  /* used for identifying element */
189
189
  }
190
- .awsui_calendar-grid_1ykar_1keiv_164:not(#\9) {
190
+ .awsui_calendar-grid_1ykar_1rnk0_164:not(#\9) {
191
191
  width: 100%;
192
192
  border-spacing: 0;
193
193
  }
194
- .awsui_calendar-grid-cell_1ykar_1keiv_168:not(#\9) {
194
+ .awsui_calendar-grid-cell_1ykar_1rnk0_168:not(#\9) {
195
195
  width: 14.2857142857%;
196
196
  word-break: break-word;
197
197
  text-align: center;
198
198
  font-weight: unset;
199
199
  }
200
- .awsui_calendar-day-header_1ykar_1keiv_174:not(#\9) {
200
+ .awsui_calendar-day-header_1ykar_1rnk0_174:not(#\9) {
201
201
  padding: var(--space-s-hdd878, 12px) 0 var(--space-xxs-ja5cp8, 4px);
202
202
  color: var(--color-text-calendar-month-tvowxv, #5f6b7a);
203
203
  font-size: var(--font-body-s-size-6jmxer, 12px);
204
204
  line-height: var(--font-body-s-line-height-ga8tt7, 16px);
205
205
  letter-spacing: var(--font-body-s-letter-spacing-v8bwhi, 0.005em);
206
206
  }
207
- .awsui_calendar-day_1ykar_1keiv_174:not(#\9) {
207
+ .awsui_calendar-day_1ykar_1rnk0_174:not(#\9) {
208
208
  border-bottom: 1px solid var(--color-border-calendar-grid-kpox7s, transparent);
209
209
  border-right: 1px solid var(--color-border-calendar-grid-kpox7s, transparent);
210
210
  padding: var(--space-xxs-ja5cp8, 4px) 0;
211
211
  color: var(--color-text-dropdown-item-disabled-p5eewj, #9ba7b6);
212
212
  position: relative;
213
213
  }
214
- .awsui_calendar-day_1ykar_1keiv_174:not(#\9):first-child {
214
+ .awsui_calendar-day_1ykar_1rnk0_174:not(#\9):first-child {
215
215
  border-left: 1px solid var(--color-border-calendar-grid-kpox7s, transparent);
216
216
  }
217
- .awsui_calendar-day-enabled_1ykar_1keiv_191:not(#\9) {
217
+ .awsui_calendar-day-enabled_1ykar_1rnk0_191:not(#\9) {
218
218
  cursor: pointer;
219
219
  color: var(--color-text-dropdown-item-secondary-c4unu9, #5f6b7a);
220
220
  }
221
- .awsui_calendar-day-enabled_1ykar_1keiv_191:not(#\9)::after {
221
+ .awsui_calendar-day-enabled_1ykar_1rnk0_191:not(#\9)::after {
222
222
  border-radius: var(--border-radius-item-gyl0qr, 8px);
223
223
  }
224
- .awsui_calendar-day-enabled_1ykar_1keiv_191.awsui_calendar-day-current-month_1ykar_1keiv_198:not(#\9) {
224
+ .awsui_calendar-day-enabled_1ykar_1rnk0_191.awsui_calendar-day-current-month_1ykar_1rnk0_198:not(#\9) {
225
225
  color: var(--color-text-dropdown-item-default-dyep5n, #000716);
226
226
  }
227
- .awsui_calendar-day-enabled_1ykar_1keiv_191.awsui_calendar-day-current-month_1ykar_1keiv_198:not(#\9):hover {
227
+ .awsui_calendar-day-enabled_1ykar_1rnk0_191.awsui_calendar-day-current-month_1ykar_1rnk0_198:not(#\9):hover {
228
228
  color: var(--color-text-calendar-day-hover-ail3l7, #000716);
229
229
  background-color: var(--color-background-dropdown-item-hover-gvdk4u, #f4f4f4);
230
230
  }
231
- .awsui_calendar-day-enabled_1ykar_1keiv_191.awsui_calendar-day-current-month_1ykar_1keiv_198:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_1keiv_205)::after {
231
+ .awsui_calendar-day-enabled_1ykar_1rnk0_191.awsui_calendar-day-current-month_1ykar_1rnk0_198:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_1rnk0_205)::after {
232
232
  border: var(--border-item-width-y36svo, 2px) solid var(--color-border-dropdown-item-hover-me98vk, #7d8998);
233
233
  }
234
- .awsui_calendar-day-today_1ykar_1keiv_208:not(#\9) {
234
+ .awsui_calendar-day-today_1ykar_1rnk0_208:not(#\9) {
235
235
  background-color: var(--color-background-calendar-today-yk2tnj, #f4f4f4);
236
236
  border-radius: var(--border-radius-item-gyl0qr, 8px);
237
237
  font-weight: 700;
238
238
  }
239
- .awsui_calendar-day_1ykar_1keiv_174:not(#\9)::after {
239
+ .awsui_calendar-day_1ykar_1rnk0_174:not(#\9)::after {
240
240
  content: "";
241
241
  position: absolute;
242
242
  z-index: 1;
@@ -246,21 +246,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
246
246
  right: calc(-1 * var(--border-item-width-y36svo, 2px));
247
247
  background-color: transparent;
248
248
  }
249
- .awsui_calendar-day_1ykar_1keiv_174 > .awsui_day-inner_1ykar_1keiv_223:not(#\9) {
249
+ .awsui_calendar-day_1ykar_1rnk0_174 > .awsui_day-inner_1ykar_1rnk0_223:not(#\9) {
250
250
  position: relative;
251
251
  z-index: 1;
252
252
  }
253
- .awsui_calendar-day_1ykar_1keiv_174:not(#\9):focus {
253
+ .awsui_calendar-day_1ykar_1rnk0_174:not(#\9):focus {
254
254
  outline: none;
255
255
  }
256
- body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1keiv_174:not(#\9):focus:focus {
256
+ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1rnk0_174:not(#\9):focus:focus {
257
257
  position: relative;
258
258
  }
259
- body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1keiv_174:not(#\9):focus:focus {
259
+ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1rnk0_174:not(#\9):focus:focus {
260
260
  outline: 2px dotted transparent;
261
261
  outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-reev1c, -5px) - 1px);
262
262
  }
263
- body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1keiv_174:not(#\9):focus:focus::before {
263
+ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1rnk0_174:not(#\9):focus:focus::before {
264
264
  content: " ";
265
265
  display: block;
266
266
  position: absolute;
@@ -271,23 +271,23 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1keiv_174:not(#\9)
271
271
  border-radius: var(--border-radius-calendar-day-focus-ring-p4dxcv, 3px);
272
272
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
273
273
  }
274
- body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1keiv_174:not(#\9):focus:focus::before {
274
+ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1rnk0_174:not(#\9):focus:focus::before {
275
275
  z-index: 2;
276
276
  }
277
- .awsui_calendar-day-selected_1ykar_1keiv_205:not(#\9) {
277
+ .awsui_calendar-day-selected_1ykar_1rnk0_205:not(#\9) {
278
278
  border-color: transparent;
279
279
  position: relative;
280
280
  z-index: 2;
281
281
  font-weight: 700;
282
282
  }
283
- body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1keiv_205:not(#\9):focus:focus {
283
+ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1rnk0_205:not(#\9):focus:focus {
284
284
  position: relative;
285
285
  }
286
- body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1keiv_205:not(#\9):focus:focus {
286
+ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1rnk0_205:not(#\9):focus:focus {
287
287
  outline: 2px dotted transparent;
288
288
  outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-reev1c, -5px) - 1px);
289
289
  }
290
- body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1keiv_205:not(#\9):focus:focus::before {
290
+ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1rnk0_205:not(#\9):focus:focus::before {
291
291
  content: " ";
292
292
  display: block;
293
293
  position: absolute;
@@ -298,19 +298,19 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1keiv_205
298
298
  border-radius: var(--border-radius-calendar-day-focus-ring-p4dxcv, 3px);
299
299
  box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-ns1ga1, #fbfbfb);
300
300
  }
301
- body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1keiv_205:not(#\9):focus:focus::before {
301
+ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1rnk0_205:not(#\9):focus:focus::before {
302
302
  z-index: 2;
303
303
  }
304
- .awsui_calendar-day-selected_1ykar_1keiv_205:not(#\9)::after {
304
+ .awsui_calendar-day-selected_1ykar_1rnk0_205:not(#\9)::after {
305
305
  background-color: var(--color-background-control-checked-k2dd8u, #0972d3);
306
306
  border: var(--border-item-width-y36svo, 2px) solid var(--color-background-control-checked-k2dd8u, #0972d3);
307
307
  border-radius: var(--border-radius-item-gyl0qr, 8px);
308
308
  }
309
- .awsui_calendar-day-selected_1ykar_1keiv_205 > .awsui_day-inner_1ykar_1keiv_223:not(#\9) {
309
+ .awsui_calendar-day-selected_1ykar_1rnk0_205 > .awsui_day-inner_1ykar_1rnk0_223:not(#\9) {
310
310
  z-index: 2;
311
311
  color: var(--color-background-control-default-19p6ht, #ffffff);
312
312
  position: relative;
313
313
  }
314
- .awsui_calendar-week_1ykar_1keiv_288:not(#\9):first-child > .awsui_calendar-day_1ykar_1keiv_174 {
314
+ .awsui_calendar-week_1ykar_1rnk0_288:not(#\9):first-child > .awsui_calendar-day_1ykar_1rnk0_174 {
315
315
  border-top: 1px solid var(--color-border-calendar-grid-kpox7s, transparent);
316
316
  }
@@ -2,23 +2,23 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "calendar": "awsui_calendar_1ykar_1keiv_93",
6
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1keiv_1",
7
- "root": "awsui_root_1ykar_1keiv_124",
8
- "calendar-inner": "awsui_calendar-inner_1ykar_1keiv_143",
9
- "calendar-header": "awsui_calendar-header_1ykar_1keiv_146",
10
- "calendar-header-month": "awsui_calendar-header-month_1ykar_1keiv_151",
11
- "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1keiv_158",
12
- "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1keiv_161",
13
- "calendar-grid": "awsui_calendar-grid_1ykar_1keiv_164",
14
- "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1keiv_168",
15
- "calendar-day-header": "awsui_calendar-day-header_1ykar_1keiv_174",
16
- "calendar-day": "awsui_calendar-day_1ykar_1keiv_174",
17
- "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1keiv_191",
18
- "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1keiv_198",
19
- "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1keiv_205",
20
- "calendar-day-today": "awsui_calendar-day-today_1ykar_1keiv_208",
21
- "day-inner": "awsui_day-inner_1ykar_1keiv_223",
22
- "calendar-week": "awsui_calendar-week_1ykar_1keiv_288"
5
+ "calendar": "awsui_calendar_1ykar_1rnk0_93",
6
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1rnk0_1",
7
+ "root": "awsui_root_1ykar_1rnk0_124",
8
+ "calendar-inner": "awsui_calendar-inner_1ykar_1rnk0_143",
9
+ "calendar-header": "awsui_calendar-header_1ykar_1rnk0_146",
10
+ "calendar-header-month": "awsui_calendar-header-month_1ykar_1rnk0_151",
11
+ "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1rnk0_158",
12
+ "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1rnk0_161",
13
+ "calendar-grid": "awsui_calendar-grid_1ykar_1rnk0_164",
14
+ "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1rnk0_168",
15
+ "calendar-day-header": "awsui_calendar-day-header_1ykar_1rnk0_174",
16
+ "calendar-day": "awsui_calendar-day_1ykar_1rnk0_174",
17
+ "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1rnk0_191",
18
+ "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1rnk0_198",
19
+ "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1rnk0_205",
20
+ "calendar-day-today": "awsui_calendar-day-today_1ykar_1rnk0_208",
21
+ "day-inner": "awsui_day-inner_1ykar_1rnk0_223",
22
+ "calendar-week": "awsui_calendar-week_1ykar_1rnk0_288"
23
23
  };
24
24
 
package/cards/index.js CHANGED
@@ -6,7 +6,6 @@ import React, { useImperativeHandle, useRef } from 'react';
6
6
  import styles from './styles.css.js';
7
7
  import { getCardsPerRow } from './cards-layout-helper';
8
8
  import { getBaseProps } from '../internal/base-component';
9
- import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
10
9
  import ToolsHeader from '../table/tools-header';
11
10
  import { getItemKey } from '../table/utils';
12
11
  import { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';
@@ -24,16 +23,18 @@ import useMouseDownTarget from '../internal/hooks/use-mouse-down-target';
24
23
  import { useMobile } from '../internal/hooks/use-mobile';
25
24
  import { supportsStickyPosition } from '../internal/utils/dom';
26
25
  import { useInternalI18n } from '../internal/i18n/context';
26
+ import { useContainerQuery } from '@cloudscape-design/component-toolkit';
27
27
  const Cards = React.forwardRef(function (_a, ref) {
28
28
  var { items = [], cardDefinition, cardsPerRow = [], header, filter, pagination, preferences, empty, loading, loadingText, trackBy, selectedItems, selectionType, isItemDisabled, onSelectionChange, ariaLabels, visibleSections, stickyHeader, stickyHeaderVerticalOffset, variant = 'container', renderAriaLive, firstIndex, totalItemsCount } = _a, rest = __rest(_a, ["items", "cardDefinition", "cardsPerRow", "header", "filter", "pagination", "preferences", "empty", "loading", "loadingText", "trackBy", "selectedItems", "selectionType", "isItemDisabled", "onSelectionChange", "ariaLabels", "visibleSections", "stickyHeader", "stickyHeaderVerticalOffset", "variant", "renderAriaLive", "firstIndex", "totalItemsCount"]);
29
29
  const { __internalRootRef } = useBaseComponent('Cards');
30
30
  const baseProps = getBaseProps(rest);
31
31
  const isRefresh = useVisualRefresh();
32
+ const isMobile = useMobile();
32
33
  const computedVariant = isRefresh ? variant : 'container';
33
34
  const instanceUniqueId = useUniqueId('cards');
34
35
  const cardsId = (baseProps === null || baseProps === void 0 ? void 0 : baseProps.id) || instanceUniqueId;
35
36
  const cardsHeaderId = header ? `${cardsId}-header` : undefined;
36
- const [columns, measureRef] = useContainerQuery(({ width }) => getCardsPerRow(width, cardsPerRow), [cardsPerRow]);
37
+ const [columns, measureRef] = useContainerQuery(({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow), [cardsPerRow]);
37
38
  const refObject = useRef(null);
38
39
  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);
39
40
  const getMouseDownTarget = useMouseDownTarget();
@@ -51,8 +52,8 @@ const Cards = React.forwardRef(function (_a, ref) {
51
52
  },
52
53
  });
53
54
  const hasToolsHeader = header || filter || pagination || preferences;
55
+ const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;
54
56
  const headerRef = useRef(null);
55
- const isMobile = useMobile();
56
57
  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);
57
58
  stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;
58
59
  const onCardFocus = event => {
@@ -81,7 +82,7 @@ const Cards = React.forwardRef(function (_a, ref) {
81
82
  }
82
83
  return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
83
84
  React.createElement(InternalContainer, { header: hasToolsHeader && (React.createElement("div", { className: clsx(styles.header, isRefresh && styles['header-refresh'], styles[`header-variant-${computedVariant}`]) },
84
- React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), footer: variant === 'full-page' && !!pagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __headerId: cardsHeaderId, __darkHeader: computedVariant === 'full-page', __disableFooterDivider: true },
85
+ React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), footer: hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __headerId: cardsHeaderId, __darkHeader: computedVariant === 'full-page', __disableFooterDivider: true },
85
86
  React.createElement("div", { className: clsx(hasToolsHeader && styles['has-header']) },
86
87
  !!renderAriaLive && !!firstIndex && (React.createElement(LiveRegion, null,
87
88
  React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, updateShiftToggle: updateShiftToggle, onFocus: onCardFocus, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel, ariaLabelledby: (ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel) ? undefined : cardsHeaderId }))))));
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';\nimport SelectionControl, { SelectionControlProps } from '../table/selection-control';\nimport InternalContainer from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n renderAriaLive,\n firstIndex,\n totalItemsCount,\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards');\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const computedVariant = isRefresh ? variant : 'container';\n\n const instanceUniqueId = useUniqueId('cards');\n const cardsId = baseProps?.id || instanceUniqueId;\n const cardsHeaderId = header ? `${cardsId}-header` : undefined;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ width }) => getCardsPerRow(width, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n const getMouseDownTarget = useMouseDownTarget();\n\n const i18n = useInternalI18n('cards');\n const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels: {\n itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n },\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const headerRef = useRef<HTMLDivElement>(null);\n const isMobile = useMobile();\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n // When an element inside card receives focus we want to adjust the scroll.\n // However, that behavior is unwanted when the focus is received as result of a click\n // as it causes the click to never reach the target element.\n if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">\n <LiveRegion visible={true}>{loadingText}</LiveRegion>\n </InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n <InternalContainer\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`]\n )}\n >\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </div>\n )\n }\n footer={\n variant === 'full-page' && !!pagination && <div className={styles['footer-pagination']}>{pagination}</div>\n }\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __headerId={cardsHeaderId}\n __darkHeader={computedVariant === 'full-page'}\n __disableFooterDivider={true}\n >\n <div className={clsx(hasToolsHeader && styles['has-header'])}>\n {!!renderAriaLive && !!firstIndex && (\n <LiveRegion>\n <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>\n </LiveRegion>\n )}\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n updateShiftToggle={updateShiftToggle}\n onFocus={onCardFocus}\n ariaLabel={ariaLabels?.cardsLabel}\n ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}\n />\n )}\n </div>\n </InternalContainer>\n </div>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n updateShiftToggle,\n onFocus,\n ariaLabelledby,\n ariaLabel,\n}: Pick<CardsProps<T>, 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections'> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps: (item: T) => SelectionControlProps;\n updateShiftToggle: (state: boolean) => void;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n\n const { moveFocusDown, moveFocusUp } = useFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => (\n <li\n className={clsx(styles.card, {\n [styles['card-selectable']]: selectable,\n [styles['card-selected']]: selectable && isItemSelected(item),\n })}\n key={getItemKey(trackBy, item, index)}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n >\n <div className={styles['card-inner']}>\n <div className={styles['card-header']}>\n <div className={styles['card-header-inner']}>\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </div>\n {selectable && (\n <div className={styles['selection-control']}>\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n onShiftToggle={updateShiftToggle}\n {...getItemSelectionProps(item)}\n />\n </div>\n )}\n </div>\n {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </div>\n </li>\n ))}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';\nimport SelectionControl, { SelectionControlProps } from '../table/selection-control';\nimport InternalContainer from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n renderAriaLive,\n firstIndex,\n totalItemsCount,\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards');\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const isMobile = useMobile();\n\n const computedVariant = isRefresh ? variant : 'container';\n const instanceUniqueId = useUniqueId('cards');\n const cardsId = baseProps?.id || instanceUniqueId;\n const cardsHeaderId = header ? `${cardsId}-header` : undefined;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n const getMouseDownTarget = useMouseDownTarget();\n\n const i18n = useInternalI18n('cards');\n const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels: {\n itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n },\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n const headerRef = useRef<HTMLDivElement>(null);\n\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n // When an element inside card receives focus we want to adjust the scroll.\n // However, that behavior is unwanted when the focus is received as result of a click\n // as it causes the click to never reach the target element.\n if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">\n <LiveRegion visible={true}>{loadingText}</LiveRegion>\n </InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n <InternalContainer\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`]\n )}\n >\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </div>\n )\n }\n footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __headerId={cardsHeaderId}\n __darkHeader={computedVariant === 'full-page'}\n __disableFooterDivider={true}\n >\n <div className={clsx(hasToolsHeader && styles['has-header'])}>\n {!!renderAriaLive && !!firstIndex && (\n <LiveRegion>\n <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>\n </LiveRegion>\n )}\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n updateShiftToggle={updateShiftToggle}\n onFocus={onCardFocus}\n ariaLabel={ariaLabels?.cardsLabel}\n ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}\n />\n )}\n </div>\n </InternalContainer>\n </div>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n updateShiftToggle,\n onFocus,\n ariaLabelledby,\n ariaLabel,\n}: Pick<CardsProps<T>, 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections'> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps: (item: T) => SelectionControlProps;\n updateShiftToggle: (state: boolean) => void;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n\n const { moveFocusDown, moveFocusUp } = useFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => (\n <li\n className={clsx(styles.card, {\n [styles['card-selectable']]: selectable,\n [styles['card-selected']]: selectable && isItemSelected(item),\n })}\n key={getItemKey(trackBy, item, index)}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n >\n <div className={styles['card-inner']}>\n <div className={styles['card-header']}>\n <div className={styles['card-header-inner']}>\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </div>\n {selectable && (\n <div className={styles['selection-control']}>\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n onShiftToggle={updateShiftToggle}\n {...getItemSelectionProps(item)}\n />\n </div>\n )}\n </div>\n {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </div>\n </li>\n ))}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}