@cloudscape-design/components 3.0.278 → 3.0.279

package/table/body-cell/styles.scoped.css

@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_body-cell_c6tup_1p6xu_93:not(#\9) {
+.awsui_body-cell_c6tup_1eq7x_93:not(#\9) {
   box-sizing: border-box;
   padding: var(--space-scaled-xs-6859qs, 8px) var(--space-scaled-l-t03y3z, 20px) calc(
   var(--space-scaled-xs-6859qs, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
@@ -100,19 +100,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
   font-weight: inherit;
 }
-.awsui_body-cell_c6tup_1p6xu_93:not(#\9):not(.awsui_body-cell-wrap_c6tup_1p6xu_103) {
+.awsui_body-cell_c6tup_1eq7x_93:not(#\9):not(.awsui_body-cell-wrap_c6tup_1eq7x_103) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_body-cell_c6tup_1p6xu_93:not(#\9):first-child {
+.awsui_body-cell_c6tup_1eq7x_93:not(#\9):first-child {
   border-left: var(--border-item-width-qbbbsa, 2px) solid transparent;
 }
-.awsui_body-cell_c6tup_1p6xu_93:not(#\9):last-child {
+.awsui_body-cell_c6tup_1eq7x_93:not(#\9):last-child {
   border-right: var(--border-item-width-qbbbsa, 2px) solid transparent;
   padding-right: calc(var(--space-l-4vl6xu, 20px) - var(--border-item-width-qbbbsa, 2px));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):first-child {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):first-child {
   /*
     Striped rows requires additional left padding because the
     shaded background makes the child content appear too close
@@ -124,85 +124,135 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     that the placeholder border would consume.
     */
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1p6xu_127) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1eq7x_127) {
   padding-left: var(--space-xxxs-k2w98v, 2px);
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1p6xu_127):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130).awsui_body-cell-editable_c6tup_1p6xu_130:hover {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1eq7x_127):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130).awsui_body-cell-editable_c6tup_1eq7x_130:hover {
   padding-left: calc(var(--space-xxxs-k2w98v, 2px) + var(--border-divider-list-width-hacikr, 1px));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):first-child:first-child.awsui_has-striped-rows_c6tup_1p6xu_127 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):first-child:first-child.awsui_has-striped-rows_c6tup_1eq7x_127 {
   padding-left: var(--space-xxs-ynfts5, 4px);
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):first-child:not(.awsui_has-selection_c6tup_1p6xu_136):not(.awsui_body-cell-editable_c6tup_1p6xu_130) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):first-child:first-child.awsui_has-striped-rows-sticky-cell-pad-left_c6tup_1eq7x_136 {
+  padding-left: var(--space-table-horizontal-mj7h0h, 20px);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):first-child:not(.awsui_has-selection_c6tup_1eq7x_139):not(.awsui_body-cell-editable_c6tup_1eq7x_130) {
   border-left: none;
 }
-.awsui_body-cell_c6tup_1p6xu_93:not(#\9):first-child:not(.awsui_is-visual-refresh_c6tup_1p6xu_115) {
+.awsui_body-cell_c6tup_1eq7x_93:not(#\9):first-child:not(.awsui_is-visual-refresh_c6tup_1eq7x_115) {
   padding-left: calc(var(--space-l-4vl6xu, 20px) - var(--border-item-width-qbbbsa, 2px));
 }
-.awsui_body-cell-first-row_c6tup_1p6xu_142:not(#\9) {
+.awsui_body-cell-first-row_c6tup_1eq7x_145:not(#\9) {
   border-top: var(--border-item-width-qbbbsa, 2px) solid transparent;
 }
-.awsui_body-cell-last-row_c6tup_1p6xu_145:not(#\9):not(.awsui_body-cell-selected_c6tup_1p6xu_145):not(.awsui_has-footer_c6tup_1p6xu_145) {
+.awsui_body-cell-last-row_c6tup_1eq7x_148:not(#\9):not(.awsui_body-cell-selected_c6tup_1eq7x_148):not(.awsui_has-footer_c6tup_1eq7x_148) {
   border-bottom: var(--border-item-width-qbbbsa, 2px) solid transparent;
 }
-.awsui_body-cell-last-row_c6tup_1p6xu_145:not(#\9):not(.awsui_body-cell-selected_c6tup_1p6xu_145).awsui_has-footer_c6tup_1p6xu_145 {
+.awsui_body-cell-last-row_c6tup_1eq7x_148:not(#\9):not(.awsui_body-cell-selected_c6tup_1eq7x_148).awsui_has-footer_c6tup_1eq7x_148 {
   /*
   Add a bottom border to the body cells of the last row as a separator between the
   table and the footer
   */
   border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
 }
-.awsui_body-cell-shaded_c6tup_1p6xu_155:not(#\9) {
+.awsui_body-cell-shaded_c6tup_1eq7x_158:not(#\9) {
   background: var(--color-background-cell-shaded-26ubfj, #f8f8f8);
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145:not(#\9) {
+.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9) {
   background-color: var(--color-background-item-selected-ebt4bi, #f2f8fd);
   border-top: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
   border-bottom: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
   padding-bottom: var(--space-scaled-xs-6859qs, 8px);
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145:not(#\9):first-child {
+.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):first-child {
   border-left: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
   border-radius: var(--border-radius-item-u2ibpi, 8px) 0 0 var(--border-radius-item-u2ibpi, 8px);
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145:not(#\9):last-child {
+.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):last-child {
   border-right: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
   border-radius: 0 var(--border-radius-item-u2ibpi, 8px) var(--border-radius-item-u2ibpi, 8px) 0;
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145:not(#\9):not(:first-child) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175:not(#\9) {
+  position: sticky;
+  background: var(--color-background-container-content-i8i4a0, #ffffff);
+  z-index: 798;
+  transition-property: padding;
+  transition-duration: var(--motion-duration-transition-show-quick-w3nd9c, 90ms);
+  transition-timing-function: var(--motion-easing-sticky-yt83ho, cubic-bezier(1, 0, 0.83, 1));
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell-pad-left_c6tup_1eq7x_183:not(#\9):not(.awsui_has-selection_c6tup_1eq7x_139):not(.awsui_is-visual-refresh_c6tup_1eq7x_115.awsui_body-cell_c6tup_1eq7x_93:first-child.awsui_has-striped-rows_c6tup_1eq7x_127) {
+  padding-left: var(--space-table-horizontal-mj7h0h, 20px);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175.awsui_body-cell-shaded_c6tup_1eq7x_158:not(#\9) {
+  background: var(--color-background-cell-shaded-26ubfj, #f8f8f8);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9) {
+  background-color: var(--color-background-item-selected-ebt4bi, #f2f8fd);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):first-child {
+  box-shadow: 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
+  clip-path: inset(0 0 0 0);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):last-child {
+  box-shadow: 4px 0 0 0 var(--color-background-container-content-i8i4a0, #ffffff);
+  clip-path: inset(0 0 0 0);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):last-child.awsui_sticky-cell-last-right_c6tup_1eq7x_200 {
+  box-shadow: var(--shadow-sticky-column-last-s13kkz, -4px 0 20px 1px rgba(0, 28, 36, 0.1)), 8px 0 0 0 var(--color-background-container-content-i8i4a0, #ffffff);
+  clip-path: inset(0 0 0 -24px);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell-last-left_c6tup_1eq7x_204:not(#\9) {
+  box-shadow: var(--shadow-sticky-column-first-h2plme, 4px 0px 20px 1px rgba(0, 7, 22, 0.1));
+  clip-path: inset(0px -24px 0px 0px);
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell-last-right_c6tup_1eq7x_200:not(#\9) {
+  box-shadow: var(--shadow-sticky-column-last-s13kkz, -4px 0 20px 1px rgba(0, 28, 36, 0.1));
+  clip-path: inset(0 0 0 -24px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175:not(#\9), .awsui-mode-entering .awsui_body-cell_c6tup_1eq7x_93.awsui_sticky-cell_c6tup_1eq7x_175:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):not(:first-child) {
   padding-top: calc(
   var(--space-scaled-xs-6859qs, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
 );
 }
-.awsui_body-cell_c6tup_1p6xu_93:not(#\9):not(.awsui_body-cell-selected_c6tup_1p6xu_145).awsui_body-cell-next-selected_c6tup_1p6xu_177 {
+.awsui_body-cell_c6tup_1eq7x_93:not(#\9):not(.awsui_body-cell-selected_c6tup_1eq7x_148).awsui_body-cell-next-selected_c6tup_1eq7x_227 {
   border-bottom: 0;
   padding-bottom: calc(var(--space-scaled-xs-6859qs, 8px) + var(--border-divider-list-width-hacikr, 1px));
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145.awsui_body-cell-prev-selected_c6tup_1p6xu_181:not(#\9) {
+.awsui_body-cell-selected_c6tup_1eq7x_148.awsui_body-cell-prev-selected_c6tup_1eq7x_231:not(#\9) {
   padding-top: calc(
   var(--space-scaled-xs-6859qs, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
 );
   border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-item-placeholder-jgzhnb, #0972d3);
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145.awsui_body-cell-next-selected_c6tup_1p6xu_177:not(#\9) {
+.awsui_body-cell-selected_c6tup_1eq7x_148.awsui_body-cell-next-selected_c6tup_1eq7x_227:not(#\9) {
   border-bottom-width: var(--border-divider-list-width-hacikr, 1px);
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145.awsui_body-cell-next-selected_c6tup_1p6xu_177:not(#\9):first-child {
+.awsui_body-cell-selected_c6tup_1eq7x_148.awsui_body-cell-next-selected_c6tup_1eq7x_227:not(#\9):first-child {
   border-bottom-left-radius: 0;
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145.awsui_body-cell-next-selected_c6tup_1p6xu_177:not(#\9):last-child {
+.awsui_body-cell-selected_c6tup_1eq7x_148.awsui_body-cell-next-selected_c6tup_1eq7x_227:not(#\9):last-child {
   border-bottom-right-radius: 0;
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145.awsui_body-cell-prev-selected_c6tup_1p6xu_181:not(#\9):first-child {
+.awsui_body-cell-selected_c6tup_1eq7x_148.awsui_body-cell-prev-selected_c6tup_1eq7x_231:not(#\9):first-child {
   border-top-left-radius: 0;
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145.awsui_body-cell-prev-selected_c6tup_1p6xu_181:not(#\9):last-child {
+.awsui_body-cell-selected_c6tup_1eq7x_148.awsui_body-cell-prev-selected_c6tup_1eq7x_231:not(#\9):last-child {
   border-top-right-radius: 0;
 }
-.awsui_body-cell-selected_c6tup_1p6xu_145:not(#\9):not(.awsui_body-cell-prev-selected_c6tup_1p6xu_181) {
+.awsui_body-cell-selected_c6tup_1eq7x_148:not(#\9):not(.awsui_body-cell-prev-selected_c6tup_1eq7x_231) {
   padding-top: var(--space-scaled-xs-6859qs, 8px);
 }
-.awsui_body-cell-success_c6tup_1p6xu_205:not(#\9), .awsui_body-cell-editor_c6tup_1p6xu_205:not(#\9) {
+.awsui_body-cell-success_c6tup_1eq7x_255:not(#\9), .awsui_body-cell-editor_c6tup_1eq7x_255:not(#\9) {
   top: 0;
   right: 0;
   bottom: 0;
@@ -218,62 +268,68 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-right: calc(var(--space-xs-rsr2qu, 8px) + var(--space-xxs-ynfts5, 4px));
   color: var(--color-text-button-normal-default-u8647m, #0972d3);
 }
-.awsui_body-cell-success_c6tup_1p6xu_205:not(#\9):hover, .awsui_body-cell-editor_c6tup_1p6xu_205:not(#\9):hover {
+.awsui_body-cell-success_c6tup_1eq7x_255:not(#\9):hover, .awsui_body-cell-editor_c6tup_1eq7x_255:not(#\9):hover {
   color: var(--color-text-button-normal-hover-kxmvcc, #033160);
 }
-.awsui_body-cell-success_c6tup_1p6xu_205:not(#\9):active, .awsui_body-cell-editor_c6tup_1p6xu_205:not(#\9):active {
+.awsui_body-cell-success_c6tup_1eq7x_255:not(#\9):active, .awsui_body-cell-editor_c6tup_1eq7x_255:not(#\9):active {
   color: var(--color-text-button-normal-active-6obrzh, #033160);
 }
-.awsui_body-cell-success-form_c6tup_1p6xu_227:not(#\9), .awsui_body-cell-editor-form_c6tup_1p6xu_227:not(#\9) {
+.awsui_body-cell-success-form_c6tup_1eq7x_277:not(#\9), .awsui_body-cell-editor-form_c6tup_1eq7x_277:not(#\9) {
   margin: calc(-1 * var(--space-xs-rsr2qu, 8px)) calc(-1.5 * var(--space-xs-rsr2qu, 8px));
 }
-.awsui_is-visual-refresh_c6tup_1p6xu_115.awsui_body-cell_c6tup_1p6xu_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_1p6xu_127 > .awsui_body-cell-success-form_c6tup_1p6xu_227, .awsui_is-visual-refresh_c6tup_1p6xu_115.awsui_body-cell_c6tup_1p6xu_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_1p6xu_127 > .awsui_body-cell-editor-form_c6tup_1p6xu_227 {
+.awsui_is-visual-refresh_c6tup_1eq7x_115.awsui_body-cell_c6tup_1eq7x_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_1eq7x_127 > .awsui_body-cell-success-form_c6tup_1eq7x_277, .awsui_is-visual-refresh_c6tup_1eq7x_115.awsui_body-cell_c6tup_1eq7x_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_1eq7x_127 > .awsui_body-cell-editor-form_c6tup_1eq7x_277 {
   margin-left: calc(-1 * var(--space-xxs-ynfts5, 4px));
 }
-.awsui_is-visual-refresh_c6tup_1p6xu_115.awsui_body-cell_c6tup_1p6xu_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1p6xu_127) > .awsui_body-cell-success-form_c6tup_1p6xu_227, .awsui_is-visual-refresh_c6tup_1p6xu_115.awsui_body-cell_c6tup_1p6xu_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1p6xu_127) > .awsui_body-cell-editor-form_c6tup_1p6xu_227 {
+.awsui_is-visual-refresh_c6tup_1eq7x_115.awsui_body-cell_c6tup_1eq7x_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1eq7x_127) > .awsui_body-cell-success-form_c6tup_1eq7x_277, .awsui_is-visual-refresh_c6tup_1eq7x_115.awsui_body-cell_c6tup_1eq7x_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1eq7x_127) > .awsui_body-cell-editor-form_c6tup_1eq7x_277 {
   margin-left: calc(-1 * var(--space-xxxs-k2w98v, 2px));
 }
-.awsui_body-cell-success-row_c6tup_1p6xu_236:not(#\9), .awsui_body-cell-editor-row_c6tup_1p6xu_236:not(#\9) {
+.awsui_body-cell-success-row_c6tup_1eq7x_286:not(#\9), .awsui_body-cell-editor-row_c6tup_1eq7x_286:not(#\9) {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
   column-gap: var(--space-xxs-ynfts5, 4px);
 }
-.awsui_body-cell-success-row_c6tup_1p6xu_236 > :not(#\9):not(:last-child), .awsui_body-cell-editor-row_c6tup_1p6xu_236 > :not(#\9):not(:last-child) {
+.awsui_body-cell-success-row_c6tup_1eq7x_286 > :not(#\9):not(:last-child), .awsui_body-cell-editor-row_c6tup_1eq7x_286 > :not(#\9):not(:last-child) {
   flex-grow: 1;
 }
-.awsui_body-cell-success-controls_c6tup_1p6xu_246:not(#\9), .awsui_body-cell-editor-controls_c6tup_1p6xu_246:not(#\9) {
+.awsui_body-cell-success-controls_c6tup_1eq7x_296:not(#\9), .awsui_body-cell-editor-controls_c6tup_1eq7x_296:not(#\9) {
   flex-shrink: 0;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9) {
   position: relative;
   cursor: pointer;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130.awsui_body-cell-edit-active_c6tup_1p6xu_130:not(#\9) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130.awsui_sticky-cell_c6tup_1eq7x_175:not(#\9) {
+  position: sticky;
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130.awsui_body-cell-edit-active_c6tup_1eq7x_130:not(#\9) {
   overflow: visible;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130) > .awsui_body-cell-editor_c6tup_1p6xu_205 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130.awsui_body-cell-edit-active_c6tup_1eq7x_130.awsui_sticky-cell_c6tup_1eq7x_175:not(#\9) {
+  position: sticky;
+}
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130) > .awsui_body-cell-editor_c6tup_1eq7x_255 {
   opacity: 0;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130).awsui_body-cell-has-success_c6tup_1p6xu_259 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130).awsui_body-cell-has-success_c6tup_1eq7x_315 {
   padding-right: calc(var(--space-scaled-l-t03y3z, 20px) + var(--space-l-4vl6xu, 20px));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):focus-within {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):focus-within {
   padding-right: calc(var(--space-scaled-l-t03y3z, 20px) + var(--space-l-4vl6xu, 20px));
   position: relative;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):focus-within > .awsui_body-cell-editor_c6tup_1p6xu_205 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):focus-within > .awsui_body-cell-editor_c6tup_1eq7x_255 {
   opacity: 1;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):focus-within > .awsui_body-cell-success_c6tup_1p6xu_205 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):focus-within > .awsui_body-cell-success_c6tup_1eq7x_255 {
   opacity: 0;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):focus-within {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):focus-within {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)) - 1px);
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):focus-within::before {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):focus-within::before {
   content: " ";
   display: block;
   position: absolute;
@@ -284,7 +340,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover {
   position: relative;
   background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
   border: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-control-default-m3lmsh, #7d8998);
@@ -292,38 +348,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   right: calc(-1 * var(--border-divider-list-width-hacikr, 1px));
   padding-right: calc(var(--space-scaled-l-t03y3z, 20px) + var(--space-l-4vl6xu, 20px));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover > .awsui_body-cell-editor_c6tup_1p6xu_205 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover > .awsui_body-cell-editor_c6tup_1eq7x_255 {
   opacity: 1;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover > .awsui_body-cell-success_c6tup_1p6xu_205 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover > .awsui_body-cell-success_c6tup_1eq7x_255 {
   opacity: 0;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover:first-child {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover:first-child {
   left: 0;
   right: 0;
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover > .awsui_body-cell-editor_c6tup_1p6xu_205 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover > .awsui_body-cell-editor_c6tup_1eq7x_255 {
   padding-right: calc(var(--space-xs-rsr2qu, 8px) + var(--space-xxs-ynfts5, 4px) - (2 * var(--border-divider-list-width-hacikr, 1px)));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover.awsui_body-cell-last-row_c6tup_1p6xu_145.awsui_body-cell-selected_c6tup_1p6xu_145, .awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover.awsui_body-cell-next-selected_c6tup_1p6xu_177 {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover.awsui_body-cell-last-row_c6tup_1eq7x_148.awsui_body-cell-selected_c6tup_1eq7x_148, .awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover.awsui_body-cell-next-selected_c6tup_1eq7x_227 {
   padding-top: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px) / 2));
   padding-bottom: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px) / 2));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover.awsui_body-cell-last-row_c6tup_1p6xu_145:not(.awsui_body-cell-selected_c6tup_1p6xu_145) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover.awsui_body-cell-last-row_c6tup_1eq7x_148:not(.awsui_body-cell-selected_c6tup_1eq7x_148) {
   padding-top: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px)));
 }
-.awsui_body-cell_c6tup_1p6xu_93.awsui_body-cell-editable_c6tup_1p6xu_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover.awsui_body-cell-first-row_c6tup_1p6xu_142:not(.awsui_body-cell-selected_c6tup_1p6xu_145) {
+.awsui_body-cell_c6tup_1eq7x_93.awsui_body-cell-editable_c6tup_1eq7x_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover.awsui_body-cell-first-row_c6tup_1eq7x_145:not(.awsui_body-cell-selected_c6tup_1eq7x_148) {
   padding-top: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px)));
   padding-bottom: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px)));
 }
-.awsui_body-cell-editable_c6tup_1p6xu_130.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover:first-child {
+.awsui_body-cell-editable_c6tup_1eq7x_130.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover:first-child {
   border-top-left-radius: var(--border-radius-item-u2ibpi, 8px);
   border-bottom-left-radius: var(--border-radius-item-u2ibpi, 8px);
 }
-.awsui_body-cell-editable_c6tup_1p6xu_130.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover:last-child {
+.awsui_body-cell-editable_c6tup_1eq7x_130.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover:last-child {
   border-top-right-radius: var(--border-radius-item-u2ibpi, 8px);
   border-bottom-right-radius: var(--border-radius-item-u2ibpi, 8px);
 }
-.awsui_body-cell-editable_c6tup_1p6xu_130.awsui_is-visual-refresh_c6tup_1p6xu_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1p6xu_130):hover.awsui_body-cell-first-row_c6tup_1p6xu_142 > .awsui_body-cell-editor_c6tup_1p6xu_205 {
+.awsui_body-cell-editable_c6tup_1eq7x_130.awsui_is-visual-refresh_c6tup_1eq7x_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1eq7x_130):hover.awsui_body-cell-first-row_c6tup_1eq7x_145 > .awsui_body-cell-editor_c6tup_1eq7x_255 {
   padding-top: var(--border-divider-list-width-hacikr, 1px);
 }

package/table/body-cell/styles.selectors.js

@@ -2,28 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "body-cell": "awsui_body-cell_c6tup_1p6xu_93",
-  "body-cell-wrap": "awsui_body-cell-wrap_c6tup_1p6xu_103",
-  "is-visual-refresh": "awsui_is-visual-refresh_c6tup_1p6xu_115",
-  "has-striped-rows": "awsui_has-striped-rows_c6tup_1p6xu_127",
-  "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_1p6xu_130",
-  "body-cell-editable": "awsui_body-cell-editable_c6tup_1p6xu_130",
-  "has-selection": "awsui_has-selection_c6tup_1p6xu_136",
-  "body-cell-first-row": "awsui_body-cell-first-row_c6tup_1p6xu_142",
-  "body-cell-last-row": "awsui_body-cell-last-row_c6tup_1p6xu_145",
-  "body-cell-selected": "awsui_body-cell-selected_c6tup_1p6xu_145",
-  "has-footer": "awsui_has-footer_c6tup_1p6xu_145",
-  "body-cell-shaded": "awsui_body-cell-shaded_c6tup_1p6xu_155",
-  "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_1p6xu_177",
-  "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_1p6xu_181",
-  "body-cell-success": "awsui_body-cell-success_c6tup_1p6xu_205",
-  "body-cell-editor": "awsui_body-cell-editor_c6tup_1p6xu_205",
-  "body-cell-success-form": "awsui_body-cell-success-form_c6tup_1p6xu_227",
-  "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_1p6xu_227",
-  "body-cell-success-row": "awsui_body-cell-success-row_c6tup_1p6xu_236",
-  "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_1p6xu_236",
-  "body-cell-success-controls": "awsui_body-cell-success-controls_c6tup_1p6xu_246",
-  "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_1p6xu_246",
-  "body-cell-has-success": "awsui_body-cell-has-success_c6tup_1p6xu_259"
+  "body-cell": "awsui_body-cell_c6tup_1eq7x_93",
+  "body-cell-wrap": "awsui_body-cell-wrap_c6tup_1eq7x_103",
+  "is-visual-refresh": "awsui_is-visual-refresh_c6tup_1eq7x_115",
+  "has-striped-rows": "awsui_has-striped-rows_c6tup_1eq7x_127",
+  "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_1eq7x_130",
+  "body-cell-editable": "awsui_body-cell-editable_c6tup_1eq7x_130",
+  "has-striped-rows-sticky-cell-pad-left": "awsui_has-striped-rows-sticky-cell-pad-left_c6tup_1eq7x_136",
+  "has-selection": "awsui_has-selection_c6tup_1eq7x_139",
+  "body-cell-first-row": "awsui_body-cell-first-row_c6tup_1eq7x_145",
+  "body-cell-last-row": "awsui_body-cell-last-row_c6tup_1eq7x_148",
+  "body-cell-selected": "awsui_body-cell-selected_c6tup_1eq7x_148",
+  "has-footer": "awsui_has-footer_c6tup_1eq7x_148",
+  "body-cell-shaded": "awsui_body-cell-shaded_c6tup_1eq7x_158",
+  "sticky-cell": "awsui_sticky-cell_c6tup_1eq7x_175",
+  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_1eq7x_183",
+  "sticky-cell-last-right": "awsui_sticky-cell-last-right_c6tup_1eq7x_200",
+  "sticky-cell-last-left": "awsui_sticky-cell-last-left_c6tup_1eq7x_204",
+  "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_1eq7x_227",
+  "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_1eq7x_231",
+  "body-cell-success": "awsui_body-cell-success_c6tup_1eq7x_255",
+  "body-cell-editor": "awsui_body-cell-editor_c6tup_1eq7x_255",
+  "body-cell-success-form": "awsui_body-cell-success-form_c6tup_1eq7x_277",
+  "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_1eq7x_277",
+  "body-cell-success-row": "awsui_body-cell-success-row_c6tup_1eq7x_286",
+  "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_1eq7x_286",
+  "body-cell-success-controls": "awsui_body-cell-success-controls_c6tup_1eq7x_296",
+  "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_1eq7x_296",
+  "body-cell-has-success": "awsui_body-cell-has-success_c6tup_1eq7x_315"
 };
   

package/table/body-cell/td-element.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StickyColumnsModel } from '../use-sticky-columns';
 export interface TableTdElementProps {
     className?: string;
     style?: React.CSSProperties;
@@ -18,6 +19,8 @@ export interface TableTdElementProps {
     stripedRows?: boolean;
     hasSelection?: boolean;
     hasFooter?: boolean;
+    columnId: string;
+    stickyState: StickyColumnsModel;
     isVisualRefresh?: boolean;
 }
 export declare const TableTdElement: React.ForwardRefExoticComponent<TableTdElementProps & React.RefAttributes<HTMLTableCellElement>>;

package/table/body-cell/td-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"td-element.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,IAAI,CACrB,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC3F,OAAO,GAAG,WAAW,GAAG,SAAS,CAClC,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,kGA6D1B,CAAC"}
+{"version":3,"file":"td-element.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAuB,MAAM,uBAAuB,CAAC;AAGhF,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,IAAI,CACrB,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC3F,OAAO,GAAG,WAAW,GAAG,SAAS,CAClC,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,kGA6E1B,CAAC"}

package/table/body-cell/td-element.js

@@ -3,12 +3,26 @@
 import clsx from 'clsx';
 import React from 'react';
 import styles from './styles.css.js';
-export const TableTdElement = React.forwardRef(({ className, style, children, wrapLines, isRowHeader, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, nativeAttributes, onClick, onMouseEnter, onMouseLeave, isEvenRow, stripedRows, isVisualRefresh, hasSelection, hasFooter, }, ref) => {
+import { useStickyCellStyles } from '../use-sticky-columns';
+import { getStickyClassNames } from '../utils.js';
+export const TableTdElement = React.forwardRef(({ className, style, children, wrapLines, isRowHeader, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, nativeAttributes, onClick, onMouseEnter, onMouseLeave, isEvenRow, stripedRows, isVisualRefresh, hasSelection, hasFooter, columnId, stickyState, }, ref) => {
     let Element = 'td';
     if (isRowHeader) {
         Element = 'th';
         nativeAttributes = Object.assign(Object.assign({}, nativeAttributes), { scope: 'row' });
     }
-    return (React.createElement(Element, Object.assign({ style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref }, nativeAttributes), children));
+    const stickyStyles = useStickyCellStyles({
+        stickyColumns: stickyState,
+        columnId,
+        getClassName: props => getStickyClassNames(styles, props),
+    });
+    return (React.createElement(Element, Object.assign({ style: Object.assign(Object.assign({}, style), stickyStyles.style), className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer'], stickyStyles.className), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: node => {
+            if (node) {
+                stickyStyles.ref(node);
+                if (ref) {
+                    ref.current = node;
+                }
+            }
+        } }, nativeAttributes), children));
 });
 //# sourceMappingURL=td-element.js.map

package/table/body-cell/td-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"td-element.js","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AA2BrC,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EACE,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,GACV,EACD,GAAG,EACH,EAAE;IACF,IAAI,OAAO,GAAgB,IAAI,CAAC;IAChC,IAAI,WAAW,EAAE;QACf,OAAO,GAAG,IAAI,CAAC;QACf,gBAAgB,mCACX,gBAAgB,KACnB,KAAK,EAAE,KAAK,GACb,CAAC;KACH;IACD,OAAO,CACL,oBAAC,OAAO,kBACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAClC,EACD,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,IACJ,gBAAgB,GAEnB,QAAQ,CACD,CACX,CAAC;AACJ,CAAC,CACF,CAAC","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';\nimport styles from './styles.css.js';\n\nexport interface TableTdElementProps {\n  className?: string;\n  style?: React.CSSProperties;\n  wrapLines: boolean | undefined;\n  isRowHeader?: boolean;\n  isFirstRow: boolean;\n  isLastRow: boolean;\n  isSelected: boolean;\n  isNextSelected: boolean;\n  isPrevSelected: boolean;\n  nativeAttributes?: Omit<\n    React.TdHTMLAttributes<HTMLTableCellElement> | React.ThHTMLAttributes<HTMLTableCellElement>,\n    'style' | 'className' | 'onClick'\n  >;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  children?: React.ReactNode;\n  isEvenRow?: boolean;\n  stripedRows?: boolean;\n  hasSelection?: boolean;\n  hasFooter?: boolean;\n  isVisualRefresh?: boolean;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n  (\n    {\n      className,\n      style,\n      children,\n      wrapLines,\n      isRowHeader,\n      isFirstRow,\n      isLastRow,\n      isSelected,\n      isNextSelected,\n      isPrevSelected,\n      nativeAttributes,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      isEvenRow,\n      stripedRows,\n      isVisualRefresh,\n      hasSelection,\n      hasFooter,\n    },\n    ref\n  ) => {\n    let Element: 'th' | 'td' = 'td';\n    if (isRowHeader) {\n      Element = 'th';\n      nativeAttributes = {\n        ...nativeAttributes,\n        scope: 'row',\n      };\n    }\n    return (\n      <Element\n        style={style}\n        className={clsx(\n          className,\n          styles['body-cell'],\n          wrapLines && styles['body-cell-wrap'],\n          isFirstRow && styles['body-cell-first-row'],\n          isLastRow && styles['body-cell-last-row'],\n          isSelected && styles['body-cell-selected'],\n          isNextSelected && styles['body-cell-next-selected'],\n          isPrevSelected && styles['body-cell-prev-selected'],\n          !isEvenRow && stripedRows && styles['body-cell-shaded'],\n          stripedRows && styles['has-striped-rows'],\n          isVisualRefresh && styles['is-visual-refresh'],\n          hasSelection && styles['has-selection'],\n          hasFooter && styles['has-footer']\n        )}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        ref={ref}\n        {...nativeAttributes}\n      >\n        {children}\n      </Element>\n    );\n  }\n);\n"]}
+{"version":3,"file":"td-element.js","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAsB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA6BlD,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EACE,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,WAAW,GACZ,EACD,GAAG,EACH,EAAE;IACF,IAAI,OAAO,GAAgB,IAAI,CAAC;IAChC,IAAI,WAAW,EAAE;QACf,OAAO,GAAG,IAAI,CAAC;QACf,gBAAgB,mCACX,gBAAgB,KACnB,KAAK,EAAE,KAAK,GACb,CAAC;KACH;IAED,MAAM,YAAY,GAAG,mBAAmB,CAAC;QACvC,aAAa,EAAE,WAAW;QAC1B,QAAQ;QACR,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC;KAC1D,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,OAAO,kBACN,KAAK,kCAAO,KAAK,GAAK,YAAY,CAAC,KAAK,GACxC,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,YAAY,CAAC,SAAS,CACvB,EACD,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,IAAI,CAAC,EAAE;YACV,IAAI,IAAI,EAAE;gBACR,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBACvB,IAAI,GAAG,EAAE;oBACN,GAAoD,CAAC,OAAO,GAAG,IAAI,CAAC;iBACtE;aACF;QACH,CAAC,IACG,gBAAgB,GAEnB,QAAQ,CACD,CACX,CAAC;AACJ,CAAC,CACF,CAAC","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';\nimport styles from './styles.css.js';\nimport { StickyColumnsModel, useStickyCellStyles } from '../use-sticky-columns';\nimport { getStickyClassNames } from '../utils.js';\n\nexport interface TableTdElementProps {\n  className?: string;\n  style?: React.CSSProperties;\n  wrapLines: boolean | undefined;\n  isRowHeader?: boolean;\n  isFirstRow: boolean;\n  isLastRow: boolean;\n  isSelected: boolean;\n  isNextSelected: boolean;\n  isPrevSelected: boolean;\n  nativeAttributes?: Omit<\n    React.TdHTMLAttributes<HTMLTableCellElement> | React.ThHTMLAttributes<HTMLTableCellElement>,\n    'style' | 'className' | 'onClick'\n  >;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  children?: React.ReactNode;\n  isEvenRow?: boolean;\n  stripedRows?: boolean;\n  hasSelection?: boolean;\n  hasFooter?: boolean;\n  columnId: string;\n  stickyState: StickyColumnsModel;\n  isVisualRefresh?: boolean;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n  (\n    {\n      className,\n      style,\n      children,\n      wrapLines,\n      isRowHeader,\n      isFirstRow,\n      isLastRow,\n      isSelected,\n      isNextSelected,\n      isPrevSelected,\n      nativeAttributes,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      isEvenRow,\n      stripedRows,\n      isVisualRefresh,\n      hasSelection,\n      hasFooter,\n      columnId,\n      stickyState,\n    },\n    ref\n  ) => {\n    let Element: 'th' | 'td' = 'td';\n    if (isRowHeader) {\n      Element = 'th';\n      nativeAttributes = {\n        ...nativeAttributes,\n        scope: 'row',\n      };\n    }\n\n    const stickyStyles = useStickyCellStyles({\n      stickyColumns: stickyState,\n      columnId,\n      getClassName: props => getStickyClassNames(styles, props),\n    });\n    return (\n      <Element\n        style={{ ...style, ...stickyStyles.style }}\n        className={clsx(\n          className,\n          styles['body-cell'],\n          wrapLines && styles['body-cell-wrap'],\n          isFirstRow && styles['body-cell-first-row'],\n          isLastRow && styles['body-cell-last-row'],\n          isSelected && styles['body-cell-selected'],\n          isNextSelected && styles['body-cell-next-selected'],\n          isPrevSelected && styles['body-cell-prev-selected'],\n          !isEvenRow && stripedRows && styles['body-cell-shaded'],\n          stripedRows && styles['has-striped-rows'],\n          isVisualRefresh && styles['is-visual-refresh'],\n          hasSelection && styles['has-selection'],\n          hasFooter && styles['has-footer'],\n          stickyStyles.className\n        )}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        ref={node => {\n          if (node) {\n            stickyStyles.ref(node);\n            if (ref) {\n              (ref as React.MutableRefObject<HTMLTableCellElement>).current = node;\n            }\n          }\n        }}\n        {...nativeAttributes}\n      >\n        {children}\n      </Element>\n    );\n  }\n);\n"]}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TableProps } from '../interfaces';
 import { InteractiveComponent } from '../thead';
+import { StickyColumnsModel } from '../use-sticky-columns';
 interface TableHeaderCellProps<ItemType> {
     className?: string;
     style?: React.CSSProperties;
@@ -19,9 +20,11 @@ interface TableHeaderCellProps<ItemType> {
     onBlur?: () => void;
     resizableColumns?: boolean;
     isEditable?: boolean;
+    columnId: string;
+    stickyState: StickyColumnsModel;
     focusedComponent?: InteractiveComponent | null;
     onFocusedComponentChange?: (element: InteractiveComponent | null) => void;
 }
-export declare function TableHeaderCell<ItemType>({ className, style, tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, onFocusedComponentChange, hidden, onClick, colIndex, updateColumn, resizableColumns, onResizeFinish, isEditable, }: TableHeaderCellProps<ItemType>): JSX.Element;
+export declare function TableHeaderCell<ItemType>({ className, style, tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, onFocusedComponentChange, hidden, onClick, colIndex, updateColumn, resizableColumns, onResizeFinish, isEditable, columnId, stickyState, }: TableHeaderCellProps<ItemType>): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/header-cell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAK3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,UAAU,oBAAoB,CAAC,QAAQ;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eA4FhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/header-cell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAK3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAuB,MAAM,uBAAuB,CAAC;AAGhF,UAAU,oBAAoB,CAAC,QAAQ;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,kBAAkB,CAAC;IAEhC,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAuGhC"}

package/table/header-cell/index.js

@@ -8,7 +8,9 @@ import { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './u
 import styles from './styles.css.js';
 import { Resizer } from '../resizer';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
-export function TableHeaderCell({ className, style, tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, onFocusedComponentChange, hidden, onClick, colIndex, updateColumn, resizableColumns, onResizeFinish, isEditable, }) {
+import { useStickyCellStyles } from '../use-sticky-columns';
+import { getStickyClassNames } from '../utils';
+export function TableHeaderCell({ className, style, tabIndex, column, activeSortingColumn, sortingDescending, sortingDisabled, wrapLines, focusedComponent, onFocusedComponentChange, hidden, onClick, colIndex, updateColumn, resizableColumns, onResizeFinish, isEditable, columnId, stickyState, }) {
     var _a;
     const sortable = !!column.sortingComparator || !!column.sortingField;
     const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);
@@ -28,6 +30,11 @@ export function TableHeaderCell({ className, style, tabIndex, column, activeSort
         }
     };
     const headerId = useUniqueId('table-header-');
+    const stickyStyles = useStickyCellStyles({
+        stickyColumns: stickyState,
+        columnId,
+        getClassName: props => getStickyClassNames(styles, props),
+    });
     return (React.createElement("th", { className: clsx(className, {
             [styles['header-cell-resizable']]: !!resizableColumns,
             [styles['header-cell-sortable']]: sortingStatus,
@@ -36,7 +43,7 @@ export function TableHeaderCell({ className, style, tabIndex, column, activeSort
             [styles['header-cell-ascending']]: sortingStatus === 'ascending',
             [styles['header-cell-descending']]: sortingStatus === 'descending',
             [styles['header-cell-hidden']]: hidden,
-        }), "aria-sort": sortingStatus && getAriaSort(sortingStatus), style: style, scope: "col" },
+        }, stickyStyles.className), "aria-sort": sortingStatus && getAriaSort(sortingStatus), style: Object.assign(Object.assign({}, style), stickyStyles.style), scope: "col", ref: stickyStyles.ref },
         React.createElement("div", Object.assign({ className: clsx(styles['header-cell-content'], {
                 [styles['header-cell-fake-focus']]: (focusedComponent === null || focusedComponent === void 0 ? void 0 : focusedComponent.type) === 'column' && focusedComponent.col === colIndex,
             }), "aria-label": column.ariaLabel

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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 clsx from 'clsx';\nimport React from 'react';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { TableProps } from '../interfaces';\nimport { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './utils';\nimport styles from './styles.css.js';\nimport { Resizer } from '../resizer';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { InteractiveComponent } from '../thead';\n\ninterface TableHeaderCellProps<ItemType> {\n  className?: string;\n  style?: React.CSSProperties;\n  tabIndex: number;\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  wrapLines?: boolean;\n  hidden?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  onResizeFinish: () => void;\n  colIndex: number;\n  updateColumn: (colIndex: number, newWidth: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  resizableColumns?: boolean;\n  isEditable?: boolean;\n\n  focusedComponent?: InteractiveComponent | null;\n  onFocusedComponentChange?: (element: InteractiveComponent | null) => void;\n}\n\nexport function TableHeaderCell<ItemType>({\n  className,\n  style,\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  onFocusedComponentChange,\n  hidden,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  onResizeFinish,\n  isEditable,\n}: TableHeaderCellProps<ItemType>) {\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\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  return (\n    <th\n      className={clsx(className, {\n        [styles['header-cell-resizable']]: !!resizableColumns,\n        [styles['header-cell-sortable']]: sortingStatus,\n        [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',\n        [styles['header-cell-disabled']]: sortingDisabled,\n        [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n        [styles['header-cell-descending']]: sortingStatus === 'descending',\n        [styles['header-cell-hidden']]: hidden,\n      })}\n      aria-sort={sortingStatus && getAriaSort(sortingStatus)}\n      style={style}\n      scope=\"col\"\n    >\n      <div\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent?.type === 'column' && focusedComponent.col === colIndex,\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: tabIndex,\n              role: 'button',\n              onClick: handleClick,\n              onFocus: () => onFocusedComponentChange?.({ type: 'column', col: colIndex }),\n              onBlur: () => onFocusedComponentChange?.(null),\n            }\n          : {})}\n      >\n        <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>\n          {column.header}\n          {isEditable ? (\n            <span className={styles['edit-icon']} role=\"img\" aria-label={column.editConfig?.editIconAriaLabel}>\n              <InternalIcon name=\"edit\" />\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        <>\n          <Resizer\n            tabIndex={tabIndex}\n            showFocusRing={focusedComponent?.type === 'resizer' && focusedComponent.col === colIndex}\n            onDragMove={newWidth => updateColumn(colIndex, newWidth)}\n            onFinish={onResizeFinish}\n            ariaLabelledby={headerId}\n            onFocus={() => onFocusedComponentChange?.({ type: 'resizer', col: colIndex })}\n            onBlur={() => onFocusedComponentChange?.(null)}\n            minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          />\n        </>\n      )}\n    </th>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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 clsx from 'clsx';\nimport React from 'react';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { TableProps } from '../interfaces';\nimport { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './utils';\nimport styles from './styles.css.js';\nimport { Resizer } from '../resizer';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { InteractiveComponent } from '../thead';\nimport { StickyColumnsModel, useStickyCellStyles } from '../use-sticky-columns';\nimport { getStickyClassNames } from '../utils';\n\ninterface TableHeaderCellProps<ItemType> {\n  className?: string;\n  style?: React.CSSProperties;\n  tabIndex: number;\n  column: TableProps.ColumnDefinition<ItemType>;\n  activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n  sortingDescending?: boolean;\n  sortingDisabled?: boolean;\n  wrapLines?: boolean;\n  hidden?: boolean;\n  onClick(detail: TableProps.SortingState<any>): void;\n  onResizeFinish: () => void;\n  colIndex: number;\n  updateColumn: (colIndex: number, newWidth: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  resizableColumns?: boolean;\n  isEditable?: boolean;\n  columnId: string;\n  stickyState: StickyColumnsModel;\n\n  focusedComponent?: InteractiveComponent | null;\n  onFocusedComponentChange?: (element: InteractiveComponent | null) => void;\n}\n\nexport function TableHeaderCell<ItemType>({\n  className,\n  style,\n  tabIndex,\n  column,\n  activeSortingColumn,\n  sortingDescending,\n  sortingDisabled,\n  wrapLines,\n  focusedComponent,\n  onFocusedComponentChange,\n  hidden,\n  onClick,\n  colIndex,\n  updateColumn,\n  resizableColumns,\n  onResizeFinish,\n  isEditable,\n  columnId,\n  stickyState,\n}: TableHeaderCellProps<ItemType>) {\n  const sortable = !!column.sortingComparator || !!column.sortingField;\n  const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n  const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\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 stickyStyles = useStickyCellStyles({\n    stickyColumns: stickyState,\n    columnId,\n    getClassName: props => getStickyClassNames(styles, props),\n  });\n\n  return (\n    <th\n      className={clsx(\n        className,\n        {\n          [styles['header-cell-resizable']]: !!resizableColumns,\n          [styles['header-cell-sortable']]: sortingStatus,\n          [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',\n          [styles['header-cell-disabled']]: sortingDisabled,\n          [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n          [styles['header-cell-descending']]: sortingStatus === 'descending',\n          [styles['header-cell-hidden']]: hidden,\n        },\n        stickyStyles.className\n      )}\n      aria-sort={sortingStatus && getAriaSort(sortingStatus)}\n      style={{ ...style, ...stickyStyles.style }}\n      scope=\"col\"\n      ref={stickyStyles.ref}\n    >\n      <div\n        className={clsx(styles['header-cell-content'], {\n          [styles['header-cell-fake-focus']]: focusedComponent?.type === 'column' && focusedComponent.col === colIndex,\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: tabIndex,\n              role: 'button',\n              onClick: handleClick,\n              onFocus: () => onFocusedComponentChange?.({ type: 'column', col: colIndex }),\n              onBlur: () => onFocusedComponentChange?.(null),\n            }\n          : {})}\n      >\n        <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>\n          {column.header}\n          {isEditable ? (\n            <span className={styles['edit-icon']} role=\"img\" aria-label={column.editConfig?.editIconAriaLabel}>\n              <InternalIcon name=\"edit\" />\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        <>\n          <Resizer\n            tabIndex={tabIndex}\n            showFocusRing={focusedComponent?.type === 'resizer' && focusedComponent.col === colIndex}\n            onDragMove={newWidth => updateColumn(colIndex, newWidth)}\n            onFinish={onResizeFinish}\n            ariaLabelledby={headerId}\n            onFocus={() => onFocusedComponentChange?.({ type: 'resizer', col: colIndex })}\n            onBlur={() => onFocusedComponentChange?.(null)}\n            minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n          />\n        </>\n      )}\n    </th>\n  );\n}\n"]}