@cloudscape-design/components-themeable 3.0.304 → 3.0.306

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 (158) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/table/styles.scss +15 -4
  3. package/lib/internal/template/alert/internal.d.ts.map +1 -1
  4. package/lib/internal/template/alert/internal.js +1 -1
  5. package/lib/internal/template/alert/internal.js.map +1 -1
  6. package/lib/internal/template/area-chart/elements/use-highlight-details.d.ts.map +1 -1
  7. package/lib/internal/template/area-chart/elements/use-highlight-details.js +3 -1
  8. package/lib/internal/template/area-chart/elements/use-highlight-details.js.map +1 -1
  9. package/lib/internal/template/area-chart/interfaces.d.ts +1 -0
  10. package/lib/internal/template/area-chart/interfaces.d.ts.map +1 -1
  11. package/lib/internal/template/area-chart/interfaces.js.map +1 -1
  12. package/lib/internal/template/breadcrumb-group/index.d.ts +1 -1
  13. package/lib/internal/template/breadcrumb-group/index.d.ts.map +1 -1
  14. package/lib/internal/template/breadcrumb-group/index.js +2 -2
  15. package/lib/internal/template/breadcrumb-group/index.js.map +1 -1
  16. package/lib/internal/template/breadcrumb-group/internal.d.ts +1 -2
  17. package/lib/internal/template/breadcrumb-group/internal.d.ts.map +1 -1
  18. package/lib/internal/template/breadcrumb-group/internal.js +8 -1
  19. package/lib/internal/template/breadcrumb-group/internal.js.map +1 -1
  20. package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
  21. package/lib/internal/template/breadcrumb-group/item/item.js +9 -6
  22. package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
  23. package/lib/internal/template/button/internal.d.ts.map +1 -1
  24. package/lib/internal/template/button/internal.js +6 -1
  25. package/lib/internal/template/button/internal.js.map +1 -1
  26. package/lib/internal/template/cards/index.d.ts.map +1 -1
  27. package/lib/internal/template/cards/index.js +6 -1
  28. package/lib/internal/template/cards/index.js.map +1 -1
  29. package/lib/internal/template/code-editor/index.d.ts.map +1 -1
  30. package/lib/internal/template/code-editor/index.js +18 -16
  31. package/lib/internal/template/code-editor/index.js.map +1 -1
  32. package/lib/internal/template/code-editor/interfaces.d.ts +1 -1
  33. package/lib/internal/template/code-editor/interfaces.d.ts.map +1 -1
  34. package/lib/internal/template/code-editor/interfaces.js.map +1 -1
  35. package/lib/internal/template/code-editor/pane.d.ts +2 -2
  36. package/lib/internal/template/code-editor/pane.d.ts.map +1 -1
  37. package/lib/internal/template/code-editor/pane.js +8 -5
  38. package/lib/internal/template/code-editor/pane.js.map +1 -1
  39. package/lib/internal/template/code-editor/preferences-modal.d.ts +7 -7
  40. package/lib/internal/template/code-editor/preferences-modal.d.ts.map +1 -1
  41. package/lib/internal/template/code-editor/preferences-modal.js.map +1 -1
  42. package/lib/internal/template/code-editor/status-bar.d.ts +2 -2
  43. package/lib/internal/template/code-editor/status-bar.d.ts.map +1 -1
  44. package/lib/internal/template/code-editor/status-bar.js +5 -3
  45. package/lib/internal/template/code-editor/status-bar.js.map +1 -1
  46. package/lib/internal/template/container/index.d.ts.map +1 -1
  47. package/lib/internal/template/container/index.js +3 -1
  48. package/lib/internal/template/container/index.js.map +1 -1
  49. package/lib/internal/template/container/internal.d.ts.map +1 -1
  50. package/lib/internal/template/container/internal.js +4 -2
  51. package/lib/internal/template/container/internal.js.map +1 -1
  52. package/lib/internal/template/form/index.d.ts.map +1 -1
  53. package/lib/internal/template/form/index.js +5 -1
  54. package/lib/internal/template/form/index.js.map +1 -1
  55. package/lib/internal/template/form/internal.d.ts.map +1 -1
  56. package/lib/internal/template/form/internal.js +11 -2
  57. package/lib/internal/template/form/internal.js.map +1 -1
  58. package/lib/internal/template/form-field/internal.d.ts.map +1 -1
  59. package/lib/internal/template/form-field/internal.js +28 -2
  60. package/lib/internal/template/form-field/internal.js.map +1 -1
  61. package/lib/internal/template/header/internal.d.ts.map +1 -1
  62. package/lib/internal/template/header/internal.js +1 -1
  63. package/lib/internal/template/header/internal.js.map +1 -1
  64. package/lib/internal/template/help-panel/index.d.ts.map +1 -1
  65. package/lib/internal/template/help-panel/index.js +3 -1
  66. package/lib/internal/template/help-panel/index.js.map +1 -1
  67. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
  68. package/lib/internal/template/internal/analytics/hooks/use-funnel.js +17 -11
  69. package/lib/internal/template/internal/analytics/hooks/use-funnel.js.map +1 -1
  70. package/lib/internal/template/internal/components/cartesian-chart/bottom-labels.d.ts.map +1 -1
  71. package/lib/internal/template/internal/components/cartesian-chart/bottom-labels.js +3 -1
  72. package/lib/internal/template/internal/components/cartesian-chart/bottom-labels.js.map +1 -1
  73. package/lib/internal/template/internal/components/cartesian-chart/interfaces.d.ts +4 -0
  74. package/lib/internal/template/internal/components/cartesian-chart/interfaces.d.ts.map +1 -1
  75. package/lib/internal/template/internal/components/cartesian-chart/interfaces.js.map +1 -1
  76. package/lib/internal/template/internal/components/cartesian-chart/left-labels.d.ts.map +1 -1
  77. package/lib/internal/template/internal/components/cartesian-chart/left-labels.js +3 -1
  78. package/lib/internal/template/internal/components/cartesian-chart/left-labels.js.map +1 -1
  79. package/lib/internal/template/internal/components/chart-filter/index.d.ts.map +1 -1
  80. package/lib/internal/template/internal/components/chart-filter/index.js +4 -2
  81. package/lib/internal/template/internal/components/chart-filter/index.js.map +1 -1
  82. package/lib/internal/template/internal/components/chart-legend/index.d.ts.map +1 -1
  83. package/lib/internal/template/internal/components/chart-legend/index.js +3 -1
  84. package/lib/internal/template/internal/components/chart-legend/index.js.map +1 -1
  85. package/lib/internal/template/internal/components/chart-plot/index.d.ts.map +1 -1
  86. package/lib/internal/template/internal/components/chart-plot/index.js +3 -1
  87. package/lib/internal/template/internal/components/chart-plot/index.js.map +1 -1
  88. package/lib/internal/template/internal/components/chart-status-container/index.d.ts.map +1 -1
  89. package/lib/internal/template/internal/components/chart-status-container/index.js +7 -4
  90. package/lib/internal/template/internal/components/chart-status-container/index.js.map +1 -1
  91. package/lib/internal/template/internal/components/token-list/token-limit-toggle.d.ts.map +1 -1
  92. package/lib/internal/template/internal/components/token-list/token-limit-toggle.js +4 -2
  93. package/lib/internal/template/internal/components/token-list/token-limit-toggle.js.map +1 -1
  94. package/lib/internal/template/internal/environment.js +1 -1
  95. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +2 -2
  96. package/lib/internal/template/internal/generated/theming/index.d.ts +2 -2
  97. package/lib/internal/template/internal/i18n/testing.d.ts +8 -0
  98. package/lib/internal/template/internal/i18n/testing.d.ts.map +1 -0
  99. package/lib/internal/template/internal/i18n/testing.js +8 -0
  100. package/lib/internal/template/internal/i18n/testing.js.map +1 -0
  101. package/lib/internal/template/link/internal.d.ts.map +1 -1
  102. package/lib/internal/template/link/internal.js +39 -2
  103. package/lib/internal/template/link/internal.js.map +1 -1
  104. package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
  105. package/lib/internal/template/multiselect/internal.js +3 -1
  106. package/lib/internal/template/multiselect/internal.js.map +1 -1
  107. package/lib/internal/template/pie-chart/interfaces.d.ts +4 -0
  108. package/lib/internal/template/pie-chart/interfaces.d.ts.map +1 -1
  109. package/lib/internal/template/pie-chart/interfaces.js.map +1 -1
  110. package/lib/internal/template/pie-chart/pie-chart.d.ts.map +1 -1
  111. package/lib/internal/template/pie-chart/pie-chart.js +3 -1
  112. package/lib/internal/template/pie-chart/pie-chart.js.map +1 -1
  113. package/lib/internal/template/pie-chart/segments.d.ts.map +1 -1
  114. package/lib/internal/template/pie-chart/segments.js +3 -1
  115. package/lib/internal/template/pie-chart/segments.js.map +1 -1
  116. package/lib/internal/template/pie-chart/utils.d.ts +2 -1
  117. package/lib/internal/template/pie-chart/utils.d.ts.map +1 -1
  118. package/lib/internal/template/pie-chart/utils.js +3 -3
  119. package/lib/internal/template/pie-chart/utils.js.map +1 -1
  120. package/lib/internal/template/popover/body.d.ts.map +1 -1
  121. package/lib/internal/template/popover/body.js +3 -1
  122. package/lib/internal/template/popover/body.js.map +1 -1
  123. package/lib/internal/template/popover/interfaces.d.ts +1 -0
  124. package/lib/internal/template/popover/interfaces.d.ts.map +1 -1
  125. package/lib/internal/template/popover/interfaces.js.map +1 -1
  126. package/lib/internal/template/table/styles.css.js +35 -33
  127. package/lib/internal/template/table/styles.scoped.css +49 -43
  128. package/lib/internal/template/table/styles.selectors.js +35 -33
  129. package/lib/internal/template/table/use-sticky-scrollbar.d.ts +1 -0
  130. package/lib/internal/template/table/use-sticky-scrollbar.d.ts.map +1 -1
  131. package/lib/internal/template/table/use-sticky-scrollbar.js +10 -36
  132. package/lib/internal/template/table/use-sticky-scrollbar.js.map +1 -1
  133. package/lib/internal/template/tabs/interfaces.d.ts +2 -2
  134. package/lib/internal/template/tabs/interfaces.d.ts.map +1 -1
  135. package/lib/internal/template/tabs/interfaces.js.map +1 -1
  136. package/lib/internal/template/tabs/tab-header-bar.d.ts.map +1 -1
  137. package/lib/internal/template/tabs/tab-header-bar.js +4 -2
  138. package/lib/internal/template/tabs/tab-header-bar.js.map +1 -1
  139. package/lib/internal/template/tiles/interfaces.d.ts +4 -0
  140. package/lib/internal/template/tiles/interfaces.d.ts.map +1 -1
  141. package/lib/internal/template/tiles/interfaces.js.map +1 -1
  142. package/lib/internal/template/tiles/internal.d.ts.map +1 -1
  143. package/lib/internal/template/tiles/internal.js +2 -2
  144. package/lib/internal/template/tiles/internal.js.map +1 -1
  145. package/lib/internal/template/top-navigation/interfaces.d.ts +2 -0
  146. package/lib/internal/template/top-navigation/interfaces.d.ts.map +1 -1
  147. package/lib/internal/template/top-navigation/interfaces.js.map +1 -1
  148. package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.d.ts +1 -0
  149. package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.d.ts.map +1 -1
  150. package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.js +2 -0
  151. package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
  152. package/lib/internal/template/top-navigation/parts/overflow-menu/views/submenu.d.ts.map +1 -1
  153. package/lib/internal/template/top-navigation/parts/overflow-menu/views/submenu.js +1 -0
  154. package/lib/internal/template/top-navigation/parts/overflow-menu/views/submenu.js.map +1 -1
  155. package/lib/internal/template/top-navigation/parts/overflow-menu/views/utilities.d.ts.map +1 -1
  156. package/lib/internal/template/top-navigation/parts/overflow-menu/views/utilities.js +1 -1
  157. package/lib/internal/template/top-navigation/parts/overflow-menu/views/utilities.js.map +1 -1
  158. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"tab-header-bar.js","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAarE,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACO;IAClB,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,kBAAkB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC3D,MAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAErD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,GAAG,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,qBAAqB,CAAC,qBAAqB,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;YACvF,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,MAAM,wBAAwB,GAAG,CAAC,MAAe,EAAE,EAAE;QACnD,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,EAAE;YACxC,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC5D;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,yDAAyD;QACzD,gEAAgE;QAChE,qBAAqB,CAAC,GAAG,EAAE;YACzB,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,iEAAiE;QACjE,uDAAuD;IACzD,CAAC,EAAE,CAAC,kBAAkB,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAC/B,8DAA8D;QAC9D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;;QACb;;;UAGE;QACF,IAAI,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YAC1D,IAAI,QAAQ,CAAC,aAAa,KAAK,kBAAkB,CAAC,OAAO,EAAE;gBACzD,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;aAC5D;SACF;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,CAAC;QACnB,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI;QAC7B,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS,IAAI,eAAe;KAC/E,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,IAAI,CAAC;QAC7B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI;QACnC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,IAAI;QACxC,CAAC,MAAM,CAAC,mCAAmC,CAAC,CAAC,EAAE,YAAY;KAC5D,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,IAAI,CAAC;QAC9B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI;QACnC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,IAAI;QACzC,CAAC,MAAM,CAAC,oCAAoC,CAAC,CAAC,EAAE,aAAa;KAC9D,CAAC,CAAC;IAEH,OAAO;IACL,iFAAiF;IACjF,6BAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY;QACvC,kBAAkB,IAAI,CACrB,8BAAM,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB;YACzD,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,YAAY,EACrB,QAAQ,EAAE,CAAC,YAAY,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAClD,SAAS,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,GAC3C,CACG,CACR;QACD,4BACE,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,gBACzB,SAAS,qBACJ,cAAc,EAC/B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,QAAQ,IAEjB,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CACvB;QACJ,kBAAkB,IAAI,CACrB,8BAAM,SAAS,EAAE,kBAAkB;YACjC,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,aAAa,EACtB,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,EACjD,SAAS,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,GAC5C,CACG,CACR,CACG,CACP,CAAC;IAEF,SAAS,eAAe,CAAC,GAAkB;QACzC,MAAM,yBAAyB,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC;QAE9F,MAAM,YAAY,GAAG,UAAU,eAAuB;YACpD,MAAM,GAAG,GAAG,yBAAyB,CAAC,eAAe,CAAC,CAAC;YACvD,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,UACpB,KAAsF;YAEtF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;YAC1B,MAAM,WAAW,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC/G,IAAI,eAAe,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;gBACjE,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,WAAW,GAAG,yBAAyB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3D,QAAQ,OAAO,EAAE;gBACf,KAAK,OAAO,CAAC,KAAK;oBAChB,IAAI,WAAW,GAAG,CAAC,KAAK,yBAAyB,CAAC,MAAM,EAAE;wBACxD,YAAY,CAAC,CAAC,CAAC,CAAC;qBACjB;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,IAAI,WAAW,KAAK,CAAC,EAAE;wBACrB,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACpD;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,GAAG;oBACd,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACnD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,YAAY,CAAC,CAAC,CAAC,CAAC;oBAChB,OAAO;gBACT,KAAK,OAAO,CAAC,QAAQ;oBACnB,IAAI,aAAa,EAAE;wBACjB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;qBACpC;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,MAAM;oBACjB,IAAI,YAAY,EAAE;wBAChB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;qBACrC;oBACD,OAAO;aACV;QACH,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG,CAAC,KAAuB,EAAE,EAAE;YAC3C,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,wGAAwG;YACxG,MAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAI,UAAU,IAAI,GAAG,CAAC,IAAI,EAAE;gBAC1B,OAAO;aACR;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,yDAAyD;YACzD,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACb,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,IAAI,aAAa,EAAE;oBACjB,MAAM,YAAY,GAAG,aAAa,CAAC,UAA+B,CAAC;oBACnE,IAAI,YAAY,IAAI,YAAY,KAAK,QAAQ,CAAC,aAAa,EAAE;wBAC3D,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBAC7C;iBACF;aACF;YAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC;YACnB,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI;YAC/B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe;YACjC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ;YACpE,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,QAAQ;SAC5C,CAAC,CAAC;QAEH,MAAM,WAAW,GAA+F;YAC9G,SAAS,EAAE,OAAO;YAClB,IAAI,EAAE,KAAK;YACX,eAAe,EAAE,GAAG,CAAC,EAAE,KAAK,WAAW;YACvC,eAAe,EAAE,GAAG,WAAW,IAAI,GAAG,CAAC,EAAE,QAAQ;YACjD,aAAa,EAAE,GAAG,CAAC,EAAE;YACrB,EAAE,EAAE,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;YAC9D,QAAQ,EAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,GAAG,CAAC,KAAK,CAAQ;SACxE,CAAC;QAEF,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChB,WAAW,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACvC;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;SAChC;QAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;YAC1B,WAAW,CAAC,GAAG,GAAG,kBAAkB,CAAC;YACrC,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC;YACzB,WAAW,CAAC,SAAS,GAAG,CACtB,KAAsF,EACtF,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC3B;aAAM;YACL,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC3B;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,GAAG,CAAC,IAAI,EAAE;YACZ,MAAM,WAAW,GAAG,WAAyC,CAAC;YAC9D,WAAW,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC5B,OAAO,GAAG,2CAAO,WAAW,EAAI,CAAC;SAClC;aAAM;YACL,MAAM,WAAW,GAAG,WAA8C,CAAC;YACnE,WAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC5B,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;aAC7B;YACD,OAAO,GAAG,gDAAY,WAAW,EAAI,CAAC;SACvC;QAED,OAAO,CACL,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,OAAsB,CAAC,EACnE,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,EAC7B,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,GAAG,CAAC,EAAE,IAEV,OAAO,CACL,CACN,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAwC;IACxF,OAAO,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC;AACjC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasLeftOverflow,\n hasRightOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n const leftOverflowButton = useRef<HTMLElement>(null);\n\n const isVisualRefresh = useVisualRefresh();\n\n const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [leftOverflow, setLeftOverflow] = useState(false);\n const [rightOverflow, setRightOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: leftOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: rightOverflow,\n });\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={leftOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!leftOverflow}\n onClick={() => onPaginationClick(headerBarRef, -1)}\n ariaLabel={i18nStrings?.scrollLeftAriaLabel}\n />\n </span>\n )}\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!rightOverflow}\n onClick={() => onPaginationClick(headerBarRef, 1)}\n ariaLabel={i18nStrings?.scrollRightAriaLabel}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n const highlightTab = function (enabledTabIndex: number) {\n const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const handleKeyDown = function (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) {\n const { keyCode } = event;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n return;\n }\n event.preventDefault();\n const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n switch (keyCode) {\n case KeyCode.right:\n if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n highlightTab(0);\n } else {\n highlightTab(activeIndex + 1);\n }\n return;\n case KeyCode.left:\n if (activeIndex === 0) {\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n } else {\n highlightTab(activeIndex - 1);\n }\n return;\n case KeyCode.end:\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n return;\n case KeyCode.home:\n highlightTab(0);\n return;\n case KeyCode.pageDown:\n if (rightOverflow) {\n onPaginationClick(headerBarRef, 1);\n }\n return;\n case KeyCode.pageUp:\n if (leftOverflow) {\n onPaginationClick(headerBarRef, -1);\n }\n return;\n }\n };\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id);\n if (clickedTabRef) {\n const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n if (childElement && childElement !== document.activeElement) {\n childElement.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n if (tab.id === activeTabId) {\n commonProps.ref = activeTabHeaderRef;\n commonProps.tabIndex = 0;\n commonProps.onKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) => handleKeyDown(event);\n } else {\n commonProps.tabIndex = -1;\n }\n\n let trigger = null;\n if (tab.href) {\n const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n anchorProps.href = tab.href;\n trigger = <a {...anchorProps} />;\n } else {\n const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n buttonProps.type = 'button';\n if (tab.disabled) {\n buttonProps.disabled = true;\n }\n trigger = <button {...buttonProps} />;\n }\n\n return (\n <li\n ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n {trigger}\n </li>\n );\n }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n"]}
