@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/tables/DataTable/components/DataTableCell.css

@@ -1,4 +1,4 @@
-._1ons7qu2-3-12-1 {
+._1ons7qu2-3-13-0 {
   border: 0;
   color: inherit;
   display: flex;
@@ -9,19 +9,19 @@
   background-color: transparent;
   box-sizing: border-box;
 }
-._1ons7qu2-3-12-1._14sp6az3-3-12-1 {
+._1ons7qu2-3-13-0._14sp6az3-3-13-0 {
   pointer-events: initial;
 }
-._1ons7qu2-3-12-1._14sp6az4-3-12-1 {
+._1ons7qu2-3-13-0._14sp6az4-3-13-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-button[data-trigger="useraction"] + ._1ons7qu2-3-12-1 {
+button[data-trigger="useraction"] + ._1ons7qu2-3-13-0 {
   cursor: pointer;
 }
-button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
+button[data-trigger="useraction"]:hover + ._1ons7qu2-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-[data-columntype="gantt"]._1ons7qu2-3-12-1:not(:first-child)::before, [data-columntype="gantt"] + ._1ons7qu2-3-12-1::before {
+[data-columntype="gantt"]._1ons7qu2-3-13-0:not(:first-child)::before, [data-columntype="gantt"] + ._1ons7qu2-3-13-0::before {
   content: "";
   display: block;
   position: absolute;
@@ -31,32 +31,32 @@ button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
   bottom: var(--dt-spacings-size-0, 0);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-[data-columntype="gantt"]._1ons7qu2-3-12-1:not(._14sp6az6-3-12-1 ._1ons7qu2-3-12-1) {
+[data-columntype="gantt"]._1ons7qu2-3-13-0:not(._14sp6az6-3-13-0 ._1ons7qu2-3-13-0) {
   overflow: visible;
 }
-._15silbj0-3-12-1 ~ ._1ons7qu2-3-12-1:hover {
+._15silbj0-3-13-0 ~ ._1ons7qu2-3-13-0:hover {
   cursor: pointer;
 }
-._1ons7qu2-3-12-1[data-columntype='sparkline'] {
+._1ons7qu2-3-13-0[data-columntype='sparkline'] {
   align-items: stretch;
 }
-._1ons7qu3-3-12-1 {
+._1ons7qu3-3-13-0 {
   width: fit-content;
 }
-._1ons7qu4-3-12-1 {
+._1ons7qu4-3-13-0 {
   white-space: normal;
   text-overflow: initial;
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._1ons7qu5-3-12-1 {
+._1ons7qu5-3-13-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
   min-width: 0;
 }
-._1ons7qu6-3-12-1 {
+._1ons7qu6-3-13-0 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
@@ -64,7 +64,7 @@ button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: var(--dt-typography-text-base-default-text-transform, none);
 }
-._1ons7qu7-3-12-1 {
+._1ons7qu7-3-13-0 {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   font-weight: var(--dt-typography-code-base-default-weight, 400);
@@ -72,52 +72,52 @@ button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
   text-decoration: var(--dt-typography-code-base-default-text-decoration, none);
   text-transform: var(--dt-typography-code-base-default-text-transform, none);
 }
-._1ons7qu9-3-12-1 {
+._1ons7qu9-3-13-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._1ons7qua-3-12-1 {
+._1ons7qua-3-13-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._1jrjqrd1-3-12-1 ._1ons7qua-3-12-1:first-child {
+._1jrjqrd1-3-13-0 ._1ons7qua-3-13-0:first-child {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._1ons7qua-3-12-1[data-columntype='sparkline'] {
+._1ons7qua-3-13-0[data-columntype='sparkline'] {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._1ons7qub-3-12-1 {
+._1ons7qub-3-13-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1jrjqrd1-3-12-1 ._1ons7qub-3-12-1:first-child {
+._1jrjqrd1-3-13-0 ._1ons7qub-3-13-0:first-child {
   padding-left: calc(var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-4, 4px));
 }
-._1ons7qub-3-12-1[data-columntype='sparkline'] {
+._1ons7qub-3-13-0[data-columntype='sparkline'] {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
 }
-._1ons7quc-3-12-1 {
+._1ons7quc-3-13-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._1jrjqrd1-3-12-1 ._1ons7quc-3-12-1:first-child {
+._1jrjqrd1-3-13-0 ._1ons7quc-3-13-0:first-child {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._1ons7quc-3-12-1[data-columntype='sparkline'] {
+._1ons7quc-3-13-0[data-columntype='sparkline'] {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1ons7qud-3-12-1:where(:not(:first-child,._14sp6az3-3-12-1))::before {
+._1ons7qud-3-13-0:where(:not(:first-child,._14sp6az3-3-13-0))::before {
   content: "";
   display: block;
   position: absolute;
@@ -128,15 +128,15 @@ button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
   max-width: 100%;
 }
-._1ons7qug-3-12-1:where(:not(._1ons7qug-3-12-1 + ._1ons7qug-3-12-1, ._1jrjqrd1-3-12-1))::before {
+._1ons7qug-3-13-0:where(:not(._1ons7qug-3-13-0 + ._1ons7qug-3-13-0, ._1jrjqrd1-3-13-0))::before {
   content: unset;
 }
-._1ons7quh-3-12-1 {
+._1ons7quh-3-13-0 {
   position: sticky;
   z-index: 2;
-  left: var(--resizing-leftPosition, var(--_1ons7qu0-3-12-1));
+  left: var(--resizing-leftPosition, var(--_1ons7qu0-3-13-0));
 }
-._1ons7quh-3-12-1:where(:not(:has(~ ._1ons7quh-3-12-1)))::after {
+._1ons7quh-3-13-0:where(:not(:has(~ ._1ons7quh-3-13-0)))::after {
   content: "";
   display: block;
   position: absolute;
@@ -147,73 +147,73 @@ button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
   max-width: 100%;
   right: 0;
 }
-._1y5fzv3-3-12-1._1y5fzv4-3-12-1 ._1ons7quh-3-12-1 {
+._1y5fzv3-3-13-0._1y5fzv4-3-13-0 ._1ons7quh-3-13-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1y5fzv3-3-12-1._1y5fzv5-3-12-1 ._1ons7quh-3-12-1 {
+._1y5fzv3-3-13-0._1y5fzv5-3-13-0 ._1ons7quh-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._15silbj0-3-12-1:hover > ._1ons7quh-3-12-1:where(:not(:has(~ ._1ons7quh-3-12-1)))::after,
-          ._15silbj4-3-12-1 > ._1ons7quh-3-12-1:where(:not(:has(~ ._1ons7quh-3-12-1)))::after,
-          ._15silbj1-3-12-1 > ._1ons7quh-3-12-1:where(:not(:has(~ ._1ons7quh-3-12-1)))::after {
+._15silbj0-3-13-0:hover > ._1ons7quh-3-13-0:where(:not(:has(~ ._1ons7quh-3-13-0)))::after,
+          ._15silbj4-3-13-0 > ._1ons7quh-3-13-0:where(:not(:has(~ ._1ons7quh-3-13-0)))::after,
+          ._15silbj1-3-13-0 > ._1ons7quh-3-13-0:where(:not(:has(~ ._1ons7quh-3-13-0)))::after {
   top: var(--dt-borders-width-default, 1px);
   bottom: var(--dt-borders-width-default, 1px);
 }
-._15silbj3-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1._1ons7quh-3-12-1:where(:not(:has(~ ._1ons7quh-3-12-1)))::after {
+._15silbj3-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0._1ons7quh-3-13-0:where(:not(:has(~ ._1ons7quh-3-13-0)))::after {
   top: var(--dt-borders-width-emphasized, 2px);
   bottom: var(--dt-borders-width-emphasized, 2px);
 }
-:is(._ytdpswb-3-12-1, ._ytdpswd-3-12-1) ._15silbj7-3-12-1._14sp6az6-3-12-1 > ._1ons7quh-3-12-1:first-child {
+:is(._ytdpswb-3-13-0, ._ytdpswd-3-13-0) ._15silbj7-3-13-0._14sp6az6-3-13-0 > ._1ons7quh-3-13-0:first-child {
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._15silbj0-3-12-1:hover > ._1ons7quh-3-12-1._1ons7quh-3-12-1, ._15silbj4-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1 {
+._15silbj0-3-13-0:hover > ._1ons7quh-3-13-0._1ons7quh-3-13-0, ._15silbj4-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj0-3-12-1:hover > ._1ons7quh-3-12-1._1ons7quh-3-12-1:first-child, ._15silbj4-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:first-child {
+._15silbj0-3-13-0:hover > ._1ons7quh-3-13-0._1ons7quh-3-13-0:first-child, ._15silbj4-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-default, 1px) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._15silbj0-3-12-1:hover > ._1ons7quh-3-12-1._1ons7quh-3-12-1:last-child, ._15silbj4-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:last-child {
+._15silbj0-3-13-0:hover > ._1ons7quh-3-13-0._1ons7quh-3-13-0:last-child, ._15silbj4-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-default, 1px) * -1) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._15silbj1-3-12-1 > ._1ons7quh-3-12-1:first-child {
+._15silbj1-3-13-0 > ._1ons7quh-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-default, 1px) 0 0 0 var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-12-1 > ._1ons7quh-3-12-1:last-child {
+._15silbj1-3-13-0 > ._1ons7quh-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-default, 1px) * -1) 0 0 0 var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-12-1:hover > ._1ons7quh-3-12-1._1ons7quh-3-12-1, ._15silbj1-3-12-1._15silbj4-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1 {
+._15silbj1-3-13-0:hover > ._1ons7quh-3-13-0._1ons7quh-3-13-0, ._15silbj1-3-13-0._15silbj4-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj1-3-12-1:hover > ._1ons7quh-3-12-1._1ons7quh-3-12-1:first-child, ._15silbj1-3-12-1._15silbj4-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:first-child {
+._15silbj1-3-13-0:hover > ._1ons7quh-3-13-0._1ons7quh-3-13-0:first-child, ._15silbj1-3-13-0._15silbj4-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-default, 1px) 0 0 0 var(--dt-colors-border-primary-accent-hover, #3431b3);
 }
-._15silbj1-3-12-1:hover > ._1ons7quh-3-12-1._1ons7quh-3-12-1:last-child, ._15silbj1-3-12-1._15silbj4-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:last-child {
+._15silbj1-3-13-0:hover > ._1ons7quh-3-13-0._1ons7quh-3-13-0:last-child, ._15silbj1-3-13-0._15silbj4-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-default, 1px) * -1) 0 0 0 var(--dt-colors-border-primary-accent-hover, #3431b3);
 }
-._15silbj3-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1 {
+._15silbj3-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj3-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:first-child {
+._15silbj3-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-emphasized, 2px) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d), inset calc(var(--dt-borders-width-emphasized, 2px) + 1px) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15silbj3-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:last-child {
+._15silbj3-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-emphasized, 2px) * -1) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d), inset calc((var(--dt-borders-width-emphasized, 2px) + 1px) * -1) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15silbj3-3-12-1._15silbj1-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1 {
+._15silbj3-3-13-0._15silbj1-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj3-3-12-1._15silbj1-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:first-child {
+._15silbj3-3-13-0._15silbj1-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-emphasized, 2px) 0 0 0 var(--dt-colors-border-primary-accent, #464cce), inset calc(var(--dt-borders-width-emphasized, 2px) + 1px) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15silbj3-3-12-1._15silbj1-3-12-1 > ._1ons7quh-3-12-1._1ons7quh-3-12-1:last-child {
+._15silbj3-3-13-0._15silbj1-3-13-0 > ._1ons7quh-3-13-0._1ons7quh-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-emphasized, 2px) * -1) 0 0 0 var(--dt-colors-border-primary-accent, #464cce), inset calc((var(--dt-borders-width-emphasized, 2px) + 1px) * -1) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7qui-3-12-1 {
+._1ons7qui-3-13-0 {
   position: sticky;
   z-index: 3;
-  right: var(--resizing-rightPosition, var(--_1ons7qu1-3-12-1));
+  right: var(--resizing-rightPosition, var(--_1ons7qu1-3-13-0));
 }
-._1ons7qui-3-12-1:where(:not(._1ons7qui-3-12-1 + ._1ons7qui-3-12-1))::before {
+._1ons7qui-3-13-0:where(:not(._1ons7qui-3-13-0 + ._1ons7qui-3-13-0))::before {
   content: "";
   display: block;
   position: absolute;
@@ -224,103 +224,103 @@ button[data-trigger="useraction"]:hover + ._1ons7qu2-3-12-1 {
   max-width: 100%;
   left: 0;
 }
-._1y5fzv3-3-12-1._1y5fzv4-3-12-1 ._1ons7qui-3-12-1 {
+._1y5fzv3-3-13-0._1y5fzv4-3-13-0 ._1ons7qui-3-13-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1y5fzv3-3-12-1._1y5fzv5-3-12-1 ._1ons7qui-3-12-1 {
+._1y5fzv3-3-13-0._1y5fzv5-3-13-0 ._1ons7qui-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._15silbj0-3-12-1:hover > ._1ons7qui-3-12-1:where(:not(._1ons7qui-3-12-1 + ._1ons7qui-3-12-1))::before,
-          ._15silbj4-3-12-1 > ._1ons7qui-3-12-1:where(:not(._1ons7qui-3-12-1 + ._1ons7qui-3-12-1))::before,
-          ._15silbj1-3-12-1 > ._1ons7qui-3-12-1:where(:not(._1ons7qui-3-12-1 + ._1ons7qui-3-12-1))::before {
+._15silbj0-3-13-0:hover > ._1ons7qui-3-13-0:where(:not(._1ons7qui-3-13-0 + ._1ons7qui-3-13-0))::before,
+          ._15silbj4-3-13-0 > ._1ons7qui-3-13-0:where(:not(._1ons7qui-3-13-0 + ._1ons7qui-3-13-0))::before,
+          ._15silbj1-3-13-0 > ._1ons7qui-3-13-0:where(:not(._1ons7qui-3-13-0 + ._1ons7qui-3-13-0))::before {
   top: var(--dt-borders-width-default, 1px);
   bottom: var(--dt-borders-width-default, 1px);
 }
-._15silbj3-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1._1ons7qui-3-12-1:where(:not(._1ons7qui-3-12-1 + ._1ons7qui-3-12-1))::before {
+._15silbj3-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0._1ons7qui-3-13-0:where(:not(._1ons7qui-3-13-0 + ._1ons7qui-3-13-0))::before {
   top: var(--dt-borders-width-emphasized, 2px);
   bottom: var(--dt-borders-width-emphasized, 2px);
 }
-._ytdpswb-3-12-1 ._15silbj7-3-12-1._14sp6az6-3-12-1 > ._1ons7qui-3-12-1:last-child {
+._ytdpswb-3-13-0 ._15silbj7-3-13-0._14sp6az6-3-13-0 > ._1ons7qui-3-13-0:last-child {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._15silbj0-3-12-1:hover > ._1ons7qui-3-12-1._1ons7qui-3-12-1, ._15silbj4-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1 {
+._15silbj0-3-13-0:hover > ._1ons7qui-3-13-0._1ons7qui-3-13-0, ._15silbj4-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj0-3-12-1:hover > ._1ons7qui-3-12-1._1ons7qui-3-12-1:first-child, ._15silbj4-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:first-child {
+._15silbj0-3-13-0:hover > ._1ons7qui-3-13-0._1ons7qui-3-13-0:first-child, ._15silbj4-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-default, 1px) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._15silbj0-3-12-1:hover > ._1ons7qui-3-12-1._1ons7qui-3-12-1:last-child, ._15silbj4-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:last-child {
+._15silbj0-3-13-0:hover > ._1ons7qui-3-13-0._1ons7qui-3-13-0:last-child, ._15silbj4-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-default, 1px) * -1) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._15silbj1-3-12-1 > ._1ons7qui-3-12-1:first-child {
+._15silbj1-3-13-0 > ._1ons7qui-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-default, 1px) 0 0 0 var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-12-1 > ._1ons7qui-3-12-1:last-child {
+._15silbj1-3-13-0 > ._1ons7qui-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-default, 1px) * -1) 0 0 0 var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-12-1:hover > ._1ons7qui-3-12-1._1ons7qui-3-12-1, ._15silbj1-3-12-1._15silbj4-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1 {
+._15silbj1-3-13-0:hover > ._1ons7qui-3-13-0._1ons7qui-3-13-0, ._15silbj1-3-13-0._15silbj4-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj1-3-12-1:hover > ._1ons7qui-3-12-1._1ons7qui-3-12-1:first-child, ._15silbj1-3-12-1._15silbj4-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:first-child {
+._15silbj1-3-13-0:hover > ._1ons7qui-3-13-0._1ons7qui-3-13-0:first-child, ._15silbj1-3-13-0._15silbj4-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-default, 1px) 0 0 0 var(--dt-colors-border-primary-accent-hover, #3431b3);
 }
-._15silbj1-3-12-1:hover > ._1ons7qui-3-12-1._1ons7qui-3-12-1:last-child, ._15silbj1-3-12-1._15silbj4-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:last-child {
+._15silbj1-3-13-0:hover > ._1ons7qui-3-13-0._1ons7qui-3-13-0:last-child, ._15silbj1-3-13-0._15silbj4-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-default, 1px) * -1) 0 0 0 var(--dt-colors-border-primary-accent-hover, #3431b3);
 }
-._15silbj3-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1 {
+._15silbj3-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj3-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:first-child {
+._15silbj3-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-emphasized, 2px) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d), inset calc(var(--dt-borders-width-emphasized, 2px) + 1px) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15silbj3-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:last-child {
+._15silbj3-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-emphasized, 2px) * -1) 0 0 0 var(--dt-colors-border-neutral-accent, #595a7d), inset calc((var(--dt-borders-width-emphasized, 2px) + 1px) * -1) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15silbj3-3-12-1._15silbj1-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1 {
+._15silbj3-3-13-0._15silbj1-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj3-3-12-1._15silbj1-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:first-child {
+._15silbj3-3-13-0._15silbj1-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:first-child {
   box-shadow: inset var(--dt-borders-width-emphasized, 2px) 0 0 0 var(--dt-colors-border-primary-accent, #464cce), inset calc(var(--dt-borders-width-emphasized, 2px) + 1px) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15silbj3-3-12-1._15silbj1-3-12-1 > ._1ons7qui-3-12-1._1ons7qui-3-12-1:last-child {
+._15silbj3-3-13-0._15silbj1-3-13-0 > ._1ons7qui-3-13-0._1ons7qui-3-13-0:last-child {
   box-shadow: inset calc(var(--dt-borders-width-emphasized, 2px) * -1) 0 0 0 var(--dt-colors-border-primary-accent, #464cce), inset calc((var(--dt-borders-width-emphasized, 2px) + 1px) * -1) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7quk-3-12-1 {
+._1ons7quk-3-13-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ons7qul-3-12-1 {
+._1ons7qul-3-13-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1ons7qum-3-12-1 {
+._1ons7qum-3-13-0 {
   width: 100%;
 }
-._1ons7qun-3-12-1 {
+._1ons7qun-3-13-0 {
   white-space: normal;
   text-overflow: initial;
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._1ons7quo-3-12-1 {
+._1ons7quo-3-13-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
   min-width: 0;
 }
-._1ons7qup-3-12-1 {
+._1ons7qup-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-body:not([data-scroll-locked], ._17437gx0-3-12-1) ._1ons7qu2-3-12-1 button, body:not([data-scroll-locked], ._17437gx0-3-12-1) ._1ons7qu2-3-12-1 a, body:not([data-scroll-locked], ._17437gx0-3-12-1) ._1ons7qu2-3-12-1 [tabindex="0"], body:not([data-scroll-locked], ._17437gx0-3-12-1) ._1ons7qu2-3-12-1 input, body:not([data-scroll-locked], ._17437gx0-3-12-1) ._1ons7qu2-3-12-1 label {
+body:not([data-scroll-locked], ._17437gx0-3-13-0) ._1ons7qu2-3-13-0 button, body:not([data-scroll-locked], ._17437gx0-3-13-0) ._1ons7qu2-3-13-0 a, body:not([data-scroll-locked], ._17437gx0-3-13-0) ._1ons7qu2-3-13-0 [tabindex="0"], body:not([data-scroll-locked], ._17437gx0-3-13-0) ._1ons7qu2-3-13-0 input, body:not([data-scroll-locked], ._17437gx0-3-13-0) ._1ons7qu2-3-13-0 label {
   pointer-events: auto;
 }
-._1ons7qu2-3-12-1._1ons7qu5-3-12-1 .prism-code.language-log {
+._1ons7qu2-3-13-0._1ons7qu5-3-13-0 .prism-code.language-log {
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 @media (pointer: coarse) {
-  ._1ons7qu2-3-12-1 {
+  ._1ons7qu2-3-13-0 {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;

package/esm/tables/DataTable/components/DataTableCell.js

@@ -6,16 +6,18 @@ import {
   useContext,
   useState
 } from "react";
+import { useIntl } from "react-intl";
 import { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from "../constants.js";
 import * as alignmentStyles from "./Alignment.sty.js";
 import * as cellStyles from "./DataTableCell.sty.js";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+import { getColumnLabel } from "../../utils/get-column-label.js";
 import {
   DataTableColumnContextProvider,
-  useDataTable,
-  useDataTableContent
+  useDataTable
 } from "../contexts/DataTableContext.js";
 import * as tableStyles from "../DataTable.sty.js";
+import { toPhysicalPinnedPosition } from "../features/ColumnPinning/column-pinning-utils.js";
 import { SPACER_COLUMN } from "../features/Layout/LayoutColumnDef.js";
 import { isRowDetailsColumnDef } from "../features/RowDetails/RowDetails.js";
 import { isRowDragColumnDef } from "../features/RowOrder/row-order-column-utils.js";
@@ -25,6 +27,7 @@ import { SubRowsCellExpander } from "../features/SubRows/components/SubRowExpand
 import * as thresholdStyles from "../features/Thresholds/Thresholds.sty.js";
 import { InlineUserActionsMenu } from "../features/UserActions/InlineUserActionsMenu.js";
 import { ROW_ACTIONS_COLUMN } from "../features/UserActions/RowActionsColumnDef.js";
+import { dataTableMessages } from "../messages.js";
 function InternalMemoizedCell(props) {
   const {
     rowId,
@@ -133,7 +136,7 @@ function DataTableCell(props) {
     cellDeps
   } = props;
   const table = useDataTable();
-  const { cellActionAriaLabel } = useDataTableContent();
+  const intl = useIntl();
   const subrowContext = useContext(SubrowCellContext);
   const isLineWrapped = props.cell.column.getIsLineWrapped();
   const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;
@@ -141,12 +144,19 @@ function DataTableCell(props) {
   const columnId = props.cell.column.id;
   const columnDef = props.cell.column.columnDef;
   const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;
+  const cellActionAriaLabel = intl.formatMessage(
+    dataTableMessages.cellActionLabel,
+    {
+      columnLabel: getColumnLabel(props.cell.column),
+      rowId: props.cell.row.id
+    }
+  );
   const isFirstColumn = virtualColumnIndex === 0;
   const isPrefixColumn = isRowSelectionColumnDef(columnDef) || isRowDetailsColumnDef(columnDef) || isRowDragColumnDef(columnDef);
   const visualVariantConfig = table.atoms.visualVariantConfig?.get();
   const pinningState = props.cell.column.getIsPinned();
-  const leftPinnedPosition = pinningState === "left" ? props.cell.column.getLeftPinnedPosition() : void 0;
-  const rightPinnedPosition = pinningState === "right" ? props.cell.column.getRightPinnedPosition() : void 0;
+  const leftPinnedPosition = pinningState === "start" ? props.cell.column.getLeftPinnedPosition() : void 0;
+  const rightPinnedPosition = pinningState === "end" ? props.cell.column.getRightPinnedPosition() : void 0;
   const pinnedColumnBg = pinningState && visualVariantConfig.rowSeparation !== "zebraStripes" && (visualVariantConfig.contained ? "contained" : "uncontained");
   return /* @__PURE__ */ jsx(
     DataTableCellMemo,
@@ -177,7 +187,7 @@ function DataTableCell(props) {
           rowDensity: hasCustomCellRenderer ? "customCellRenderer" : visualVariantConfig.rowDensity,
           interactiveRows: table.options.enableRowInteractivity,
           verticalDividers: visualVariantConfig.verticalDividers,
-          pinnedColumn: pinningState,
+          pinnedColumn: toPhysicalPinnedPosition(pinningState),
           background: pinnedColumnBg
         }),
         alignmentStyles.horizontalAlignment[columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT],

package/esm/tables/DataTable/components/DataTableCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableCell.tsx"],
-  "sourcesContent": ["import type {\n  CellData,\n  RowData,\n  Cell,\n  ColumnDef,\n  Column,\n} from '@tanstack/react-table';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useState,\n} from 'react';\n\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../constants.js';\nimport * as alignmentStyles from './Alignment.sty.js';\nimport * as cellStyles from './DataTableCell.sty.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport {\n  DataTableColumnContextProvider,\n  useDataTable,\n  useDataTableContent,\n} from '../contexts/DataTableContext.js';\nimport * as tableStyles from '../DataTable.sty.js';\nimport type { DataTableColumnType } from '../features/ColumnTypes/column-types-types.js';\nimport { SPACER_COLUMN } from '../features/Layout/LayoutColumnDef.js';\nimport { isRowDetailsColumnDef } from '../features/RowDetails/RowDetails.js';\nimport { isRowDragColumnDef } from '../features/RowOrder/row-order-column-utils.js';\nimport { isRowSelectionColumnDef } from '../features/RowSelection/RowSelection.js';\nimport { SubrowCellContext } from '../features/SubRows/components/SubRowCellContext.js';\nimport { SubRowsCellExpander } from '../features/SubRows/components/SubRowExpanders.js';\nimport * as thresholdStyles from '../features/Thresholds/Thresholds.sty.js';\nimport type { TDataTableFeatures } from '../features/types/features.types.js';\nimport { InlineUserActionsMenu } from '../features/UserActions/InlineUserActionsMenu.js';\nimport { ROW_ACTIONS_COLUMN } from '../features/UserActions/RowActionsColumnDef.js';\n\ninterface DataTableCellProps extends StylingProps {\n  cell: Cell<TDataTableFeatures, RowData, CellData>;\n\n  /**\n   * Column index in order to map it to the cells data attributes for identification.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * Row index in order to map it to the cells data attributes for identification.\n   */\n  virtualRowIndex: number;\n\n  /**\n   * Indicates whether the rendered cell is inside the drag overlay.\n   */\n  isInDragOverlay?: boolean;\n\n  /**\n   * Indicates whether the floating menu for the rendered cell is currently open.\n   */\n  hasActiveFloatingMenu?: boolean;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Node ref for row order drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  thresholdPill: string | null;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: RowData;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string;\n}\n\ninterface InternalMemoizedCellProps<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n> extends PropsWithChildren {\n  /**\n   * RowId from the TanStack/table cell object.\n   */\n  rowId: string;\n\n  /**\n   * RowIndex based on the virtualization index.\n   */\n  virtualRowIndex?: number;\n\n  /**\n   * ColumnId from the TanStack/table column object.\n   */\n  columnId: string;\n\n  /**\n   * ColumnIndex based on the virtualization index.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Optional ref intended for drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Determines whether the DataTable has expanding rows (subRows).\n   */\n  enableExpanding?: boolean;\n\n  /**\n   * Determines if the cell has a custom cell renderer defined by the column definition.\n   */\n  hasCustomCellRenderer?: boolean;\n\n  /**\n   * Determines if the given cell within the column contains the sub row expanding trigger.\n   */\n  isSubRowIndicatorColumn?: boolean;\n\n  /**\n   * Determines the column type for the given cell.\n   */\n  columnType?: DataTableColumnType;\n\n  /**\n   * Determines if the current cell can currently wrap its lines.\n   */\n  isLineWrapped?: boolean;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string; // NOSONAR - suppress unused prop warning\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  pillColor: string | null;\n\n  /**\n   * Determines if the current cell can receive user actions and displays a menu trigger.\n   */\n  canCellAction?: boolean;\n\n  /**\n   * Aria label for the cell action menu trigger.\n   */\n  cellActionAriaLabel: string;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Defines css positioning for the left pinned columns.\n   */\n  leftPosition?: string;\n\n  /**\n   * Defines css positioning for the right pinned columns.\n   */\n  rightPosition?: string;\n\n  /**\n   * CSS class name for the cell.\n   */\n  className?: string;\n\n  /**\n   * Color of the cell text, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdColor?: string;\n\n  /**\n   * Color of the cell background, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdBackgroundColor?: string;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: TData;\n\n  /**\n   * Table column definition. Necessary for memoization to work correctly.\n   */\n  tableColumns?: readonly ColumnDef<TFeatures, TData>[];\n}\n\n// This component should only receive primitive or memoized props in order\n// to optimize render performance when committing to the DOM.\nfunction InternalMemoizedCell<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<InternalMemoizedCellProps<TFeatures, TData>>,\n): JSX.Element | null {\n  const {\n    rowId,\n    virtualRowIndex,\n    columnId,\n    virtualColumnIndex,\n    className,\n    columnMeasure,\n    dragAndDropRef,\n    pillColor,\n    enableExpanding,\n    hasCustomCellRenderer,\n    isSubRowIndicatorColumn,\n    columnType,\n    isLineWrapped,\n    children,\n    canCellAction,\n    subRowDepth,\n    leftPosition,\n    rightPosition,\n    cellActionAriaLabel,\n    thresholdColor,\n    thresholdBackgroundColor,\n  } = props;\n\n  // Handling the hovered state via React instead of via css allows us\n  // to omit the button from the default render, which will reduce the\n  // amount of elements rendered quite heavily.\n  const [hovered, setHovered] = useState(false);\n  const mergedRef = useMergeRefs<HTMLElement | null>([\n    dragAndDropRef,\n    columnMeasure,\n  ]);\n\n  return (\n    <div\n      role={columnId === SPACER_COLUMN.id ? 'presentation' : 'cell'}\n      ref={mergedRef}\n      data-index={`row-${virtualRowIndex}-column-${virtualColumnIndex}`}\n      data-columnid={columnId}\n      data-column={virtualColumnIndex}\n      data-columntype={columnType}\n      data-subrow-depth={subRowDepth}\n      className={className}\n      onMouseEnter={() => canCellAction && setHovered(true)}\n      onMouseLeave={() => canCellAction && setHovered(false)}\n      style={{\n        ...assignInlineVars({\n          [thresholdStyles.thresholdPillColor]: pillColor,\n          [cellStyles.leftPositionVar]: leftPosition,\n          [cellStyles.rightPositionVar]: rightPosition,\n        }),\n        gridColumnStart: (virtualColumnIndex ?? 0) + 1,\n        gridColumnEnd: 'span 1',\n        gridRowStart: 1,\n        gridRowEnd: 'span 1',\n        color: thresholdColor,\n        backgroundColor: thresholdBackgroundColor,\n        minWidth:\n          columnId === ROW_ACTIONS_COLUMN.id ? 'max-content' : undefined,\n      }}\n    >\n      {/* Only render the subrow expander in the subrow indicator column\n          and if no custom cell renderer is exposed. */}\n      {enableExpanding === true &&\n      !hasCustomCellRenderer &&\n      isSubRowIndicatorColumn === true ? (\n        <SubRowsCellExpander columnType={columnType} />\n      ) : null}\n\n      {!hasCustomCellRenderer &&\n      columnType !== 'sparkline' &&\n      columnType !== 'meterbar' &&\n      columnType !== 'log-content' ? (\n        <div\n          className={clsx(\n            cellStyles.innerCell({\n              lineWrap: isLineWrapped,\n            }),\n          )}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n      {canCellAction && (\n        <InlineUserActionsMenu\n          headerGroupOrRowId={rowId}\n          columnId={columnId}\n          type=\"cell\"\n          aria-label={cellActionAriaLabel}\n          data-column={virtualColumnIndex}\n          hovered={hovered}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom prop comparison for the memoized `DataTableCell` component.\n * Compares all props except `children`, as they are not stable and would cause unnecessary re-renders.\n * If the cell has a custom renderer, it will always re-render to ensure dynamic content updates correctly.\n * @param prevProps - Previous props of the cell.\n * @param nextProps - Next props of the cell.\n * @returns boolean - true if props are equal (skip render), false otherwise (re-render).\n */\nfunction arePropsEqual<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  prevProps: Readonly<InternalMemoizedCellProps<TFeatures, TData>>,\n  nextProps: Readonly<InternalMemoizedCellProps<TFeatures, TData>>,\n): boolean {\n  // If the cell has a custom cell renderer, always re-render, since children can always change.\n  // in case it is a built-in column cellDeps are defined and we can rely on them for memoization\n  if (nextProps.hasCustomCellRenderer && nextProps.cellDeps === undefined) {\n    return false;\n  }\n\n  // Extract children to skip them in the comparison\n  const { children: _prevChildren, ...prevRest } = prevProps;\n  const { children: _nextChildren, ...nextRest } = nextProps;\n\n  // Shallow compare all other props - if any of them changed, re-render\n  const keys = Object.keys(nextRest) as Array<keyof typeof nextRest>;\n  return keys.every((key) => prevRest[key] === nextRest[key]);\n}\n\nconst DataTableCellMemo = memo(InternalMemoizedCell, arePropsEqual);\n\nexport function DataTableCell(\n  props: Readonly<DataTableCellProps>,\n): JSX.Element | null {\n  const {\n    virtualColumnIndex,\n    virtualRowIndex,\n    isInDragOverlay,\n    dragAndDropRef,\n    columnMeasure,\n    hasActiveFloatingMenu,\n    subRowDepth,\n    thresholdPill,\n    rowData,\n    cellDeps,\n  } = props;\n\n  const table = useDataTable();\n  const { cellActionAriaLabel } = useDataTableContent();\n  const subrowContext = useContext(SubrowCellContext);\n\n  const isLineWrapped = props.cell.column.getIsLineWrapped();\n\n  // thresholds - both row and cell highlighting\n  const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;\n  const thresholdCellColors = props.cell.getThresholdColors();\n  const columnId = props.cell.column.id;\n  const columnDef = props.cell.column.columnDef;\n  const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;\n\n  const isFirstColumn = virtualColumnIndex === 0;\n  const isPrefixColumn: boolean =\n    isRowSelectionColumnDef(columnDef) ||\n    isRowDetailsColumnDef(columnDef) ||\n    isRowDragColumnDef(columnDef);\n\n  const visualVariantConfig = table.atoms.visualVariantConfig?.get();\n  const pinningState = (\n    props.cell.column as unknown as Column<TDataTableFeatures, RowData>\n  ).getIsPinned();\n  const leftPinnedPosition =\n    pinningState === 'left'\n      ? props.cell.column.getLeftPinnedPosition()\n      : undefined;\n  const rightPinnedPosition =\n    pinningState === 'right'\n      ? props.cell.column.getRightPinnedPosition()\n      : undefined;\n  const pinnedColumnBg =\n    pinningState &&\n    visualVariantConfig.rowSeparation !== 'zebraStripes' &&\n    (visualVariantConfig.contained ? 'contained' : 'uncontained');\n\n  return (\n    <DataTableCellMemo\n      rowId={props.cell.row.id}\n      virtualRowIndex={isInDragOverlay ? undefined : virtualRowIndex}\n      virtualColumnIndex={virtualColumnIndex}\n      columnId={columnId}\n      subRowDepth={subRowDepth}\n      canCellAction={props.cell.column.getCanCellActions()}\n      columnMeasure={columnMeasure}\n      dragAndDropRef={\n        !isInDragOverlay && isFirstColumn ? dragAndDropRef : undefined\n      }\n      pillColor={pillColor}\n      thresholdColor={thresholdCellColors.color}\n      thresholdBackgroundColor={thresholdCellColors.backgroundColor}\n      enableExpanding={table.options.enableExpanding}\n      leftPosition={\n        leftPinnedPosition !== undefined ? `${leftPinnedPosition}px` : undefined\n      }\n      rightPosition={\n        rightPinnedPosition !== undefined\n          ? `${rightPinnedPosition}px`\n          : undefined\n      }\n      hasCustomCellRenderer={hasCustomCellRenderer}\n      isSubRowIndicatorColumn={subrowContext.isSubRowIndicatorColumn}\n      columnType={columnDef.columnType}\n      isLineWrapped={isLineWrapped}\n      cellActionAriaLabel={cellActionAriaLabel}\n      className={clsx(\n        cellStyles.outerCell({\n          lineWrap: isLineWrapped,\n          fontStyle: props.cell.column.getFontStyle(),\n          rowDensity: hasCustomCellRenderer\n            ? 'customCellRenderer'\n            : visualVariantConfig.rowDensity,\n          interactiveRows: table.options.enableRowInteractivity,\n          verticalDividers: visualVariantConfig.verticalDividers,\n          pinnedColumn: pinningState,\n          background: pinnedColumnBg,\n        }),\n        alignmentStyles.horizontalAlignment[\n          columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT\n        ],\n        alignmentStyles.verticalAlignment[table.getBodyVerticalAlignment()],\n        {\n          [thresholdStyles.thresholdPill]:\n            pillColor !== undefined && pillColor !== null,\n          [tableStyles.prefixColumn]: isPrefixColumn,\n          [tableStyles.pinnedCellInDragOverlay]:\n            pinningState && isInDragOverlay,\n          [cellStyles.activeInteraction]: hasActiveFloatingMenu,\n        },\n      )}\n      rowData={rowData}\n      tableColumns={table.options.columns}\n      cellDeps={cellDeps}\n    >\n      {hasCustomCellRenderer ? (\n        <DataTableColumnContextProvider value={props.cell.column}>\n          <table.FlexRender cell={props.cell} />\n        </DataTableColumnContextProvider>\n      ) : (\n        <table.FlexRender cell={props.cell} />\n      )}\n    </DataTableCellMemo>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  CellData,\n  RowData,\n  Cell,\n  ColumnDef,\n  Column,\n} from '@tanstack/react-table';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../constants.js';\nimport * as alignmentStyles from './Alignment.sty.js';\nimport * as cellStyles from './DataTableCell.sty.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { getColumnLabel } from '../../utils/get-column-label.js';\nimport {\n  DataTableColumnContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport * as tableStyles from '../DataTable.sty.js';\nimport { toPhysicalPinnedPosition } from '../features/ColumnPinning/column-pinning-utils.js';\nimport type { DataTableColumnType } from '../features/ColumnTypes/column-types-types.js';\nimport { SPACER_COLUMN } from '../features/Layout/LayoutColumnDef.js';\nimport { isRowDetailsColumnDef } from '../features/RowDetails/RowDetails.js';\nimport { isRowDragColumnDef } from '../features/RowOrder/row-order-column-utils.js';\nimport { isRowSelectionColumnDef } from '../features/RowSelection/RowSelection.js';\nimport { SubrowCellContext } from '../features/SubRows/components/SubRowCellContext.js';\nimport { SubRowsCellExpander } from '../features/SubRows/components/SubRowExpanders.js';\nimport * as thresholdStyles from '../features/Thresholds/Thresholds.sty.js';\nimport type { TDataTableFeatures } from '../features/types/features.types.js';\nimport { InlineUserActionsMenu } from '../features/UserActions/InlineUserActionsMenu.js';\nimport { ROW_ACTIONS_COLUMN } from '../features/UserActions/RowActionsColumnDef.js';\nimport { dataTableMessages } from '../messages.js';\n\ninterface DataTableCellProps extends StylingProps {\n  cell: Cell<TDataTableFeatures, RowData, CellData>;\n\n  /**\n   * Column index in order to map it to the cells data attributes for identification.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * Row index in order to map it to the cells data attributes for identification.\n   */\n  virtualRowIndex: number;\n\n  /**\n   * Indicates whether the rendered cell is inside the drag overlay.\n   */\n  isInDragOverlay?: boolean;\n\n  /**\n   * Indicates whether the floating menu for the rendered cell is currently open.\n   */\n  hasActiveFloatingMenu?: boolean;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Node ref for row order drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  thresholdPill: string | null;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: RowData;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string;\n}\n\ninterface InternalMemoizedCellProps<\n  TData extends RowData,\n> extends PropsWithChildren {\n  /**\n   * RowId from the TanStack/table cell object.\n   */\n  rowId: string;\n\n  /**\n   * RowIndex based on the virtualization index.\n   */\n  virtualRowIndex?: number;\n\n  /**\n   * ColumnId from the TanStack/table column object.\n   */\n  columnId: string;\n\n  /**\n   * ColumnIndex based on the virtualization index.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Optional ref intended for drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Determines whether the DataTable has expanding rows (subRows).\n   */\n  enableExpanding?: boolean;\n\n  /**\n   * Determines if the cell has a custom cell renderer defined by the column definition.\n   */\n  hasCustomCellRenderer?: boolean;\n\n  /**\n   * Determines if the given cell within the column contains the sub row expanding trigger.\n   */\n  isSubRowIndicatorColumn?: boolean;\n\n  /**\n   * Determines the column type for the given cell.\n   */\n  columnType?: DataTableColumnType;\n\n  /**\n   * Determines if the current cell can currently wrap its lines.\n   */\n  isLineWrapped?: boolean;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string; // NOSONAR - suppress unused prop warning\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  pillColor: string | null;\n\n  /**\n   * Determines if the current cell can receive user actions and displays a menu trigger.\n   */\n  canCellAction?: boolean;\n\n  /**\n   * Aria label for the cell action menu trigger.\n   */\n  cellActionAriaLabel: string;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Defines css positioning for the left pinned columns.\n   */\n  leftPosition?: string;\n\n  /**\n   * Defines css positioning for the right pinned columns.\n   */\n  rightPosition?: string;\n\n  /**\n   * CSS class name for the cell.\n   */\n  className?: string;\n\n  /**\n   * Color of the cell text, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdColor?: string;\n\n  /**\n   * Color of the cell background, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdBackgroundColor?: string;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: TData;\n\n  /**\n   * Table column definition. Necessary for memoization to work correctly.\n   */\n  tableColumns?: readonly ColumnDef<TDataTableFeatures, TData>[];\n}\n\n// This component should only receive primitive or memoized props in order\n// to optimize render performance when committing to the DOM.\nfunction InternalMemoizedCell<TData extends RowData>(\n  props: Readonly<InternalMemoizedCellProps<TData>>,\n): JSX.Element | null {\n  const {\n    rowId,\n    virtualRowIndex,\n    columnId,\n    virtualColumnIndex,\n    className,\n    columnMeasure,\n    dragAndDropRef,\n    pillColor,\n    enableExpanding,\n    hasCustomCellRenderer,\n    isSubRowIndicatorColumn,\n    columnType,\n    isLineWrapped,\n    children,\n    canCellAction,\n    subRowDepth,\n    leftPosition,\n    rightPosition,\n    cellActionAriaLabel,\n    thresholdColor,\n    thresholdBackgroundColor,\n  } = props;\n\n  // Handling the hovered state via React instead of via css allows us\n  // to omit the button from the default render, which will reduce the\n  // amount of elements rendered quite heavily.\n  const [hovered, setHovered] = useState(false);\n  const mergedRef = useMergeRefs<HTMLElement | null>([\n    dragAndDropRef,\n    columnMeasure,\n  ]);\n\n  return (\n    <div\n      role={columnId === SPACER_COLUMN.id ? 'presentation' : 'cell'}\n      ref={mergedRef}\n      data-index={`row-${virtualRowIndex}-column-${virtualColumnIndex}`}\n      data-columnid={columnId}\n      data-column={virtualColumnIndex}\n      data-columntype={columnType}\n      data-subrow-depth={subRowDepth}\n      className={className}\n      onMouseEnter={() => canCellAction && setHovered(true)}\n      onMouseLeave={() => canCellAction && setHovered(false)}\n      style={{\n        ...assignInlineVars({\n          [thresholdStyles.thresholdPillColor]: pillColor,\n          [cellStyles.leftPositionVar]: leftPosition,\n          [cellStyles.rightPositionVar]: rightPosition,\n        }),\n        gridColumnStart: (virtualColumnIndex ?? 0) + 1,\n        gridColumnEnd: 'span 1',\n        gridRowStart: 1,\n        gridRowEnd: 'span 1',\n        color: thresholdColor,\n        backgroundColor: thresholdBackgroundColor,\n        minWidth:\n          columnId === ROW_ACTIONS_COLUMN.id ? 'max-content' : undefined,\n      }}\n    >\n      {/* Only render the subrow expander in the subrow indicator column\n          and if no custom cell renderer is exposed. */}\n      {enableExpanding === true &&\n      !hasCustomCellRenderer &&\n      isSubRowIndicatorColumn === true ? (\n        <SubRowsCellExpander columnType={columnType} />\n      ) : null}\n\n      {!hasCustomCellRenderer &&\n      columnType !== 'sparkline' &&\n      columnType !== 'meterbar' &&\n      columnType !== 'log-content' ? (\n        <div\n          className={clsx(\n            cellStyles.innerCell({\n              lineWrap: isLineWrapped,\n            }),\n          )}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n      {canCellAction && (\n        <InlineUserActionsMenu\n          headerGroupOrRowId={rowId}\n          columnId={columnId}\n          type=\"cell\"\n          aria-label={cellActionAriaLabel}\n          data-column={virtualColumnIndex}\n          hovered={hovered}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom prop comparison for the memoized `DataTableCell` component.\n * Compares all props except `children`, as they are not stable and would cause unnecessary re-renders.\n * If the cell has a custom renderer, it will always re-render to ensure dynamic content updates correctly.\n * @param prevProps - Previous props of the cell.\n * @param nextProps - Next props of the cell.\n * @returns boolean - true if props are equal (skip render), false otherwise (re-render).\n */\nfunction arePropsEqual<TData extends RowData>(\n  prevProps: Readonly<InternalMemoizedCellProps<TData>>,\n  nextProps: Readonly<InternalMemoizedCellProps<TData>>,\n): boolean {\n  // If the cell has a custom cell renderer, always re-render, since children can always change.\n  // in case it is a built-in column cellDeps are defined and we can rely on them for memoization\n  if (nextProps.hasCustomCellRenderer && nextProps.cellDeps === undefined) {\n    return false;\n  }\n\n  // Extract children to skip them in the comparison\n  const { children: _prevChildren, ...prevRest } = prevProps;\n  const { children: _nextChildren, ...nextRest } = nextProps;\n\n  // Shallow compare all other props - if any of them changed, re-render\n  const keys = Object.keys(nextRest) as Array<keyof typeof nextRest>;\n  return keys.every((key) => prevRest[key] === nextRest[key]);\n}\n\nconst DataTableCellMemo = memo(InternalMemoizedCell, arePropsEqual);\n\nexport function DataTableCell(\n  props: Readonly<DataTableCellProps>,\n): JSX.Element | null {\n  const {\n    virtualColumnIndex,\n    virtualRowIndex,\n    isInDragOverlay,\n    dragAndDropRef,\n    columnMeasure,\n    hasActiveFloatingMenu,\n    subRowDepth,\n    thresholdPill,\n    rowData,\n    cellDeps,\n  } = props;\n\n  const table = useDataTable();\n  const intl = useIntl();\n  const subrowContext = useContext(SubrowCellContext);\n\n  const isLineWrapped = props.cell.column.getIsLineWrapped();\n\n  // thresholds - both row and cell highlighting\n  const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;\n  const thresholdCellColors = props.cell.getThresholdColors();\n  const columnId = props.cell.column.id;\n  const columnDef = props.cell.column.columnDef;\n  const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;\n  const cellActionAriaLabel = intl.formatMessage(\n    dataTableMessages.cellActionLabel,\n    {\n      columnLabel: getColumnLabel(props.cell.column),\n      rowId: props.cell.row.id,\n    },\n  );\n\n  const isFirstColumn = virtualColumnIndex === 0;\n  const isPrefixColumn: boolean =\n    isRowSelectionColumnDef(columnDef) ||\n    isRowDetailsColumnDef(columnDef) ||\n    isRowDragColumnDef(columnDef);\n\n  const visualVariantConfig = table.atoms.visualVariantConfig?.get();\n  const pinningState = (\n    props.cell.column as unknown as Column<TDataTableFeatures, RowData>\n  ).getIsPinned();\n  const leftPinnedPosition =\n    pinningState === 'start'\n      ? props.cell.column.getLeftPinnedPosition()\n      : undefined;\n  const rightPinnedPosition =\n    pinningState === 'end'\n      ? props.cell.column.getRightPinnedPosition()\n      : undefined;\n  const pinnedColumnBg =\n    pinningState &&\n    visualVariantConfig.rowSeparation !== 'zebraStripes' &&\n    (visualVariantConfig.contained ? 'contained' : 'uncontained');\n\n  return (\n    <DataTableCellMemo\n      rowId={props.cell.row.id}\n      virtualRowIndex={isInDragOverlay ? undefined : virtualRowIndex}\n      virtualColumnIndex={virtualColumnIndex}\n      columnId={columnId}\n      subRowDepth={subRowDepth}\n      canCellAction={props.cell.column.getCanCellActions()}\n      columnMeasure={columnMeasure}\n      dragAndDropRef={\n        !isInDragOverlay && isFirstColumn ? dragAndDropRef : undefined\n      }\n      pillColor={pillColor}\n      thresholdColor={thresholdCellColors.color}\n      thresholdBackgroundColor={thresholdCellColors.backgroundColor}\n      enableExpanding={table.options.enableExpanding}\n      leftPosition={\n        leftPinnedPosition !== undefined ? `${leftPinnedPosition}px` : undefined\n      }\n      rightPosition={\n        rightPinnedPosition !== undefined\n          ? `${rightPinnedPosition}px`\n          : undefined\n      }\n      hasCustomCellRenderer={hasCustomCellRenderer}\n      isSubRowIndicatorColumn={subrowContext.isSubRowIndicatorColumn}\n      columnType={columnDef.columnType}\n      isLineWrapped={isLineWrapped}\n      cellActionAriaLabel={cellActionAriaLabel}\n      className={clsx(\n        cellStyles.outerCell({\n          lineWrap: isLineWrapped,\n          fontStyle: props.cell.column.getFontStyle(),\n          rowDensity: hasCustomCellRenderer\n            ? 'customCellRenderer'\n            : visualVariantConfig.rowDensity,\n          interactiveRows: table.options.enableRowInteractivity,\n          verticalDividers: visualVariantConfig.verticalDividers,\n          pinnedColumn: toPhysicalPinnedPosition(pinningState),\n          background: pinnedColumnBg,\n        }),\n        alignmentStyles.horizontalAlignment[\n          columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT\n        ],\n        alignmentStyles.verticalAlignment[table.getBodyVerticalAlignment()],\n        {\n          [thresholdStyles.thresholdPill]:\n            pillColor !== undefined && pillColor !== null,\n          [tableStyles.prefixColumn]: isPrefixColumn,\n          [tableStyles.pinnedCellInDragOverlay]:\n            pinningState && isInDragOverlay,\n          [cellStyles.activeInteraction]: hasActiveFloatingMenu,\n        },\n      )}\n      rowData={rowData}\n      tableColumns={table.options.columns}\n      cellDeps={cellDeps}\n    >\n      {hasCustomCellRenderer ? (\n        <DataTableColumnContextProvider value={props.cell.column}>\n          <table.FlexRender cell={props.cell} />\n        </DataTableColumnContextProvider>\n      ) : (\n        <table.FlexRender cell={props.cell} />\n      )}\n    </DataTableCellMemo>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableCell.sty.js

@@ -9,13 +9,13 @@ import "../features/ColumnSizing/ColumnSizing.css";
 import "../features/Thresholds/Thresholds.css";
 import "./DataTableCell.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var activeInteraction = "_1ons7qup-3-12-1";
-var innerCell = _7a468({ defaultClassName: "_1ons7qum-3-12-1", variantClassNames: { lineWrap: { true: "_1ons7qun-3-12-1", false: "_1ons7quo-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
-var leftPositionVar = "var(--_1ons7qu0-3-12-1)";
+var activeInteraction = "_1ons7qup-3-13-0";
+var innerCell = _7a468({ defaultClassName: "_1ons7qum-3-13-0", variantClassNames: { lineWrap: { true: "_1ons7qun-3-13-0", false: "_1ons7quo-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var leftPositionVar = "var(--_1ons7qu0-3-13-0)";
 var lineWrapFalse = { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", maxWidth: "100%", minWidth: 0 };
 var lineWrapTrue = { whiteSpace: "normal", textOverflow: "initial", wordBreak: "normal", overflowWrap: "anywhere" };
-var outerCell = _7a468({ defaultClassName: "_1ons7qu2-3-12-1", variantClassNames: { prefixColumn: { true: "_1ons7qu3-3-12-1" }, lineWrap: { true: "_1ons7qu4-3-12-1", false: "_1ons7qu5-3-12-1" }, fontStyle: { text: "_1ons7qu6-3-12-1", code: "_1ons7qu7-3-12-1", inherit: "_1ons7qu8-3-12-1" }, rowDensity: { customCellRenderer: "_1ons7qu9-3-12-1", "default": "_1ons7qua-3-12-1", condensed: "_1ons7qub-3-12-1", comfortable: "_1ons7quc-3-12-1" }, verticalDividers: { true: "_1ons7qud-3-12-1", false: "_1ons7que-3-12-1" }, interactiveRows: { false: "_1ons7quf-3-12-1" }, pinnedColumn: { false: "_1ons7qug-3-12-1", left: "_1ons7quh-3-12-1", right: "_1ons7qui-3-12-1" }, background: { false: "_1ons7quj-3-12-1", contained: "_1ons7quk-3-12-1", uncontained: "_1ons7qul-3-12-1" } }, defaultVariants: { fontStyle: "text", rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
-var rightPositionVar = "var(--_1ons7qu1-3-12-1)";
+var outerCell = _7a468({ defaultClassName: "_1ons7qu2-3-13-0", variantClassNames: { prefixColumn: { true: "_1ons7qu3-3-13-0" }, lineWrap: { true: "_1ons7qu4-3-13-0", false: "_1ons7qu5-3-13-0" }, fontStyle: { text: "_1ons7qu6-3-13-0", code: "_1ons7qu7-3-13-0", inherit: "_1ons7qu8-3-13-0" }, rowDensity: { customCellRenderer: "_1ons7qu9-3-13-0", "default": "_1ons7qua-3-13-0", condensed: "_1ons7qub-3-13-0", comfortable: "_1ons7quc-3-13-0" }, verticalDividers: { true: "_1ons7qud-3-13-0", false: "_1ons7que-3-13-0" }, interactiveRows: { false: "_1ons7quf-3-13-0" }, pinnedColumn: { false: "_1ons7qug-3-13-0", left: "_1ons7quh-3-13-0", right: "_1ons7qui-3-13-0" }, background: { false: "_1ons7quj-3-13-0", contained: "_1ons7quk-3-13-0", uncontained: "_1ons7qul-3-13-0" } }, defaultVariants: { fontStyle: "text", rowDensity: "default", verticalDividers: false, pinnedColumn: false }, compoundVariants: [] });
+var rightPositionVar = "var(--_1ons7qu1-3-13-0)";
 export {
   activeInteraction,
   innerCell,