@cloudscape-design/components 3.0.1333 → 3.0.1335

package/steps/styles.scoped.css

@@ -178,15 +178,19 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_connector_gxp9y_1jjrl_181:not(#\9) {
+.awsui_connector_gxp9y_1jagc_181:not(#\9) {
   background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
 }
 
-.awsui_connector_gxp9y_1jjrl_181.awsui_connector-hidden_gxp9y_1jjrl_185:not(#\9) {
+.awsui_connector_gxp9y_1jagc_181.awsui_connector-hidden_gxp9y_1jagc_185:not(#\9) {
   background-color: transparent;
 }
 
-.awsui_root_gxp9y_1jjrl_189:not(#\9) {
+.awsui_header_gxp9y_1jagc_189:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_root_gxp9y_1jagc_193:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -219,66 +223,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: 0;
   word-break: break-word;
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-n53k41, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-n53k41, 20px), auto);
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_header_gxp9y_1jjrl_232:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_annotation_gxp9y_1jagc_236:not(#\9) {
+  justify-self: flex-end;
+  min-inline-size: 0;
+  color: var(--color-text-status-inactive-gy7337, #656871);
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241:not(#\9) {
   display: flex;
   gap: var(--space-xxs-hwfkai, 4px);
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_details_gxp9y_1jjrl_238:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_details_gxp9y_1jagc_247:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-gnm0mz, 8px);
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_connector_gxp9y_1jjrl_181:not(#\9) {
-  grid-row: 2;
-  grid-column: 1;
-  margin-block: 0;
-  border-block: 0;
-  border-inline: 0;
-  inline-size: var(--border-divider-list-width-tdfx1x, 1px);
-  block-size: auto;
-  min-block-size: var(--space-static-xs-gnm0mz, 8px);
-  position: relative;
-  inset-inline-end: var(--space-static-xxxs-yidks1, 2px);
-}
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > :not(#\9):last-of-type > .awsui_connector_gxp9y_1jjrl_181 {
-  display: none;
-}
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222.awsui_custom_gxp9y_1jjrl_259 > .awsui_details_gxp9y_1jjrl_238:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_custom_gxp9y_1jagc_253 > .awsui_details_gxp9y_1jagc_247:not(#\9) {
   margin-block-end: 0;
 }
 
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222:not(#\9) {
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226:not(#\9) {
   display: grid;
   align-items: flex-start;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-template-rows: auto minmax(var(--space-static-l-n53k41, 20px), auto) auto;
   grid-auto-flow: column;
 }
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227:not(#\9) {
-  display: grid;
-  grid-template-columns: var(--space-static-l-n53k41, 20px) 1fr;
-  grid-template-rows: minmax(var(--space-static-l-n53k41, 20px), auto);
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231:not(#\9) {
+  grid-row: 1/-1;
+  grid-template-rows: subgrid;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_header_gxp9y_1jjrl_232:not(#\9) {
-  display: flex;
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_annotation_gxp9y_1jagc_236:not(#\9) {
+  justify-self: flex-start;
+  align-self: flex-end;
   grid-row: 1;
   grid-column: 1/span 2;
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241:not(#\9) {
+  grid-row: 2;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_header_gxp9y_1jjrl_232 > .awsui_connector_gxp9y_1jjrl_181:not(#\9) {
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241 > .awsui_connector_gxp9y_1jagc_181:not(#\9) {
   display: block;
   flex: 1;
   margin-block: 0;
@@ -291,27 +290,59 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: var(--space-static-xs-gnm0mz, 8px);
   margin-inline-end: var(--space-static-xxs-ns94dp, 4px);
 }
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_horizontal-header_gxp9y_1jjrl_294:not(#\9) {
-  grid-row: 2;
-  grid-column: 1/span 3;
-  padding-inline-end: var(--space-xs-ymlm0b, 8px);
-}
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227 > .awsui_details_gxp9y_1jjrl_238:not(#\9) {
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_content_gxp9y_1jagc_293:not(#\9) {
+  align-self: flex-start;
   grid-row: 3;
   grid-column: 1/span 3;
+  min-inline-size: 0;
   padding-inline-end: var(--space-xs-ymlm0b, 8px);
 }
-.awsui_horizontal_gxp9y_1jjrl_263 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227:not(#\9):last-child > .awsui_header_gxp9y_1jjrl_232 > .awsui_connector_gxp9y_1jjrl_181 {
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_content_gxp9y_1jagc_293 > .awsui_details_gxp9y_1jagc_247:not(#\9) {
+  margin-block-end: var(--space-static-xs-gnm0mz, 8px);
+}
+.awsui_horizontal_gxp9y_1jagc_257 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231:not(#\9):last-child > .awsui_step-layout_gxp9y_1jagc_241 > .awsui_connector_gxp9y_1jagc_181 {
+  display: none;
+}
+
+.awsui_vertical_gxp9y_1jagc_307 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241:not(#\9) {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: auto 1fr;
+  gap: 0;
+}
+.awsui_vertical_gxp9y_1jagc_307 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241 > :not(#\9):first-child {
+  grid-column: 1/-1;
+}
+.awsui_vertical_gxp9y_1jagc_307 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241 > .awsui_details_gxp9y_1jagc_247:not(#\9) {
+  grid-row: 2;
+  grid-column: 2;
+  margin-block-end: var(--space-static-xs-gnm0mz, 8px);
+}
+.awsui_vertical_gxp9y_1jagc_307 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231 > .awsui_step-layout_gxp9y_1jagc_241 > .awsui_connector-continuation_gxp9y_1jagc_321:not(#\9) {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: center;
+  margin-block: 0;
+  margin-inline: 0;
+  border-block: 0;
+  border-inline: 0;
+  inline-size: var(--border-divider-list-width-tdfx1x, 1px);
+  block-size: auto;
+  min-block-size: var(--space-static-xs-gnm0mz, 8px);
+  position: relative;
+  inset-inline-end: var(--space-static-xxxs-yidks1, 2px);
+}
+.awsui_vertical_gxp9y_1jagc_307 > .awsui_list_gxp9y_1jagc_226 > :not(#\9):last-of-type > .awsui_step-layout_gxp9y_1jagc_241 > .awsui_connector-continuation_gxp9y_1jagc_321 {
   display: none;
 }
 
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227.awsui_custom-vertical_gxp9y_1jjrl_308 > .awsui_rail_gxp9y_1jjrl_308:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231.awsui_custom-vertical_gxp9y_1jagc_339 > .awsui_rail_gxp9y_1jagc_339:not(#\9) {
   grid-column: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227.awsui_custom-vertical_gxp9y_1jjrl_308 > .awsui_rail_gxp9y_1jjrl_308 > .awsui_connector_gxp9y_1jjrl_181:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231.awsui_custom-vertical_gxp9y_1jagc_339 > .awsui_rail_gxp9y_1jagc_339 > .awsui_connector_gxp9y_1jagc_181:not(#\9) {
   grid-row: auto;
   grid-column: auto;
   flex: 1 1 auto;
@@ -323,11 +354,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-end: 0;
   margin-block: var(--space-static-xxs-ns94dp, 4px) 0;
 }
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227.awsui_custom-vertical_gxp9y_1jjrl_308 > .awsui_content_gxp9y_1jjrl_326:not(#\9) {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231.awsui_custom-vertical_gxp9y_1jagc_339 > .awsui_content_gxp9y_1jagc_293:not(#\9) {
   grid-column: 2;
   min-inline-size: 0;
 }
 
-.awsui_root_gxp9y_1jjrl_189 > .awsui_list_gxp9y_1jjrl_222 > .awsui_container_gxp9y_1jjrl_227.awsui_custom-vertical_gxp9y_1jjrl_308:not(#\9):last-of-type > .awsui_rail_gxp9y_1jjrl_308 > .awsui_connector_gxp9y_1jjrl_181 {
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362:not(#\9) {
+  display: grid;
+  grid-template-columns: fit-content(50%) var(--space-static-l-n53k41, 20px) 1fr;
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362 > .awsui_container_gxp9y_1jagc_231:not(#\9) {
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362 > .awsui_container_gxp9y_1jagc_231 > .awsui_annotation_gxp9y_1jagc_236:not(#\9) {
+  grid-row: 1;
+  grid-column: 1;
+  padding-inline-end: var(--space-xxs-hwfkai, 4px);
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362 > .awsui_container_gxp9y_1jagc_231:not(#\9):not(.awsui_custom-vertical_gxp9y_1jagc_339) > .awsui_step-layout_gxp9y_1jagc_241 {
+  grid-column: 2/span 2;
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362 > .awsui_container_gxp9y_1jagc_231:not(#\9):not(.awsui_custom-vertical_gxp9y_1jagc_339) > .awsui_details_gxp9y_1jagc_247 {
+  grid-column: 3;
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362 > .awsui_container_gxp9y_1jagc_231.awsui_custom-vertical_gxp9y_1jagc_339 > .awsui_rail_gxp9y_1jagc_339:not(#\9) {
+  grid-column: 2;
+}
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226.awsui_with-annotation_gxp9y_1jagc_362 > .awsui_container_gxp9y_1jagc_231.awsui_custom-vertical_gxp9y_1jagc_339 > .awsui_content_gxp9y_1jagc_293:not(#\9) {
+  grid-column: 3;
+}
+
+.awsui_root_gxp9y_1jagc_193 > .awsui_list_gxp9y_1jagc_226 > .awsui_container_gxp9y_1jagc_231.awsui_custom-vertical_gxp9y_1jagc_339:not(#\9):last-of-type > .awsui_rail_gxp9y_1jagc_339 > .awsui_connector_gxp9y_1jagc_181 {
   display: none;
 }

package/steps/styles.selectors.js

@@ -2,18 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "connector": "awsui_connector_gxp9y_1jjrl_181",
-  "connector-hidden": "awsui_connector-hidden_gxp9y_1jjrl_185",
-  "root": "awsui_root_gxp9y_1jjrl_189",
-  "list": "awsui_list_gxp9y_1jjrl_222",
-  "container": "awsui_container_gxp9y_1jjrl_227",
-  "header": "awsui_header_gxp9y_1jjrl_232",
-  "details": "awsui_details_gxp9y_1jjrl_238",
-  "custom": "awsui_custom_gxp9y_1jjrl_259",
-  "horizontal": "awsui_horizontal_gxp9y_1jjrl_263",
-  "horizontal-header": "awsui_horizontal-header_gxp9y_1jjrl_294",
-  "custom-vertical": "awsui_custom-vertical_gxp9y_1jjrl_308",
-  "rail": "awsui_rail_gxp9y_1jjrl_308",
-  "content": "awsui_content_gxp9y_1jjrl_326"
+  "connector": "awsui_connector_gxp9y_1jagc_181",
+  "connector-hidden": "awsui_connector-hidden_gxp9y_1jagc_185",
+  "header": "awsui_header_gxp9y_1jagc_189",
+  "root": "awsui_root_gxp9y_1jagc_193",
+  "list": "awsui_list_gxp9y_1jagc_226",
+  "container": "awsui_container_gxp9y_1jagc_231",
+  "annotation": "awsui_annotation_gxp9y_1jagc_236",
+  "step-layout": "awsui_step-layout_gxp9y_1jagc_241",
+  "details": "awsui_details_gxp9y_1jagc_247",
+  "custom": "awsui_custom_gxp9y_1jagc_253",
+  "horizontal": "awsui_horizontal_gxp9y_1jagc_257",
+  "content": "awsui_content_gxp9y_1jagc_293",
+  "vertical": "awsui_vertical_gxp9y_1jagc_307",
+  "connector-continuation": "awsui_connector-continuation_gxp9y_1jagc_321",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_1jagc_339",
+  "rail": "awsui_rail_gxp9y_1jagc_339",
+  "with-annotation": "awsui_with-annotation_gxp9y_1jagc_362"
 };
   

package/table/clear-sort.d.ts

@@ -0,0 +1,12 @@
+import { TableProps } from './interfaces';
+interface ClearSortButtonProps<T> {
+  multiColumnSort: TableProps.MultiColumnSort<T>;
+  i18nStrings?: TableProps.I18nStrings;
+  onClearSort?: () => void;
+}
+export declare function ClearSortButton<T>({
+  multiColumnSort,
+  i18nStrings,
+  onClearSort
+}: ClearSortButtonProps<T>): JSX.Element;
+export {};

package/table/clear-sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-sort.d.ts","sourceRoot":"","sources":["../../../src/table/clear-sort.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,oBAAoB,CAAC,CAAC;IAC9B,eAAe,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAcxG"}

package/table/clear-sort.js

@@ -0,0 +1,15 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalButton from '../button/internal';
+import { useInternalI18n } from '../i18n/context';
+import { fireNonCancelableEvent } from '../internal/events';
+export function ClearSortButton({ multiColumnSort, i18nStrings, onClearSort }) {
+    var _a;
+    const i18n = useInternalI18n('table');
+    return (React.createElement(InternalButton, { variant: "inline-link", formAction: "none", onClick: () => {
+            fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: [] });
+            onClearSort === null || onClearSort === void 0 ? void 0 : onClearSort();
+        } }, (_a = i18n('i18nStrings.clearSort', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.clearSort)) !== null && _a !== void 0 ? _a : ''));
+}
+//# sourceMappingURL=clear-sort.js.map

package/table/clear-sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-sort.js","sourceRoot":"","sources":["../../../src/table/clear-sort.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAS5D,MAAM,UAAU,eAAe,CAAI,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAA2B;;IACvG,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAC,aAAa,EACrB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE;YACZ,sBAAsB,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;YACzE,WAAW,aAAX,WAAW,uBAAX,WAAW,EAAI,CAAC;QAClB,CAAC,IAEA,MAAA,IAAI,CAAC,uBAAuB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,mCAAI,EAAE,CAC7C,CAClB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { TableProps } from './interfaces';\n\ninterface ClearSortButtonProps<T> {\n  multiColumnSort: TableProps.MultiColumnSort<T>;\n  i18nStrings?: TableProps.I18nStrings;\n  onClearSort?: () => void;\n}\n\nexport function ClearSortButton<T>({ multiColumnSort, i18nStrings, onClearSort }: ClearSortButtonProps<T>) {\n  const i18n = useInternalI18n('table');\n  return (\n    <InternalButton\n      variant=\"inline-link\"\n      formAction=\"none\"\n      onClick={() => {\n        fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: [] });\n        onClearSort?.();\n      }}\n    >\n      {i18n('i18nStrings.clearSort', i18nStrings?.clearSort) ?? ''}\n    </InternalButton>\n  );\n}\n"]}

package/table/header-cell/index.d.ts

@@ -7,6 +7,9 @@ export interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {
   sortingDisabled?: boolean;
   stuck?: boolean;
   onClick(detail: TableProps.SortingState<any>): void;
+  multiColumnSort?: TableProps.MultiColumnSort<ItemType>;
+  i18nStrings?: TableProps.I18nStrings;
+  ariaLabels?: TableProps.AriaLabels<ItemType>;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   isEditable?: boolean;
   columnId: PropertyKey;
@@ -51,5 +54,8 @@ export declare function TableHeaderCell<ItemType>({
   columnGroupId,
   isLastChildOfGroup,
   isLast,
-  tableVariant
+  tableVariant,
+  multiColumnSort,
+  i18nStrings,
+  ariaLabels
 }: TableHeaderCellProps<ItemType>): JSX.Element;

package/table/header-cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAOrD,MAAM,WAAW,oBAAoB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACzE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,YAAY,GACb,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAsJhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAU3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQrD,MAAM,WAAW,oBAAoB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACzE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7C,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,YAAY,EACZ,eAAe,EACf,WAAW,EACX,UAAU,GACX,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAuQhC"}

package/table/header-cell/index.js

@@ -7,23 +7,99 @@ import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { useInternalI18n } from '../../i18n/context';
 import InternalIcon from '../../icon/internal';
+import ScreenreaderOnly from '../../internal/components/screenreader-only';
+import { fireNonCancelableEvent } from '../../internal/events';
 import { KeyCode } from '../../internal/keycode';
+import { appendSort, getSortIndex, removeSort, replaceSort, setDirection, toggleDirection, } from '../multi-column-sort/utils';
 import { Divider, Resizer } from '../resizer';
+import { SortMenu } from './sort-menu';
 import { TableThElement } from './th-element';
 import { getSortingIconName, getSortingStatus, isSorted } from './utils';
 import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, }) {
+export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, stuck, sticky, hidden, stripedRows, onClick, colIndex, updateColumn, resizableColumns, resizableStyle, onResizeFinish, isEditable, columnId, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, isExpandable, hasDynamicContent, variant, colSpan, rowSpan, columnGroupId, isLastChildOfGroup, isLast, tableVariant, multiColumnSort, i18nStrings, ariaLabels, }) {
     var _a;
     const i18n = useInternalI18n('table');
     const sortable = !!column.sortingComparator || !!column.sortingField;
-    const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);
-    const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);
     const isGrouped = !!columnGroupId || (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) > 1;
-    const handleClick = () => onClick({
-        sortingColumn: column,
-        isDescending: sorted ? !sortingDescending : false,
-    });
+    // The sort menu only renders for a sortable, enabled column under multi-column sort.
+    const hasSortMenu = !!multiColumnSort && sortable && !sortingDisabled;
+    // Multi-column sort context — derived from `multiColumnSort.sortingColumns` when present.
+    const multiSortIndex = multiColumnSort ? getSortIndex(multiColumnSort.sortingColumns, column) : null;
+    const multiSortEntry = multiSortIndex !== null && multiColumnSort ? multiColumnSort.sortingColumns[multiSortIndex - 1] : undefined;
+    const inMultiSort = multiSortIndex !== null;
+    const isPrimaryMultiSort = multiSortIndex === 1;
+    // Priority badges are only meaningful when 2+ columns are sorted; with a single column, the position number adds no information.
+    const showPriorityBadge = !!multiColumnSort && multiColumnSort.sortingColumns.length >= 2 && multiSortIndex !== null;
+    // For multi-sort, derive sorted/descending from the matching entry; otherwise fall back to single-sort props.
+    const sorted = multiColumnSort ? inMultiSort : !!activeSortingColumn && isSorted(column, activeSortingColumn);
+    const descending = multiColumnSort ? !!(multiSortEntry === null || multiSortEntry === void 0 ? void 0 : multiSortEntry.isDescending) : !!sortingDescending;
+    const sortingStatus = getSortingStatus(sortable, sorted, descending, !!sortingDisabled);
+    // In multi-sort, only the primary column declares aria-sort (ARIA only allows one column sorted at a time).
+    const suppressAriaSort = !!multiColumnSort && inMultiSort && !isPrimaryMultiSort;
+    // Screen-reader-only text appended to a sorted column header. The visible header text supplies the column name;
+    // this adds the sort direction (only when `aria-sort` is suppressed, i.e. secondary columns) and the sort priority.
+    const sortDirectionLabel = descending
+        ? i18n('ariaLabels.sortDescending', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortDescending)
+        : i18n('ariaLabels.sortAscending', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortAscending);
+    const sortPriorityLabel = i18n('ariaLabels.sortPriority', ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortPriority, format => ({ priority }) => format({ priority }));
+    const sortAccessibleText = inMultiSort
+        ? [
+            suppressAriaSort ? sortDirectionLabel : undefined,
+            showPriorityBadge ? sortPriorityLabel === null || sortPriorityLabel === void 0 ? void 0 : sortPriorityLabel({ priority: multiSortIndex !== null && multiSortIndex !== void 0 ? multiSortIndex : 0 }) : undefined,
+        ]
+            .filter(Boolean)
+            .join(' ')
+        : '';
+    const handleClick = (shiftKey = false) => {
+        if (multiColumnSort) {
+            const current = multiColumnSort.sortingColumns;
+            let next;
+            if (shiftKey && !inMultiSort) {
+                next = appendSort(current, column, false);
+            }
+            else if (inMultiSort) {
+                next = toggleDirection(current, column);
+            }
+            else {
+                next = replaceSort(column, false);
+            }
+            fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });
+            return;
+        }
+        onClick({
+            sortingColumn: column,
+            isDescending: sorted ? !sortingDescending : false,
+        });
+    };
+    const handleSortMenuAction = (action) => {
+        // The sort menu is only rendered when `multiColumnSort` is set (see render below), so this guard
+        // exists purely to narrow the type for the accesses that follow and is unreachable at runtime.
+        /* istanbul ignore next */
+        if (!multiColumnSort) {
+            return;
+        }
+        const current = multiColumnSort.sortingColumns;
+        let next;
+        switch (action) {
+            case 'sort-ascending':
+                next = inMultiSort ? setDirection(current, column, false) : replaceSort(column, false);
+                break;
+            case 'sort-descending':
+                next = inMultiSort ? setDirection(current, column, true) : replaceSort(column, true);
+                break;
+            case 'add-to-sort-ascending':
+                next = appendSort(current, column, false);
+                break;
+            case 'add-to-sort-descending':
+                next = appendSort(current, column, true);
+                break;
+            case 'remove-from-sort':
+                next = removeSort(current, column);
+                break;
+        }
+        fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });
+    };
     // Elements with role="button" do not have the default behavior of <button>, where pressing
     // Enter or Space will trigger a click event. Therefore we need to add this ourselves.
     // The native <button> element cannot be used due to a misaligned implementation in Firefox:
@@ -31,7 +107,7 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
     const handleKeyPress = ({ nativeEvent: e }) => {
         if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {
             e.preventDefault();
-            handleClick();
+            handleClick(e.shiftKey);
         }
     };
     const headerId = useUniqueId('table-header-');
@@ -47,7 +123,7 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
     useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {
         updateColumn(columnId, entry.borderBoxWidth);
     });
-    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRefCombined, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, focusedComponent: focusedComponent, stuck: stuck, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colSpan, rowSpan: rowSpan, columnGroupId: columnGroupId, isLast: isLast, ...(sortingDisabled
+    return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRefCombined, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, suppressAriaSort: suppressAriaSort, focusedComponent: focusedComponent, stuck: stuck, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colSpan, rowSpan: rowSpan, columnGroupId: columnGroupId, isLast: isLast, ...(sortingDisabled
             ? {}
             : getAnalyticsMetadataAttribute({
                 action: 'sort',
@@ -55,32 +131,45 @@ export function TableHeaderCell({ tabIndex, column, activeSortingColumn, sorting
                     position: `${colIndex + 1}`,
                     columnId: column.id ? `${column.id}` : '',
                     label: `.${analyticsSelectors['header-cell-text']}`,
-                    sortingDescending: `${!sortingDescending}`,
+                    sortingDescending: `${!descending}`,
                 },
             })) },
-        React.createElement("div", { ref: clickableHeaderRef, "data-focus-id": `sorting-control-${String(columnId)}`, className: clsx(styles['header-cell-content'], {
-                [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,
-                [styles['header-cell-content-expandable']]: isExpandable,
-            }), "aria-label": column.ariaLabel
-                ? column.ariaLabel({
-                    sorted: sorted,
-                    descending: sorted && !!sortingDescending,
-                    disabled: !!sortingDisabled,
-                })
-                : undefined, ...(sortingStatus && !sortingDisabled
-                ? {
-                    onKeyPress: handleKeyPress,
-                    tabIndex: clickableHeaderTabIndex,
-                    role: 'button',
-                    onClick: handleClick,
-                }
-                : {}) },
-            React.createElement("div", { className: clsx(styles['header-cell-text'], analyticsSelectors['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId },
-                column.header,
-                isEditable ? (React.createElement("span", { className: styles['edit-icon'] },
-                    React.createElement(InternalIcon, { name: "edit", ariaLabel: i18n('columnDefinitions.editConfig.editIconAriaLabel', (_a = column.editConfig) === null || _a === void 0 ? void 0 : _a.editIconAriaLabel) }))) : null),
-            sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
-                React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
+        React.createElement("div", { className: clsx(styles['header-cell-main'], hasSortMenu && styles['header-cell-main-with-menu']) },
+            React.createElement("div", { ref: clickableHeaderRef, "data-focus-id": `sorting-control-${String(columnId)}`, className: clsx(styles['header-cell-content'], {
+                    [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,
+                    [styles['header-cell-content-expandable']]: isExpandable,
+                    [styles['header-cell-content-multi-sorted']]: showPriorityBadge,
+                    [styles['header-cell-content-with-menu']]: hasSortMenu,
+                }), "aria-label": column.ariaLabel
+                    ? column.ariaLabel({
+                        sorted: sorted,
+                        descending: sorted && descending,
+                        disabled: !!sortingDisabled,
+                        sortIndex: multiSortIndex !== null && multiSortIndex !== void 0 ? multiSortIndex : undefined,
+                    })
+                    : undefined, ...(sortingStatus && !sortingDisabled
+                    ? {
+                        onKeyPress: handleKeyPress,
+                        tabIndex: clickableHeaderTabIndex,
+                        role: 'button',
+                        onClick: event => handleClick(event.shiftKey),
+                        // Prevent the browser from extending the text selection on Shift+click.
+                        onMouseDown: (event) => {
+                            if (event.shiftKey) {
+                                event.preventDefault();
+                            }
+                        },
+                    }
+                    : {}) },
+                React.createElement("div", { className: clsx(styles['header-cell-text'], analyticsSelectors['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId },
+                    column.header,
+                    isEditable ? (React.createElement("span", { className: styles['edit-icon'] },
+                        React.createElement(InternalIcon, { name: "edit", ariaLabel: i18n('columnDefinitions.editConfig.editIconAriaLabel', (_a = column.editConfig) === null || _a === void 0 ? void 0 : _a.editIconAriaLabel) }))) : null),
+                sortAccessibleText && React.createElement(ScreenreaderOnly, null, sortAccessibleText),
+                sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
+                    showPriorityBadge && (React.createElement("span", { className: styles['sort-priority-badge'], "aria-hidden": "true" }, multiSortIndex)),
+                    React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
+            hasSortMenu && (React.createElement(SortMenu, { column: column, inSort: inMultiSort, isSortedAscending: inMultiSort && !descending, isSortedDescending: inMultiSort && descending, i18nStrings: i18nStrings, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.sortMenuTriggerLabel, ariaDescribedby: headerId, onAction: handleSortMenuAction }))),
         resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-control-${String(columnId)}`, showFocusRing: focusedComponent === `resize-control-${String(columnId)}`, onWidthUpdate: newWidth => updateColumn(columnId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth, roleDescription: i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription), 
             // TODO: Replace with this when strings are available
             // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}

package/table/header-cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { TableProps } from '../interfaces';\nimport { Divider, Resizer } from '../resizer';\nimport { BaseHeaderCellProps } from './common-props';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  stuck?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  isEditable?: boolean;\n  columnId: PropertyKey;\n  isExpandable?: boolean;\n  hasDynamicContent?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  columnGroupId?: string;\n  isLastChildOfGroup?: boolean;\n  isLast?: boolean;\n}\n\nexport function TableHeaderCell<ItemType>({\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  stuck,\n  sticky,\n  hidden,\n  stripedRows,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  isExpandable,\n  hasDynamicContent,\n  variant,\n  colSpan,\n  rowSpan,\n  columnGroupId,\n  isLastChildOfGroup,\n  isLast,\n  tableVariant,\n}: TableHeaderCellProps<ItemType>) {\n  const i18n = useInternalI18n('table');\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n  const isGrouped = !!columnGroupId || (rowSpan ?? 1) > 1;\n  const handleClick = () =>\n    onClick({\n      sortingColumn: column,\n      isDescending: sorted ? !sortingDescending : false,\n    });\n\n  // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n  // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n  // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n  const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n    if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const headerId = useUniqueId('table-header-');\n\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  const cellRefObject = useRef<HTMLElement>(null);\n  const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n  // Keep sticky and non-sticky headers in sync for dynamic cell\n  // content changes. This is only needed when:\n  // - Column has dynamic content\n  // - This is the non-sticky version of a sticky header (hidden === true)\n  // - Columns are not resizable\n  useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n    updateColumn(columnId, entry.borderBoxWidth);\n  });\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRefCombined}\n      sortingStatus={sortingStatus}\n      sortingDisabled={sortingDisabled}\n      focusedComponent={focusedComponent}\n      stuck={stuck}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={columnId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      colSpan={colSpan}\n      rowSpan={rowSpan}\n      columnGroupId={columnGroupId}\n      isLast={isLast}\n      {...(sortingDisabled\n        ? {}\n        : getAnalyticsMetadataAttribute({\n            action: 'sort',\n            detail: {\n              position: `${colIndex + 1}`,\n              columnId: column.id ? `${column.id}` : '',\n              label: `.${analyticsSelectors['header-cell-text']}`,\n              sortingDescending: `${!sortingDescending}`,\n            },\n          } as GeneratedAnalyticsMetadataTableSort))}\n    >\n      <div\n        ref={clickableHeaderRef}\n        data-focus-id={`sorting-control-${String(columnId)}`}\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n          [styles['header-cell-content-expandable']]: isExpandable,\n        })}\n        aria-label={\n          column.ariaLabel\n            ? column.ariaLabel({\n                sorted: sorted,\n                descending: sorted && !!sortingDescending,\n                disabled: !!sortingDisabled,\n              })\n            : undefined\n        }\n        {...(sortingStatus && !sortingDisabled\n          ? {\n              onKeyPress: handleKeyPress,\n              tabIndex: clickableHeaderTabIndex,\n              role: 'button',\n              onClick: handleClick,\n            }\n          : {})}\n      >\n        <div\n          className={clsx(\n            styles['header-cell-text'],\n            analyticsSelectors['header-cell-text'],\n            wrapLines && styles['header-cell-text-wrap']\n          )}\n          id={headerId}\n        >\n          {column.header}\n          {isEditable ? (\n            <span className={styles['edit-icon']}>\n              <InternalIcon\n                name=\"edit\"\n                ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n              />\n            </span>\n          ) : null}\n        </div>\n        {sortingStatus && (\n          <span className={styles['sorting-icon']}>\n            <InternalIcon name={getSortingIconName(sortingStatus)} />\n          </span>\n        )}\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-control-${String(columnId)}`}\n          showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n          onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n          // TODO: Replace with this when strings are available\n          // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n          isLast={isLast}\n          isGrouped={isGrouped}\n          dividerPosition={isLastChildOfGroup ? 'top' : undefined}\n        />\n      ) : (\n        <Divider\n          className={styles['resize-divider']}\n          position={isLastChildOfGroup ? 'top' : undefined}\n          isGrouped={isGrouped}\n        />\n      )}\n    </TableThElement>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/header-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalIcon from '../../icon/internal';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';\nimport { TableProps } from '../interfaces';\nimport {\n  appendSort,\n  getSortIndex,\n  removeSort,\n  replaceSort,\n  setDirection,\n  toggleDirection,\n} from '../multi-column-sort/utils';\nimport { Divider, Resizer } from '../resizer';\nimport { BaseHeaderCellProps } from './common-props';\nimport { SortMenu, SortMenuAction } from './sort-menu';\nimport { TableThElement } from './th-element';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableHeaderCellProps<ItemType> extends BaseHeaderCellProps {\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  stuck?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  multiColumnSort?: TableProps.MultiColumnSort<ItemType>;\n  i18nStrings?: TableProps.I18nStrings;\n  ariaLabels?: TableProps.AriaLabels<ItemType>;\n  updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n  isEditable?: boolean;\n  columnId: PropertyKey;\n  isExpandable?: boolean;\n  hasDynamicContent?: boolean;\n  colSpan?: number;\n  rowSpan?: number;\n  columnGroupId?: string;\n  isLastChildOfGroup?: boolean;\n  isLast?: boolean;\n}\n\nexport function TableHeaderCell<ItemType>({\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  stuck,\n  sticky,\n  hidden,\n  stripedRows,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  resizableStyle,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n  cellRef,\n  tableRole,\n  resizerRoleDescription,\n  resizerTooltipText,\n  isExpandable,\n  hasDynamicContent,\n  variant,\n  colSpan,\n  rowSpan,\n  columnGroupId,\n  isLastChildOfGroup,\n  isLast,\n  tableVariant,\n  multiColumnSort,\n  i18nStrings,\n  ariaLabels,\n}: TableHeaderCellProps<ItemType>) {\n  const i18n = useInternalI18n('table');\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const isGrouped = !!columnGroupId || (rowSpan ?? 1) > 1;\n  // The sort menu only renders for a sortable, enabled column under multi-column sort.\n  const hasSortMenu = !!multiColumnSort && sortable && !sortingDisabled;\n\n  // Multi-column sort context — derived from `multiColumnSort.sortingColumns` when present.\n  const multiSortIndex = multiColumnSort ? getSortIndex(multiColumnSort.sortingColumns, column) : null;\n  const multiSortEntry =\n    multiSortIndex !== null && multiColumnSort ? multiColumnSort.sortingColumns[multiSortIndex - 1] : undefined;\n  const inMultiSort = multiSortIndex !== null;\n  const isPrimaryMultiSort = multiSortIndex === 1;\n  // Priority badges are only meaningful when 2+ columns are sorted; with a single column, the position number adds no information.\n  const showPriorityBadge = !!multiColumnSort && multiColumnSort.sortingColumns.length >= 2 && multiSortIndex !== null;\n\n  // For multi-sort, derive sorted/descending from the matching entry; otherwise fall back to single-sort props.\n  const sorted = multiColumnSort ? inMultiSort : !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const descending = multiColumnSort ? !!multiSortEntry?.isDescending : !!sortingDescending;\n  const sortingStatus = getSortingStatus(sortable, sorted, descending, !!sortingDisabled);\n  // In multi-sort, only the primary column declares aria-sort (ARIA only allows one column sorted at a time).\n  const suppressAriaSort = !!multiColumnSort && inMultiSort && !isPrimaryMultiSort;\n\n  // Screen-reader-only text appended to a sorted column header. The visible header text supplies the column name;\n  // this adds the sort direction (only when `aria-sort` is suppressed, i.e. secondary columns) and the sort priority.\n  const sortDirectionLabel = descending\n    ? i18n('ariaLabels.sortDescending', ariaLabels?.sortDescending)\n    : i18n('ariaLabels.sortAscending', ariaLabels?.sortAscending);\n  const sortPriorityLabel = i18n(\n    'ariaLabels.sortPriority',\n    ariaLabels?.sortPriority,\n    format =>\n      ({ priority }) =>\n        format({ priority })\n  );\n  const sortAccessibleText = inMultiSort\n    ? [\n        suppressAriaSort ? sortDirectionLabel : undefined,\n        showPriorityBadge ? sortPriorityLabel?.({ priority: multiSortIndex ?? 0 }) : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ')\n    : '';\n  const handleClick = (shiftKey = false) => {\n    if (multiColumnSort) {\n      const current = multiColumnSort.sortingColumns;\n      let next: ReadonlyArray<TableProps.SortingState<ItemType>>;\n      if (shiftKey && !inMultiSort) {\n        next = appendSort(current, column, false);\n      } else if (inMultiSort) {\n        next = toggleDirection(current, column);\n      } else {\n        next = replaceSort(column, false);\n      }\n      fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });\n      return;\n    }\n    onClick({\n      sortingColumn: column,\n      isDescending: sorted ? !sortingDescending : false,\n    });\n  };\n\n  const handleSortMenuAction = (action: SortMenuAction) => {\n    // The sort menu is only rendered when `multiColumnSort` is set (see render below), so this guard\n    // exists purely to narrow the type for the accesses that follow and is unreachable at runtime.\n    /* istanbul ignore next */\n    if (!multiColumnSort) {\n      return;\n    }\n    const current = multiColumnSort.sortingColumns;\n    let next: ReadonlyArray<TableProps.SortingState<ItemType>>;\n    switch (action) {\n      case 'sort-ascending':\n        next = inMultiSort ? setDirection(current, column, false) : replaceSort(column, false);\n        break;\n      case 'sort-descending':\n        next = inMultiSort ? setDirection(current, column, true) : replaceSort(column, true);\n        break;\n      case 'add-to-sort-ascending':\n        next = appendSort(current, column, false);\n        break;\n      case 'add-to-sort-descending':\n        next = appendSort(current, column, true);\n        break;\n      case 'remove-from-sort':\n        next = removeSort(current, column);\n        break;\n    }\n    fireNonCancelableEvent(multiColumnSort.onChange, { sortingColumns: next });\n  };\n\n  // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n  // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n  // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n  const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n    if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n      e.preventDefault();\n      handleClick(e.shiftKey);\n    }\n  };\n\n  const headerId = useUniqueId('table-header-');\n\n  const clickableHeaderRef = useRef<HTMLDivElement>(null);\n  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });\n\n  const cellRefObject = useRef<HTMLElement>(null);\n  const cellRefCombined = useMergeRefs(cellRef, cellRefObject);\n\n  // Keep sticky and non-sticky headers in sync for dynamic cell\n  // content changes. This is only needed when:\n  // - Column has dynamic content\n  // - This is the non-sticky version of a sticky header (hidden === true)\n  // - Columns are not resizable\n  useResizeObserver(hasDynamicContent ? cellRefObject : () => null, entry => {\n    updateColumn(columnId, entry.borderBoxWidth);\n  });\n\n  return (\n    <TableThElement\n      resizableStyle={resizableStyle}\n      cellRef={cellRefCombined}\n      sortingStatus={sortingStatus}\n      sortingDisabled={sortingDisabled}\n      suppressAriaSort={suppressAriaSort}\n      focusedComponent={focusedComponent}\n      stuck={stuck}\n      sticky={sticky}\n      resizable={resizableColumns}\n      hidden={hidden}\n      stripedRows={stripedRows}\n      colIndex={colIndex}\n      columnId={columnId}\n      stickyState={stickyState}\n      tableRole={tableRole}\n      variant={variant}\n      tableVariant={tableVariant}\n      colSpan={colSpan}\n      rowSpan={rowSpan}\n      columnGroupId={columnGroupId}\n      isLast={isLast}\n      {...(sortingDisabled\n        ? {}\n        : getAnalyticsMetadataAttribute({\n            action: 'sort',\n            detail: {\n              position: `${colIndex + 1}`,\n              columnId: column.id ? `${column.id}` : '',\n              label: `.${analyticsSelectors['header-cell-text']}`,\n              sortingDescending: `${!descending}`,\n            },\n          } as GeneratedAnalyticsMetadataTableSort))}\n    >\n      <div className={clsx(styles['header-cell-main'], hasSortMenu && styles['header-cell-main-with-menu'])}>\n        <div\n          ref={clickableHeaderRef}\n          data-focus-id={`sorting-control-${String(columnId)}`}\n          className={clsx(styles['header-cell-content'], {\n            [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n            [styles['header-cell-content-expandable']]: isExpandable,\n            [styles['header-cell-content-multi-sorted']]: showPriorityBadge,\n            [styles['header-cell-content-with-menu']]: hasSortMenu,\n          })}\n          aria-label={\n            column.ariaLabel\n              ? column.ariaLabel({\n                  sorted: sorted,\n                  descending: sorted && descending,\n                  disabled: !!sortingDisabled,\n                  sortIndex: multiSortIndex ?? undefined,\n                })\n              : undefined\n          }\n          {...(sortingStatus && !sortingDisabled\n            ? {\n                onKeyPress: handleKeyPress,\n                tabIndex: clickableHeaderTabIndex,\n                role: 'button',\n                onClick: event => handleClick(event.shiftKey),\n                // Prevent the browser from extending the text selection on Shift+click.\n                onMouseDown: (event: React.MouseEvent) => {\n                  if (event.shiftKey) {\n                    event.preventDefault();\n                  }\n                },\n              }\n            : {})}\n        >\n          <div\n            className={clsx(\n              styles['header-cell-text'],\n              analyticsSelectors['header-cell-text'],\n              wrapLines && styles['header-cell-text-wrap']\n            )}\n            id={headerId}\n          >\n            {column.header}\n            {isEditable ? (\n              <span className={styles['edit-icon']}>\n                <InternalIcon\n                  name=\"edit\"\n                  ariaLabel={i18n(\n                    'columnDefinitions.editConfig.editIconAriaLabel',\n                    column.editConfig?.editIconAriaLabel\n                  )}\n                />\n              </span>\n            ) : null}\n          </div>\n          {sortAccessibleText && <ScreenreaderOnly>{sortAccessibleText}</ScreenreaderOnly>}\n          {sortingStatus && (\n            <span className={styles['sorting-icon']}>\n              {showPriorityBadge && (\n                <span className={styles['sort-priority-badge']} aria-hidden=\"true\">\n                  {multiSortIndex}\n                </span>\n              )}\n              <InternalIcon name={getSortingIconName(sortingStatus)} />\n            </span>\n          )}\n        </div>\n        {hasSortMenu && (\n          <SortMenu<ItemType>\n            column={column}\n            inSort={inMultiSort}\n            isSortedAscending={inMultiSort && !descending}\n            isSortedDescending={inMultiSort && descending}\n            i18nStrings={i18nStrings}\n            ariaLabel={ariaLabels?.sortMenuTriggerLabel}\n            ariaDescribedby={headerId}\n            onAction={handleSortMenuAction}\n          />\n        )}\n      </div>\n      {resizableColumns ? (\n        <Resizer\n          tabIndex={tabIndex}\n          focusId={`resize-control-${String(columnId)}`}\n          showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n          onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n          onWidthUpdateCommit={onResizeFinish}\n          ariaLabelledby={headerId}\n          minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n          // TODO: Replace with this when strings are available\n          // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}\n          tooltipText={resizerTooltipText}\n          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}\n          isLast={isLast}\n          isGrouped={isGrouped}\n          dividerPosition={isLastChildOfGroup ? 'top' : undefined}\n        />\n      ) : (\n        <Divider\n          className={styles['resize-divider']}\n          position={isLastChildOfGroup ? 'top' : undefined}\n          isGrouped={isGrouped}\n        />\n      )}\n    </TableThElement>\n  );\n}\n"]}