1
+ {"version":3,"file":"tab-header-bar.js","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.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, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasLeftOverflow,\n hasRightOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n const leftOverflowButton = useRef<HTMLElement>(null);\n const i18n = useInternalI18n('tabs');\n\n const isVisualRefresh = useVisualRefresh();\n\n const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [leftOverflow, setLeftOverflow] = useState(false);\n const [rightOverflow, setRightOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: leftOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: rightOverflow,\n });\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={leftOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!leftOverflow}\n onClick={() => onPaginationClick(headerBarRef, -1)}\n ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n />\n </span>\n )}\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!rightOverflow}\n onClick={() => onPaginationClick(headerBarRef, 1)}\n ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n const highlightTab = function (enabledTabIndex: number) {\n const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const handleKeyDown = function (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) {\n const { keyCode } = event;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n return;\n }\n event.preventDefault();\n const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n switch (keyCode) {\n case KeyCode.right:\n if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n highlightTab(0);\n } else {\n highlightTab(activeIndex + 1);\n }\n return;\n case KeyCode.left:\n if (activeIndex === 0) {\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n } else {\n highlightTab(activeIndex - 1);\n }\n return;\n case KeyCode.end:\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n return;\n case KeyCode.home:\n highlightTab(0);\n return;\n case KeyCode.pageDown:\n if (rightOverflow) {\n onPaginationClick(headerBarRef, 1);\n }\n return;\n case KeyCode.pageUp:\n if (leftOverflow) {\n onPaginationClick(headerBarRef, -1);\n }\n return;\n }\n };\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id);\n if (clickedTabRef) {\n const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n if (childElement && childElement !== document.activeElement) {\n childElement.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n if (tab.id === activeTabId) {\n commonProps.ref = activeTabHeaderRef;\n commonProps.tabIndex = 0;\n commonProps.onKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) => handleKeyDown(event);\n } else {\n commonProps.tabIndex = -1;\n }\n\n let trigger = null;\n if (tab.href) {\n const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n anchorProps.href = tab.href;\n trigger = <a {...anchorProps} />;\n } else {\n const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n buttonProps.type = 'button';\n if (tab.disabled) {\n buttonProps.disabled = true;\n }\n trigger = <button {...buttonProps} />;\n }\n\n return (\n <li\n ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n {trigger}\n </li>\n );\n }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n"]}
@@ -4,6 +4,10 @@ import { NonCancelableEventHandler } from '../internal/events';
4
4
  import { FormFieldControlProps } from '../internal/context/form-field-context';
