acinguiux-ds-react-framework 0.0.7 → 0.1.0

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

@@ -2,49 +2,55 @@ import { jsx as n, jsxs as c } from "react/jsx-runtime";
 import { useRef as g, useState as b, useImperativeHandle as v, useCallback as C, useEffect as I } from "react";
 import { flexRender as T } from "@tanstack/react-table";
 import { useDrop as z, useDrag as E } from "react-dnd";
-import B from "../../../Flexbox/Flexbox.js";
-import { TR as U, TD as O } from "./TableElements.js";
-import { DraggableButton as S } from "./DraggableButton.js";
-import { DraggingZone as W } from "./DraggableZone.js";
-import { useTable as j } from "../../hooks/useTable.js";
-import y from "../../../Icon/components/DragAndroid.js";
-import { getCellGap as A } from "../../utils/tableUtils.js";
-import { Sizes as G } from "../../../../react-base/src/consts.js";
+import { Sizes as B } from "../../../../react-base/src/consts/index.js";
+import U from "../../../Flexbox/Flexbox.js";
+import { TR as O, TD as S } from "./TableElements.js";
+import { DraggableButton as W } from "./DraggableButton.js";
+import { DraggingZone as j } from "./DraggableZone.js";
+import { useTable as y } from "../../hooks/useTable.js";
+import A from "../../../Icon/components/DragAndroid.js";
+import { getCellGap as G } from "../../utils/tableUtils.js";
 const p = 50, K = ({ row: t, getState: u, reorderRow: o, finishReorder: l }) => {
   var m;
-  const i = g(null), { size: s = G.Medium } = j(), [f, D] = b((m = i.current) == null ? void 0 : m.getBoundingClientRect().width), d = g(Date.now() - p), [{ isDragging: w }, x] = z({
-    accept: "row",
-    hover: (e, r) => {
-      !r.isOver() && e.isUpdateable() && e.updateRows(t.index);
-    },
-    drop: () => {
-      l();
+  const i = g(null), { size: s = B.Medium } = y(), [f, D] = b((m = i.current) == null ? void 0 : m.getBoundingClientRect().width), d = g(Date.now() - p), [{ isDragging: w }, x] = z(
+    {
+      accept: "row",
+      hover: (e, r) => {
+        !r.isOver() && e.isUpdateable() && e.updateRows(t.index);
+      },
+      drop: () => {
+        l();
+      },
+      collect: (e) => {
+        var r;
+        return {
+          isDragging: ((r = e.getItem()) == null ? void 0 : r.id) === t.id
+        };
+      }
     },
-    collect: (e) => {
-      var r;
-      return {
-        isDragging: ((r = e.getItem()) == null ? void 0 : r.id) === t.id
-      };
-    }
-  }, [t, o]), [, R, h] = E({
-    item: {
-      id: t.id,
-      updateRows: (e) => {
-        d.current = Date.now(), o(t.index, e);
+    [t, o]
+  ), [, R, h] = E(
+    {
+      item: {
+        id: t.id,
+        updateRows: (e) => {
+          d.current = Date.now(), o(t.index, e);
+        },
+        isUpdateable: () => d.current + p < Date.now()
       },
-      isUpdateable: () => d.current + p < Date.now()
+      type: "row"
     },
-    type: "row"
-  }, [o, t]);
+    [o, t]
+  );
   v(x, () => i.current);
   const a = C(() => {
     var e;
     D((e = i.current) == null ? void 0 : e.getBoundingClientRect().width);
   }, [i]);
-  return I(() => (a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a)), [u().columnSizing]), /* @__PURE__ */ n(U, { ref: i, size: s, children: t.getVisibleCells().map((e) => /* @__PURE__ */ c(O, { children: [
-    e.column.getIndex() === 0 && /* @__PURE__ */ n(W, { ref: h, "data-dragging": w, $width: f, size: s }),
-    /* @__PURE__ */ c(B, { alignItems: "center", flexGrow: 1, gap: A(s), children: [
-      e.column.getIndex() === 0 && /* @__PURE__ */ n(S, { ref: R, icon: /* @__PURE__ */ n(y, {}), iconOnly: !0 }),
+  return I(() => (a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a)), [u().columnSizing]), /* @__PURE__ */ n(O, { ref: i, size: s, children: t.getVisibleCells().map((e) => /* @__PURE__ */ c(S, { children: [
+    e.column.getIndex() === 0 && /* @__PURE__ */ n(j, { ref: h, "data-dragging": w, $width: f, size: s }),
+    /* @__PURE__ */ c(U, { alignItems: "center", flexGrow: 1, gap: G(s), children: [
+      e.column.getIndex() === 0 && /* @__PURE__ */ n(W, { ref: R, icon: /* @__PURE__ */ n(A, {}), iconOnly: !0 }),
       T(e.column.columnDef.cell, e.getContext())
     ] })
   ] }, e.id)) });

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableRow.js","sources":["../../../../../../src/components/Table/components/TableElements/DraggableRow.tsx"],"sourcesContent":["import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { flexRender } from '@tanstack/react-table';\nimport { useDrop, useDrag } from 'react-dnd';\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { TR, TD } from './TableElements';\nimport { DraggableButton } from './DraggableButton';\nimport { IDraggableRowProps } from './TableElements.types';\nimport { DraggingZone } from './DraggableZone';\nimport { useTable } from '../../hooks/useTable';\nimport { DragAndroid } from '../../../Icon/components';\nimport { getCellGap } from '../../utils/tableUtils';\n\nconst TIME_TO_UPDATE = 50;\n\n\nexport const DraggableRow = <T,>({ row, getState, reorderRow, finishReorder }: IDraggableRowProps<T>) => {\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const { size = Sizes.Medium } = useTable();\n  const [rowWidth, setRowWidth] = useState(rowRef.current?.getBoundingClientRect().width);\n  const lastUpdate = useRef<number>(Date.now() - TIME_TO_UPDATE);\n\n  const [{ isDragging }, dropRef] = useDrop({\n    accept: 'row',\n    hover: (draggedRow: { id: string, updateRows: (targetRowIndex: number) => void, isUpdateable: () => boolean; }, monitor) => {\n      if (!monitor.isOver() && draggedRow.isUpdateable()) {\n        draggedRow.updateRows(row.index);\n      }\n    },\n    drop: () => {\n      finishReorder();\n    },\n    collect: (monitor) => ({\n      isDragging: Boolean(monitor.getItem()?.id === row.id),\n    }),\n  }, [row, reorderRow]);\n  const [, dragRef, previewRef] = useDrag({\n    item: ({\n      id: row.id,\n      updateRows: (targetRowIndex: number) => {\n        lastUpdate.current = Date.now();\n        reorderRow(row.index, targetRowIndex);\n      },\n      isUpdateable: () => lastUpdate.current + TIME_TO_UPDATE < Date.now(),\n    }),\n    type: 'row',\n  }, [reorderRow, row]);\n\n  useImperativeHandle(dropRef, () => rowRef.current as HTMLTableRowElement);\n\n  const updateRowWidth = useCallback(() => {\n    setRowWidth(rowRef.current?.getBoundingClientRect().width);\n  }, [rowRef]);\n\n  useEffect(() => {\n    updateRowWidth();\n    // NOTE: auto update events are set, but is it a good idea to depend on window?\n    window.addEventListener('resize', updateRowWidth);\n\n    return () => window.removeEventListener('resize', updateRowWidth);\n  }, [getState().columnSizing]);\n\n  return (\n    <TR ref={rowRef} size={size}>\n      {row.getVisibleCells().map((cell) => (\n        <TD key={cell.id}>\n          {cell.column.getIndex() === 0 && <DraggingZone ref={previewRef} data-dragging={isDragging} $width={rowWidth} size={size} />}\n          <Flexbox alignItems=\"center\" flexGrow={1} gap={getCellGap(size)}>\n            {cell.column.getIndex() === 0 && <DraggableButton ref={dragRef} icon={<DragAndroid />} iconOnly />}\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </Flexbox>\n        </TD>\n      ))}\n    </TR>\n  );\n};\n"],"names":["TIME_TO_UPDATE","DraggableRow","row","getState","reorderRow","finishReorder","rowRef","useRef","size","Sizes","useTable","rowWidth","setRowWidth","useState","_a","lastUpdate","isDragging","dropRef","useDrop","draggedRow","monitor","dragRef","previewRef","useDrag","targetRowIndex","useImperativeHandle","updateRowWidth","useCallback","useEffect","jsx","TR","cell","jsxs","TD","DraggingZone","Flexbox","getCellGap","DraggableButton","DragAndroid","flexRender"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAAiB,IAGVC,IAAe,CAAK,EAAE,KAAAC,GAAK,UAAAC,GAAU,YAAAC,GAAY,eAAAC,QAA2C;;AACjG,QAAAC,IAASC,EAA4B,IAAI,GACzC,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS,GACnC,CAACC,GAAUC,CAAW,IAAIC,GAASC,IAAAR,EAAO,YAAP,gBAAAQ,EAAgB,wBAAwB,KAAK,GAChFC,IAAaR,EAAe,KAAK,IAAA,IAAQP,CAAc,GAEvD,CAAC,EAAE,YAAAgB,EAAA,GAAcC,CAAO,IAAIC,EAAQ;AAAA,IACxC,QAAQ;AAAA,IACR,OAAO,CAACC,GAAwGC,MAAY;AAC1H,MAAI,CAACA,EAAQ,OAAY,KAAAD,EAAW,kBACvBA,EAAA,WAAWjB,EAAI,KAAK;AAAA,IAEnC;AAAA,IACA,MAAM,MAAM;AACI,MAAAG,EAAA;AAAA,IAChB;AAAA,IACA,SAAS,CAACe,MAAa;;AAAA;AAAA,QACrB,cAAoBN,IAAAM,EAAQ,cAAR,gBAAAN,EAAmB,QAAOZ,EAAI;AAAA,MACpD;AAAA;AAAA,EAAA,GACC,CAACA,GAAKE,CAAU,CAAC,GACd,GAAGiB,GAASC,CAAU,IAAIC,EAAQ;AAAA,IACtC,MAAO;AAAA,MACL,IAAIrB,EAAI;AAAA,MACR,YAAY,CAACsB,MAA2B;AAC3B,QAAAT,EAAA,UAAU,KAAK,IAAI,GACnBX,EAAAF,EAAI,OAAOsB,CAAc;AAAA,MACtC;AAAA,MACA,cAAc,MAAMT,EAAW,UAAUf,IAAiB,KAAK,IAAI;AAAA,IACrE;AAAA,IACA,MAAM;AAAA,EAAA,GACL,CAACI,GAAYF,CAAG,CAAC;AAEA,EAAAuB,EAAAR,GAAS,MAAMX,EAAO,OAA8B;AAElE,QAAAoB,IAAiBC,EAAY,MAAM;;AACvC,IAAAf,GAAYE,IAAAR,EAAO,YAAP,gBAAAQ,EAAgB,wBAAwB,KAAK;AAAA,EAAA,GACxD,CAACR,CAAM,CAAC;AAEX,SAAAsB,EAAU,OACOF,EAAA,GAER,OAAA,iBAAiB,UAAUA,CAAc,GAEzC,MAAM,OAAO,oBAAoB,UAAUA,CAAc,IAC/D,CAACvB,IAAW,YAAY,CAAC,GAGzB,gBAAA0B,EAAAC,GAAA,EAAG,KAAKxB,GAAQ,MAAAE,GACd,UAAAN,EAAI,gBAAgB,EAAE,IAAI,CAAC6B,MAC1B,gBAAAC,EAACC,GACE,EAAA,UAAA;AAAA,IAAAF,EAAK,OAAO,SAAA,MAAe,KAAM,gBAAAF,EAAAK,GAAA,EAAa,KAAKZ,GAAY,iBAAeN,GAAY,QAAQL,GAAU,MAAAH,EAAY,CAAA;AAAA,IACzH,gBAAAwB,EAACG,KAAQ,YAAW,UAAS,UAAU,GAAG,KAAKC,EAAW5B,CAAI,GAC3D,UAAA;AAAA,MAAAuB,EAAK,OAAO,SAAA,MAAe,KAAM,gBAAAF,EAAAQ,GAAA,EAAgB,KAAKhB,GAAS,MAAM,gBAAAQ,EAACS,GAAY,CAAA,CAAA,GAAI,UAAQ,IAAC;AAAA,MAC/FC,EAAWR,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,IAAA,EAC3D,CAAA;AAAA,EALO,EAAA,GAAAA,EAAK,EAMd,CACD,GACH;AAEJ;"}
+{"version":3,"file":"DraggableRow.js","sources":["../../../../../../src/components/Table/components/TableElements/DraggableRow.tsx"],"sourcesContent":["import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { flexRender } from '@tanstack/react-table';\nimport { useDrop, useDrag } from 'react-dnd';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { TR, TD } from './TableElements';\nimport { DraggableButton } from './DraggableButton';\nimport type { IDraggableRowProps } from './TableElements.types';\nimport { DraggingZone } from './DraggableZone';\nimport { useTable } from '../../hooks/useTable';\nimport DragAndroid from '../../../Icon/components/DragAndroid';\nimport { getCellGap } from '../../utils/tableUtils';\n\nconst TIME_TO_UPDATE = 50;\n\nexport const DraggableRow = <T,>({ row, getState, reorderRow, finishReorder }: IDraggableRowProps<T>) => {\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const { size = Sizes.Medium } = useTable();\n  const [rowWidth, setRowWidth] = useState(rowRef.current?.getBoundingClientRect().width);\n  const lastUpdate = useRef<number>(Date.now() - TIME_TO_UPDATE);\n\n  const [{ isDragging }, dropRef] = useDrop(\n    {\n      accept: 'row',\n      hover: (\n        draggedRow: { id: string; updateRows: (targetRowIndex: number) => void; isUpdateable: () => boolean },\n        monitor,\n      ) => {\n        if (!monitor.isOver() && draggedRow.isUpdateable()) {\n          draggedRow.updateRows(row.index);\n        }\n      },\n      drop: () => {\n        finishReorder();\n      },\n      collect: (monitor) => ({\n        isDragging: Boolean(monitor.getItem()?.id === row.id),\n      }),\n    },\n    [row, reorderRow],\n  );\n  const [, dragRef, previewRef] = useDrag(\n    {\n      item: {\n        id: row.id,\n        updateRows: (targetRowIndex: number) => {\n          lastUpdate.current = Date.now();\n          reorderRow(row.index, targetRowIndex);\n        },\n        isUpdateable: () => lastUpdate.current + TIME_TO_UPDATE < Date.now(),\n      },\n      type: 'row',\n    },\n    [reorderRow, row],\n  );\n\n  useImperativeHandle(dropRef, () => rowRef.current as HTMLTableRowElement);\n\n  const updateRowWidth = useCallback(() => {\n    setRowWidth(rowRef.current?.getBoundingClientRect().width);\n  }, [rowRef]);\n\n  useEffect(() => {\n    updateRowWidth();\n    // NOTE: auto update events are set, but is it a good idea to depend on window?\n    window.addEventListener('resize', updateRowWidth);\n\n    return () => window.removeEventListener('resize', updateRowWidth);\n  }, [getState().columnSizing]);\n\n  return (\n    <TR ref={rowRef} size={size}>\n      {row.getVisibleCells().map((cell) => (\n        <TD key={cell.id}>\n          {cell.column.getIndex() === 0 && (\n            <DraggingZone ref={previewRef} data-dragging={isDragging} $width={rowWidth} size={size} />\n          )}\n          <Flexbox alignItems=\"center\" flexGrow={1} gap={getCellGap(size)}>\n            {cell.column.getIndex() === 0 && <DraggableButton ref={dragRef} icon={<DragAndroid />} iconOnly />}\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </Flexbox>\n        </TD>\n      ))}\n    </TR>\n  );\n};\n"],"names":["TIME_TO_UPDATE","DraggableRow","row","getState","reorderRow","finishReorder","rowRef","useRef","size","Sizes","useTable","rowWidth","setRowWidth","useState","_a","lastUpdate","isDragging","dropRef","useDrop","draggedRow","monitor","dragRef","previewRef","useDrag","targetRowIndex","useImperativeHandle","updateRowWidth","useCallback","useEffect","jsx","TR","cell","jsxs","TD","DraggingZone","Flexbox","getCellGap","DraggableButton","DragAndroid","flexRender"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAAiB,IAEVC,IAAe,CAAK,EAAE,KAAAC,GAAK,UAAAC,GAAU,YAAAC,GAAY,eAAAC,QAA2C;;AACjG,QAAAC,IAASC,EAA4B,IAAI,GACzC,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS,GACnC,CAACC,GAAUC,CAAW,IAAIC,GAASC,IAAAR,EAAO,YAAP,gBAAAQ,EAAgB,wBAAwB,KAAK,GAChFC,IAAaR,EAAe,KAAK,IAAA,IAAQP,CAAc,GAEvD,CAAC,EAAE,YAAAgB,KAAcC,CAAO,IAAIC;AAAA,IAChC;AAAA,MACE,QAAQ;AAAA,MACR,OAAO,CACLC,GACAC,MACG;AACH,QAAI,CAACA,EAAQ,OAAY,KAAAD,EAAW,kBACvBA,EAAA,WAAWjB,EAAI,KAAK;AAAA,MAEnC;AAAA,MACA,MAAM,MAAM;AACI,QAAAG,EAAA;AAAA,MAChB;AAAA,MACA,SAAS,CAACe,MAAa;;AAAA;AAAA,UACrB,cAAoBN,IAAAM,EAAQ,cAAR,gBAAAN,EAAmB,QAAOZ,EAAI;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,IACA,CAACA,GAAKE,CAAU;AAAA,EAClB,GACM,CAAG,EAAAiB,GAASC,CAAU,IAAIC;AAAA,IAC9B;AAAA,MACE,MAAM;AAAA,QACJ,IAAIrB,EAAI;AAAA,QACR,YAAY,CAACsB,MAA2B;AAC3B,UAAAT,EAAA,UAAU,KAAK,IAAI,GACnBX,EAAAF,EAAI,OAAOsB,CAAc;AAAA,QACtC;AAAA,QACA,cAAc,MAAMT,EAAW,UAAUf,IAAiB,KAAK,IAAI;AAAA,MACrE;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,CAACI,GAAYF,CAAG;AAAA,EAClB;AAEoB,EAAAuB,EAAAR,GAAS,MAAMX,EAAO,OAA8B;AAElE,QAAAoB,IAAiBC,EAAY,MAAM;;AACvC,IAAAf,GAAYE,IAAAR,EAAO,YAAP,gBAAAQ,EAAgB,wBAAwB,KAAK;AAAA,EAAA,GACxD,CAACR,CAAM,CAAC;AAEX,SAAAsB,EAAU,OACOF,EAAA,GAER,OAAA,iBAAiB,UAAUA,CAAc,GAEzC,MAAM,OAAO,oBAAoB,UAAUA,CAAc,IAC/D,CAACvB,IAAW,YAAY,CAAC,GAGzB,gBAAA0B,EAAAC,GAAA,EAAG,KAAKxB,GAAQ,MAAAE,GACd,UAAAN,EAAI,gBAAgB,EAAE,IAAI,CAAC6B,MAC1B,gBAAAC,EAACC,GACE,EAAA,UAAA;AAAA,IAAAF,EAAK,OAAO,SAAA,MAAe,KACzB,gBAAAF,EAAAK,GAAA,EAAa,KAAKZ,GAAY,iBAAeN,GAAY,QAAQL,GAAU,MAAAH,EAAY,CAAA;AAAA,IAE1F,gBAAAwB,EAACG,KAAQ,YAAW,UAAS,UAAU,GAAG,KAAKC,EAAW5B,CAAI,GAC3D,UAAA;AAAA,MAAAuB,EAAK,OAAO,SAAA,MAAe,KAAM,gBAAAF,EAAAQ,GAAA,EAAgB,KAAKhB,GAAS,MAAM,gBAAAQ,EAACS,GAAY,CAAA,CAAA,GAAI,UAAQ,IAAC;AAAA,MAC/FC,EAAWR,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,IAAA,EAC3D,CAAA;AAAA,EAPO,EAAA,GAAAA,EAAK,EAQd,CACD,GACH;AAEJ;"}

package/build/esm/components/Table/components/TableElements/DraggableZone.d.ts

@@ -1,7 +1,7 @@
-import { TableTypes } from '..\..\..\..\react-base\src';
-export declare const DraggingZone: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    dragging?: boolean | undefined;
-    $width?: number | undefined;
-    size?: TableTypes.Size | undefined;
-}, never>;
+import { type TableTypes } from '..\..\..\..\react-base\src/components/Table';
+export declare const DraggingZone: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    dragging?: boolean;
+    $width?: number;
+    size?: TableTypes.Size;
+}>> & string;
 //# sourceMappingURL=DraggableZone.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableZone.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/DraggableZone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQzE,eAAO,MAAM,YAAY;;;;SAyBxB,CAAC"}
+{"version":3,"file":"DraggableZone.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/DraggableZone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAC;AASxF,eAAO,MAAM,YAAY;eAA2B,OAAO;aAAW,MAAM;WAAS,UAAU,CAAC,IAAI;YA+BnG,CAAC"}

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

@@ -1,33 +1,39 @@
-import o from "styled-components";
-import { consts as i } from "../../../../react-base/src/components/Table/Table.consts.js";
-import { Sizes as r } from "../../../../react-base/src/consts.js";
-const t = 3, a = 5, l = o.div`
-  position: absolute;
-  top: 1px;
-  bottom: 1px;
-  margin-left: -${({ size: e = r.Medium }) => i[e].headerCell.padding.left}px;
-  width: ${({ $width: e }) => (e ?? 0) - a}px;
-  padding: ${t}px;
-  visibility: hidden;
-  transition: all 0.01s ease-in;
-  &[data-dragging='true'] {
-    visibility: visible;
-    background-color: ${({ theme: e }) => e.onSurface.surface.default.background};
-    border-radius: 12px;
-    &&::after {
-      content: '';
-      position: relative;
-      transform: translateX(${t / 2}px);
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: 8px;
-      background-color: ${({ theme: e }) => e.onSentiment.default.subtle.selected.default.background};
-      border: 1px dashed ${({ theme: e }) => e.onSurface.surface.default.border.medium};
+import { Sizes as n } from "../../../../react-base/src/consts/index.js";
+import { consts as d } from "../../../../react-base/src/components/Table/Table.consts.js";
+import s from "styled-components";
+import { VariablesNames as e } from "../../../../react-base/src/theme/variableTheme.js";
+const i = 3, l = 5, m = s.div(
+  ({ theme: r, $width: t, size: a = `${n.Medium}` }) => {
+    const o = r.getVariablesLayer({ foundation: "surface", selectedProminence: "subtle" });
+    return `
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    margin-left: -${d[a].headerCell.padding.left}px;
+    width: ${(t ?? 0) - l}px;
+    padding: ${i}px;
+    visibility: hidden;
+    transition: all 0.01s ease-in;
+    &[data-dragging='true'] {
+      visibility: visible;
+      background-color: ${o[e.BackgroundFoundation]};
+      border-radius: 12px;
+      &&::after {
+        content: '';
+        position: relative;
+        transform: translateX(${i / 2}px);
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background-color: ${o[e.BackgroundSelected]};
+        border: 1px dashed ${o[e.BorderOnFoundationMedium]};
+      }
     }
+  `;
   }
-`;
+);
 export {
-  l as DraggingZone
+  m as DraggingZone
 };
 //# sourceMappingURL=DraggableZone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableZone.js","sources":["../../../../../../src/components/Table/components/TableElements/DraggableZone.tsx"],"sourcesContent":["import { Sizes, TableConsts, TableTypes } from 'acinguiux-ds-react-base';\nimport styled from 'styled-components';\n\nconst DRAGGING_ZONE_PADDING = 3;\n\n/* used to make the dragging zone a bit smaller than the actual column, so it aligns with the resizer */\nconst DRAGGING_ZONE_WIDTH_PADDING = 5;\n\nexport const DraggingZone = styled.div<{ dragging?: boolean, $width?: number, size?: TableTypes.Size }>`\n  position: absolute;\n  top: 1px;\n  bottom: 1px;\n  margin-left: -${({ size = Sizes.Medium }) => TableConsts.consts[size].headerCell.padding.left}px;\n  width: ${({ $width }) => ($width ?? 0) - DRAGGING_ZONE_WIDTH_PADDING}px;\n  padding: ${DRAGGING_ZONE_PADDING}px;\n  visibility: hidden;\n  transition: all 0.01s ease-in;\n  &[data-dragging='true'] {\n    visibility: visible;\n    background-color: ${({ theme }) => theme.onSurface.surface.default.background};\n    border-radius: 12px;\n    &&::after {\n      content: '';\n      position: relative;\n      transform: translateX(${DRAGGING_ZONE_PADDING / 2}px);\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: 8px;\n      background-color: ${({ theme }) => theme.onSentiment.default.subtle.selected.default.background};\n      border: 1px dashed ${({ theme }) => theme.onSurface.surface.default.border.medium};\n    }\n  }\n`;\n"],"names":["DRAGGING_ZONE_PADDING","DRAGGING_ZONE_WIDTH_PADDING","DraggingZone","styled","size","Sizes","TableConsts.consts","$width","theme"],"mappings":";;;AAGA,MAAMA,IAAwB,GAGxBC,IAA8B,GAEvBC,IAAeC,EAAO;AAAA;AAAA;AAAA;AAAA,kBAIjB,CAAC,EAAE,MAAAC,IAAOC,EAAM,OAAO,MAAMC,EAAmBF,CAAI,EAAE,WAAW,QAAQ,IAAI;AAAA,WACpF,CAAC,EAAE,QAAAG,EAAc,OAAAA,KAAU,KAAKN,CAA2B;AAAA,aACzDD,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKV,CAAC,EAAE,OAAAQ,QAAYA,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKnDR,IAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK7B,CAAC,EAAE,OAAAQ,EAAY,MAAAA,EAAM,YAAY,QAAQ,OAAO,SAAS,QAAQ,UAAU;AAAA,2BAC1E,CAAC,EAAE,OAAAA,EAAM,MAAMA,EAAM,UAAU,QAAQ,QAAQ,OAAO,MAAM;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"DraggableZone.js","sources":["../../../../../../src/components/Table/components/TableElements/DraggableZone.tsx"],"sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { TableConsts, type TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport styled from 'styled-components';\nimport { VariablesNames } from 'acinguiux-ds-react-base/theme';\n\nconst DRAGGING_ZONE_PADDING = 3;\n\n/* used to make the dragging zone a bit smaller than the actual column, so it aligns with the resizer */\nconst DRAGGING_ZONE_WIDTH_PADDING = 5;\n\nexport const DraggingZone = styled.div<{ dragging?: boolean; $width?: number; size?: TableTypes.Size }>(\n  ({ theme, $width, size = `${Sizes.Medium}` }) => {\n    const layer = theme.getVariablesLayer({ foundation: 'surface', selectedProminence: 'subtle' });\n\n    return `\n    position: absolute;\n    top: 1px;\n    bottom: 1px;\n    margin-left: -${TableConsts.consts[size].headerCell.padding.left}px;\n    width: ${($width ?? 0) - DRAGGING_ZONE_WIDTH_PADDING}px;\n    padding: ${DRAGGING_ZONE_PADDING}px;\n    visibility: hidden;\n    transition: all 0.01s ease-in;\n    &[data-dragging='true'] {\n      visibility: visible;\n      background-color: ${layer[VariablesNames.BackgroundFoundation]};\n      border-radius: 12px;\n      &&::after {\n        content: '';\n        position: relative;\n        transform: translateX(${DRAGGING_ZONE_PADDING / 2}px);\n        display: block;\n        width: 100%;\n        height: 100%;\n        border-radius: 8px;\n        background-color: ${layer[VariablesNames.BackgroundSelected]};\n        border: 1px dashed ${layer[VariablesNames.BorderOnFoundationMedium]};\n      }\n    }\n  `;\n  },\n);\n"],"names":["DRAGGING_ZONE_PADDING","DRAGGING_ZONE_WIDTH_PADDING","DraggingZone","styled","theme","$width","size","Sizes","layer","TableConsts.consts","VariablesNames"],"mappings":";;;;AAKA,MAAMA,IAAwB,GAGxBC,IAA8B,GAEvBC,IAAeC,EAAO;AAAA,EACjC,CAAC,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,IAAO,GAAGC,EAAM,MAAM,SAAS;AACzC,UAAAC,IAAQJ,EAAM,kBAAkB,EAAE,YAAY,WAAW,oBAAoB,UAAU;AAEtF,WAAA;AAAA;AAAA;AAAA;AAAA,oBAISK,EAAmBH,CAAI,EAAE,WAAW,QAAQ,IAAI;AAAA,cACtDD,KAAU,KAAKJ,CAA2B;AAAA,eACzCD,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKVQ,EAAME,EAAe,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKpCV,IAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK7BQ,EAAME,EAAe,kBAAkB,CAAC;AAAA,6BACvCF,EAAME,EAAe,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAK3E;"}

package/build/esm/components/Table/components/TableElements/Expander.d.ts

@@ -1,4 +1,4 @@
-import { ITableCellExpanderContainerProps, IExpanderProps } from './TableElements.types';
-export declare const StyledExpander: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableCellExpanderContainerProps, never>;
+import type { ITableCellExpanderContainerProps, IExpanderProps } from './TableElements.types';
+export declare const StyledExpander: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ITableCellExpanderContainerProps>> & string;
 export declare const Expander: <T>({ row, children }: IExpanderProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Expander.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/Expander.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGzF,eAAO,MAAM,cAAc,uIAY1B,CAAC;AAEF,eAAO,MAAM,QAAQ,yBAA2B,eAAe,CAAC,CAAC,4CAgBhE,CAAC"}
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/Expander.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG9F,eAAO,MAAM,cAAc,qQAY1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,CAAC,qBAAsB,cAAc,CAAC,CAAC,CAAC,4CAgBhE,CAAC"}

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

@@ -1,9 +1,9 @@
 import { jsxs as p, jsx as a } from "react/jsx-runtime";
 import i, { css as n } from "styled-components";
-import { useTable as s } from "../../hooks/useTable.js";
-import { ExpanderButton as r } from "./ExpanderButton.js";
-import { consts as o } from "../../../../react-base/src/components/Button/Button.consts.js";
-import { Sizes as l } from "../../../../react-base/src/consts.js";
+import { Sizes as s } from "../../../../react-base/src/consts/index.js";
+import { consts as r } from "../../../../react-base/src/components/Button/Button.consts.js";
+import { useTable as o } from "../../hooks/useTable.js";
+import { ExpanderButton as l } from "./ExpanderButton.js";
 const x = i.div(
   ({ size: e, depth: t, lastChild: d }) => n`
     display: flex;
@@ -12,14 +12,14 @@ const x = i.div(
     padding-left: ${t * 40}px;
 
     ${d && n`
-      padding-left: calc(${t * 40}px + ${o.height[e]});
+      padding-left: calc(${t * 40}px + ${r[e].height});
     `}
   `
 ), u = ({ row: e, children: t }) => {
-  const { size: d = l.Medium } = s();
+  const { size: d = s.Medium } = o();
   return /* @__PURE__ */ p(x, { size: d, depth: e.depth, lastChild: !e.getCanExpand(), children: [
     e.getCanExpand() && /* @__PURE__ */ a(
-      r,
+      l,
       {
         expanded: e.getIsExpanded(),
         onClick: e.getToggleExpandedHandler()

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

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../../../../../../src/components/Table/components/TableElements/Expander.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ButtonTypes, Sizes, ButtonConsts } from 'acinguiux-ds-react-base';\n\nimport { useTable } from '../../hooks/useTable';\nimport { ITableCellExpanderContainerProps, IExpanderProps } from './TableElements.types';\nimport { ExpanderButton } from './ExpanderButton';\n\nexport const StyledExpander = styled.div<ITableCellExpanderContainerProps>(\n  ({ size, depth, lastChild }) => css`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-left: ${depth * 40}px;\n\n    ${lastChild &&\n    css`\n      padding-left: calc(${depth * 40}px + ${ButtonConsts.consts.height[size as ButtonTypes.Size]});\n    `}\n  `,\n);\n\nexport const Expander = <T,>({ row, children }: IExpanderProps<T>) => {\n  const { size = Sizes.Medium } = useTable();\n\n  return (\n    <StyledExpander size={size} depth={row.depth} lastChild={!row.getCanExpand()}>\n      {row.getCanExpand() && (\n        <ExpanderButton\n          expanded={row.getIsExpanded()}\n          {...{\n            onClick: row.getToggleExpandedHandler(),\n          }}\n        />\n      )}\n      {children}\n    </StyledExpander>\n  );\n};\n"],"names":["StyledExpander","styled","size","depth","lastChild","css","ButtonConsts.consts","Expander","row","children","Sizes","useTable","jsxs","jsx","ExpanderButton"],"mappings":";;;;;;AAOO,MAAMA,IAAiBC,EAAO;AAAA,EACnC,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,EAAgB,MAAAC;AAAA;AAAA;AAAA;AAAA,oBAIdF,IAAQ,EAAE;AAAA;AAAA,MAExBC,KACFC;AAAA,2BACuBF,IAAQ,EAAE,QAAQG,EAAoB,OAAOJ,CAAwB,CAAC;AAAA,KAC5F;AAAA;AAEL,GAEaK,IAAW,CAAK,EAAE,KAAAC,GAAK,UAAAC,QAAkC;AACpE,QAAM,EAAE,MAAAP,IAAOQ,EAAM,OAAA,IAAWC,EAAS;AAGvC,SAAA,gBAAAC,EAACZ,GAAe,EAAA,MAAAE,GAAY,OAAOM,EAAI,OAAO,WAAW,CAACA,EAAI,aAAA,GAC3D,UAAA;AAAA,IAAAA,EAAI,kBACH,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUN,EAAI,cAAc;AAAA,QAE1B,SAASA,EAAI,yBAAyB;AAAA,MACxC;AAAA,IACF;AAAA,IAEDC;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"Expander.js","sources":["../../../../../../src/components/Table/components/TableElements/Expander.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type ButtonTypes, ButtonConsts } from 'acinguiux-ds-react-base/components/Button';\n\nimport { useTable } from '../../hooks/useTable';\nimport type { ITableCellExpanderContainerProps, IExpanderProps } from './TableElements.types';\nimport { ExpanderButton } from './ExpanderButton';\n\nexport const StyledExpander = styled.div<ITableCellExpanderContainerProps>(\n  ({ size, depth, lastChild }) => css`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-left: ${depth * 40}px;\n\n    ${lastChild &&\n    css`\n      padding-left: calc(${depth * 40}px + ${ButtonConsts.consts[size as ButtonTypes.Size].height});\n    `}\n  `,\n);\n\nexport const Expander = <T,>({ row, children }: IExpanderProps<T>) => {\n  const { size = Sizes.Medium } = useTable();\n\n  return (\n    <StyledExpander size={size} depth={row.depth} lastChild={!row.getCanExpand()}>\n      {row.getCanExpand() && (\n        <ExpanderButton\n          expanded={row.getIsExpanded()}\n          {...{\n            onClick: row.getToggleExpandedHandler(),\n          }}\n        />\n      )}\n      {children}\n    </StyledExpander>\n  );\n};\n"],"names":["StyledExpander","styled","size","depth","lastChild","css","ButtonConsts.consts","Expander","row","children","Sizes","useTable","jsxs","jsx","ExpanderButton"],"mappings":";;;;;;AAQO,MAAMA,IAAiBC,EAAO;AAAA,EACnC,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,EAAgB,MAAAC;AAAA;AAAA;AAAA;AAAA,oBAIdF,IAAQ,EAAE;AAAA;AAAA,MAExBC,KACFC;AAAA,2BACuBF,IAAQ,EAAE,QAAQG,EAAoBJ,CAAwB,EAAE,MAAM;AAAA,KAC5F;AAAA;AAEL,GAEaK,IAAW,CAAK,EAAE,KAAAC,GAAK,UAAAC,QAAkC;AACpE,QAAM,EAAE,MAAAP,IAAOQ,EAAM,OAAA,IAAWC,EAAS;AAGvC,SAAA,gBAAAC,EAACZ,GAAe,EAAA,MAAAE,GAAY,OAAOM,EAAI,OAAO,WAAW,CAACA,EAAI,aAAA,GAC3D,UAAA;AAAA,IAAAA,EAAI,kBACH,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUN,EAAI,cAAc;AAAA,QAE1B,SAASA,EAAI,yBAAyB;AAAA,MACxC;AAAA,IACF;AAAA,IAEDC;AAAA,EAAA,GACH;AAEJ;"}

package/build/esm/components/Table/components/TableElements/ExpanderButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { ITableExpander } from '../../Table.types';
+import type { ITableExpander } from '../../Table.types';
 export declare const ExpanderButton: import("react").ForwardRefExoticComponent<Omit<ITableExpander, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ExpanderButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/ExpanderButton.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKnD,eAAO,MAAM,cAAc,2HA4B1B,CAAC"}
+{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/ExpanderButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMxD,eAAO,MAAM,cAAc,2HA4B1B,CAAC"}

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

@@ -1,26 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { useTable as s } from "../../hooks/useTable.js";
-import p from "../../../Button/Button.js";
-import { getSize as d } from "../../utils/tableUtils.js";
-import c from "../../../Icon/components/ChevronDown.js";
-import f from "../../../Icon/components/ChevronRight.js";
-import { Sizes as l, TABLE_EXPANDER_BUTTON_CLASS as u, Variants as x } from "../../../../react-base/src/consts.js";
+import { Sizes as p, TABLE_EXPANDER_BUTTON_CLASS as s, Variants as d } from "../../../../react-base/src/consts/index.js";
 import { consts as e } from "../../../../react-base/src/components/Button/Button.consts.js";
+import { useTable as c } from "../../hooks/useTable.js";
+import f from "../../../Button/Button.js";
+import { getSize as l } from "../../utils/tableUtils.js";
+import u from "../../../Icon/components/ChevronDown.js";
+import x from "../../../Icon/components/ChevronRight.js";
 const w = m(
   ({ expanded: i, ...n }, a) => {
-    const { size: o = l.Medium } = s(), t = {
-      width: e.icons[o],
-      height: e.icons[o]
+    const { size: o = p.Medium } = c(), t = {
+      width: e[o].iconSize,
+      height: e[o].iconSize
     };
     return /* @__PURE__ */ r(
-      p,
+      f,
       {
-        className: u,
+        className: s,
         "aria-label": "Expander button",
-        size: d(o),
-        variant: x.Transparent,
-        icon: i ? /* @__PURE__ */ r(c, { "data-testid": "expander-expanded", ...t }) : /* @__PURE__ */ r(f, { "data-testid": "expander-collapsed", ...t }),
+        size: l(o),
+        variant: d.Transparent,
+        icon: i ? /* @__PURE__ */ r(u, { "data-testid": "expander-expanded", ...t }) : /* @__PURE__ */ r(x, { "data-testid": "expander-collapsed", ...t }),
         iconOnly: !0,
         ref: a,
         ...n

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

@@ -1 +1 @@
-{"version":3,"file":"ExpanderButton.js","sources":["../../../../../../src/components/Table/components/TableElements/ExpanderButton.tsx"],"sourcesContent":["import { forwardRef, ForwardedRef } from 'react';\n\nimport { Sizes, Variants, TABLE_EXPANDER_BUTTON_CLASS, ButtonConsts } from 'acinguiux-ds-react-base';\n\nimport { useTable } from '../../hooks/useTable';\nimport { ITableExpander } from '../../Table.types';\nimport Button from '../../../Button/Button';\nimport { getSize } from '../../utils/tableUtils';\nimport { ChevronDown, ChevronRight } from '../../../Icon/components';\n\nexport const ExpanderButton = forwardRef(\n  ({ expanded, ...props }: ITableExpander, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { size = Sizes.Medium } = useTable();\n\n    const iconProps = {\n      width: ButtonConsts.consts.icons[size],\n      height: ButtonConsts.consts.icons[size],\n    };\n\n    return (\n      <Button\n        className={TABLE_EXPANDER_BUTTON_CLASS}\n        aria-label=\"Expander button\"\n        size={getSize(size)}\n        variant={Variants.Transparent}\n        icon={\n          expanded ? (\n            <ChevronDown data-testid=\"expander-expanded\" {...iconProps} />\n          ) : (\n            <ChevronRight data-testid=\"expander-collapsed\" {...iconProps} />\n          )\n        }\n        iconOnly\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["ExpanderButton","forwardRef","expanded","props","ref","size","Sizes","useTable","iconProps","ButtonConsts.consts","jsx","Button","TABLE_EXPANDER_BUTTON_CLASS","getSize","Variants","ChevronDown","ChevronRight"],"mappings":";;;;;;;;;AAUO,MAAMA,IAAiBC;AAAA,EAC5B,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA,GAAyBC,MAAyC;AAChF,UAAM,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS,GAEnCC,IAAY;AAAA,MAChB,OAAOC,EAAoB,MAAMJ,CAAI;AAAA,MACrC,QAAQI,EAAoB,MAAMJ,CAAI;AAAA,IACxC;AAGE,WAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,QACX,cAAW;AAAA,QACX,MAAMC,EAAQR,CAAI;AAAA,QAClB,SAASS,EAAS;AAAA,QAClB,MACEZ,IACG,gBAAAQ,EAAAK,GAAA,EAAY,eAAY,qBAAqB,GAAGP,EAAW,CAAA,IAE3D,gBAAAE,EAAAM,GAAA,EAAa,eAAY,sBAAsB,GAAGR,GAAW;AAAA,QAGlE,UAAQ;AAAA,QACR,KAAAJ;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ExpanderButton.js","sources":["../../../../../../src/components/Table/components/TableElements/ExpanderButton.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\n\nimport { Sizes, Variants, TABLE_EXPANDER_BUTTON_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { ButtonConsts } from 'acinguiux-ds-react-base/components/Button';\n\nimport { useTable } from '../../hooks/useTable';\nimport type { ITableExpander } from '../../Table.types';\nimport Button from '../../../Button/Button';\nimport { getSize } from '../../utils/tableUtils';\nimport ChevronDown from '../../../Icon/components/ChevronDown';\nimport ChevronRight from '../../../Icon/components/ChevronRight';\n\nexport const ExpanderButton = forwardRef(\n  ({ expanded, ...props }: ITableExpander, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { size = Sizes.Medium } = useTable();\n\n    const iconProps = {\n      width: ButtonConsts.consts[size].iconSize,\n      height: ButtonConsts.consts[size].iconSize,\n    };\n\n    return (\n      <Button\n        className={TABLE_EXPANDER_BUTTON_CLASS}\n        aria-label=\"Expander button\"\n        size={getSize(size)}\n        variant={Variants.Transparent}\n        icon={\n          expanded ? (\n            <ChevronDown data-testid=\"expander-expanded\" {...iconProps} />\n          ) : (\n            <ChevronRight data-testid=\"expander-collapsed\" {...iconProps} />\n          )\n        }\n        iconOnly\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["ExpanderButton","forwardRef","expanded","props","ref","size","Sizes","useTable","iconProps","ButtonConsts.consts","jsx","Button","TABLE_EXPANDER_BUTTON_CLASS","getSize","Variants","ChevronDown","ChevronRight"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAiBC;AAAA,EAC5B,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA,GAAyBC,MAAyC;AAChF,UAAM,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS,GAEnCC,IAAY;AAAA,MAChB,OAAOC,EAAoBJ,CAAI,EAAE;AAAA,MACjC,QAAQI,EAAoBJ,CAAI,EAAE;AAAA,IACpC;AAGE,WAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,QACX,cAAW;AAAA,QACX,MAAMC,EAAQR,CAAI;AAAA,QAClB,SAASS,EAAS;AAAA,QAClB,MACEZ,IACG,gBAAAQ,EAAAK,GAAA,EAAY,eAAY,qBAAqB,GAAGP,EAAW,CAAA,IAE3D,gBAAAE,EAAAM,GAAA,EAAa,eAAY,sBAAsB,GAAGR,GAAW;AAAA,QAGlE,UAAQ;AAAA,QACR,KAAAJ;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/build/esm/components/Table/components/TableElements/Filter.d.ts

@@ -1,3 +1,3 @@
-import { IFilterProps } from './TableElements.types';
+import type { IFilterProps } from './TableElements.types';
 export declare const Filter: ({ filters }: IFilterProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Filter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIrD,eAAO,MAAM,MAAM,gBAAiB,YAAY,4CAGrC,CAAC"}
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,eAAO,MAAM,MAAM,gBAAiB,YAAY,4CAK/C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../../../../src/components/Table/components/TableElements/Filter.tsx"],"sourcesContent":["import { IFilterProps } from './TableElements.types';\nimport { FilterButton } from './FilterButton';\nimport { Popover, PopoverContent } from '../../../Popover/Popover';\n\nexport const Filter = ({ filters }: IFilterProps) => (<Popover>\n  <PopoverContent>{filters}</PopoverContent>\n  <FilterButton />\n</Popover>);\n"],"names":["Filter","filters","Popover","jsx","PopoverContent","FilterButton"],"mappings":";;;AAIO,MAAMA,IAAS,CAAC,EAAE,SAAAC,EAAQ,wBAAsBC,GACrD,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,KAAgB,UAAQH,EAAA,CAAA;AAAA,oBACxBI,GAAa,CAAA,CAAA;AAAA,EAChB,CAAA;"}
+{"version":3,"file":"Filter.js","sources":["../../../../../../src/components/Table/components/TableElements/Filter.tsx"],"sourcesContent":["import type { IFilterProps } from './TableElements.types';\nimport { FilterButton } from './FilterButton';\nimport { Popover, PopoverContent } from '../../../Popover/Popover';\n\nexport const Filter = ({ filters }: IFilterProps) => (\n  <Popover>\n    <PopoverContent>{filters}</PopoverContent>\n    <FilterButton />\n  </Popover>\n);\n"],"names":["Filter","filters","Popover","jsx","PopoverContent","FilterButton"],"mappings":";;;AAIO,MAAMA,IAAS,CAAC,EAAE,SAAAC,EAAQ,wBAC9BC,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,KAAgB,UAAQH,EAAA,CAAA;AAAA,oBACxBI,GAAa,CAAA,CAAA;AAAA,EAChB,CAAA;"}

package/build/esm/components/Table/components/TableElements/FilterButton.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const FilterButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=FilterButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/FilterButton.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY;;6DAiBxB,CAAC"}
+{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/FilterButton.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY;;6DAmBxB,CAAC"}

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

@@ -1,23 +1,28 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as e } from "react";
-import { useTable as m } from "../../hooks/useTable.js";
-import a from "../../../Icon/components/Filter.js";
-import { getSize as n } from "../../utils/tableUtils.js";
-import { PopoverTrigger as s } from "../../../Popover/Popover.js";
-import { Sizes as p, TABLE_FILTER_BUTTON_CLASS as f, Variants as l } from "../../../../react-base/src/consts.js";
+import { Sizes as m, TABLE_FILTER_BUTTON_CLASS as a, Variants as n } from "../../../../react-base/src/consts/index.js";
+import { useTable as s } from "../../hooks/useTable.js";
+import p from "../../../Icon/components/Filter.js";
+import { getSize as f } from "../../utils/tableUtils.js";
+import { PopoverTrigger as l } from "../../../Popover/Popover.js";
 const g = e(
   ({ ...o }, t) => {
-    const { size: i = p.Medium } = m();
-    return /* @__PURE__ */ r(s, { buttonProps: {
-      "aria-label": "Filter button",
-      className: f,
-      icon: /* @__PURE__ */ r(a, {}),
-      iconOnly: !0,
-      size: n(i),
-      variant: l.Transparent,
-      ref: t,
-      ...o
-    } });
+    const { size: i = m.Medium } = s();
+    return /* @__PURE__ */ r(
+      l,
+      {
+        buttonProps: {
+          "aria-label": "Filter button",
+          className: a,
+          icon: /* @__PURE__ */ r(p, {}),
+          iconOnly: !0,
+          size: f(i),
+          variant: n.Transparent,
+          ref: t,
+          ...o
+        }
+      }
+    );
   }
 );
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","sources":["../../../../../../src/components/Table/components/TableElements/FilterButton.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithRef, ForwardedRef } from 'react';\n\nimport { Variants, Sizes, TABLE_FILTER_BUTTON_CLASS } from 'acinguiux-ds-react-base';\n\nimport { useTable } from '../../hooks/useTable';\nimport { Filter as FilterIcon } from '../../../Icon/components';\nimport { getSize } from '../../utils/tableUtils';\nimport { PopoverTrigger } from '../../../Popover/Popover';\n\nexport const FilterButton = forwardRef(\n  ({ ...rest }: ComponentPropsWithRef<'button'>, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { size = Sizes.Medium } = useTable();\n\n    return (\n      <PopoverTrigger buttonProps={{\n        'aria-label': 'Filter button',\n        className: TABLE_FILTER_BUTTON_CLASS,\n        icon: <FilterIcon />,\n        iconOnly: true,\n        size: getSize(size),\n        variant: Variants.Transparent,\n        ref,\n        ...rest,\n      }} />\n    );\n  },\n);\n"],"names":["FilterButton","forwardRef","rest","ref","size","Sizes","useTable","jsx","PopoverTrigger","TABLE_FILTER_BUTTON_CLASS","FilterIcon","getSize","Variants"],"mappings":";;;;;;;AASO,MAAMA,IAAeC;AAAA,EAC1B,CAAC,EAAE,GAAGC,KAAyCC,MAAyC;AACtF,UAAM,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS;AAGvC,WAAA,gBAAAC,EAACC,KAAe,aAAa;AAAA,MAC3B,cAAc;AAAA,MACd,WAAWC;AAAA,MACX,wBAAOC,GAAW,EAAA;AAAA,MAClB,UAAU;AAAA,MACV,MAAMC,EAAQP,CAAI;AAAA,MAClB,SAASQ,EAAS;AAAA,MAClB,KAAAT;AAAA,MACA,GAAGD;AAAA,IAAA,GACF;AAAA,EAAA;AAGT;"}
+{"version":3,"file":"FilterButton.js","sources":["../../../../../../src/components/Table/components/TableElements/FilterButton.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithRef, type ForwardedRef } from 'react';\n\nimport { Variants, Sizes, TABLE_FILTER_BUTTON_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport { useTable } from '../../hooks/useTable';\nimport FilterIcon from '../../../Icon/components/Filter';\nimport { getSize } from '../../utils/tableUtils';\nimport { PopoverTrigger } from '../../../Popover/Popover';\n\nexport const FilterButton = forwardRef(\n  ({ ...rest }: ComponentPropsWithRef<'button'>, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { size = Sizes.Medium } = useTable();\n\n    return (\n      <PopoverTrigger\n        buttonProps={{\n          'aria-label': 'Filter button',\n          className: TABLE_FILTER_BUTTON_CLASS,\n          icon: <FilterIcon />,\n          iconOnly: true,\n          size: getSize(size),\n          variant: Variants.Transparent,\n          ref,\n          ...rest,\n        }}\n      />\n    );\n  },\n);\n"],"names":["FilterButton","forwardRef","rest","ref","size","Sizes","useTable","jsx","PopoverTrigger","TABLE_FILTER_BUTTON_CLASS","FilterIcon","getSize","Variants"],"mappings":";;;;;;;AASO,MAAMA,IAAeC;AAAA,EAC1B,CAAC,EAAE,GAAGC,KAAyCC,MAAyC;AACtF,UAAM,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS;AAGvC,WAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,UACX,cAAc;AAAA,UACd,WAAWC;AAAA,UACX,wBAAOC,GAAW,EAAA;AAAA,UAClB,UAAU;AAAA,UACV,MAAMC,EAAQP,CAAI;AAAA,UAClB,SAASQ,EAAS;AAAA,UAClB,KAAAT;AAAA,UACA,GAAGD;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/build/esm/components/Table/components/TableElements/HeaderCell.d.ts

@@ -1,3 +1,3 @@
-import { IHeaderCellProps } from '../BaseTable/BaseTable.types';
+import type { IHeaderCellProps } from '../BaseTable/BaseTable.types';
 export declare const HeaderCell: <T>({ header, table, options }: IHeaderCellProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=HeaderCell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/HeaderCell.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAYhE,eAAO,MAAM,UAAU,kCAAoC,iBAAiB,CAAC,CAAC,4CAgC7E,CAAC"}
+{"version":3,"file":"HeaderCell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Table/components/TableElements/HeaderCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAarE,eAAO,MAAM,UAAU,GAAI,CAAC,8BAA+B,gBAAgB,CAAC,CAAC,CAAC,4CAoD7E,CAAC"}

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

@@ -1,37 +1,48 @@
 import { jsxs as a, jsx as l, Fragment as d } from "react/jsx-runtime";
 import { flexRender as f } from "@tanstack/react-table";
-import S from "../../../Icon/components/EllipsisVertical.js";
-import C from "../../../Icon/components/Pin.js";
+import { Sizes as S, TABLE_PIN_BUTTON_CLASS as C, TABLE_MENU_BUTTON_CLASS as x } from "../../../../react-base/src/consts/index.js";
+import R from "../../../Icon/components/EllipsisVertical.js";
+import T from "../../../Icon/components/Pin.js";
 import i from "../../../Flexbox/Flexbox.js";
-import { SorterButton as x } from "./SorterButton.js";
-import { Resizer as R } from "./Resizer.js";
-import { useTable as T } from "../../hooks/useTable.js";
+import { SorterButton as H } from "./SorterButton.js";
+import { Resizer as I } from "./Resizer.js";
+import { useTable as w } from "../../hooks/useTable.js";
 import { getHeaderCellGap as g } from "../../utils/tableUtils.js";
-import { SelectionCheckbox as H } from "./SelectionCheckbox.js";
-import { DraggableButton as I } from "./DraggableButton.js";
-import { useHeaderCellMenuItems as w, useHeaderCellMenuKind as p, HeaderCellMenu as z } from "./HeaderCellMenu.js";
-import { Sizes as M, TABLE_PIN_BUTTON_CLASS as A, TABLE_MENU_BUTTON_CLASS as B } from "../../../../react-base/src/consts.js";
-const D = ({ isDraggable: e, children: n }) => e ? /* @__PURE__ */ l(I, { children: n }) : n, K = ({ header: e, table: n, options: r }) => {
-  const { size: o = M.Medium } = T(), c = (r == null ? void 0 : r.columnResizing) && !e.isPlaceholder && e.column.getCanResize(), s = (r == null ? void 0 : r.sorting) && e.column.getCanSort(), t = w(e, r), u = p(e, r), m = e.isPlaceholder ? null : f(e.column.columnDef.header, e.getContext());
+import { SelectionCheckbox as p } from "./SelectionCheckbox.js";
+import { DraggableButton as z } from "./DraggableButton.js";
+import { useHeaderCellMenuItems as M, useHeaderCellMenuKind as A, HeaderCellMenu as B } from "./HeaderCellMenu.js";
+const D = ({ isDraggable: e, children: r }) => e ? /* @__PURE__ */ l(z, { children: r }) : r, K = ({ header: e, table: r, options: n }) => {
+  const { size: o = S.Medium } = w(), c = (n == null ? void 0 : n.columnResizing) && !e.isPlaceholder && e.column.getCanResize(), s = (n == null ? void 0 : n.sorting) && e.column.getCanSort(), t = M(e, n), u = A(e, n), m = e.isPlaceholder ? null : f(e.column.columnDef.header, e.getContext());
   return /* @__PURE__ */ a(i, { gap: g(o), alignItems: "center", flexGrow: 1, children: [
-    e.getLeafHeaders().length === 1 && (n != null && n.options.enableRowSelection) && e.column.getIndex() === 0 && n ? /* @__PURE__ */ l(
-      H,
+    e.getLeafHeaders().length === 1 && (r != null && r.options.enableRowSelection) && e.column.getIndex() === 0 && r ? /* @__PURE__ */ l(
+      p,
       {
-        checked: n.getIsAllRowsSelected(),
-        indeterminate: n.getIsSomeRowsSelected(),
-        onChange: n.getToggleAllRowsSelectedHandler()
+        checked: r.getIsAllRowsSelected(),
+        indeterminate: r.getIsSomeRowsSelected(),
+        onChange: r.getToggleAllRowsSelectedHandler()
       }
     ) : /* @__PURE__ */ l(d, {}),
     s ? /* @__PURE__ */ l(
-      x,
+      H,
       {
         sortDirection: e.column.getIsSorted() || void 0,
         onClick: e.column.getToggleSortingHandler(),
         children: m
       }
-    ) : /* @__PURE__ */ l(D, { isDraggable: r == null ? void 0 : r.dragAndDrop, children: m }),
-    t.length > 0 && /* @__PURE__ */ l(i, { gap: g(o), flexGrow: 1, alignItems: "flex-end", children: /* @__PURE__ */ l(z, { triggerOptions: u === "pin-only" ? { icon: /* @__PURE__ */ l(C, {}), className: A } : { icon: /* @__PURE__ */ l(S, {}), className: B }, menuItems: t }) }),
-    /* @__PURE__ */ l(R, { ...c ? { onMouseDown: e.getResizeHandler(), onTouchStart: e.getResizeHandler() } : {} })
+    ) : /* @__PURE__ */ l(D, { isDraggable: n == null ? void 0 : n.dragAndDrop, children: m }),
+    t.length > 0 && /* @__PURE__ */ l(i, { gap: g(o), flexGrow: 1, alignItems: "flex-end", children: /* @__PURE__ */ l(
+      B,
+      {
+        triggerOptions: u === "pin-only" ? { icon: /* @__PURE__ */ l(T, {}), className: C } : { icon: /* @__PURE__ */ l(R, {}), className: x },
+        menuItems: t
+      }
+    ) }),
+    /* @__PURE__ */ l(
+      I,
+      {
+        ...c ? { onMouseDown: e.getResizeHandler(), onTouchStart: e.getResizeHandler() } : {}
+      }
+    )
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/Table/components/TableElements/HeaderCell.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\n\nimport { flexRender } from '@tanstack/react-table';\nimport { Sizes, TABLE_MENU_BUTTON_CLASS, TABLE_PIN_BUTTON_CLASS } from 'acinguiux-ds-react-base';\n\nimport { EllipsisVertical, Pin } from '../../../Icon/components';\nimport { IHeaderCellProps } from '../BaseTable/BaseTable.types';\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { SorterButton } from './SorterButton';\nimport { Resizer } from './Resizer';\nimport { useTable } from '../../hooks/useTable';\nimport { getHeaderCellGap } from '../../utils/tableUtils';\nimport { SelectionCheckbox } from './SelectionCheckbox';\nimport { DraggableButton } from './DraggableButton';\nimport { HeaderCellMenu, useHeaderCellMenuItems, useHeaderCellMenuKind } from './HeaderCellMenu';\n\nconst MaybeDraggableButton = ({ isDraggable, children }: PropsWithChildren<{ isDraggable?: boolean }>) => isDraggable ? <DraggableButton>{children}</DraggableButton> : children;\n\nexport const HeaderCell = <T,>({ header, table, options }: IHeaderCellProps<T>) => {\n  const { size = Sizes.Medium } = useTable();\n  const showColumnResizingOptions = options?.columnResizing && !header.isPlaceholder && header.column.getCanResize();\n  const showSortingOptions = options?.sorting && header.column.getCanSort();\n  const headerCellMenuItems = useHeaderCellMenuItems(header, options);\n  const headerKind = useHeaderCellMenuKind(header, options);\n\n  const headerText = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());\n\n  return (<Flexbox gap={getHeaderCellGap(size)} alignItems=\"center\" flexGrow={1}>\n    {header.getLeafHeaders().length === 1 && table?.options.enableRowSelection && header.column.getIndex() === 0 && !!table ?\n      <SelectionCheckbox\n        checked={table.getIsAllRowsSelected()}\n        indeterminate={table.getIsSomeRowsSelected()}\n        onChange={table.getToggleAllRowsSelectedHandler()}\n      /> : <></>\n    }\n    {showSortingOptions ? (\n      <SorterButton\n        sortDirection={header.column.getIsSorted() || undefined}\n        onClick={header.column.getToggleSortingHandler()}\n      >\n        {headerText}\n      </SorterButton>\n    ) : <MaybeDraggableButton isDraggable={options?.dragAndDrop}>{headerText}</MaybeDraggableButton>}\n    {headerCellMenuItems.length > 0 && (\n      <Flexbox gap={getHeaderCellGap(size)} flexGrow={1} alignItems=\"flex-end\">\n        <HeaderCellMenu triggerOptions={headerKind === 'pin-only' ? { icon: <Pin />, className: TABLE_PIN_BUTTON_CLASS } : { icon: <EllipsisVertical />, className: TABLE_MENU_BUTTON_CLASS }} menuItems={headerCellMenuItems} />\n      </Flexbox>\n    )}\n    <Resizer {...(showColumnResizingOptions ? { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() } : {})} />\n  </Flexbox>);\n};\n"],"names":["MaybeDraggableButton","isDraggable","children","jsx","DraggableButton","HeaderCell","header","table","options","size","Sizes","useTable","showColumnResizingOptions","showSortingOptions","headerCellMenuItems","useHeaderCellMenuItems","headerKind","useHeaderCellMenuKind","headerText","flexRender","jsxs","Flexbox","getHeaderCellGap","SelectionCheckbox","Fragment","SorterButton","HeaderCellMenu","Pin","TABLE_PIN_BUTTON_CLASS","EllipsisVertical","TABLE_MENU_BUTTON_CLASS","Resizer"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,IAAuB,CAAC,EAAE,aAAAC,GAAa,UAAAC,QAA6DD,IAAc,gBAAAE,EAACC,GAAiB,EAAA,UAAAF,EAAS,CAAA,IAAqBA,GAE3JG,IAAa,CAAK,EAAE,QAAAC,GAAQ,OAAAC,GAAO,SAAAC,QAAmC;AACjF,QAAM,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS,GACnCC,KAA4BJ,KAAA,gBAAAA,EAAS,mBAAkB,CAACF,EAAO,iBAAiBA,EAAO,OAAO,aAAa,GAC3GO,KAAqBL,KAAA,gBAAAA,EAAS,YAAWF,EAAO,OAAO,WAAW,GAClEQ,IAAsBC,EAAuBT,GAAQE,CAAO,GAC5DQ,IAAaC,EAAsBX,GAAQE,CAAO,GAElDU,IAAaZ,EAAO,gBAAgB,OAAOa,EAAWb,EAAO,OAAO,UAAU,QAAQA,EAAO,WAAA,CAAY;AAEvG,SAAA,gBAAAc,EAACC,KAAQ,KAAKC,EAAiBb,CAAI,GAAG,YAAW,UAAS,UAAU,GACzE,UAAA;AAAA,IAAAH,EAAO,eAAe,EAAE,WAAW,MAAKC,KAAA,QAAAA,EAAO,QAAQ,uBAAsBD,EAAO,OAAO,SAAS,MAAM,KAAOC,IAChH,gBAAAJ;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,SAAShB,EAAM,qBAAqB;AAAA,QACpC,eAAeA,EAAM,sBAAsB;AAAA,QAC3C,UAAUA,EAAM,gCAAgC;AAAA,MAAA;AAAA,IAAA,IAC3C,gBAAAJ,EAAAqB,GAAA,EAAA;AAAA,IAERX,IACC,gBAAAV;AAAA,MAACsB;AAAA,MAAA;AAAA,QACC,eAAenB,EAAO,OAAO,YAAA,KAAiB;AAAA,QAC9C,SAASA,EAAO,OAAO,wBAAwB;AAAA,QAE9C,UAAAY;AAAA,MAAA;AAAA,IAAA,IAEA,gBAAAf,EAAAH,GAAA,EAAqB,aAAaQ,KAAA,gBAAAA,EAAS,aAAc,UAAWU,GAAA;AAAA,IACxEJ,EAAoB,SAAS,KAC3B,gBAAAX,EAAAkB,GAAA,EAAQ,KAAKC,EAAiBb,CAAI,GAAG,UAAU,GAAG,YAAW,YAC5D,UAAC,gBAAAN,EAAAuB,GAAA,EAAe,gBAAgBV,MAAe,aAAa,EAAE,wBAAOW,GAAI,CAAA,CAAA,GAAI,WAAWC,MAA2B,EAAE,MAAO,gBAAAzB,EAAA0B,GAAA,CAAA,CAAiB,GAAI,WAAWC,EAA2B,GAAA,WAAWhB,EAAqB,CAAA,GACzN;AAAA,IAED,gBAAAX,EAAA4B,GAAA,EAAS,GAAInB,IAA4B,EAAE,aAAaN,EAAO,iBAAiB,GAAG,cAAcA,EAAO,iBAAmB,EAAA,IAAI,CAAA,EAAK,CAAA;AAAA,EAAA,GACvI;AACF;"}
+{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/Table/components/TableElements/HeaderCell.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport { flexRender } from '@tanstack/react-table';\nimport { Sizes, TABLE_MENU_BUTTON_CLASS, TABLE_PIN_BUTTON_CLASS } from 'acinguiux-ds-react-base/consts';\n\nimport EllipsisVertical from '../../../Icon/components/EllipsisVertical';\nimport Pin from '../../../Icon/components/Pin';\nimport type { IHeaderCellProps } from '../BaseTable/BaseTable.types';\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { SorterButton } from './SorterButton';\nimport { Resizer } from './Resizer';\nimport { useTable } from '../../hooks/useTable';\nimport { getHeaderCellGap } from '../../utils/tableUtils';\nimport { SelectionCheckbox } from './SelectionCheckbox';\nimport { DraggableButton } from './DraggableButton';\nimport { HeaderCellMenu, useHeaderCellMenuItems, useHeaderCellMenuKind } from './HeaderCellMenu';\n\nconst MaybeDraggableButton = ({ isDraggable, children }: PropsWithChildren<{ isDraggable?: boolean }>) =>\n  isDraggable ? <DraggableButton>{children}</DraggableButton> : children;\n\nexport const HeaderCell = <T,>({ header, table, options }: IHeaderCellProps<T>) => {\n  const { size = Sizes.Medium } = useTable();\n  const showColumnResizingOptions = options?.columnResizing && !header.isPlaceholder && header.column.getCanResize();\n  const showSortingOptions = options?.sorting && header.column.getCanSort();\n  const headerCellMenuItems = useHeaderCellMenuItems(header, options);\n  const headerKind = useHeaderCellMenuKind(header, options);\n\n  const headerText = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());\n\n  return (\n    <Flexbox gap={getHeaderCellGap(size)} alignItems=\"center\" flexGrow={1}>\n      {header.getLeafHeaders().length === 1 &&\n      table?.options.enableRowSelection &&\n      header.column.getIndex() === 0 &&\n      !!table ? (\n        <SelectionCheckbox\n          checked={table.getIsAllRowsSelected()}\n          indeterminate={table.getIsSomeRowsSelected()}\n          onChange={table.getToggleAllRowsSelectedHandler()}\n        />\n      ) : (\n        <></>\n      )}\n      {showSortingOptions ? (\n        <SorterButton\n          sortDirection={header.column.getIsSorted() || undefined}\n          onClick={header.column.getToggleSortingHandler()}\n        >\n          {headerText}\n        </SorterButton>\n      ) : (\n        <MaybeDraggableButton isDraggable={options?.dragAndDrop}>{headerText}</MaybeDraggableButton>\n      )}\n      {headerCellMenuItems.length > 0 && (\n        <Flexbox gap={getHeaderCellGap(size)} flexGrow={1} alignItems=\"flex-end\">\n          <HeaderCellMenu\n            triggerOptions={\n              headerKind === 'pin-only'\n                ? { icon: <Pin />, className: TABLE_PIN_BUTTON_CLASS }\n                : { icon: <EllipsisVertical />, className: TABLE_MENU_BUTTON_CLASS }\n            }\n            menuItems={headerCellMenuItems}\n          />\n        </Flexbox>\n      )}\n      <Resizer\n        {...(showColumnResizingOptions\n          ? { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() }\n          : {})}\n      />\n    </Flexbox>\n  );\n};\n"],"names":["MaybeDraggableButton","isDraggable","children","jsx","DraggableButton","HeaderCell","header","table","options","size","Sizes","useTable","showColumnResizingOptions","showSortingOptions","headerCellMenuItems","useHeaderCellMenuItems","headerKind","useHeaderCellMenuKind","headerText","flexRender","jsxs","Flexbox","getHeaderCellGap","SelectionCheckbox","Fragment","SorterButton","HeaderCellMenu","Pin","TABLE_PIN_BUTTON_CLASS","EllipsisVertical","TABLE_MENU_BUTTON_CLASS","Resizer"],"mappings":";;;;;;;;;;;;;AAiBA,MAAMA,IAAuB,CAAC,EAAE,aAAAC,GAAa,UAAAC,QAC3CD,IAAc,gBAAAE,EAACC,GAAiB,EAAA,UAAAF,EAAS,CAAA,IAAqBA,GAEnDG,IAAa,CAAK,EAAE,QAAAC,GAAQ,OAAAC,GAAO,SAAAC,QAAmC;AACjF,QAAM,EAAE,MAAAC,IAAOC,EAAM,OAAA,IAAWC,EAAS,GACnCC,KAA4BJ,KAAA,gBAAAA,EAAS,mBAAkB,CAACF,EAAO,iBAAiBA,EAAO,OAAO,aAAa,GAC3GO,KAAqBL,KAAA,gBAAAA,EAAS,YAAWF,EAAO,OAAO,WAAW,GAClEQ,IAAsBC,EAAuBT,GAAQE,CAAO,GAC5DQ,IAAaC,EAAsBX,GAAQE,CAAO,GAElDU,IAAaZ,EAAO,gBAAgB,OAAOa,EAAWb,EAAO,OAAO,UAAU,QAAQA,EAAO,WAAA,CAAY;AAG7G,SAAA,gBAAAc,EAACC,KAAQ,KAAKC,EAAiBb,CAAI,GAAG,YAAW,UAAS,UAAU,GACjE,UAAA;AAAA,IAAAH,EAAO,eAAe,EAAE,WAAW,MACpCC,KAAA,QAAAA,EAAO,QAAQ,uBACfD,EAAO,OAAO,SAAS,MAAM,KAC3BC,IACA,gBAAAJ;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,SAAShB,EAAM,qBAAqB;AAAA,QACpC,eAAeA,EAAM,sBAAsB;AAAA,QAC3C,UAAUA,EAAM,gCAAgC;AAAA,MAAA;AAAA,IAAA,IAGhD,gBAAAJ,EAAAqB,GAAA,EAAA;AAAA,IAEHX,IACC,gBAAAV;AAAA,MAACsB;AAAA,MAAA;AAAA,QACC,eAAenB,EAAO,OAAO,YAAiB,KAAA;AAAA,QAC9C,SAASA,EAAO,OAAO,wBAAwB;AAAA,QAE9C,UAAAY;AAAA,MAAA;AAAA,IAAA,IAGF,gBAAAf,EAAAH,GAAA,EAAqB,aAAaQ,KAAA,gBAAAA,EAAS,aAAc,UAAWU,GAAA;AAAA,IAEtEJ,EAAoB,SAAS,KAC5B,gBAAAX,EAACkB,GAAQ,EAAA,KAAKC,EAAiBb,CAAI,GAAG,UAAU,GAAG,YAAW,YAC5D,UAAA,gBAAAN;AAAA,MAACuB;AAAA,MAAA;AAAA,QACC,gBACEV,MAAe,aACX,EAAE,wBAAOW,GAAI,CAAA,CAAA,GAAI,WAAWC,MAC5B,EAAE,wBAAOC,GAAiB,EAAA,GAAI,WAAWC,EAAwB;AAAA,QAEvE,WAAWhB;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEF,gBAAAX;AAAA,MAAC4B;AAAA,MAAA;AAAA,QACE,GAAInB,IACD,EAAE,aAAaN,EAAO,iBAAoB,GAAA,cAAcA,EAAO,iBAAA,MAC/D,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,EACP,GACF;AAEJ;"}