acinguiux-ds-react-framework 0.1.18 → 0.1.20

package/build/esm/components/Table/components/TableElements/TableElements.js

@@ -1,22 +1,22 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { forwardRef as S } from "react";
-import { styled as p, css as o } from "styled-components";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { styled as p, css as t } from "styled-components";
 import { Positions as u } from "../../../../react-base/src/consts/index.js";
-import { Variables as r } from "../../../../react-base/src/theme/types/layer.js";
+import { Variables as n } from "../../../../react-base/src/theme/types/layer.js";
 import { FabricsVariables as d } from "acinguiux-ds-fabrics";
-import { Flexbox as g } from "../../../Flexbox/Flexbox.styles.js";
-import { StyledExpander as w } from "./Expander.js";
-import { TABLE_HEADER_HEAD_CONTENT_CLASS as P, TABLE_CHECKBOX_CLASS as v, BUTTON_CLASS as f, SELECT_CLASS as E, EMPTY_STATE_CLASS as _, TABLE_MENU_BUTTON_CLASS as A, TABLE_PIN_BUTTON_CLASS as C } from "../../../../react-base/src/consts/classes.js";
-const k = o`
-  ${({ $width: e, theme: n }) => o`
+import { Flexbox as S } from "../../../Flexbox/Flexbox.styles.js";
+import { StyledExpander as B } from "./Expander.js";
+import { TABLE_HEADER_HEAD_CONTENT_CLASS as w, TABLE_CHECKBOX_CLASS as v, BUTTON_CLASS as y, SELECT_CLASS as P, EMPTY_STATE_CLASS as E, TABLE_MENU_BUTTON_CLASS as _, TABLE_PIN_BUTTON_CLASS as A } from "../../../../react-base/src/consts/classes.js";
+const k = t`
+  ${({ $width: e, theme: o }) => t`
     width: ${e ?? "auto"}px;
     min-width: ${e ?? "auto"}px;