5
5
  import { Breakpoint as _Breakpoint } from '../internal/breakpoints';
6
6
  export interface TilesProps extends BaseComponentProps, FormFieldControlProps {
7
+ /**
8
+ * Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.
9
+ */
10
+ name?: string;
7
11
  /**
8
12
  * Specifies the value of the selected tile.
9
13
  * If you want to clear the selection, use `null`.
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specifies the value of the selected tile.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * List of tile definitions. Each tile has the following properties:\n *\n * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n * - `label` [ReactNode] - A short description for the option the tile represents.\n * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n * We recommend that you don't set this property because it's automatically set by the tiles component.\n */\n items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n /**\n * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n * because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` on the group.\n */\n ariaRequired?: boolean;\n\n /**\n * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n */\n columns?: number;\n\n /**\n * Called when the user selects a different tile.\n */\n onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n\n /**\n * Adds `aria-controls` attribute to the component.\n * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n */\n ariaControls?: string;\n}\n\nexport namespace TilesProps {\n export type Breakpoint = _Breakpoint;\n export interface TilesDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n image?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.\n */\n name?: string;\n\n /**\n * Specifies the value of the selected tile.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * List of tile definitions. Each tile has the following properties:\n *\n * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n * - `label` [ReactNode] - A short description for the option the tile represents.\n * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n * We recommend that you don't set this property because it's automatically set by the tiles component.\n */\n items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n /**\n * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n * because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` on the group.\n */\n ariaRequired?: boolean;\n\n /**\n * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n */\n columns?: number;\n\n /**\n * Called when the user selects a different tile.\n */\n onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n\n /**\n * Adds `aria-controls` attribute to the component.\n * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n */\n ariaControls?: string;\n}\n\nexport namespace TilesProps {\n export type Breakpoint = _Breakpoint;\n export interface TilesDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n image?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHAsDlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHAuDlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
@@ -13,7 +13,7 @@ import { Tile } from './tile';
13
13
  import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
14
14
  const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
15
15
  const InternalTiles = React.forwardRef((_a, ref) => {
16
- var { value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "__internalRootRef"]);
16
+ var { name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "__internalRootRef"]);
17
17
  const baseProps = getBaseProps(rest);
18
18
  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
19
19
  const generatedName = useUniqueId('awsui-tiles-');
@@ -23,7 +23,7 @@ const InternalTiles = React.forwardRef((_a, ref) => {
23
23
  const columnCount = getColumnCount(items, columns);
24
24
  return (React.createElement("div", Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
25
25
  React.createElement("div", { className: clsx(styles.columns, styles[`column-${columnCount}`]) }, items &&
26
- items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange }))))));
26
+ items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange }))))));
27
27
  });
28
28
  function getColumnCount(items, columns) {
29
29
  if (columns) {
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n (\n {\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n columns,\n onChange,\n __internalRootRef = null,\n ...rest\n }: InternalTilesProps,\n ref: React.Ref<TilesProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n\n const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const columnCount = getColumnCount(items, columns);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n {items &&\n items.map((item, index) => (\n <Tile\n ref={index === tileRefIndex ? tileRef : undefined}\n key={item.value}\n item={item}\n selected={item.value === value}\n name={generatedName}\n breakpoint={breakpoint}\n onChange={onChange}\n />\n ))}\n </div>\n </div>\n );\n }\n);\n\nfunction getColumnCount(\n items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n columns: number | undefined\n): number {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n columns,\n onChange,\n __internalRootRef = null,\n ...rest\n }: InternalTilesProps,\n ref: React.Ref<TilesProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n\n const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const columnCount = getColumnCount(items, columns);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n {items &&\n items.map((item, index) => (\n <Tile\n ref={index === tileRefIndex ? tileRef : undefined}\n key={item.value}\n item={item}\n selected={item.value === value}\n name={name || generatedName}\n breakpoint={breakpoint}\n onChange={onChange}\n />\n ))}\n </div>\n </div>\n );\n }\n);\n\nfunction getColumnCount(\n items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n columns: number | undefined\n): number {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
@@ -45,12 +45,14 @@ export interface TopNavigationProps extends BaseComponentProps {
45
45
  * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.
46
46
  * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.
47
47
  * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.
48
+ * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.
48
49
  *
49
50
  * ### menu-dropdown
50
51
  *
51
52
  * * `description` (string) - The description displayed inside the dropdown.
52
53
  * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).
53
54
  * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.
55
+ * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.
54
56
  */
55
57
  utilities?: ReadonlyArray<TopNavigationProps.Utility>;
56
58
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;;;;OAOG;IACH,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IAEtC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;CAC7C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,MAAM,WAAW,QAAQ;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,sBAAsB,CAAC;KACnC;IAED,MAAM,WAAW,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAED,UAAU,WAAW;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,sBAAsB,CAAC,EAAE,OAAO,CAAC;QACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B;IAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;QACtD,IAAI,EAAE,eAAe,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;QACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,MAAM,WAAW,aAAc,SAAQ,WAAW;QAChD,IAAI,EAAE,QAAQ,CAAC;QACf,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;QACpC,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,MAAM,MAAM,OAAO,GAAG,mBAAmB,GAAG,aAAa,CAAC;IAE1D,MAAM,WAAW,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,gCAAgC,CAAC,EAAE,MAAM,CAAC;QAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,uBAAuB,EAAE,MAAM,CAAC;QAChC,qBAAqB,EAAE,MAAM,CAAC;KAC/B;;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;;;;OAOG;IACH,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IAEtC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;CAC7C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,MAAM,WAAW,QAAQ;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,sBAAsB,CAAC;KACnC;IAED,MAAM,WAAW,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAED,UAAU,WAAW;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,sBAAsB,CAAC,EAAE,OAAO,CAAC;QACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B;IAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;QACtD,IAAI,EAAE,eAAe,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;QACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,MAAM,WAAW,aAAc,SAAQ,WAAW;QAChD,IAAI,EAAE,QAAQ,CAAC;QACf,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;QACpC,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,MAAM,MAAM,OAAO,GAAG,mBAAmB,GAAG,aAAa,CAAC;IAE1D,MAAM,WAAW,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,gCAAgC,CAAC,EAAE,MAAM,CAAC;QAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,uBAAuB,EAAE,MAAM,CAAC;QAChC,qBAAqB,EAAE,MAAM,CAAC;KAC/B;;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { ButtonProps } from '../button/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n /**\n * Properties describing the product identity. They are as follows:\n *\n * * `title` (string) - Specifies the title text.\n * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.\n * * `href` (string) - Specifies the `href` that the header links to.\n * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n */\n identity: TopNavigationProps.Identity;\n\n /**\n * Use with an input or autosuggest control for a global search query.\n */\n search?: React.ReactNode;\n\n /**\n * A list of utility navigation elements.\n * The supported utility types are: `button` and `menu-dropdown`.\n *\n * The following properties are supported across all utility types:\n *\n * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n * * `title` (string) - The title displayed inside the dropdown.\n * * `iconName` (string) - The name of an existing icon to display next to the utility.\n * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n *\n * ### button\n *\n * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n * * `href` (string) - Specifies the `href` for a link styled as a button.\n * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\n * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n *\n * ### menu-dropdown\n *\n * * `description` (string) - The description displayed inside the dropdown.\n * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n */\n utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n /**\n * An object containing all the localized strings required by the component.\n */\n i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n export interface Identity {\n title?: string;\n logo?: Logo;\n href: string;\n onFollow?: CancelableEventHandler;\n }\n\n export interface Logo {\n src: string;\n alt?: string;\n }\n\n interface BaseUtility {\n text?: string;\n title?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconAlt?: string;\n iconSvg?: React.ReactNode;\n ariaLabel?: string;\n\n badge?: boolean;\n disableUtilityCollapse?: boolean;\n disableTextCollapse?: boolean;\n }\n\n export interface MenuDropdownUtility extends BaseUtility {\n type: 'menu-dropdown';\n description?: string;\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n }\n\n export interface ButtonUtility extends BaseUtility {\n type: 'button';\n variant?: 'primary-button' | 'link';\n onClick?: CancelableEventHandler;\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n href?: string;\n target?: string;\n rel?: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n }\n\n export type Utility = MenuDropdownUtility | ButtonUtility;\n\n export interface I18nStrings {\n searchIconAriaLabel?: string;\n searchDismissIconAriaLabel?: string;\n overflowMenuDismissIconAriaLabel?: string;\n overflowMenuBackIconAriaLabel?: string;\n overflowMenuTriggerText: string;\n overflowMenuTitleText: string;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { ButtonProps } from '../button/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n /**\n * Properties describing the product identity. They are as follows:\n *\n * * `title` (string) - Specifies the title text.\n * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.\n * * `href` (string) - Specifies the `href` that the header links to.\n * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n */\n identity: TopNavigationProps.Identity;\n\n /**\n * Use with an input or autosuggest control for a global search query.\n */\n search?: React.ReactNode;\n\n /**\n * A list of utility navigation elements.\n * The supported utility types are: `button` and `menu-dropdown`.\n *\n * The following properties are supported across all utility types:\n *\n * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n * * `title` (string) - The title displayed inside the dropdown.\n * * `iconName` (string) - The name of an existing icon to display next to the utility.\n * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n *\n * ### button\n *\n * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n * * `href` (string) - Specifies the `href` for a link styled as a button.\n * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\n * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.\n *\n * ### menu-dropdown\n *\n * * `description` (string) - The description displayed inside the dropdown.\n * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.\n */\n utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n /**\n * An object containing all the localized strings required by the component.\n */\n i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n export interface Identity {\n title?: string;\n logo?: Logo;\n href: string;\n onFollow?: CancelableEventHandler;\n }\n\n export interface Logo {\n src: string;\n alt?: string;\n }\n\n interface BaseUtility {\n text?: string;\n title?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconAlt?: string;\n iconSvg?: React.ReactNode;\n ariaLabel?: string;\n\n badge?: boolean;\n disableUtilityCollapse?: boolean;\n disableTextCollapse?: boolean;\n }\n\n export interface MenuDropdownUtility extends BaseUtility {\n type: 'menu-dropdown';\n description?: string;\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n }\n\n export interface ButtonUtility extends BaseUtility {\n type: 'button';\n variant?: 'primary-button' | 'link';\n onClick?: CancelableEventHandler;\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n href?: string;\n target?: string;\n rel?: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n }\n\n export type Utility = MenuDropdownUtility | ButtonUtility;\n\n export interface I18nStrings {\n searchIconAriaLabel?: string;\n searchDismissIconAriaLabel?: string;\n overflowMenuDismissIconAriaLabel?: string;\n overflowMenuBackIconAriaLabel?: string;\n overflowMenuTriggerText: string;\n overflowMenuTitleText: string;\n }\n}\n"]}
@@ -3,6 +3,7 @@ import { ButtonDropdownProps } from '../../../button-dropdown/interfaces';
3
3
  import { TopNavigationProps } from '../../interfaces';