-    color: ${n.layer({ foundation: "surface" })[r.TextOnFoundationStrong]};
+    color: ${o.layer({ foundation: "surface" })[n.TextOnFoundationStrong]};
     box-sizing: border-box;
     overflow-wrap: break-word;
   `};
-`, x = o`
-  ${({ $pinAnchorOffset: e }) => o`
+`, x = t`
+  ${({ $pinAnchorOffset: e }) => t`
     &[data-sticky] {
       position: sticky;
       z-index: 1;
@@ -30,42 +30,42 @@ const k = o`
       }
     }
   `}
-`, T = o`
-  ${({ $highlight: e, theme: n }) => e && o`
-      --bg-color: ${n.layer({
+`, h = t`
+  ${({ $highlight: e, theme: o }) => e && t`
+      --bg-color: ${o.layer({
   sentiment: e.type === "sentiment" ? e.sentiment : void 0,
   selectedProminence: d.SelectedProminences.Subtle,
   sentimentProminence: d.SentimentProminences.Subtle
-})[e.type === "sentiment" ? r.BackgroundSentiment : r.BackgroundSelected]};
+})[e.type === "sentiment" ? n.BackgroundSentiment : n.BackgroundSelected]};
 
-      --bg-hover-color: ${n.layer({
+      --bg-hover-color: ${o.layer({
   sentiment: e.type === "sentiment" ? e.sentiment : void 0,
   selectedProminence: d.SelectedProminences.Subtle,
   sentimentProminence: d.SentimentProminences.Subtle,
   state: d.States.Hover
-})[e.type === "sentiment" ? r.BackgroundSentiment : r.BackgroundSelected]};
+})[e.type === "sentiment" ? n.BackgroundSentiment : n.BackgroundSelected]};
 
-      ${e.indicator && o`
+      ${e.indicator && t`
         &:before {
           position: absolute;
           content: '';
           display: block;
           top: 0;
           bottom: 0;
-          background-color: ${n.layer({
+          background-color: ${o.layer({
   sentiment: e.type === "sentiment" ? e.sentiment : void 0
-})[e.type === "selected" ? r.BackgroundSelected : r.BackgroundSentiment]};
+})[e.type === "selected" ? n.BackgroundSelected : n.BackgroundSentiment]};
           width: 0;
         }
 
-        ${e.indicator === u.Left && o`
+        ${e.indicator === u.Left && t`
           &:is(td):before {
             left: 0;
             width: 4px;
           }
         `}
 
-        ${e.indicator === u.Right && o`
+        ${e.indicator === u.Right && t`
           &:is(td):before {
             right: 0;
             width: 4px;
@@ -76,19 +76,19 @@ const k = o`
 `, i = p.th`
   ${k};
   ${x};
-  ${T};
+  ${h};
 
-  ${({ colSpan: e, $noPadding: n, $alignment: t }) => o`
+  ${({ colSpan: e, $noPadding: o, $alignment: r }) => t`
     position: relative;
-    > ${g}, .${P} {
+    > ${S}, .${w} {
       position: relative;
       gap: var(--table-header-cell-gap);
-      justify-content: ${t};
+      justify-content: ${r};
     }
 
     .${v} {
       order: 0;
-      ${t === "right" && o`
+      ${r === "right" && t`
         margin-right: auto;
       `}
     }
@@ -96,62 +96,62 @@ const k = o`
     text-align: ${(e ?? 0) > 1 ? "center" : "left"};
     white-space: nowrap;
 
-    ${n && o`
+    ${o && t`
       padding: unset !important;
     `}
   `}
-`, L = S(
-  ({ highlight: e, alignment: n, noPadding: t, width: l, pinAnchorOffset: c, isPinned: b, ...m }, y) => /* @__PURE__ */ $(
+`, C = g(
+  ({ highlight: e, alignment: o, noPadding: r, width: l, pinAnchorOffset: c, isPinned: b, ...$ }, m) => /* @__PURE__ */ f(
     i,
     {
-      ref: y,
-      $alignment: n,
+      ref: m,
+      $alignment: o,
       $highlight: e,
-      $noPadding: t,
+      $noPadding: r,
       style: { width: l },
       "data-sticky": b,
       $pinAnchorOffset: c,
-      ...m
+      ...$
     }
   )
-), V = L, a = p.td`
+), V = C, a = p.td`
   ${k};
   ${x};
-  ${T};
+  ${h};
 
-  ${({ $noPadding: e, $alignment: n }) => o`
+  ${({ $noPadding: e, $alignment: o }) => t`
     position: relative;
-    > ${g} {
+    > ${S} {
       position: relative;
       gap: var(--table-cell-gap);
-      justify-content: ${n};
+      justify-content: ${o};
     }
 
     .${v} {
       margin-right: auto;
     }
 
-    ${e && o`
+    ${e && t`
       padding: unset !important;
     `}
   `}
-`, F = S(
-  ({ highlight: e, alignment: n, noPadding: t, width: l, pinAnchorOffset: c, isPinned: b, ...m }, y) => /* @__PURE__ */ $(
+`, L = g(
+  ({ highlight: e, alignment: o, noPadding: r, width: l, pinAnchorOffset: c, isPinned: b, ...$ }, m) => /* @__PURE__ */ f(
     a,
     {
-      ref: y,
-      $alignment: n,
+      ref: m,
+      $alignment: o,
       $highlight: e,
-      $noPadding: t,
+      $noPadding: r,
       style: {
         width: l
       },
       "data-sticky": b,
       $pinAnchorOffset: c,
-      ...m
+      ...$
     }
   )
-), I = F, O = o`
+), I = L, F = t`
   & > ${i}, & > ${a} {
     &:is([data-sticky='left']):not(:has(~ [data-sticky='left'])) {
       &::after {
@@ -182,27 +182,27 @@ const k = o`
     }
   }
 `, s = p.tr(
-  ({ theme: e, $depth: n, $highlight: t, $disableRowHover: l = !1 }) => {
+  ({ theme: e, $depth: o, $highlight: r, $disableRowHover: l = !1 }) => {
     const c = e.layer({
       foundation: "surface",
-      sentiment: (t == null ? void 0 : t.type) === "sentiment" ? t.sentiment : void 0
+      sentiment: r?.type === "sentiment" ? r.sentiment : void 0
     }), b = e.layer({
       foundation: "surface",
-      sentiment: (t == null ? void 0 : t.type) === "sentiment" ? t.sentiment : void 0,
+      sentiment: r?.type === "sentiment" ? r.sentiment : void 0,
       sentimentProminence: d.SentimentProminences.Subtle,
       selectedProminence: d.SelectedProminences.Subtle
     });
-    return o`
+    return t`
       transition:
         background-color 0.1s,
         height 0.1s,
         opacity 0.1s;
 
-      --bg-color: ${c[r.BackgroundFoundation]};
-      --table-row-depth: ${n ?? 0};
+      --bg-color: ${c[n.BackgroundFoundation]};
+      --table-row-depth: ${o ?? 0};
 
       & {
-        ${O};
+        ${F};
       }
 
       ${a} {
@@ -211,28 +211,28 @@ const k = o`
           var(--table-cell-padding-right);
       }
 
-      ${a}:has(.${f}),
+      ${a}:has(.${y}),
+      ${a}:has(.${P}),
       ${a}:has(.${E}),
-      ${a}:has(.${_}),
-      ${a}:has(${w}) {
+      ${a}:has(${B}) {
         padding-top: 0px;
         padding-bottom: 0px;
       }
 
       ${i} {
-        & .${A}:not([aria-expanded="true"]),
-        & .${C}:not([aria-expanded="true"]) {
+        & .${_}:not([aria-expanded="true"]),
+        & .${A}:not([aria-expanded="true"]) {
           opacity: 0;
         }
 
-        &:hover .${f}, & .${f}:focus-visible {
+        &:hover .${y}, & .${y}:focus-visible {
           opacity: 1;
         }
       }
 
-      ${!l && o`
+      ${!l && t`
         &:hover {
-          --bg-hover-color: ${e.layer({ foundation: "surface", state: d.States.Hover })[r.BackgroundFoundation]};
+          --bg-hover-color: ${e.layer({ foundation: "surface", state: d.States.Hover })[n.BackgroundFoundation]};
         }
       `}
 
@@ -243,21 +243,21 @@ const k = o`
         background-color: var(--bg-hover-color, inherit);
       }
 
-      ${t && o`
-        --bg-color: ${b[t.type === "selected" ? r.BackgroundSelected : r.BackgroundSentiment]};
+      ${r && t`
+        --bg-color: ${b[r.type === "selected" ? n.BackgroundSelected : n.BackgroundSentiment]};
 
-        ${!l && o`
+        ${!l && t`
           &:hover {
             --bg-hover-color: ${e.layer({
       selectedProminence: d.SelectedProminences.Subtle,
       sentimentProminence: d.SentimentProminences.Subtle,
-      sentiment: t.type === "sentiment" ? t.sentiment : void 0,
+      sentiment: r.type === "sentiment" ? r.sentiment : void 0,
       state: d.States.Hover
-    })[t.type === "selected" ? r.BackgroundSelected : r.BackgroundSentiment]};
+    })[r.type === "selected" ? n.BackgroundSelected : n.BackgroundSentiment]};
           }
         `};
 
-        ${t.indicator && o`
+        ${r.indicator && t`
           ${i}, ${a} {
             &:before {
               position: absolute;
@@ -265,12 +265,12 @@ const k = o`
               display: block;
               top: 0;
               bottom: 0;
-              background-color: ${c[t.type === "selected" ? r.BackgroundSelected : r.BackgroundSentiment]};
+              background-color: ${c[r.type === "selected" ? n.BackgroundSelected : n.BackgroundSentiment]};
               width: 0;
             }
           }
 
-          ${t.indicator === u.Left && o`
+          ${r.indicator === u.Left && t`
             ${i}:first-of-type:before,
             ${a}:first-of-type:before {
               left: 0;
@@ -278,7 +278,7 @@ const k = o`
             }
           `}
 
-          ${t.indicator === u.Right && o`
+          ${r.indicator === u.Right && t`
             ${i}:last-of-type:before,
             ${a}:last-of-type:before {
               right: 0;
@@ -289,11 +289,11 @@ const k = o`
       `}
     `;
   }
-), B = S(
-  ({ highlight: e, depth: n, disableRowHover: t, ...l }, c) => /* @__PURE__ */ $(s, { ref: c, $highlight: e, $depth: n, $disableRowHover: t, ...l })
-), K = B, X = p.thead(({ theme: e }) => {
-  const n = e.layer({ foundation: "surface" });
-  return o`
+), T = g(
+  ({ highlight: e, depth: o, disableRowHover: r, ...l }, c) => /* @__PURE__ */ f(s, { ref: c, $highlight: e, $depth: o, $disableRowHover: r, ...l })
+), K = T, X = p.thead(({ theme: e }) => {
+  const o = e.layer({ foundation: "surface" });
+  return t`
     position: relative;
     ${i} {
       height: var(--table-header-cell-height);
@@ -304,7 +304,7 @@ const k = o`
       ${s} {
         position: sticky;
         z-index: 2;
-        background-color: ${n[r.BackgroundFoundation]};
+        background-color: ${o[n.BackgroundFoundation]};
         top: calc(var(--table-row-depth, 0) * var(--table-header-cell-height, 0px));
 
         &:last-of-type {
@@ -317,22 +317,22 @@ const k = o`
     }
 
     ${s}:not(:last-of-type) > ${i} {
-      border-bottom: 1px solid ${n[r.BorderOnFoundationSubtle]};
+      border-bottom: 1px solid ${o[n.BorderOnFoundationSubtle]};
     }
 
     ${s}:last-of-type > ${i} {
-      border-bottom: 1px solid ${n[r.BorderOnFoundationMedium]};
+      border-bottom: 1px solid ${o[n.BorderOnFoundationMedium]};
     }
   `;
 }), Y = p.tbody(
-  ({ theme: e }) => o`
+  ({ theme: e }) => t`
     ${s}:not(:last-of-type) > ${a} {
-      border-bottom: 1px solid ${e.layer({ foundation: "surface" })[r.BorderOnFoundationSubtle]};
+      border-bottom: 1px solid ${e.layer({ foundation: "surface" })[n.BorderOnFoundationSubtle]};
     }
   `
 ), q = p.tfoot(({ theme: e }) => {
-  const n = e.layer({ foundation: "surface" });
-  return o`
+  const o = e.layer({ foundation: "surface" });
+  return t`
     ${i} {
       height: var(--table-cell-height);
       padding: var(--table-cell-padding-top) var(--table-cell-padding-left) var(--table-cell-padding-bottom)
@@ -343,7 +343,7 @@ const k = o`
       ${s} {
         position: sticky;
         z-index: 2;
-        background-color: ${n[r.BackgroundFoundation]};
+        background-color: ${o[n.BackgroundFoundation]};
         bottom: calc(var(--table-row-depth, 0) * var(--table-cell-height, 0px));
 
         &:first-of-type {
@@ -356,16 +356,16 @@ const k = o`
     }
 
     ${s}:not(:first-of-type) > ${i} {
-      border-top: 1px solid ${n[r.BorderOnFoundationSubtle]};
+      border-top: 1px solid ${o[n.BorderOnFoundationSubtle]};
     }
 
     ${s}:first-of-type > ${i} {
-      border-top: 1px solid ${n[r.BorderOnFoundationMedium]};
+      border-top: 1px solid ${o[n.BorderOnFoundationMedium]};
     }
   `;
-}), G = p(B)(
-  ({ theme: e }) => o`
-    background: ${e.layer({ foundation: "surface" })[r.BackgroundFoundation]};
+}), G = p(T)(
+  ({ theme: e }) => t`
+    background: ${e.layer({ foundation: "surface" })[n.BackgroundFoundation]};
     & > ${a} {
       height: var(--table-row-group-spacing-height);
       padding: 0;
@@ -383,8 +383,8 @@ export {
   V as TH,
   X as THead,
   K as TR,
-  F as Td,
-  L as Th,
-  B as Tr
+  L as Td,
+  C as Th,
+  T as Tr
 };
 //# sourceMappingURL=TableElements.js.map

package/build/esm/components/Table/components/TableElements/TableElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableElements.js","sources":["../../../../../../src/components/Table/components/TableElements/TableElements.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ComponentPropsWithRef } from 'react';\n\nimport { styled, css } from 'styled-components';\nimport {\n  Positions,\n  BUTTON_CLASS,\n  EMPTY_STATE_CLASS,\n  TABLE_PIN_BUTTON_CLASS,\n  TABLE_MENU_BUTTON_CLASS,\n  SELECT_CLASS,\n  TABLE_HEADER_HEAD_CONTENT_CLASS,\n  TABLE_CHECKBOX_CLASS,\n} from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { PickTransient, TransientAll } from 'acinguiux-ds-react-base/types';\n\nimport { type ITableRowProps, type ITableCellProps } from './TableElements.types';\nimport { Flexbox } from '../../../Flexbox/Flexbox.styles';\nimport { StyledExpander } from './Expander';\n\ntype StyledCellPropKeys = 'alignment' | 'highlight' | 'noPadding' | 'width' | 'pinAnchorOffset' | 'isPinned';\nexport type StyledCellProps = PickTransient<ITableCellProps, StyledCellPropKeys>;\nexport type StyledHighlightCellProps = PickTransient<ITableCellProps, 'highlight'>;\n\nexport type StyledStickyProps = PickTransient<ITableCellProps, 'pinAnchorOffset'>;\n\nconst sharedCellStyles = css<PickTransient<ITableCellProps, 'width'>>`\n  ${({ $width, theme }) => css`\n    width: ${$width ?? 'auto'}px;\n    min-width: ${$width ?? 'auto'}px;\n    color: ${theme.layer({ foundation: 'surface' })[Variables.TextOnFoundationStrong]};\n    box-sizing: border-box;\n    overflow-wrap: break-word;\n  `};\n`;\n\nconst sharedStickyCellStyles = css<StyledStickyProps>`\n  ${({ $pinAnchorOffset }) => css`\n    &[data-sticky] {\n      position: sticky;\n      z-index: 1;\n\n      &[data-sticky='left'] {\n        left: ${$pinAnchorOffset ?? 0}px;\n      }\n\n      &[data-sticky='right'] {\n        right: ${$pinAnchorOffset ?? 0}px;\n      }\n    }\n  `}\n`;\n\nconst sharedHighlightedCellStyles = css<StyledHighlightCellProps>`\n  ${({ $highlight, theme }) =>\n    $highlight &&\n    css`\n      --bg-color: ${theme.layer({\n        sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n        selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n        sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n      })[$highlight.type === 'sentiment' ? Variables.BackgroundSentiment : Variables.BackgroundSelected]};\n\n      --bg-hover-color: ${theme.layer({\n        sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n        selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n        sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n        state: FabricsVariables.States.Hover,\n      })[$highlight.type === 'sentiment' ? Variables.BackgroundSentiment : Variables.BackgroundSelected]};\n\n      ${$highlight.indicator &&\n      css`\n        &:before {\n          position: absolute;\n          content: '';\n          display: block;\n          top: 0;\n          bottom: 0;\n          background-color: ${theme.layer({\n            sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n          })[$highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment]};\n          width: 0;\n        }\n\n        ${$highlight.indicator === Positions.Left &&\n        css`\n          &:is(td):before {\n            left: 0;\n            width: 4px;\n          }\n        `}\n\n        ${$highlight.indicator === Positions.Right &&\n        css`\n          &:is(td):before {\n            right: 0;\n            width: 4px;\n          }\n        `}\n      `};\n    `}\n`;\n\n/** Table elements */\n\nexport const StyledTh = styled.th<StyledCellProps & StyledStickyProps>`\n  ${sharedCellStyles};\n  ${sharedStickyCellStyles};\n  ${sharedHighlightedCellStyles};\n\n  ${({ colSpan, $noPadding, $alignment }) => css<StyledCellProps & StyledStickyProps>`\n    position: relative;\n    > ${Flexbox}, .${TABLE_HEADER_HEAD_CONTENT_CLASS} {\n      position: relative;\n      gap: var(--table-header-cell-gap);\n      justify-content: ${$alignment};\n    }\n\n    .${TABLE_CHECKBOX_CLASS} {\n      order: 0;\n      ${$alignment === 'right' &&\n      css`\n        margin-right: auto;\n      `}\n    }\n\n    text-align: ${(colSpan ?? 0) > 1 ? 'center' : 'left'};\n    white-space: nowrap;\n\n    ${$noPadding &&\n    css`\n      padding: unset !important;\n    `}\n  `}\n`;\n\nexport const Th = forwardRef<HTMLTableCellElement, ITableCellProps & ComponentPropsWithoutRef<'th'>>(\n  ({ highlight, alignment, noPadding, width, pinAnchorOffset, isPinned, ...rest }, ref) => {\n    return (\n      <StyledTh\n        ref={ref}\n        $alignment={alignment}\n        $highlight={highlight}\n        $noPadding={noPadding}\n        style={{ width }}\n        data-sticky={isPinned}\n        $pinAnchorOffset={pinAnchorOffset}\n        {...rest}\n      />\n    );\n  },\n);\n\n/**\n * @deprecated use Th instead\n */\nexport const TH = Th;\n\nexport const StyledTd = styled.td<StyledCellProps & StyledStickyProps>`\n  ${sharedCellStyles};\n  ${sharedStickyCellStyles};\n  ${sharedHighlightedCellStyles};\n\n  ${({ $noPadding, $alignment }) => css<StyledCellProps & StyledStickyProps>`\n    position: relative;\n    > ${Flexbox} {\n      position: relative;\n      gap: var(--table-cell-gap);\n      justify-content: ${$alignment};\n    }\n\n    .${TABLE_CHECKBOX_CLASS} {\n      margin-right: auto;\n    }\n\n    ${$noPadding &&\n    css`\n      padding: unset !important;\n    `}\n  `}\n`;\n\nexport const Td = forwardRef<HTMLTableCellElement, ITableCellProps & ComponentPropsWithoutRef<'td'>>(\n  ({ highlight, alignment, noPadding, width, pinAnchorOffset, isPinned, ...rest }, ref) => {\n    return (\n      <StyledTd\n        ref={ref}\n        $alignment={alignment}\n        $highlight={highlight}\n        $noPadding={noPadding}\n        style={{\n          width,\n        }}\n        data-sticky={isPinned}\n        $pinAnchorOffset={pinAnchorOffset}\n        {...rest}\n      />\n    );\n  },\n);\n\n/**\n * @deprecated use Td instead\n */\nexport const TD = Td;\n\nconst stickyCellShadowStyles = css`\n  & > ${StyledTh}, & > ${StyledTd} {\n    &:is([data-sticky='left']):not(:has(~ [data-sticky='left'])) {\n      &::after {\n        content: '';\n        pointer-events: none;\n        width: 40px;\n        height: 100%;\n        background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.025) 30%, rgba(0, 0, 0, 0) 100%);\n        position: absolute;\n        right: -40px;\n        top: 0;\n      }\n    }\n  }\n\n  & > ${StyledTh}, & > ${StyledTd} {\n    &:not([data-sticky='right']) + [data-sticky='right'] {\n      &::after {\n        content: '';\n        width: 30px;\n        pointer-events: none;\n        height: 100%;\n        background: linear-gradient(-90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.025) 30%, rgba(0, 0, 0, 0) 100%);\n        position: absolute;\n        left: -30px;\n        top: 0;\n      }\n    }\n  }\n`;\n\nexport const StyledTr = styled.tr<TransientAll<ITableRowProps>>(\n  ({ theme, $depth, $highlight, $disableRowHover = false }) => {\n    const layer = theme.layer({\n      foundation: 'surface',\n      sentiment: $highlight?.type === 'sentiment' ? $highlight.sentiment : undefined,\n    });\n    const subtleLayer = theme.layer({\n      foundation: 'surface',\n      sentiment: $highlight?.type === 'sentiment' ? $highlight.sentiment : undefined,\n      sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n      selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n    });\n\n    return css`\n      transition:\n        background-color 0.1s,\n        height 0.1s,\n        opacity 0.1s;\n\n      --bg-color: ${layer[Variables.BackgroundFoundation]};\n      --table-row-depth: ${$depth ?? 0};\n\n      & {\n        ${stickyCellShadowStyles};\n      }\n\n      ${StyledTd} {\n        height: var(--table-cell-height);\n        padding: var(--table-cell-padding-top) var(--table-cell-padding-left) var(--table-cell-padding-bottom)\n          var(--table-cell-padding-right);\n      }\n\n      ${StyledTd}:has(.${BUTTON_CLASS}),\n      ${StyledTd}:has(.${SELECT_CLASS}),\n      ${StyledTd}:has(.${EMPTY_STATE_CLASS}),\n      ${StyledTd}:has(${StyledExpander}) {\n        padding-top: 0px;\n        padding-bottom: 0px;\n      }\n\n      ${StyledTh} {\n        & .${TABLE_MENU_BUTTON_CLASS}:not([aria-expanded=\"true\"]),\n        & .${TABLE_PIN_BUTTON_CLASS}:not([aria-expanded=\"true\"]) {\n          opacity: 0;\n        }\n\n        &:hover .${BUTTON_CLASS}, & .${BUTTON_CLASS}:focus-visible {\n          opacity: 1;\n        }\n      }\n\n      ${!$disableRowHover &&\n      css`\n        &:hover {\n          --bg-hover-color: ${theme.layer({ foundation: 'surface', state: FabricsVariables.States.Hover })[\n            Variables.BackgroundFoundation\n          ]};\n        }\n      `}\n\n      & > ${StyledTd}, & > ${StyledTh} {\n        background-color: var(--bg-color, inherit);\n      }\n      &:hover > ${StyledTd}, &:hover > ${StyledTh} {\n        background-color: var(--bg-hover-color, inherit);\n      }\n\n      ${$highlight &&\n      css`\n        --bg-color: ${subtleLayer[\n          $highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment\n        ]};\n\n        ${!$disableRowHover &&\n        css`\n          &:hover {\n            --bg-hover-color: ${theme.layer({\n              selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n              sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n              sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n              state: FabricsVariables.States.Hover,\n            })[$highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment]};\n          }\n        `};\n\n        ${$highlight.indicator &&\n        css`\n          ${StyledTh}, ${StyledTd} {\n            &:before {\n              position: absolute;\n              content: '';\n              display: block;\n              top: 0;\n              bottom: 0;\n              background-color: ${layer[\n                $highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment\n              ]};\n              width: 0;\n            }\n          }\n\n          ${$highlight.indicator === Positions.Left &&\n          css`\n            ${StyledTh}:first-of-type:before,\n            ${StyledTd}:first-of-type:before {\n              left: 0;\n              width: 4px;\n            }\n          `}\n\n          ${$highlight.indicator === Positions.Right &&\n          css`\n            ${StyledTh}:last-of-type:before,\n            ${StyledTd}:last-of-type:before {\n              right: 0;\n              width: 4px;\n            }\n          `}\n        `};\n      `}\n    `;\n  },\n);\n\nexport const Tr = forwardRef<HTMLTableRowElement, ITableRowProps & ComponentPropsWithRef<'tr'>>(\n  ({ highlight, depth, disableRowHover, ...rest }, ref) => (\n    <StyledTr ref={ref} $highlight={highlight} $depth={depth} $disableRowHover={disableRowHover} {...rest} />\n  ),\n);\n\n/**\n * @deprecated use Tr instead\n */\nexport const TR = Tr;\n\nexport const THead = styled.thead(({ theme }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return css`\n    position: relative;\n    ${StyledTh} {\n      height: var(--table-header-cell-height);\n      padding: var(--table-header-cell-padding-top) var(--table-header-cell-padding-left)\n        var(--table-header-cell-padding-bottom) var(--table-header-cell-padding-right);\n    }\n    &[data-sticky='true'] {\n      ${StyledTr} {\n        position: sticky;\n        z-index: 2;\n        background-color: ${layer[Variables.BackgroundFoundation]};\n        top: calc(var(--table-row-depth, 0) * var(--table-header-cell-height, 0px));\n\n        &:last-of-type {\n          will-change: filter;\n          /* NOTE: clip path will display the drop shadow only at the bottom */\n          clip-path: inset(0 0 -9999px 0);\n          filter: ${theme.dropShadows.low4};\n        }\n      }\n    }\n\n    ${StyledTr}:not(:last-of-type) > ${StyledTh} {\n      border-bottom: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n    }\n\n    ${StyledTr}:last-of-type > ${StyledTh} {\n      border-bottom: 1px solid ${layer[Variables.BorderOnFoundationMedium]};\n    }\n  `;\n});\n\nexport const TBody = styled.tbody(\n  ({ theme }) => css`\n    ${StyledTr}:not(:last-of-type) > ${StyledTd} {\n      border-bottom: 1px solid ${theme.layer({ foundation: 'surface' })[Variables.BorderOnFoundationSubtle]};\n    }\n  `,\n);\n\nexport const TFoot = styled.tfoot(({ theme }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return css`\n    ${StyledTh} {\n      height: var(--table-cell-height);\n      padding: var(--table-cell-padding-top) var(--table-cell-padding-left) var(--table-cell-padding-bottom)\n        var(--table-cell-padding-right);\n    }\n\n    &[data-sticky='true'] {\n      ${StyledTr} {\n        position: sticky;\n        z-index: 2;\n        background-color: ${layer[Variables.BackgroundFoundation]};\n        bottom: calc(var(--table-row-depth, 0) * var(--table-cell-height, 0px));\n\n        &:first-of-type {\n          will-change: filter;\n          /* NOTE: clip path will display the drop shadow only at the top */\n          clip-path: inset(-9999px 0 0 0);\n          filter: ${theme.dropShadows.low4};\n        }\n      }\n    }\n\n    ${StyledTr}:not(:first-of-type) > ${StyledTh} {\n      border-top: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n    }\n\n    ${StyledTr}:first-of-type > ${StyledTh} {\n      border-top: 1px solid ${layer[Variables.BorderOnFoundationMedium]};\n    }\n  `;\n});\n\nexport const SpaceTR = styled(Tr)(\n  ({ theme }) => css`\n    background: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n    & > ${StyledTd} {\n      height: var(--table-row-group-spacing-height);\n      padding: 0;\n    }\n  `,\n);\n"],"names":["sharedCellStyles","css","$width","theme","Variables","sharedStickyCellStyles","$pinAnchorOffset","sharedHighlightedCellStyles","$highlight","FabricsVariables","Positions","StyledTh","styled","colSpan","$noPadding","$alignment","Flexbox","TABLE_HEADER_HEAD_CONTENT_CLASS","TABLE_CHECKBOX_CLASS","Th","forwardRef","highlight","alignment","noPadding","width","pinAnchorOffset","isPinned","rest","ref","jsx","TH","StyledTd","Td","TD","stickyCellShadowStyles","StyledTr","$depth","$disableRowHover","layer","subtleLayer","BUTTON_CLASS","SELECT_CLASS","EMPTY_STATE_CLASS","StyledExpander","TABLE_MENU_BUTTON_CLASS","TABLE_PIN_BUTTON_CLASS","Tr","depth","disableRowHover","TR","THead","TBody","TFoot","SpaceTR"],"mappings":"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"}
+{"version":3,"file":"TableElements.js","sources":["../../../../../../src/components/Table/components/TableElements/TableElements.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ComponentPropsWithRef } from 'react';\n\nimport { styled, css } from 'styled-components';\nimport {\n  Positions,\n  BUTTON_CLASS,\n  EMPTY_STATE_CLASS,\n  TABLE_PIN_BUTTON_CLASS,\n  TABLE_MENU_BUTTON_CLASS,\n  SELECT_CLASS,\n  TABLE_HEADER_HEAD_CONTENT_CLASS,\n  TABLE_CHECKBOX_CLASS,\n} from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { PickTransient, TransientAll } from 'acinguiux-ds-react-base/types';\n\nimport { type ITableRowProps, type ITableCellProps } from './TableElements.types';\nimport { Flexbox } from '../../../Flexbox/Flexbox.styles';\nimport { StyledExpander } from './Expander';\n\ntype StyledCellPropKeys = 'alignment' | 'highlight' | 'noPadding' | 'width' | 'pinAnchorOffset' | 'isPinned';\nexport type StyledCellProps = PickTransient<ITableCellProps, StyledCellPropKeys>;\nexport type StyledHighlightCellProps = PickTransient<ITableCellProps, 'highlight'>;\n\nexport type StyledStickyProps = PickTransient<ITableCellProps, 'pinAnchorOffset'>;\n\nconst sharedCellStyles = css<PickTransient<ITableCellProps, 'width'>>`\n  ${({ $width, theme }) => css`\n    width: ${$width ?? 'auto'}px;\n    min-width: ${$width ?? 'auto'}px;\n    color: ${theme.layer({ foundation: 'surface' })[Variables.TextOnFoundationStrong]};\n    box-sizing: border-box;\n    overflow-wrap: break-word;\n  `};\n`;\n\nconst sharedStickyCellStyles = css<StyledStickyProps>`\n  ${({ $pinAnchorOffset }) => css`\n    &[data-sticky] {\n      position: sticky;\n      z-index: 1;\n\n      &[data-sticky='left'] {\n        left: ${$pinAnchorOffset ?? 0}px;\n      }\n\n      &[data-sticky='right'] {\n        right: ${$pinAnchorOffset ?? 0}px;\n      }\n    }\n  `}\n`;\n\nconst sharedHighlightedCellStyles = css<StyledHighlightCellProps>`\n  ${({ $highlight, theme }) =>\n    $highlight &&\n    css`\n      --bg-color: ${theme.layer({\n        sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n        selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n        sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n      })[$highlight.type === 'sentiment' ? Variables.BackgroundSentiment : Variables.BackgroundSelected]};\n\n      --bg-hover-color: ${theme.layer({\n        sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n        selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n        sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n        state: FabricsVariables.States.Hover,\n      })[$highlight.type === 'sentiment' ? Variables.BackgroundSentiment : Variables.BackgroundSelected]};\n\n      ${$highlight.indicator &&\n      css`\n        &:before {\n          position: absolute;\n          content: '';\n          display: block;\n          top: 0;\n          bottom: 0;\n          background-color: ${theme.layer({\n            sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n          })[$highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment]};\n          width: 0;\n        }\n\n        ${$highlight.indicator === Positions.Left &&\n        css`\n          &:is(td):before {\n            left: 0;\n            width: 4px;\n          }\n        `}\n\n        ${$highlight.indicator === Positions.Right &&\n        css`\n          &:is(td):before {\n            right: 0;\n            width: 4px;\n          }\n        `}\n      `};\n    `}\n`;\n\n/** Table elements */\n\nexport const StyledTh = styled.th<StyledCellProps & StyledStickyProps>`\n  ${sharedCellStyles};\n  ${sharedStickyCellStyles};\n  ${sharedHighlightedCellStyles};\n\n  ${({ colSpan, $noPadding, $alignment }) => css<StyledCellProps & StyledStickyProps>`\n    position: relative;\n    > ${Flexbox}, .${TABLE_HEADER_HEAD_CONTENT_CLASS} {\n      position: relative;\n      gap: var(--table-header-cell-gap);\n      justify-content: ${$alignment};\n    }\n\n    .${TABLE_CHECKBOX_CLASS} {\n      order: 0;\n      ${$alignment === 'right' &&\n      css`\n        margin-right: auto;\n      `}\n    }\n\n    text-align: ${(colSpan ?? 0) > 1 ? 'center' : 'left'};\n    white-space: nowrap;\n\n    ${$noPadding &&\n    css`\n      padding: unset !important;\n    `}\n  `}\n`;\n\nexport const Th = forwardRef<HTMLTableCellElement, ITableCellProps & ComponentPropsWithoutRef<'th'>>(\n  ({ highlight, alignment, noPadding, width, pinAnchorOffset, isPinned, ...rest }, ref) => {\n    return (\n      <StyledTh\n        ref={ref}\n        $alignment={alignment}\n        $highlight={highlight}\n        $noPadding={noPadding}\n        style={{ width }}\n        data-sticky={isPinned}\n        $pinAnchorOffset={pinAnchorOffset}\n        {...rest}\n      />\n    );\n  },\n);\n\n/**\n * @deprecated use Th instead\n */\nexport const TH = Th;\n\nexport const StyledTd = styled.td<StyledCellProps & StyledStickyProps>`\n  ${sharedCellStyles};\n  ${sharedStickyCellStyles};\n  ${sharedHighlightedCellStyles};\n\n  ${({ $noPadding, $alignment }) => css<StyledCellProps & StyledStickyProps>`\n    position: relative;\n    > ${Flexbox} {\n      position: relative;\n      gap: var(--table-cell-gap);\n      justify-content: ${$alignment};\n    }\n\n    .${TABLE_CHECKBOX_CLASS} {\n      margin-right: auto;\n    }\n\n    ${$noPadding &&\n    css`\n      padding: unset !important;\n    `}\n  `}\n`;\n\nexport const Td = forwardRef<HTMLTableCellElement, ITableCellProps & ComponentPropsWithoutRef<'td'>>(\n  ({ highlight, alignment, noPadding, width, pinAnchorOffset, isPinned, ...rest }, ref) => {\n    return (\n      <StyledTd\n        ref={ref}\n        $alignment={alignment}\n        $highlight={highlight}\n        $noPadding={noPadding}\n        style={{\n          width,\n        }}\n        data-sticky={isPinned}\n        $pinAnchorOffset={pinAnchorOffset}\n        {...rest}\n      />\n    );\n  },\n);\n\n/**\n * @deprecated use Td instead\n */\nexport const TD = Td;\n\nconst stickyCellShadowStyles = css`\n  & > ${StyledTh}, & > ${StyledTd} {\n    &:is([data-sticky='left']):not(:has(~ [data-sticky='left'])) {\n      &::after {\n        content: '';\n        pointer-events: none;\n        width: 40px;\n        height: 100%;\n        background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.025) 30%, rgba(0, 0, 0, 0) 100%);\n        position: absolute;\n        right: -40px;\n        top: 0;\n      }\n    }\n  }\n\n  & > ${StyledTh}, & > ${StyledTd} {\n    &:not([data-sticky='right']) + [data-sticky='right'] {\n      &::after {\n        content: '';\n        width: 30px;\n        pointer-events: none;\n        height: 100%;\n        background: linear-gradient(-90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.025) 30%, rgba(0, 0, 0, 0) 100%);\n        position: absolute;\n        left: -30px;\n        top: 0;\n      }\n    }\n  }\n`;\n\nexport const StyledTr = styled.tr<TransientAll<ITableRowProps>>(\n  ({ theme, $depth, $highlight, $disableRowHover = false }) => {\n    const layer = theme.layer({\n      foundation: 'surface',\n      sentiment: $highlight?.type === 'sentiment' ? $highlight.sentiment : undefined,\n    });\n    const subtleLayer = theme.layer({\n      foundation: 'surface',\n      sentiment: $highlight?.type === 'sentiment' ? $highlight.sentiment : undefined,\n      sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n      selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n    });\n\n    return css`\n      transition:\n        background-color 0.1s,\n        height 0.1s,\n        opacity 0.1s;\n\n      --bg-color: ${layer[Variables.BackgroundFoundation]};\n      --table-row-depth: ${$depth ?? 0};\n\n      & {\n        ${stickyCellShadowStyles};\n      }\n\n      ${StyledTd} {\n        height: var(--table-cell-height);\n        padding: var(--table-cell-padding-top) var(--table-cell-padding-left) var(--table-cell-padding-bottom)\n          var(--table-cell-padding-right);\n      }\n\n      ${StyledTd}:has(.${BUTTON_CLASS}),\n      ${StyledTd}:has(.${SELECT_CLASS}),\n      ${StyledTd}:has(.${EMPTY_STATE_CLASS}),\n      ${StyledTd}:has(${StyledExpander}) {\n        padding-top: 0px;\n        padding-bottom: 0px;\n      }\n\n      ${StyledTh} {\n        & .${TABLE_MENU_BUTTON_CLASS}:not([aria-expanded=\"true\"]),\n        & .${TABLE_PIN_BUTTON_CLASS}:not([aria-expanded=\"true\"]) {\n          opacity: 0;\n        }\n\n        &:hover .${BUTTON_CLASS}, & .${BUTTON_CLASS}:focus-visible {\n          opacity: 1;\n        }\n      }\n\n      ${!$disableRowHover &&\n      css`\n        &:hover {\n          --bg-hover-color: ${theme.layer({ foundation: 'surface', state: FabricsVariables.States.Hover })[\n            Variables.BackgroundFoundation\n          ]};\n        }\n      `}\n\n      & > ${StyledTd}, & > ${StyledTh} {\n        background-color: var(--bg-color, inherit);\n      }\n      &:hover > ${StyledTd}, &:hover > ${StyledTh} {\n        background-color: var(--bg-hover-color, inherit);\n      }\n\n      ${$highlight &&\n      css`\n        --bg-color: ${subtleLayer[\n          $highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment\n        ]};\n\n        ${!$disableRowHover &&\n        css`\n          &:hover {\n            --bg-hover-color: ${theme.layer({\n              selectedProminence: FabricsVariables.SelectedProminences.Subtle,\n              sentimentProminence: FabricsVariables.SentimentProminences.Subtle,\n              sentiment: $highlight.type === 'sentiment' ? $highlight.sentiment : undefined,\n              state: FabricsVariables.States.Hover,\n            })[$highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment]};\n          }\n        `};\n\n        ${$highlight.indicator &&\n        css`\n          ${StyledTh}, ${StyledTd} {\n            &:before {\n              position: absolute;\n              content: '';\n              display: block;\n              top: 0;\n              bottom: 0;\n              background-color: ${layer[\n                $highlight.type === 'selected' ? Variables.BackgroundSelected : Variables.BackgroundSentiment\n              ]};\n              width: 0;\n            }\n          }\n\n          ${$highlight.indicator === Positions.Left &&\n          css`\n            ${StyledTh}:first-of-type:before,\n            ${StyledTd}:first-of-type:before {\n              left: 0;\n              width: 4px;\n            }\n          `}\n\n          ${$highlight.indicator === Positions.Right &&\n          css`\n            ${StyledTh}:last-of-type:before,\n            ${StyledTd}:last-of-type:before {\n              right: 0;\n              width: 4px;\n            }\n          `}\n        `};\n      `}\n    `;\n  },\n);\n\nexport const Tr = forwardRef<HTMLTableRowElement, ITableRowProps & ComponentPropsWithRef<'tr'>>(\n  ({ highlight, depth, disableRowHover, ...rest }, ref) => (\n    <StyledTr ref={ref} $highlight={highlight} $depth={depth} $disableRowHover={disableRowHover} {...rest} />\n  ),\n);\n\n/**\n * @deprecated use Tr instead\n */\nexport const TR = Tr;\n\nexport const THead = styled.thead(({ theme }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return css`\n    position: relative;\n    ${StyledTh} {\n      height: var(--table-header-cell-height);\n      padding: var(--table-header-cell-padding-top) var(--table-header-cell-padding-left)\n        var(--table-header-cell-padding-bottom) var(--table-header-cell-padding-right);\n    }\n    &[data-sticky='true'] {\n      ${StyledTr} {\n        position: sticky;\n        z-index: 2;\n        background-color: ${layer[Variables.BackgroundFoundation]};\n        top: calc(var(--table-row-depth, 0) * var(--table-header-cell-height, 0px));\n\n        &:last-of-type {\n          will-change: filter;\n          /* NOTE: clip path will display the drop shadow only at the bottom */\n          clip-path: inset(0 0 -9999px 0);\n          filter: ${theme.dropShadows.low4};\n        }\n      }\n    }\n\n    ${StyledTr}:not(:last-of-type) > ${StyledTh} {\n      border-bottom: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n    }\n\n    ${StyledTr}:last-of-type > ${StyledTh} {\n      border-bottom: 1px solid ${layer[Variables.BorderOnFoundationMedium]};\n    }\n  `;\n});\n\nexport const TBody = styled.tbody(\n  ({ theme }) => css`\n    ${StyledTr}:not(:last-of-type) > ${StyledTd} {\n      border-bottom: 1px solid ${theme.layer({ foundation: 'surface' })[Variables.BorderOnFoundationSubtle]};\n    }\n  `,\n);\n\nexport const TFoot = styled.tfoot(({ theme }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return css`\n    ${StyledTh} {\n      height: var(--table-cell-height);\n      padding: var(--table-cell-padding-top) var(--table-cell-padding-left) var(--table-cell-padding-bottom)\n        var(--table-cell-padding-right);\n    }\n\n    &[data-sticky='true'] {\n      ${StyledTr} {\n        position: sticky;\n        z-index: 2;\n        background-color: ${layer[Variables.BackgroundFoundation]};\n        bottom: calc(var(--table-row-depth, 0) * var(--table-cell-height, 0px));\n\n        &:first-of-type {\n          will-change: filter;\n          /* NOTE: clip path will display the drop shadow only at the top */\n          clip-path: inset(-9999px 0 0 0);\n          filter: ${theme.dropShadows.low4};\n        }\n      }\n    }\n\n    ${StyledTr}:not(:first-of-type) > ${StyledTh} {\n      border-top: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n    }\n\n    ${StyledTr}:first-of-type > ${StyledTh} {\n      border-top: 1px solid ${layer[Variables.BorderOnFoundationMedium]};\n    }\n  `;\n});\n\nexport const SpaceTR = styled(Tr)(\n  ({ theme }) => css`\n    background: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n    & > ${StyledTd} {\n      height: var(--table-row-group-spacing-height);\n      padding: 0;\n    }\n  `,\n);\n"],"names":["sharedCellStyles","css","$width","theme","Variables","sharedStickyCellStyles","$pinAnchorOffset","sharedHighlightedCellStyles","$highlight","FabricsVariables","Positions","StyledTh","styled","colSpan","$noPadding","$alignment","Flexbox","TABLE_HEADER_HEAD_CONTENT_CLASS","TABLE_CHECKBOX_CLASS","Th","forwardRef","highlight","alignment","noPadding","width","pinAnchorOffset","isPinned","rest","ref","jsx","TH","StyledTd","Td","TD","stickyCellShadowStyles","StyledTr","$depth","$disableRowHover","layer","subtleLayer","BUTTON_CLASS","SELECT_CLASS","EMPTY_STATE_CLASS","StyledExpander","TABLE_MENU_BUTTON_CLASS","TABLE_PIN_BUTTON_CLASS","Tr","depth","disableRowHover","TR","THead","TBody","TFoot","SpaceTR"],"mappings":"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"}

package/build/esm/components/Table/components/TableElements/TableWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/TableWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAiChE,eAAO,MAAM,YAAY,gOAuBxB,CAAC"}
+{"version":3,"file":"TableWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/TableWrapper.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAoChE,eAAO,MAAM,YAAY,gOAuBxB,CAAC"}

package/build/esm/components/Table/components/TableElements/TableWrapper.js

@@ -1,53 +1,57 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
 import { css as o, styled as m } from "styled-components";
-const s = m.div`
-  ${({ $maxWidth: t, $maxHeight: r, $stickyRows: e, $virtualized: a }) => o`
+import { Variables as s } from "../../../../react-base/src/theme/types/layer.js";
+const u = m.div`
+  ${({ $maxWidth: r, $maxHeight: t, $stickyRows: a, $virtualized: e, theme: i }) => o`
+    display: flex;
+    flex-direction: column;
     position: relative;
     width: 100%;
     max-width: 100%;
     overflow: auto;
+    background-color: ${i.layer({ foundation: "surface" })[s.BackgroundFoundation]};
 
-    ${t && o`
-      max-width: ${t}px;
+    ${r && o`
+      max-width: ${r}px;
       overflow-x: auto;
     `}
 
-    ${r && o`
-      max-height: ${r}px;
+    ${t && o`
+      max-height: ${t}px;
       overflow-y: auto;
     `}
 
-    ${e && o`
+    ${a && o`
       overflow-y: auto;
     `}
 
-    ${a && o`
+    ${e && o`
       overflow: auto;
     `}
   `}
-`, x = w(
+`, $ = p(
   ({
-    children: t,
-    maxHeight: r,
-    maxWidth: e,
-    stickyRows: a,
+    children: r,
+    maxHeight: t,
+    maxWidth: a,
+    stickyRows: e,
     virtualized: i,
     ...l
-  }, p) => /* @__PURE__ */ f(
-    s,
+  }, f) => /* @__PURE__ */ d(
+    u,
     {
-      ref: p,
-      $maxHeight: r,
-      $maxWidth: e,
-      $stickyRows: a,
+      ref: f,
+      $maxHeight: t,
+      $maxWidth: a,
+      $stickyRows: e,
       $virtualized: i,
       ...l,
-      children: t
+      children: r
     }
   )
 );
 export {
-  x as TableWrapper
+  $ as TableWrapper
 };
 //# sourceMappingURL=TableWrapper.js.map

package/build/esm/components/Table/components/TableElements/TableWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableWrapper.js","sources":["../../../../../../src/components/Table/components/TableElements/TableWrapper.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef, type RefObject } from 'react';\n\nimport { styled, css } from 'styled-components';\nimport type { TransientAll } from 'acinguiux-ds-react-base/types';\n\nimport type { ITableWrapperProps } from './TableElements.types';\n\nconst StyledTableWrapper = styled.div<TransientAll<ITableWrapperProps>>`\n  ${({ $maxWidth, $maxHeight, $stickyRows, $virtualized }) => css`\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    overflow: auto;\n\n    ${$maxWidth &&\n    css`\n      max-width: ${$maxWidth}px;\n      overflow-x: auto;\n    `}\n\n    ${$maxHeight &&\n    css`\n      max-height: ${$maxHeight}px;\n      overflow-y: auto;\n    `}\n\n    ${$stickyRows &&\n    css`\n      overflow-y: auto;\n    `}\n\n    ${$virtualized &&\n    css`\n      overflow: auto;\n    `}\n  `}\n`;\n\nexport const TableWrapper = forwardRef(\n  (\n    {\n      children,\n      maxHeight,\n      maxWidth,\n      stickyRows,\n      virtualized,\n      ...rest\n    }: ITableWrapperProps & ComponentPropsWithoutRef<'div'>,\n    ref: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined,\n  ) => (\n    <StyledTableWrapper\n      ref={ref}\n      $maxHeight={maxHeight}\n      $maxWidth={maxWidth}\n      $stickyRows={stickyRows}\n      $virtualized={virtualized}\n      {...rest}\n    >\n      {children}\n    </StyledTableWrapper>\n  ),\n);\n"],"names":["StyledTableWrapper","styled","$maxWidth","$maxHeight","$stickyRows","$virtualized","css","TableWrapper","forwardRef","children","maxHeight","maxWidth","stickyRows","virtualized","rest","ref","jsx"],"mappings":";;;AAOA,MAAMA,IAAqBC,EAAO;AAAA,IAC9B,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,aAAAC,GAAa,cAAAC,QAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMxDJ,KACFI;AAAA,mBACeJ,CAAS;AAAA;AAAA,KAEvB;AAAA;AAAA,MAECC,KACFG;AAAA,oBACgBH,CAAU;AAAA;AAAA,KAEzB;AAAA;AAAA,MAECC,KACFE;AAAA;AAAA,KAEC;AAAA;AAAA,MAECD,KACFC;AAAA;AAAA,KAEC;AAAA,GACF;AAAA,GAGUC,IAAeC;AAAA,EAC1B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,KAAAe;AAAA,MACA,YAAYL;AAAA,MACZ,WAAWC;AAAA,MACX,aAAaC;AAAA,MACb,cAAcC;AAAA,MACb,GAAGC;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"TableWrapper.js","sources":["../../../../../../src/components/Table/components/TableElements/TableWrapper.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef, type RefObject } from 'react';\n\nimport { styled, css } from 'styled-components';\nimport type { TransientAll } from 'acinguiux-ds-react-base/types';\nimport { Variables } from 'acinguiux-ds-react-base/theme/types/layer';\n\nimport type { ITableWrapperProps } from './TableElements.types';\n\nconst StyledTableWrapper = styled.div<TransientAll<ITableWrapperProps>>`\n  ${({ $maxWidth, $maxHeight, $stickyRows, $virtualized, theme }) => css`\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    overflow: auto;\n    background-color: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n\n    ${$maxWidth &&\n    css`\n      max-width: ${$maxWidth}px;\n      overflow-x: auto;\n    `}\n\n    ${$maxHeight &&\n    css`\n      max-height: ${$maxHeight}px;\n      overflow-y: auto;\n    `}\n\n    ${$stickyRows &&\n    css`\n      overflow-y: auto;\n    `}\n\n    ${$virtualized &&\n    css`\n      overflow: auto;\n    `}\n  `}\n`;\n\nexport const TableWrapper = forwardRef(\n  (\n    {\n      children,\n      maxHeight,\n      maxWidth,\n      stickyRows,\n      virtualized,\n      ...rest\n    }: ITableWrapperProps & ComponentPropsWithoutRef<'div'>,\n    ref: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined,\n  ) => (\n    <StyledTableWrapper\n      ref={ref}\n      $maxHeight={maxHeight}\n      $maxWidth={maxWidth}\n      $stickyRows={stickyRows}\n      $virtualized={virtualized}\n      {...rest}\n    >\n      {children}\n    </StyledTableWrapper>\n  ),\n);\n"],"names":["StyledTableWrapper","styled","$maxWidth","$maxHeight","$stickyRows","$virtualized","theme","css","Variables","TableWrapper","forwardRef","children","maxHeight","maxWidth","stickyRows","virtualized","rest","ref","jsx"],"mappings":";;;;AAQA,MAAMA,IAAqBC,EAAO;AAAA,IAC9B,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,aAAAC,GAAa,cAAAC,GAAc,OAAAC,QAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAO7CD,EAAM,MAAM,EAAE,YAAY,WAAW,EAAEE,EAAU,oBAAoB,CAAC;AAAA;AAAA,MAExFN,KACFK;AAAA,mBACeL,CAAS;AAAA;AAAA,KAEvB;AAAA;AAAA,MAECC,KACFI;AAAA,oBACgBJ,CAAU;AAAA;AAAA,KAEzB;AAAA;AAAA,MAECC,KACFG;AAAA;AAAA,KAEC;AAAA;AAAA,MAECF,KACFE;AAAA;AAAA,KAEC;AAAA,GACF;AAAA,GAGUE,IAAeC;AAAA,EAC1B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAClB;AAAA,IAAA;AAAA,MACC,KAAAiB;AAAA,MACA,YAAYL;AAAA,MACZ,WAAWC;AAAA,MACX,aAAaC;AAAA,MACb,cAAcC;AAAA,MACb,GAAGC;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/build/esm/components/Table/features/sized.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sized.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/features/sized.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAGL,UAAU,EACV,OAAO,EAEP,YAAY,EACZ,OAAO,EACR,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC;CACvB;AAGD,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;CAC5C;AAGD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACtD;AAGD,OAAO,QAAQ,uBAAuB,CAAC;IAErC,UAAU,UAAW,SAAQ,eAAe;KAAG;IAE/C,UAAU,oBAAoB,CAAC,KAAK,SAAS,OAAO,CAAE,SAAQ,WAAW;KAAG;IAG5E,UAAU,KAAK,CAAC,KAAK,SAAS,OAAO,CAAE,SAAQ,YAAY;KAAG;CAC/D;AAKD,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,EAAE,CAuBzC,CAAC"}
+{"version":3,"file":"sized.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/features/sized.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAGL,UAAU,EACV,OAAO,EAEP,YAAY,EACZ,OAAO,EACR,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC;CACvB;AAGD,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;CAC5C;AAGD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACtD;AAGD,OAAO,QAAQ,uBAAuB,CAAC;IAErC,UAAU,UAAW,SAAQ,eAAe;KAAG;IAE/C,UAAU,oBAAoB,CAAC,KAAK,SAAS,OAAO,CAAE,SAAQ,WAAW;KAAG;IAE5E,UAAU,KAAK,CAAC,KAAK,SAAS,OAAO,CAAE,SAAQ,YAAY;KAAG;CAC/D;AAKD,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,EAAE,CAuBzC,CAAC"}