4
4
  type UtilityMenuItemProps = TopNavigationProps.Utility & {
5
5
  index: number;
6
+ onClose?: () => void;
6
7
  };
7
8
  export declare const UtilityMenuItem: React.ForwardRefExoticComponent<UtilityMenuItemProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
8
9
  type SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAI1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgRtD,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,eAAe,oHAQ3B,CAAC;AAEF,KAAK,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,GAAG;IACxD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,CAAC,IAAI,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAclD,CAAC"}
1
+ {"version":3,"file":"menu-item.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAI1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAiRtD,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,eAAe,oHAQ3B,CAAC;AAEF,KAAK,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,GAAG;IACxD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,CAAC,IAAI,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAclD,CAAC"}
@@ -55,10 +55,12 @@ function utilityComponentFactory(utility, index, ref) {
55
55
  switch (utility.type) {
56
56
  case 'button': {
57
57
  const handleClick = (event) => {
58
+ var _a;
58
59
  if (Boolean(utility.href) && isPlainLeftClick(event)) {
59
60
  fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);
60
61
  }
61
62
  fireCancelableEvent(utility.onClick, {}, event);
63
+ (_a = utility.onClose) === null || _a === void 0 ? void 0 : _a.call(utility);
62
64
  };
63
65
  const content = (React.createElement(React.Fragment, null,
64
66
  label,
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item.js","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\n\nimport { LinkProps } from '../../../link/interfaces';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nimport { useNavigate } from './router';\nimport { TopNavigationProps } from '../../interfaces';\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n startIcon?: React.ReactNode;\n endIcon?: React.ReactNode;\n context?: 'dropdown-menu';\n children?: React.ReactNode;\n testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n return (\n <>\n {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n {endIcon && endIcon}\n </>\n );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external' | 'target' | 'rel'> {}\n\nconst LinkItem = forwardRef(\n (\n { children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }: LinkItemProps,\n ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n ) => {\n const anchorTarget = target ?? (external ? '_blank' : undefined);\n const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n\n return (\n <a\n ref={ref}\n onClick={onClick}\n className={clsx(\n styles['overflow-menu-control'],\n styles['overflow-menu-control-link'],\n context && styles[`overflow-menu-control-${context}`]\n )}\n href={href}\n target={anchorTarget}\n rel={anchorRel}\n {...(testId ? { 'data-testid': testId } : {})}\n >\n <ListItem startIcon={startIcon} endIcon={endIcon}>\n {children}\n </ListItem>\n </a>\n );\n }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n onClick?: (event: React.MouseEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n (\n { children, startIcon, endIcon, onClick, testId }: ButtonItemProps & { testId?: string },\n ref: React.Ref<HTMLButtonElement>\n ) => {\n return (\n <button\n ref={ref}\n className={styles['overflow-menu-control']}\n onClick={onClick}\n {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n >\n <ListItem startIcon={startIcon} endIcon={endIcon}>\n {children}\n </ListItem>\n </button>\n );\n }\n);\n\nconst NavigationItem = forwardRef(\n (\n {\n startIcon,\n children,\n index,\n testId,\n ...definition\n }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const navigate = useNavigate();\n return (\n <ButtonItem\n ref={ref}\n startIcon={startIcon}\n endIcon={<InternalIcon name=\"angle-right\" />}\n testId={testId}\n onClick={() =>\n navigate('dropdown-menu', {\n definition,\n headerText: definition.text || definition.title,\n headerSecondaryText: definition.description,\n utilityIndex: index,\n })\n }\n >\n {children}\n </ButtonItem>\n );\n }\n);\n\nconst ExpandableItem: React.FC<\n ButtonItemProps &\n ButtonDropdownProps.ItemGroup & { onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n const [expanded, setExpanded] = useState(false);\n const headerId = useUniqueId('overflow-menu-item');\n\n return (\n <>\n <button\n className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n onClick={() => setExpanded(value => !value)}\n aria-expanded={expanded}\n >\n <ListItem\n endIcon={\n <span className={clsx(styles.icon, expanded && styles.expanded)}>\n <InternalIcon name=\"caret-up-filled\" />\n </span>\n }\n >\n <span id={headerId}>{children}</span>\n </ListItem>\n </button>\n {expanded && (\n <ul\n className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n aria-labelledby={headerId}\n >\n {definition.items.map((item, index) => {\n const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n return (\n <li\n key={index}\n className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n >\n {dropdownComponentFactory(item, isGroup, onItemClick)}\n </li>\n );\n })}\n </ul>\n )}\n </>\n );\n};\n\nfunction utilityComponentFactory(\n utility: TopNavigationProps.Utility,\n index: number,\n ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n const label = utility.text || utility.title;\n const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n const startIcon = hasIcon && (\n <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n );\n\n switch (utility.type) {\n case 'button': {\n const handleClick = (event: React.MouseEvent) => {\n if (Boolean(utility.href) && isPlainLeftClick(event)) {\n fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);\n }\n\n fireCancelableEvent(utility.onClick, {}, event);\n };\n\n const content = (\n <>\n {label}\n {utility.external && (\n <>\n {' '}\n <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n <InternalIcon name=\"external\" size=\"normal\" />\n </span>\n </>\n )}\n </>\n );\n\n if (!utility.href) {\n return (\n <ButtonItem ref={ref} startIcon={startIcon} onClick={handleClick} testId={`__${index}`}>\n {content}\n </ButtonItem>\n );\n }\n\n return (\n <LinkItem\n ref={ref}\n startIcon={startIcon}\n href={utility.href}\n external={utility.external}\n target={utility.target}\n rel={utility.rel}\n testId={`__${index}`}\n onClick={handleClick}\n >\n {content}\n </LinkItem>\n );\n }\n case 'menu-dropdown': {\n return (\n <NavigationItem\n ref={ref}\n startIcon={startIcon}\n index={index}\n {...(utility as TopNavigationProps.MenuDropdownUtility)}\n testId={`__${index}`}\n >\n {label}\n </NavigationItem>\n );\n }\n }\n}\n\nfunction dropdownComponentFactory(\n item: ButtonDropdownProps.ItemOrGroup,\n expandable: boolean,\n onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void\n) {\n const label = item.text;\n const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n const startIcon = hasIcon && (\n <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n );\n\n if (expandable) {\n return (\n <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n {label}\n </ExpandableItem>\n );\n }\n\n return (\n <LinkItem\n startIcon={startIcon}\n href={item.href}\n external={item.external}\n context=\"dropdown-menu\"\n testId={item.id}\n onClick={event => onItemClick(event, item as ButtonDropdownProps.Item)}\n >\n {label}\n {item.external && (\n <>\n {' '}\n <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n <InternalIcon name=\"external\" size=\"normal\" />\n </span>\n </>\n )}\n </LinkItem>\n );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number };\n\nexport const UtilityMenuItem = forwardRef(\n ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n return (\n <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n {utilityComponentFactory(props, index, ref)}\n </li>\n );\n }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {\n onClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void;\n};\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n return (\n <li\n className={clsx(\n styles[`overflow-menu-list-item`],\n styles[`overflow-menu-list-item-submenu`],\n expandable && styles[`overflow-menu-list-item-expandable`]\n )}\n >\n {dropdownComponentFactory(props, expandable, props.onClick)}\n </li>\n );\n};\n"]}
1
+ {"version":3,"file":"menu-item.js","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\n\nimport { LinkProps } from '../../../link/interfaces';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nimport { useNavigate } from './router';\nimport { TopNavigationProps } from '../../interfaces';\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n startIcon?: React.ReactNode;\n endIcon?: React.ReactNode;\n context?: 'dropdown-menu';\n children?: React.ReactNode;\n testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n return (\n <>\n {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n {endIcon && endIcon}\n </>\n );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external' | 'target' | 'rel'> {}\n\nconst LinkItem = forwardRef(\n (\n { children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }: LinkItemProps,\n ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n ) => {\n const anchorTarget = target ?? (external ? '_blank' : undefined);\n const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n\n return (\n <a\n ref={ref}\n onClick={onClick}\n className={clsx(\n styles['overflow-menu-control'],\n styles['overflow-menu-control-link'],\n context && styles[`overflow-menu-control-${context}`]\n )}\n href={href}\n target={anchorTarget}\n rel={anchorRel}\n {...(testId ? { 'data-testid': testId } : {})}\n >\n <ListItem startIcon={startIcon} endIcon={endIcon}>\n {children}\n </ListItem>\n </a>\n );\n }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n onClick?: (event: React.MouseEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n (\n { children, startIcon, endIcon, onClick, testId }: ButtonItemProps & { testId?: string },\n ref: React.Ref<HTMLButtonElement>\n ) => {\n return (\n <button\n ref={ref}\n className={styles['overflow-menu-control']}\n onClick={onClick}\n {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n >\n <ListItem startIcon={startIcon} endIcon={endIcon}>\n {children}\n </ListItem>\n </button>\n );\n }\n);\n\nconst NavigationItem = forwardRef(\n (\n {\n startIcon,\n children,\n index,\n testId,\n ...definition\n }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const navigate = useNavigate();\n return (\n <ButtonItem\n ref={ref}\n startIcon={startIcon}\n endIcon={<InternalIcon name=\"angle-right\" />}\n testId={testId}\n onClick={() =>\n navigate('dropdown-menu', {\n definition,\n headerText: definition.text || definition.title,\n headerSecondaryText: definition.description,\n utilityIndex: index,\n })\n }\n >\n {children}\n </ButtonItem>\n );\n }\n);\n\nconst ExpandableItem: React.FC<\n ButtonItemProps &\n ButtonDropdownProps.ItemGroup & { onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n const [expanded, setExpanded] = useState(false);\n const headerId = useUniqueId('overflow-menu-item');\n\n return (\n <>\n <button\n className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n onClick={() => setExpanded(value => !value)}\n aria-expanded={expanded}\n >\n <ListItem\n endIcon={\n <span className={clsx(styles.icon, expanded && styles.expanded)}>\n <InternalIcon name=\"caret-up-filled\" />\n </span>\n }\n >\n <span id={headerId}>{children}</span>\n </ListItem>\n </button>\n {expanded && (\n <ul\n className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n aria-labelledby={headerId}\n >\n {definition.items.map((item, index) => {\n const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n return (\n <li\n key={index}\n className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n >\n {dropdownComponentFactory(item, isGroup, onItemClick)}\n </li>\n );\n })}\n </ul>\n )}\n </>\n );\n};\n\nfunction utilityComponentFactory(\n utility: TopNavigationProps.Utility & { onClose?: () => void },\n index: number,\n ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n const label = utility.text || utility.title;\n const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n const startIcon = hasIcon && (\n <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n );\n\n switch (utility.type) {\n case 'button': {\n const handleClick = (event: React.MouseEvent) => {\n if (Boolean(utility.href) && isPlainLeftClick(event)) {\n fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);\n }\n\n fireCancelableEvent(utility.onClick, {}, event);\n utility.onClose?.();\n };\n\n const content = (\n <>\n {label}\n {utility.external && (\n <>\n {' '}\n <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n <InternalIcon name=\"external\" size=\"normal\" />\n </span>\n </>\n )}\n </>\n );\n\n if (!utility.href) {\n return (\n <ButtonItem ref={ref} startIcon={startIcon} onClick={handleClick} testId={`__${index}`}>\n {content}\n </ButtonItem>\n );\n }\n\n return (\n <LinkItem\n ref={ref}\n startIcon={startIcon}\n href={utility.href}\n external={utility.external}\n target={utility.target}\n rel={utility.rel}\n testId={`__${index}`}\n onClick={handleClick}\n >\n {content}\n </LinkItem>\n );\n }\n case 'menu-dropdown': {\n return (\n <NavigationItem\n ref={ref}\n startIcon={startIcon}\n index={index}\n {...(utility as TopNavigationProps.MenuDropdownUtility)}\n testId={`__${index}`}\n >\n {label}\n </NavigationItem>\n );\n }\n }\n}\n\nfunction dropdownComponentFactory(\n item: ButtonDropdownProps.ItemOrGroup,\n expandable: boolean,\n onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void\n) {\n const label = item.text;\n const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n const startIcon = hasIcon && (\n <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n );\n\n if (expandable) {\n return (\n <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n {label}\n </ExpandableItem>\n );\n }\n\n return (\n <LinkItem\n startIcon={startIcon}\n href={item.href}\n external={item.external}\n context=\"dropdown-menu\"\n testId={item.id}\n onClick={event => onItemClick(event, item as ButtonDropdownProps.Item)}\n >\n {label}\n {item.external && (\n <>\n {' '}\n <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n <InternalIcon name=\"external\" size=\"normal\" />\n </span>\n </>\n )}\n </LinkItem>\n );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number; onClose?: () => void };\n\nexport const UtilityMenuItem = forwardRef(\n ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n return (\n <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n {utilityComponentFactory(props, index, ref)}\n </li>\n );\n }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {\n onClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void;\n};\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n return (\n <li\n className={clsx(\n styles[`overflow-menu-list-item`],\n styles[`overflow-menu-list-item-submenu`],\n expandable && styles[`overflow-menu-list-item-expandable`]\n )}\n >\n {dropdownComponentFactory(props, expandable, props.onClick)}\n </li>\n );\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"submenu.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/submenu.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAI1B,UAAU,gBAAiB,SAAQ,IAAI;IACrC,UAAU,EAAE,kBAAkB,CAAC,mBAAmB,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,qHAQd,gBAAgB,gBA2ClB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"submenu.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/submenu.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAI1B,UAAU,gBAAiB,SAAQ,IAAI;IACrC,UAAU,EAAE,kBAAkB,CAAC,mBAAmB,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,qHAQd,gBAAgB,gBA4ClB,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -20,6 +20,7 @@ const SubmenuView = ({ onClose, utilityIndex, headerText, headerSecondaryText, d
20
20
  fireCancelableEvent(definition.onItemFollow, { id: item.id, href: item.href, external: item.external }, event);
21
21
  }
22
22
  fireCancelableEvent(definition.onItemClick, { id: item.id, href: item.href, external: item.external }, event);
23
+ onClose === null || onClose === void 0 ? void 0 : onClose();
23
24
  } })))))));
24
25
  };
25
26
  export default SubmenuView;
@@ -1 +1 @@
1
- {"version":3,"file":"submenu.js","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/submenu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAKvE,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAOpF,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,GACO,EAAE,EAAE;IACrB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IACL,aAAa,EAAE,mBAAmB,EAClC,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,CAAC;YAErD,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC,qBAClE,QAAQ,IAEvB,UAAqD,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjF,oBAAC,WAAW,kBACV,GAAG,EAAE,KAAK,IACN,IAAI,IACR,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,IAAI,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;oBACxC,mBAAmB,CACjB,UAAU,CAAC,YAAY,EACvB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;iBACH;gBAED,mBAAmB,CACjB,UAAU,CAAC,WAAW,EACtB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;YACJ,CAAC,IACD,CACH,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\n\nimport { useNavigate } from '../router';\nimport Header from '../header';\nimport { SubmenuItem } from '../menu-item';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../../internal/events';\n\ninterface SubmenuViewProps extends View {\n definition: TopNavigationProps.MenuDropdownUtility;\n utilityIndex?: number;\n}\n\nconst SubmenuView = ({\n onClose,\n utilityIndex,\n headerText,\n headerSecondaryText,\n dismissIconAriaLabel,\n backIconAriaLabel,\n definition,\n}: SubmenuViewProps) => {\n const navigate = useNavigate();\n const headerId = useUniqueId('overflow-menu-header');\n\n return (\n <FocusLock returnFocus={true}>\n <Header\n secondaryText={headerSecondaryText}\n dismissIconAriaLabel={dismissIconAriaLabel}\n backIconAriaLabel={backIconAriaLabel}\n onClose={onClose}\n onBack={() => navigate('utilities', { utilityIndex })}\n >\n <span id={headerId}>{headerText}</span>\n </Header>\n <ul\n className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n aria-labelledby={headerId}\n >\n {(definition as TopNavigationProps.MenuDropdownUtility).items.map((item, index) => (\n <SubmenuItem\n key={index}\n {...item}\n onClick={(event, item) => {\n if (item.href && isPlainLeftClick(event)) {\n fireCancelableEvent(\n definition.onItemFollow,\n { id: item.id, href: item.href, external: item.external },\n event\n );\n }\n\n fireCancelableEvent(\n definition.onItemClick,\n { id: item.id, href: item.href, external: item.external },\n event\n );\n }}\n />\n ))}\n </ul>\n </FocusLock>\n );\n};\n\nexport default SubmenuView;\n"]}
1
+ {"version":3,"file":"submenu.js","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/submenu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAKvE,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAOpF,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,GACO,EAAE,EAAE;IACrB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IACL,aAAa,EAAE,mBAAmB,EAClC,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,CAAC;YAErD,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC,qBAClE,QAAQ,IAEvB,UAAqD,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjF,oBAAC,WAAW,kBACV,GAAG,EAAE,KAAK,IACN,IAAI,IACR,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,IAAI,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;oBACxC,mBAAmB,CACjB,UAAU,CAAC,YAAY,EACvB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;iBACH;gBAED,mBAAmB,CACjB,UAAU,CAAC,WAAW,EACtB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;gBACF,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;YACd,CAAC,IACD,CACH,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\n\nimport { useNavigate } from '../router';\nimport Header from '../header';\nimport { SubmenuItem } from '../menu-item';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../../internal/events';\n\ninterface SubmenuViewProps extends View {\n definition: TopNavigationProps.MenuDropdownUtility;\n utilityIndex?: number;\n}\n\nconst SubmenuView = ({\n onClose,\n utilityIndex,\n headerText,\n headerSecondaryText,\n dismissIconAriaLabel,\n backIconAriaLabel,\n definition,\n}: SubmenuViewProps) => {\n const navigate = useNavigate();\n const headerId = useUniqueId('overflow-menu-header');\n\n return (\n <FocusLock returnFocus={true}>\n <Header\n secondaryText={headerSecondaryText}\n dismissIconAriaLabel={dismissIconAriaLabel}\n backIconAriaLabel={backIconAriaLabel}\n onClose={onClose}\n onBack={() => navigate('utilities', { utilityIndex })}\n >\n <span id={headerId}>{headerText}</span>\n </Header>\n <ul\n className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n aria-labelledby={headerId}\n >\n {(definition as TopNavigationProps.MenuDropdownUtility).items.map((item, index) => (\n <SubmenuItem\n key={index}\n {...item}\n onClick={(event, item) => {\n if (item.href && isPlainLeftClick(event)) {\n fireCancelableEvent(\n definition.onItemFollow,\n { id: item.id, href: item.href, external: item.external },\n event\n );\n }\n\n fireCancelableEvent(\n definition.onItemClick,\n { id: item.id, href: item.href, external: item.external },\n event\n );\n onClose?.();\n }}\n />\n ))}\n </ul>\n </FocusLock>\n );\n};\n\nexport default SubmenuView;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"utilities.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAI1B,UAAU,kBAAmB,SAAQ,IAAI;IACvC,KAAK,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,qEAA2E,kBAAkB,gBAwB/G,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"utilities.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAI1B,UAAU,kBAAmB,SAAQ,IAAI;IACvC,KAAK,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,qEAA2E,kBAAkB,gBA8B/G,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -20,7 +20,7 @@ const UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [],
20
20
  return (React.createElement(FocusLock, { returnFocus: true },
21
21
  React.createElement(Header, { dismissIconAriaLabel: dismissIconAriaLabel, onClose: onClose },
22
22
  React.createElement("span", { id: headerId }, headerText)),
23
- React.createElement("ul", { className: styles['overflow-menu-list'], "aria-labelledby": headerId }, items.map((utility, index) => (React.createElement(UtilityMenuItem, Object.assign({ key: index, index: index, ref: index === focusIndex ? ref : undefined }, utility)))))));
23
+ React.createElement("ul", { className: styles['overflow-menu-list'], "aria-labelledby": headerId }, items.map((utility, index) => (React.createElement(UtilityMenuItem, Object.assign({ key: index, index: index, ref: index === focusIndex ? ref : undefined, onClose: onClose }, utility)))))));
24
24
  };
25
25
  export default UtilitiesView;
26
26
  //# sourceMappingURL=utilities.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utilities.js","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAOvE,MAAM,aAAa,GAAG,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,UAAU,EAAsB,EAAE,EAAE;IAClH,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;;QACb,qEAAqE;QACrE,4BAA4B;QAC5B,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IAAC,oBAAoB,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO;YAClE,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BAAI,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,qBAAmB,QAAQ,IACnE,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,eAAe,kBAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAM,OAAO,EAAI,CACxG,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\n\nimport Header from '../header';\nimport { UtilityMenuItem } from '../menu-item';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\ninterface UtilitiesViewProps extends View {\n items: TopNavigationProps['utilities'];\n focusIndex?: number;\n}\n\nconst UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [], focusIndex }: UtilitiesViewProps) => {\n const headerId = useUniqueId('overflow-menu-header');\n const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n\n useEffect(() => {\n // A focus index is used to set the focus back to the submenu trigger\n // returning from a submenu.\n if (typeof focusIndex === 'number') {\n ref.current?.focus();\n }\n }, [focusIndex]);\n\n return (\n <FocusLock returnFocus={true}>\n <Header dismissIconAriaLabel={dismissIconAriaLabel} onClose={onClose}>\n <span id={headerId}>{headerText}</span>\n </Header>\n <ul className={styles['overflow-menu-list']} aria-labelledby={headerId}>\n {items.map((utility, index) => (\n <UtilityMenuItem key={index} index={index} ref={index === focusIndex ? ref : undefined} {...utility} />\n ))}\n </ul>\n </FocusLock>\n );\n};\n\nexport default UtilitiesView;\n"]}
1
+ {"version":3,"file":"utilities.js","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAOvE,MAAM,aAAa,GAAG,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,UAAU,EAAsB,EAAE,EAAE;IAClH,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;;QACb,qEAAqE;QACrE,4BAA4B;QAC5B,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IAAC,oBAAoB,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO;YAClE,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BAAI,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,qBAAmB,QAAQ,IACnE,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,eAAe,kBACd,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC3C,OAAO,EAAE,OAAO,IACZ,OAAO,EACX,CACH,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\n\nimport Header from '../header';\nimport { UtilityMenuItem } from '../menu-item';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\ninterface UtilitiesViewProps extends View {\n items: TopNavigationProps['utilities'];\n focusIndex?: number;\n}\n\nconst UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [], focusIndex }: UtilitiesViewProps) => {\n const headerId = useUniqueId('overflow-menu-header');\n const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n\n useEffect(() => {\n // A focus index is used to set the focus back to the submenu trigger\n // returning from a submenu.\n if (typeof focusIndex === 'number') {\n ref.current?.focus();\n }\n }, [focusIndex]);\n\n return (\n <FocusLock returnFocus={true}>\n <Header dismissIconAriaLabel={dismissIconAriaLabel} onClose={onClose}>\n <span id={headerId}>{headerText}</span>\n </Header>\n <ul className={styles['overflow-menu-list']} aria-labelledby={headerId}>\n {items.map((utility, index) => (\n <UtilityMenuItem\n key={index}\n index={index}\n ref={index === focusIndex ? ref : undefined}\n onClose={onClose}\n {...utility}\n />\n ))}\n </ul>\n </FocusLock>\n );\n};\n\nexport default UtilitiesView;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/components-themeable",
3
- "version": "3.0.304",
3
+ "version": "3.0.306",
4
4
  "files": [
5
5
  "lib",
6
6
  "package.json",