acinguiux-ds-react-framework 0.1.16 → 0.1.19

package/build/esm/components/Table/features/sized.js

@@ -1,5 +1,5 @@
-import { functionalUpdate as o, makeStateUpdater as s } from "@tanstack/react-table";
-const u = {
+import { functionalUpdate as i, makeStateUpdater as r } from "@tanstack/react-table";
+const s = {
   // define the new feature's initial state
   getInitialState: (e) => ({
     size: "medium",
@@ -7,17 +7,16 @@ const u = {
   }),
   // define the new feature's default options
   getDefaultOptions: (e) => ({
-    onSizeChange: s("size", e)
+    onSizeChange: r("size", e)
   }),
   createTable: (e) => {
-    e.setSize = (n) => {
-      var t, a;
-      const i = (r) => o(n, r);
-      return (a = (t = e.options).onSizeChange) == null ? void 0 : a.call(t, i);
+    e.setSize = (t) => {
+      const a = (n) => i(t, n);
+      return e.options.onSizeChange?.(a);
     };
   }
 };
 export {
-  u as SizedFeature
+  s as SizedFeature
 };
 //# sourceMappingURL=sized.js.map

package/build/esm/components/Table/features/sized.js.map

@@ -1 +1 @@
-{"version":3,"file":"sized.js","sources":["../../../../../src/components/Table/features/sized.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars */\n// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features\n// Expanded from the original code from https://tanstack.com/table/latest/docs/framework/react/examples/custom-features\n\nimport { TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport {\n  functionalUpdate,\n  makeStateUpdater,\n  OnChangeFn,\n  RowData,\n  Table,\n  TableFeature,\n  Updater,\n} from '@tanstack/react-table';\n\n// define types for our new feature's custom state\nexport interface SizedTableState {\n  size: TableTypes.Size;\n}\n\n// define types for our new feature's table options\nexport interface SizeOptions {\n  onSizeChange?: OnChangeFn<TableTypes.Size>;\n}\n\n// Define types for our new feature's table APIs\nexport interface SizeInstance {\n  setSize: (updater: Updater<TableTypes.Size>) => void;\n}\n\n// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.\ndeclare module '@tanstack/react-table' {\n  //merge our new feature's state with the existing table state\n  interface TableState extends SizedTableState {}\n  //merge our new feature's options with the existing table options\n  interface TableOptionsResolved<TData extends RowData> extends SizeOptions {}\n  //merge our new feature's instance APIs with the existing table instance APIs\n  // eslint-disable-next-line no-shadow\n  interface Table<TData extends RowData> extends SizeInstance {}\n}\n\n// end of TS setup!\n\n// Here is all of the actual javascript code for our new feature\nexport const SizedFeature: TableFeature<{}> = {\n  // define the new feature's initial state\n  getInitialState: (state): SizedTableState => {\n    return {\n      size: 'medium',\n      ...state,\n    };\n  },\n\n  // define the new feature's default options\n  getDefaultOptions: <TData extends RowData>(table: Table<TData>): SizeOptions => {\n    return {\n      onSizeChange: makeStateUpdater('size', table),\n    };\n  },\n\n  createTable: <TData extends RowData>(table: Table<TData>): void => {\n    table.setSize = (updater) => {\n      const safeUpdater: Updater<TableTypes.Size> = (old) => functionalUpdate(updater, old);\n\n      return table.options.onSizeChange?.(safeUpdater);\n    };\n  },\n};\n"],"names":["SizedFeature","state","table","makeStateUpdater","updater","safeUpdater","old","functionalUpdate","_b","_a"],"mappings":";AA4CO,MAAMA,IAAiC;AAAA;AAAA,EAE5C,iBAAiB,CAACC,OACT;AAAA,IACL,MAAM;AAAA,IACN,GAAGA;AAAA,EAAA;AAAA;AAAA,EAKP,mBAAmB,CAAwBC,OAClC;AAAA,IACL,cAAcC,EAAiB,QAAQD,CAAK;AAAA,EAAA;AAAA,EAIhD,aAAa,CAAwBA,MAA8B;AACjE,IAAAA,EAAM,UAAU,CAACE,MAAY;;AAC3B,YAAMC,IAAwC,CAACC,MAAQC,EAAiBH,GAASE,CAAG;AAEpF,cAAOE,KAAAC,IAAAP,EAAM,SAAQ,iBAAd,gBAAAM,EAAA,KAAAC,GAA6BJ;AAAA,IACtC;AAAA,EACF;AACF;"}
+{"version":3,"file":"sized.js","sources":["../../../../../src/components/Table/features/sized.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars */\n// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features\n// Expanded from the original code from https://tanstack.com/table/latest/docs/framework/react/examples/custom-features\n\nimport { TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport {\n  functionalUpdate,\n  makeStateUpdater,\n  OnChangeFn,\n  RowData,\n  Table,\n  TableFeature,\n  Updater,\n} from '@tanstack/react-table';\n\n// define types for our new feature's custom state\nexport interface SizedTableState {\n  size: TableTypes.Size;\n}\n\n// define types for our new feature's table options\nexport interface SizeOptions {\n  onSizeChange?: OnChangeFn<TableTypes.Size>;\n}\n\n// Define types for our new feature's table APIs\nexport interface SizeInstance {\n  setSize: (updater: Updater<TableTypes.Size>) => void;\n}\n\n// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.\ndeclare module '@tanstack/react-table' {\n  //merge our new feature's state with the existing table state\n  interface TableState extends SizedTableState {}\n  //merge our new feature's options with the existing table options\n  interface TableOptionsResolved<TData extends RowData> extends SizeOptions {}\n  //merge our new feature's instance APIs with the existing table instance APIs\n  interface Table<TData extends RowData> extends SizeInstance {}\n}\n\n// end of TS setup!\n\n// Here is all of the actual javascript code for our new feature\nexport const SizedFeature: TableFeature<{}> = {\n  // define the new feature's initial state\n  getInitialState: (state): SizedTableState => {\n    return {\n      size: 'medium',\n      ...state,\n    };\n  },\n\n  // define the new feature's default options\n  getDefaultOptions: <TData extends RowData>(table: Table<TData>): SizeOptions => {\n    return {\n      onSizeChange: makeStateUpdater('size', table),\n    };\n  },\n\n  createTable: <TData extends RowData>(table: Table<TData>): void => {\n    table.setSize = (updater) => {\n      const safeUpdater: Updater<TableTypes.Size> = (old) => functionalUpdate(updater, old);\n\n      return table.options.onSizeChange?.(safeUpdater);\n    };\n  },\n};\n"],"names":["SizedFeature","state","table","makeStateUpdater","updater","safeUpdater","old","functionalUpdate"],"mappings":";AA2CO,MAAMA,IAAiC;AAAA;AAAA,EAE5C,iBAAiB,CAACC,OACT;AAAA,IACL,MAAM;AAAA,IACN,GAAGA;AAAA,EAAA;AAAA;AAAA,EAKP,mBAAmB,CAAwBC,OAClC;AAAA,IACL,cAAcC,EAAiB,QAAQD,CAAK;AAAA,EAAA;AAAA,EAIhD,aAAa,CAAwBA,MAA8B;AACjE,IAAAA,EAAM,UAAU,CAACE,MAAY;AAC3B,YAAMC,IAAwC,CAACC,MAAQC,EAAiBH,GAASE,CAAG;AAEpF,aAAOJ,EAAM,QAAQ,eAAeG,CAAW;AAAA,IACjD;AAAA,EACF;AACF;"}

package/build/esm/components/Table/hooks/useVirtualized.js

@@ -1,26 +1,25 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useRef as h } from "react";
-import { useVirtualizer as p } from "@tanstack/react-virtual";
-import { consts as u } from "../../../react-base/src/components/Table/Table.consts.js";
-const z = ({ padding: e }) => e > 0 && /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", { style: { height: `${e}px` }, "aria-label": "hidden row", "aria-hidden": !0 }) }), f = 30, x = (e) => {
-  var r, i;
-  const o = h(null), { rows: n } = e.getRowModel(), c = p({
-    count: n.length,
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { useVirtualizer as u } from "@tanstack/react-virtual";
+import { consts as d } from "../../../react-base/src/components/Table/Table.consts.js";
+const h = ({ padding: t }) => t > 0 && /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { style: { height: `${t}px` }, "aria-label": "hidden row", "aria-hidden": !0 }) }), p = 30, S = (t) => {
+  const o = m(null), { rows: r } = t.getRowModel(), i = u({
+    count: r.length,
     getScrollElement: () => o.current,
-    estimateSize: () => e.getState().size ? u[e.getState().size].cell.height : f,
+    estimateSize: () => t.getState().size ? d[t.getState().size].cell.height : p,
     overscan: 10
-  }), { getVirtualItems: l, getTotalSize: a } = c, t = l(), g = a(), m = t.length > 0 && ((r = t == null ? void 0 : t[0]) == null ? void 0 : r.start) || 0, d = t.length > 0 ? g - (((i = t == null ? void 0 : t[t.length - 1]) == null ? void 0 : i.end) || 0) : 0;
+  }), { getVirtualItems: s, getTotalSize: l } = i, e = s(), a = l(), c = e.length > 0 && e?.[0]?.start || 0, g = e.length > 0 ? a - (e?.[e.length - 1]?.end || 0) : 0;
   return {
-    virtualRows: t,
-    rows: n,
+    virtualRows: e,
+    rows: r,
     tableContainerRef: o,
-    paddingTop: m,
-    paddingBottom: d,
-    EmptyRow: z
+    paddingTop: c,
+    paddingBottom: g,
+    EmptyRow: h
   };
 };
 export {
-  z as EmptyRow,
-  x as useVirtualized
+  h as EmptyRow,
+  S as useVirtualized
 };
 //# sourceMappingURL=useVirtualized.js.map

package/build/esm/components/Table/hooks/useVirtualized.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualized.js","sources":["../../../../../src/components/Table/hooks/useVirtualized.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { Table } from '@tanstack/react-table';\nimport { TableConsts } from 'acinguiux-ds-react-base/components/Table';\n\nexport const EmptyRow = ({ padding }: { padding: number }) =>\n  padding > 0 && (\n    <tr>\n      <td style={{ height: `${padding}px` }} aria-label=\"hidden row\" aria-hidden={true} />\n    </tr>\n  );\n\nconst DEFAULT_ROW_HEIGHT = 30;\n\nexport const useVirtualized = <T,>(table: Table<T>) => {\n  const tableContainerRef = useRef<HTMLDivElement>(null);\n  const { rows } = table.getRowModel();\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => tableContainerRef.current,\n    estimateSize: () =>\n      table.getState().size ? TableConsts.consts[table.getState().size].cell.height : DEFAULT_ROW_HEIGHT,\n    overscan: 10,\n  });\n\n  const { getVirtualItems, getTotalSize } = rowVirtualizer;\n  const virtualRows = getVirtualItems();\n  const totalSize = getTotalSize();\n\n  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;\n  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;\n\n  return {\n    virtualRows,\n    rows,\n    tableContainerRef,\n    paddingTop,\n    paddingBottom,\n    EmptyRow,\n  };\n};\n"],"names":["EmptyRow","padding","jsx","DEFAULT_ROW_HEIGHT","useVirtualized","table","tableContainerRef","useRef","rows","rowVirtualizer","useVirtualizer","TableConsts.consts","getVirtualItems","getTotalSize","virtualRows","totalSize","paddingTop","_a","paddingBottom","_b"],"mappings":";;;;AAMO,MAAMA,IAAW,CAAC,EAAE,SAAAC,EAAA,MACzBA,IAAU,KACR,gBAAAC,EAAC,MAAA,EACC,UAAA,gBAAAA,EAAC,MAAA,EAAG,OAAO,EAAE,QAAQ,GAAGD,CAAO,QAAQ,cAAW,cAAa,eAAa,GAAA,CAAM,EAAA,CACpF,GAGEE,IAAqB,IAEdC,IAAiB,CAAKC,MAAoB;;AACrD,QAAMC,IAAoBC,EAAuB,IAAI,GAC/C,EAAE,MAAAC,EAAA,IAASH,EAAM,YAAA,GACjBI,IAAiBC,EAAe;AAAA,IACpC,OAAOF,EAAK;AAAA,IACZ,kBAAkB,MAAMF,EAAkB;AAAA,IAC1C,cAAc,MACZD,EAAM,SAAA,EAAW,OAAOM,EAAmBN,EAAM,SAAA,EAAW,IAAI,EAAE,KAAK,SAASF;AAAA,IAClF,UAAU;AAAA,EAAA,CACX,GAEK,EAAE,iBAAAS,GAAiB,cAAAC,EAAA,IAAiBJ,GACpCK,IAAcF,EAAA,GACdG,IAAYF,EAAA,GAEZG,IAAaF,EAAY,SAAS,OAAIG,IAAAH,KAAA,gBAAAA,EAAc,OAAd,gBAAAG,EAAkB,UAAS,GACjEC,IAAgBJ,EAAY,SAAS,IAAIC,OAAaI,IAAAL,KAAA,gBAAAA,EAAcA,EAAY,SAAS,OAAnC,gBAAAK,EAAuC,QAAO,KAAK;AAE/G,SAAO;AAAA,IACL,aAAAL;AAAA,IACA,MAAAN;AAAA,IACA,mBAAAF;AAAA,IACA,YAAAU;AAAA,IACA,eAAAE;AAAA,IACA,UAAAlB;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useVirtualized.js","sources":["../../../../../src/components/Table/hooks/useVirtualized.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { Table } from '@tanstack/react-table';\nimport { TableConsts } from 'acinguiux-ds-react-base/components/Table';\n\nexport const EmptyRow = ({ padding }: { padding: number }) =>\n  padding > 0 && (\n    <tr>\n      <td style={{ height: `${padding}px` }} aria-label=\"hidden row\" aria-hidden={true} />\n    </tr>\n  );\n\nconst DEFAULT_ROW_HEIGHT = 30;\n\nexport const useVirtualized = <T,>(table: Table<T>) => {\n  const tableContainerRef = useRef<HTMLDivElement>(null);\n  const { rows } = table.getRowModel();\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => tableContainerRef.current,\n    estimateSize: () =>\n      table.getState().size ? TableConsts.consts[table.getState().size].cell.height : DEFAULT_ROW_HEIGHT,\n    overscan: 10,\n  });\n\n  const { getVirtualItems, getTotalSize } = rowVirtualizer;\n  const virtualRows = getVirtualItems();\n  const totalSize = getTotalSize();\n\n  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;\n  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;\n\n  return {\n    virtualRows,\n    rows,\n    tableContainerRef,\n    paddingTop,\n    paddingBottom,\n    EmptyRow,\n  };\n};\n"],"names":["EmptyRow","padding","jsx","DEFAULT_ROW_HEIGHT","useVirtualized","table","tableContainerRef","useRef","rows","rowVirtualizer","useVirtualizer","TableConsts.consts","getVirtualItems","getTotalSize","virtualRows","totalSize","paddingTop","paddingBottom"],"mappings":";;;;AAMO,MAAMA,IAAW,CAAC,EAAE,SAAAC,EAAA,MACzBA,IAAU,KACR,gBAAAC,EAAC,MAAA,EACC,UAAA,gBAAAA,EAAC,MAAA,EAAG,OAAO,EAAE,QAAQ,GAAGD,CAAO,QAAQ,cAAW,cAAa,eAAa,GAAA,CAAM,EAAA,CACpF,GAGEE,IAAqB,IAEdC,IAAiB,CAAKC,MAAoB;AACrD,QAAMC,IAAoBC,EAAuB,IAAI,GAC/C,EAAE,MAAAC,EAAA,IAASH,EAAM,YAAA,GACjBI,IAAiBC,EAAe;AAAA,IACpC,OAAOF,EAAK;AAAA,IACZ,kBAAkB,MAAMF,EAAkB;AAAA,IAC1C,cAAc,MACZD,EAAM,SAAA,EAAW,OAAOM,EAAmBN,EAAM,SAAA,EAAW,IAAI,EAAE,KAAK,SAASF;AAAA,IAClF,UAAU;AAAA,EAAA,CACX,GAEK,EAAE,iBAAAS,GAAiB,cAAAC,EAAA,IAAiBJ,GACpCK,IAAcF,EAAA,GACdG,IAAYF,EAAA,GAEZG,IAAaF,EAAY,SAAS,KAAIA,IAAc,CAAC,GAAG,SAAS,GACjEG,IAAgBH,EAAY,SAAS,IAAIC,KAAaD,IAAcA,EAAY,SAAS,CAAC,GAAG,OAAO,KAAK;AAE/G,SAAO;AAAA,IACL,aAAAA;AAAA,IACA,MAAAN;AAAA,IACA,mBAAAF;AAAA,IACA,YAAAU;AAAA,IACA,eAAAC;AAAA,IACA,UAAAjB;AAAA,EAAA;AAEJ;"}

package/build/esm/components/Table/utils/baseTableUtils.js

@@ -1,46 +1,37 @@
-const c = (t, e) => t.getHeaderGroups().map((r) => r.headers.filter((a) => a.column.columnDef.header))[0] && !(e != null && e.noHeader), g = (t, e) => {
-  var r;
-  return ((r = t.getFooterGroups().map((a) => {
-    var n;
-    return (n = a == null ? void 0 : a.headers) == null ? void 0 : n.filter(({ column: s }) => {
-      var i;
-      return (i = s == null ? void 0 : s.columnDef) == null ? void 0 : i.footer;
-    });
-  })[0]) == null ? void 0 : r.length) > 0 && !(e != null && e.noFooter);
-}, d = (t) => {
-  const e = t == null ? void 0 : t.getIsPinned();
+const s = (t, e) => t.getHeaderGroups().map((n) => n.headers.filter((o) => o.column.columnDef.header))[0] && !e?.noHeader, i = (t, e) => t.getFooterGroups().map((n) => n?.headers?.filter(({ column: o }) => o?.columnDef?.footer))[0]?.length > 0 && !e?.noFooter, r = (t) => {
+  const e = t?.getIsPinned();
   return {
     ...t && e && {
       isPinned: e,
-      width: `calc(var(--col-${t == null ? void 0 : t.id}-size) * 1px)`,
+      width: `calc(var(--col-${t?.id}-size) * 1px)`,
       pinAnchorOffset: e === "left" ? t.getStart(e) : t.getAfter(e)
     }
   };
-}, h = (t, e) => {
-  const r = typeof e == "function" ? e(t.getContext()) : e;
-  return r ? { highlight: r } : {};
+}, c = (t, e) => {
+  const n = typeof e == "function" ? e(t.getContext()) : e;
+  return n ? { highlight: n } : {};
 }, l = (t) => {
-  const { column: e, colSpan: r } = t, { alignment: a } = t.column.columnDef;
+  const { column: e, colSpan: n } = t, { alignment: o } = t.column.columnDef;
   return {
-    alignment: a,
-    colSpan: r,
+    alignment: o,
+    colSpan: n,
     width: `calc(var(--header-${t.id}-size) * 1px)`,
-    ...d(e)
+    ...r(e)
   };
-}, f = (t) => {
-  const { column: e } = t, { highlight: r, alignment: a } = e.columnDef;
+}, a = (t) => {
+  const { column: e } = t, { highlight: n, alignment: o } = e.columnDef;
   return {
-    alignment: a,
-    width: `calc(var(--col-${e == null ? void 0 : e.id}-size) * 1px)`,
-    ...h(t, r),
-    ...d(e)
+    alignment: o,
+    width: `calc(var(--col-${e?.id}-size) * 1px)`,
+    ...c(t, n),
+    ...r(e)
   };
 };
 export {
-  f as bodyCellProps,
-  d as cellPinningProps,
-  g as hasFooter,
-  c as hasHeader,
+  a as bodyCellProps,
+  r as cellPinningProps,
+  i as hasFooter,
+  s as hasHeader,
   l as headerCellProps
 };
 //# sourceMappingURL=baseTableUtils.js.map

package/build/esm/components/Table/utils/baseTableUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"baseTableUtils.js","sources":["../../../../../src/components/Table/utils/baseTableUtils.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport type { Table, Header, Cell, Column, RowData } from '@tanstack/react-table';\n\nimport type { BaseTableOptions } from '../components/BaseTable/BaseTable.types';\nimport { type ITableHeaderProps, type ITableCellProps } from '../components/TableElements/TableElements.types';\n\nexport const hasHeader = <TData extends RowData>(table: Table<TData>, options?: BaseTableOptions<TData>): boolean =>\n  table\n    .getHeaderGroups()\n    .map((headerGroup) => headerGroup.headers.filter((headerItem) => headerItem.column.columnDef.header))[0] &&\n  !options?.noHeader;\n\nexport const hasFooter = <TData extends RowData>(table: Table<TData>, options?: BaseTableOptions<TData>): boolean =>\n  table\n    .getFooterGroups()\n    .map((footerGroup) => footerGroup?.headers?.filter(({ column }) => column?.columnDef?.footer))[0]?.length > 0 &&\n  !options?.noFooter;\n\nexport const cellPinningProps = <TData extends RowData, TValue = unknown>(\n  column?: Column<TData, TValue>,\n): Pick<ITableCellProps, 'isPinned' | 'width' | 'pinAnchorOffset'> => {\n  const isPinned = column?.getIsPinned();\n\n  return {\n    ...(column &&\n      isPinned && {\n        isPinned,\n        width: `calc(var(--col-${column?.id}-size) * 1px)`,\n        pinAnchorOffset: isPinned === 'left' ? column.getStart(isPinned) : column.getAfter(isPinned),\n      }),\n  };\n};\n\nconst cellHighlightProps = <TData extends RowData, TValue = unknown>(\n  cell: Cell<TData, TValue>,\n  highlight?: ITableHeaderProps<TData, TValue>['highlight'],\n): Pick<ITableCellProps, 'highlight'> => {\n  const highlightValue = typeof highlight === 'function' ? highlight(cell.getContext()) : highlight;\n\n  if (highlightValue) {\n    return { highlight: highlightValue };\n  }\n\n  return {};\n};\n\nexport const headerCellProps = <TData extends RowData, TValue = unknown>(\n  header: Header<TData, TValue>,\n): Pick<ITableCellProps, 'highlight' | 'isPinned' | 'pinAnchorOffset' | 'alignment'> &\n  ComponentPropsWithoutRef<'th'> => {\n  const { column, colSpan } = header;\n  const { alignment } = header.column.columnDef;\n\n  return {\n    alignment,\n    colSpan,\n    width: `calc(var(--header-${header.id}-size) * 1px)`,\n    ...cellPinningProps(column),\n  };\n};\n\nexport const bodyCellProps = <TData extends RowData, TValue = unknown>(\n  cell: Cell<TData, TValue>,\n): Pick<ITableCellProps, 'highlight' | 'isPinned' | 'pinAnchorOffset' | 'alignment'> => {\n  const { column } = cell;\n  const { highlight, alignment } = column.columnDef;\n\n  return {\n    alignment,\n    width: `calc(var(--col-${column?.id}-size) * 1px)`,\n    ...cellHighlightProps(cell, highlight),\n    ...cellPinningProps(column),\n  };\n};\n"],"names":["hasHeader","table","options","headerGroup","headerItem","hasFooter","_a","footerGroup","column","cellPinningProps","isPinned","cellHighlightProps","cell","highlight","highlightValue","headerCellProps","header","colSpan","alignment","bodyCellProps"],"mappings":"AAOO,MAAMA,IAAY,CAAwBC,GAAqBC,MACpED,EACG,kBACA,IAAI,CAACE,MAAgBA,EAAY,QAAQ,OAAO,CAACC,MAAeA,EAAW,OAAO,UAAU,MAAM,CAAC,EAAE,CAAC,KACzG,EAACF,KAAA,QAAAA,EAAS,WAECG,IAAY,CAAwBJ,GAAqBC,MAAA;AAN/D,MAAAI;AAOL,WAAAA,IAAAL,EACG,kBACA,IAAI,CAACM;AATH,QAAAD;AASmB,YAAAA,IAAAC,KAAA,gBAAAA,EAAa,YAAb,gBAAAD,EAAsB,OAAO,CAAC,EAAE,QAAAE,EAAA,MAAO;AAT1D,UAAAF;AASgE,cAAAA,IAAAE,KAAA,gBAAAA,EAAQ,cAAR,gBAAAF,EAAmB;AAAA;AAAA,GAAO,EAAE,CAAC,MAFlG,gBAAAA,EAEqG,UAAS,KAC9G,EAACJ,KAAA,QAAAA,EAAS;AAAA,GAECO,IAAmB,CAC9BD,MACoE;AACpE,QAAME,IAAWF,KAAA,gBAAAA,EAAQ;AAEzB,SAAO;AAAA,IACL,GAAIA,KACFE,KAAY;AAAA,MACV,UAAAA;AAAA,MACA,OAAO,kBAAkBF,KAAA,gBAAAA,EAAQ,EAAE;AAAA,MACnC,iBAAiBE,MAAa,SAASF,EAAO,SAASE,CAAQ,IAAIF,EAAO,SAASE,CAAQ;AAAA,IAAA;AAAA,EAC7F;AAEN,GAEMC,IAAqB,CACzBC,GACAC,MACuC;AACvC,QAAMC,IAAiB,OAAOD,KAAc,aAAaA,EAAUD,EAAK,WAAA,CAAY,IAAIC;AAExF,SAAIC,IACK,EAAE,WAAWA,EAAA,IAGf,CAAA;AACT,GAEaC,IAAkB,CAC7BC,MAEkC;AAClC,QAAM,EAAE,QAAAR,GAAQ,SAAAS,EAAA,IAAYD,GACtB,EAAE,WAAAE,EAAA,IAAcF,EAAO,OAAO;AAEpC,SAAO;AAAA,IACL,WAAAE;AAAA,IACA,SAAAD;AAAA,IACA,OAAO,qBAAqBD,EAAO,EAAE;AAAA,IACrC,GAAGP,EAAiBD,CAAM;AAAA,EAAA;AAE9B,GAEaW,IAAgB,CAC3BP,MACsF;AACtF,QAAM,EAAE,QAAAJ,MAAWI,GACb,EAAE,WAAAC,GAAW,WAAAK,EAAA,IAAcV,EAAO;AAExC,SAAO;AAAA,IACL,WAAAU;AAAA,IACA,OAAO,kBAAkBV,KAAA,gBAAAA,EAAQ,EAAE;AAAA,IACnC,GAAGG,EAAmBC,GAAMC,CAAS;AAAA,IACrC,GAAGJ,EAAiBD,CAAM;AAAA,EAAA;AAE9B;"}
+{"version":3,"file":"baseTableUtils.js","sources":["../../../../../src/components/Table/utils/baseTableUtils.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport type { Table, Header, Cell, Column, RowData } from '@tanstack/react-table';\n\nimport type { BaseTableOptions } from '../components/BaseTable/BaseTable.types';\nimport { type ITableHeaderProps, type ITableCellProps } from '../components/TableElements/TableElements.types';\n\nexport const hasHeader = <TData extends RowData>(table: Table<TData>, options?: BaseTableOptions<TData>): boolean =>\n  table\n    .getHeaderGroups()\n    .map((headerGroup) => headerGroup.headers.filter((headerItem) => headerItem.column.columnDef.header))[0] &&\n  !options?.noHeader;\n\nexport const hasFooter = <TData extends RowData>(table: Table<TData>, options?: BaseTableOptions<TData>): boolean =>\n  table\n    .getFooterGroups()\n    .map((footerGroup) => footerGroup?.headers?.filter(({ column }) => column?.columnDef?.footer))[0]?.length > 0 &&\n  !options?.noFooter;\n\nexport const cellPinningProps = <TData extends RowData, TValue = unknown>(\n  column?: Column<TData, TValue>,\n): Pick<ITableCellProps, 'isPinned' | 'width' | 'pinAnchorOffset'> => {\n  const isPinned = column?.getIsPinned();\n\n  return {\n    ...(column &&\n      isPinned && {\n        isPinned,\n        width: `calc(var(--col-${column?.id}-size) * 1px)`,\n        pinAnchorOffset: isPinned === 'left' ? column.getStart(isPinned) : column.getAfter(isPinned),\n      }),\n  };\n};\n\nconst cellHighlightProps = <TData extends RowData, TValue = unknown>(\n  cell: Cell<TData, TValue>,\n  highlight?: ITableHeaderProps<TData, TValue>['highlight'],\n): Pick<ITableCellProps, 'highlight'> => {\n  const highlightValue = typeof highlight === 'function' ? highlight(cell.getContext()) : highlight;\n\n  if (highlightValue) {\n    return { highlight: highlightValue };\n  }\n\n  return {};\n};\n\nexport const headerCellProps = <TData extends RowData, TValue = unknown>(\n  header: Header<TData, TValue>,\n): Pick<ITableCellProps, 'highlight' | 'isPinned' | 'pinAnchorOffset' | 'alignment'> &\n  ComponentPropsWithoutRef<'th'> => {\n  const { column, colSpan } = header;\n  const { alignment } = header.column.columnDef;\n\n  return {\n    alignment,\n    colSpan,\n    width: `calc(var(--header-${header.id}-size) * 1px)`,\n    ...cellPinningProps(column),\n  };\n};\n\nexport const bodyCellProps = <TData extends RowData, TValue = unknown>(\n  cell: Cell<TData, TValue>,\n): Pick<ITableCellProps, 'highlight' | 'isPinned' | 'pinAnchorOffset' | 'alignment'> => {\n  const { column } = cell;\n  const { highlight, alignment } = column.columnDef;\n\n  return {\n    alignment,\n    width: `calc(var(--col-${column?.id}-size) * 1px)`,\n    ...cellHighlightProps(cell, highlight),\n    ...cellPinningProps(column),\n  };\n};\n"],"names":["hasHeader","table","options","headerGroup","headerItem","hasFooter","footerGroup","column","cellPinningProps","isPinned","cellHighlightProps","cell","highlight","highlightValue","headerCellProps","header","colSpan","alignment","bodyCellProps"],"mappings":"AAOO,MAAMA,IAAY,CAAwBC,GAAqBC,MACpED,EACG,kBACA,IAAI,CAACE,MAAgBA,EAAY,QAAQ,OAAO,CAACC,MAAeA,EAAW,OAAO,UAAU,MAAM,CAAC,EAAE,CAAC,KACzG,CAACF,GAAS,UAECG,IAAY,CAAwBJ,GAAqBC,MACpED,EACG,kBACA,IAAI,CAACK,MAAgBA,GAAa,SAAS,OAAO,CAAC,EAAE,QAAAC,EAAA,MAAaA,GAAQ,WAAW,MAAM,CAAC,EAAE,CAAC,GAAG,SAAS,KAC9G,CAACL,GAAS,UAECM,IAAmB,CAC9BD,MACoE;AACpE,QAAME,IAAWF,GAAQ,YAAA;AAEzB,SAAO;AAAA,IACL,GAAIA,KACFE,KAAY;AAAA,MACV,UAAAA;AAAA,MACA,OAAO,kBAAkBF,GAAQ,EAAE;AAAA,MACnC,iBAAiBE,MAAa,SAASF,EAAO,SAASE,CAAQ,IAAIF,EAAO,SAASE,CAAQ;AAAA,IAAA;AAAA,EAC7F;AAEN,GAEMC,IAAqB,CACzBC,GACAC,MACuC;AACvC,QAAMC,IAAiB,OAAOD,KAAc,aAAaA,EAAUD,EAAK,WAAA,CAAY,IAAIC;AAExF,SAAIC,IACK,EAAE,WAAWA,EAAA,IAGf,CAAA;AACT,GAEaC,IAAkB,CAC7BC,MAEkC;AAClC,QAAM,EAAE,QAAAR,GAAQ,SAAAS,EAAA,IAAYD,GACtB,EAAE,WAAAE,EAAA,IAAcF,EAAO,OAAO;AAEpC,SAAO;AAAA,IACL,WAAAE;AAAA,IACA,SAAAD;AAAA,IACA,OAAO,qBAAqBD,EAAO,EAAE;AAAA,IACrC,GAAGP,EAAiBD,CAAM;AAAA,EAAA;AAE9B,GAEaW,IAAgB,CAC3BP,MACsF;AACtF,QAAM,EAAE,QAAAJ,MAAWI,GACb,EAAE,WAAAC,GAAW,WAAAK,EAAA,IAAcV,EAAO;AAExC,SAAO;AAAA,IACL,WAAAU;AAAA,IACA,OAAO,kBAAkBV,GAAQ,EAAE;AAAA,IACnC,GAAGG,EAAmBC,GAAMC,CAAS;AAAA,IACrC,GAAGJ,EAAiBD,CAAM;AAAA,EAAA;AAE9B;"}

package/build/esm/components/Table/utils/draggable.js

@@ -1,43 +1,42 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useMemo as l, useCallback as O } from "react";
-import { useSensors as C, useSensor as m, MouseSensor as D, TouchSensor as R, KeyboardSensor as h, DndContext as k, closestCenter as v } from "@dnd-kit/core";
-import { arrayMove as y, SortableContext as b, horizontalListSortingStrategy as H, verticalListSortingStrategy as P } from "@dnd-kit/sortable";
-import { DraggableHeader as j } from "../components/Draggable/Header.js";
-import { DraggableRow as B } from "../components/Draggable/Row.js";
-const q = (I, { onDataMove: d } = {}) => ({
-  useDraggable: (s, g) => {
-    const u = C(m(D, {}), m(R, {}), m(h, {})), x = s.getState(), n = s.getRowModel().rowsById, S = l(() => Object.keys(n), [n]), o = l(() => x.columnOrder, [x]), f = O(
-      (r) => {
-        var w, p;
-        const { active: e, over: t } = r;
-        if (e && t && e.id !== t.id && ((w = e.data.current) == null ? void 0 : w.kind) === "column") {
-          const i = o.indexOf(e.id), a = o.indexOf(t.id);
-          s.setColumnOrder(y(o, i, a));
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as c, useCallback as D } from "react";
+import { useSensors as b, useSensor as l, MouseSensor as v, TouchSensor as I, KeyboardSensor as O, DndContext as C, closestCenter as R } from "@dnd-kit/core";
+import { arrayMove as f, SortableContext as w, horizontalListSortingStrategy as h, verticalListSortingStrategy as k } from "@dnd-kit/sortable";
+import { DraggableHeader as M } from "../components/Draggable/Header.js";
+import { DraggableRow as H } from "../components/Draggable/Row.js";
+const z = (p, { onDataMove: y } = {}) => ({
+  useDraggable: (s, m) => {
+    const g = b(l(v, {}), l(I, {}), l(O, {})), u = s.getState(), n = s.getRowModel().rowsById, x = c(() => Object.keys(n), [n]), r = c(() => u.columnOrder, [u]), S = D(
+      (o) => {
+        const { active: e, over: t } = o;
+        if (e && t && e.id !== t.id && e.data.current?.kind === "column") {
+          const d = r.indexOf(e.id), i = r.indexOf(t.id);
+          s.setColumnOrder(f(r, d, i));
           return;
         }
-        if (e && t && e.id !== t.id && ((p = e.data.current) == null ? void 0 : p.kind) === "row") {
-          const i = n[`${e.id}`].index, a = n[`${t.id}`].index;
-          d == null || d(y(g, i, a));
+        if (e && t && e.id !== t.id && e.data.current?.kind === "row") {
+          const d = n[`${e.id}`].index, i = n[`${t.id}`].index;
+          y?.(f(m, d, i));
         }
       },
-      [o, s, n, g]
+      [r, s, n, m]
     );
-    return l(
+    return c(
       () => ({
-        draggable: I,
+        draggable: p,
         Components: {
-          Provider: ({ children: r }) => /* @__PURE__ */ c(k, { collisionDetection: v, onDragEnd: f, sensors: u, children: r }),
-          Row: B,
-          RowProvider: ({ children: r }) => /* @__PURE__ */ c(b, { items: S, strategy: P, children: r }),
-          Header: j,
-          HeaderProvider: ({ children: r }) => /* @__PURE__ */ c(b, { id: "columns", items: o, strategy: H, children: r })
+          Provider: ({ children: o }) => /* @__PURE__ */ a(C, { collisionDetection: R, onDragEnd: S, sensors: g, children: o }),
+          Row: H,
+          RowProvider: ({ children: o }) => /* @__PURE__ */ a(w, { items: x, strategy: k, children: o }),
+          Header: M,
+          HeaderProvider: ({ children: o }) => /* @__PURE__ */ a(w, { id: "columns", items: r, strategy: h, children: o })
         }
       }),
-      [f, u, S, o]
+      [S, g, x, r]
     );
   }
 });
 export {
-  q as withDragOptions
+  z as withDragOptions
 };
 //# sourceMappingURL=draggable.js.map

package/build/esm/components/Table/utils/draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","sources":["../../../../../src/components/Table/utils/draggable.tsx"],"sourcesContent":["import { type PropsWithChildren, useCallback, useMemo } from 'react';\n\nimport type { RowData, Table } from '@tanstack/react-table';\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\nimport type { DragAndDropHookResult } from '../components/BaseTable/BaseTable.types';\nimport { DraggableHeader } from '../components/Draggable/Header';\nimport { DraggableRow } from '../components/Draggable/Row';\n\nexport const withDragOptions = <TData extends RowData, TValue = unknown>(\n  dragAndDrop: 'row' | 'column' | 'both',\n  { onDataMove }: { onDataMove?: (data: TData[]) => void } = {},\n) => {\n  return {\n    useDraggable: (table: Table<TData>, data: TData[]): DragAndDropHookResult<TData, TValue> => {\n      const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));\n      const tableState = table.getState();\n      const tableRowsById = table.getRowModel().rowsById;\n\n      const tableDataIds = useMemo(() => Object.keys(tableRowsById), [tableRowsById]);\n      const columnsOrder = useMemo(() => tableState.columnOrder, [tableState]);\n\n      const handleDragEnd = useCallback(\n        (event: DragEndEvent) => {\n          const { active, over } = event;\n          // must account for columns as well as rows\n          if (active && over && active.id !== over.id && active.data.current?.kind === 'column') {\n            const oldIndex = columnsOrder.indexOf(active.id as string);\n            const newIndex = columnsOrder.indexOf(over.id as string);\n            table.setColumnOrder(arrayMove(columnsOrder, oldIndex, newIndex));\n            return;\n          }\n          if (active && over && active.id !== over.id && active.data.current?.kind === 'row') {\n            const oldIndex = tableRowsById[`${active.id}`].index;\n            const newIndex = tableRowsById[`${over.id}`].index;\n            onDataMove?.(arrayMove(data, oldIndex, newIndex));\n          }\n        },\n        [columnsOrder, table, tableRowsById, data],\n      );\n\n      return useMemo(\n        (): DragAndDropHookResult<TData, TValue> => ({\n          draggable: dragAndDrop,\n          Components: {\n            Provider: ({ children }: PropsWithChildren) => (\n              <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} sensors={sensors}>\n                {children}\n              </DndContext>\n            ),\n            Row: DraggableRow,\n            RowProvider: ({ children }: PropsWithChildren) => (\n              <SortableContext items={tableDataIds} strategy={verticalListSortingStrategy}>\n                {children}\n              </SortableContext>\n            ),\n            Header: DraggableHeader,\n            HeaderProvider: ({ children }: PropsWithChildren) => (\n              <SortableContext id=\"columns\" items={columnsOrder} strategy={horizontalListSortingStrategy}>\n                {children}\n              </SortableContext>\n            ),\n          },\n        }),\n        [handleDragEnd, sensors, tableDataIds, columnsOrder],\n      );\n    },\n  };\n};\n"],"names":["withDragOptions","dragAndDrop","onDataMove","table","data","sensors","useSensors","useSensor","MouseSensor","TouchSensor","KeyboardSensor","tableState","tableRowsById","tableDataIds","useMemo","columnsOrder","handleDragEnd","useCallback","event","active","over","_a","oldIndex","newIndex","arrayMove","_b","children","jsx","DndContext","closestCenter","DraggableRow","SortableContext","verticalListSortingStrategy","DraggableHeader","horizontalListSortingStrategy"],"mappings":";;;;;;AAwBO,MAAMA,IAAkB,CAC7BC,GACA,EAAE,YAAAC,EAAA,IAAyD,CAAA,OAEpD;AAAA,EACL,cAAc,CAACC,GAAqBC,MAAwD;AAC1F,UAAMC,IAAUC,EAAWC,EAAUC,GAAa,CAAA,CAAE,GAAGD,EAAUE,GAAa,CAAA,CAAE,GAAGF,EAAUG,GAAgB,CAAA,CAAE,CAAC,GAC1GC,IAAaR,EAAM,SAAA,GACnBS,IAAgBT,EAAM,YAAA,EAAc,UAEpCU,IAAeC,EAAQ,MAAM,OAAO,KAAKF,CAAa,GAAG,CAACA,CAAa,CAAC,GACxEG,IAAeD,EAAQ,MAAMH,EAAW,aAAa,CAACA,CAAU,CAAC,GAEjEK,IAAgBC;AAAA,MACpB,CAACC,MAAwB;;AACvB,cAAM,EAAE,QAAAC,GAAQ,MAAAC,EAAA,IAASF;AAEzB,YAAIC,KAAUC,KAAQD,EAAO,OAAOC,EAAK,QAAMC,IAAAF,EAAO,KAAK,YAAZ,gBAAAE,EAAqB,UAAS,UAAU;AACrF,gBAAMC,IAAWP,EAAa,QAAQI,EAAO,EAAY,GACnDI,IAAWR,EAAa,QAAQK,EAAK,EAAY;AACvD,UAAAjB,EAAM,eAAeqB,EAAUT,GAAcO,GAAUC,CAAQ,CAAC;AAChE;AAAA,QACF;AACA,YAAIJ,KAAUC,KAAQD,EAAO,OAAOC,EAAK,QAAMK,IAAAN,EAAO,KAAK,YAAZ,gBAAAM,EAAqB,UAAS,OAAO;AAClF,gBAAMH,IAAWV,EAAc,GAAGO,EAAO,EAAE,EAAE,EAAE,OACzCI,IAAWX,EAAc,GAAGQ,EAAK,EAAE,EAAE,EAAE;AAC7C,UAAAlB,KAAA,QAAAA,EAAasB,EAAUpB,GAAMkB,GAAUC,CAAQ;AAAA,QACjD;AAAA,MACF;AAAA,MACA,CAACR,GAAcZ,GAAOS,GAAeR,CAAI;AAAA,IAAA;AAG3C,WAAOU;AAAA,MACL,OAA6C;AAAA,QAC3C,WAAWb;AAAA,QACX,YAAY;AAAA,UACV,UAAU,CAAC,EAAE,UAAAyB,QACX,gBAAAC,EAACC,GAAA,EAAW,oBAAoBC,GAAe,WAAWb,GAAe,SAAAX,GACtE,UAAAqB,EAAA,CACH;AAAA,UAEF,KAAKI;AAAA,UACL,aAAa,CAAC,EAAE,UAAAJ,EAAA,MACd,gBAAAC,EAACI,GAAA,EAAgB,OAAOlB,GAAc,UAAUmB,GAC7C,UAAAN,EAAA,CACH;AAAA,UAEF,QAAQO;AAAA,UACR,gBAAgB,CAAC,EAAE,UAAAP,QACjB,gBAAAC,EAACI,GAAA,EAAgB,IAAG,WAAU,OAAOhB,GAAc,UAAUmB,GAC1D,UAAAR,EAAA,CACH;AAAA,QAAA;AAAA,MAEJ;AAAA,MAEF,CAACV,GAAeX,GAASQ,GAAcE,CAAY;AAAA,IAAA;AAAA,EAEvD;AAAA;"}
+{"version":3,"file":"draggable.js","sources":["../../../../../src/components/Table/utils/draggable.tsx"],"sourcesContent":["import { type PropsWithChildren, useCallback, useMemo } from 'react';\n\nimport type { RowData, Table } from '@tanstack/react-table';\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\nimport type { DragAndDropHookResult } from '../components/BaseTable/BaseTable.types';\nimport { DraggableHeader } from '../components/Draggable/Header';\nimport { DraggableRow } from '../components/Draggable/Row';\n\nexport const withDragOptions = <TData extends RowData, TValue = unknown>(\n  dragAndDrop: 'row' | 'column' | 'both',\n  { onDataMove }: { onDataMove?: (data: TData[]) => void } = {},\n) => {\n  return {\n    useDraggable: (table: Table<TData>, data: TData[]): DragAndDropHookResult<TData, TValue> => {\n      const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));\n      const tableState = table.getState();\n      const tableRowsById = table.getRowModel().rowsById;\n\n      const tableDataIds = useMemo(() => Object.keys(tableRowsById), [tableRowsById]);\n      const columnsOrder = useMemo(() => tableState.columnOrder, [tableState]);\n\n      const handleDragEnd = useCallback(\n        (event: DragEndEvent) => {\n          const { active, over } = event;\n          // must account for columns as well as rows\n          if (active && over && active.id !== over.id && active.data.current?.kind === 'column') {\n            const oldIndex = columnsOrder.indexOf(active.id as string);\n            const newIndex = columnsOrder.indexOf(over.id as string);\n            table.setColumnOrder(arrayMove(columnsOrder, oldIndex, newIndex));\n            return;\n          }\n          if (active && over && active.id !== over.id && active.data.current?.kind === 'row') {\n            const oldIndex = tableRowsById[`${active.id}`].index;\n            const newIndex = tableRowsById[`${over.id}`].index;\n            onDataMove?.(arrayMove(data, oldIndex, newIndex));\n          }\n        },\n        [columnsOrder, table, tableRowsById, data],\n      );\n\n      return useMemo(\n        (): DragAndDropHookResult<TData, TValue> => ({\n          draggable: dragAndDrop,\n          Components: {\n            Provider: ({ children }: PropsWithChildren) => (\n              <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} sensors={sensors}>\n                {children}\n              </DndContext>\n            ),\n            Row: DraggableRow,\n            RowProvider: ({ children }: PropsWithChildren) => (\n              <SortableContext items={tableDataIds} strategy={verticalListSortingStrategy}>\n                {children}\n              </SortableContext>\n            ),\n            Header: DraggableHeader,\n            HeaderProvider: ({ children }: PropsWithChildren) => (\n              <SortableContext id=\"columns\" items={columnsOrder} strategy={horizontalListSortingStrategy}>\n                {children}\n              </SortableContext>\n            ),\n          },\n        }),\n        [handleDragEnd, sensors, tableDataIds, columnsOrder],\n      );\n    },\n  };\n};\n"],"names":["withDragOptions","dragAndDrop","onDataMove","table","data","sensors","useSensors","useSensor","MouseSensor","TouchSensor","KeyboardSensor","tableState","tableRowsById","tableDataIds","useMemo","columnsOrder","handleDragEnd","useCallback","event","active","over","oldIndex","newIndex","arrayMove","children","jsx","DndContext","closestCenter","DraggableRow","SortableContext","verticalListSortingStrategy","DraggableHeader","horizontalListSortingStrategy"],"mappings":";;;;;;AAwBO,MAAMA,IAAkB,CAC7BC,GACA,EAAE,YAAAC,EAAA,IAAyD,CAAA,OAEpD;AAAA,EACL,cAAc,CAACC,GAAqBC,MAAwD;AAC1F,UAAMC,IAAUC,EAAWC,EAAUC,GAAa,CAAA,CAAE,GAAGD,EAAUE,GAAa,CAAA,CAAE,GAAGF,EAAUG,GAAgB,CAAA,CAAE,CAAC,GAC1GC,IAAaR,EAAM,SAAA,GACnBS,IAAgBT,EAAM,YAAA,EAAc,UAEpCU,IAAeC,EAAQ,MAAM,OAAO,KAAKF,CAAa,GAAG,CAACA,CAAa,CAAC,GACxEG,IAAeD,EAAQ,MAAMH,EAAW,aAAa,CAACA,CAAU,CAAC,GAEjEK,IAAgBC;AAAA,MACpB,CAACC,MAAwB;AACvB,cAAM,EAAE,QAAAC,GAAQ,MAAAC,EAAA,IAASF;AAEzB,YAAIC,KAAUC,KAAQD,EAAO,OAAOC,EAAK,MAAMD,EAAO,KAAK,SAAS,SAAS,UAAU;AACrF,gBAAME,IAAWN,EAAa,QAAQI,EAAO,EAAY,GACnDG,IAAWP,EAAa,QAAQK,EAAK,EAAY;AACvD,UAAAjB,EAAM,eAAeoB,EAAUR,GAAcM,GAAUC,CAAQ,CAAC;AAChE;AAAA,QACF;AACA,YAAIH,KAAUC,KAAQD,EAAO,OAAOC,EAAK,MAAMD,EAAO,KAAK,SAAS,SAAS,OAAO;AAClF,gBAAME,IAAWT,EAAc,GAAGO,EAAO,EAAE,EAAE,EAAE,OACzCG,IAAWV,EAAc,GAAGQ,EAAK,EAAE,EAAE,EAAE;AAC7C,UAAAlB,IAAaqB,EAAUnB,GAAMiB,GAAUC,CAAQ,CAAC;AAAA,QAClD;AAAA,MACF;AAAA,MACA,CAACP,GAAcZ,GAAOS,GAAeR,CAAI;AAAA,IAAA;AAG3C,WAAOU;AAAA,MACL,OAA6C;AAAA,QAC3C,WAAWb;AAAA,QACX,YAAY;AAAA,UACV,UAAU,CAAC,EAAE,UAAAuB,QACX,gBAAAC,EAACC,GAAA,EAAW,oBAAoBC,GAAe,WAAWX,GAAe,SAAAX,GACtE,UAAAmB,EAAA,CACH;AAAA,UAEF,KAAKI;AAAA,UACL,aAAa,CAAC,EAAE,UAAAJ,EAAA,MACd,gBAAAC,EAACI,GAAA,EAAgB,OAAOhB,GAAc,UAAUiB,GAC7C,UAAAN,EAAA,CACH;AAAA,UAEF,QAAQO;AAAA,UACR,gBAAgB,CAAC,EAAE,UAAAP,QACjB,gBAAAC,EAACI,GAAA,EAAgB,IAAG,WAAU,OAAOd,GAAc,UAAUiB,GAC1D,UAAAR,EAAA,CACH;AAAA,QAAA;AAAA,MAEJ;AAAA,MAEF,CAACR,GAAeX,GAASQ,GAAcE,CAAY;AAAA,IAAA;AAAA,EAEvD;AAAA;"}

package/build/esm/components/Table/utils/rowHighlight.js

@@ -1,8 +1,8 @@
-const n = (t, e) => {
-  const c = e == null ? void 0 : e(t), l = t.getIsSelected() ? { type: "selected", indicator: "left" } : null;
-  return c ?? l;
+const g = (e, t) => {
+  const l = t?.(e), c = e.getIsSelected() ? { type: "selected", indicator: "left" } : null;
+  return l ?? c;
 };
 export {
-  n as getRowHighlight
+  g as getRowHighlight
 };
 //# sourceMappingURL=rowHighlight.js.map

package/build/esm/components/Table/utils/rowHighlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"rowHighlight.js","sources":["../../../../../src/components/Table/utils/rowHighlight.ts"],"sourcesContent":["import type { TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport type { Row, RowData } from '@tanstack/react-table';\n\nexport const getRowHighlight = <TData extends RowData>(\n  row: Row<TData>,\n  highlight?: (r: Row<TData>) => TableTypes.Highlight | null,\n) => {\n  const highlightValue = highlight?.(row);\n  const selectedValue = row.getIsSelected() ? { type: 'selected' as const, indicator: 'left' as const } : null;\n\n  return highlightValue ?? selectedValue;\n};\n"],"names":["getRowHighlight","row","highlight","highlightValue","selectedValue"],"mappings":"AAGO,MAAMA,IAAkB,CAC7BC,GACAC,MACG;AACH,QAAMC,IAAiBD,KAAA,gBAAAA,EAAYD,IAC7BG,IAAgBH,EAAI,kBAAkB,EAAE,MAAM,YAAqB,WAAW,OAAA,IAAoB;AAExG,SAAOE,KAAkBC;AAC3B;"}
+{"version":3,"file":"rowHighlight.js","sources":["../../../../../src/components/Table/utils/rowHighlight.ts"],"sourcesContent":["import type { TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport type { Row, RowData } from '@tanstack/react-table';\n\nexport const getRowHighlight = <TData extends RowData>(\n  row: Row<TData>,\n  highlight?: (r: Row<TData>) => TableTypes.Highlight | null,\n) => {\n  const highlightValue = highlight?.(row);\n  const selectedValue = row.getIsSelected() ? { type: 'selected' as const, indicator: 'left' as const } : null;\n\n  return highlightValue ?? selectedValue;\n};\n"],"names":["getRowHighlight","row","highlight","highlightValue","selectedValue"],"mappings":"AAGO,MAAMA,IAAkB,CAC7BC,GACAC,MACG;AACH,QAAMC,IAAiBD,IAAYD,CAAG,GAChCG,IAAgBH,EAAI,kBAAkB,EAAE,MAAM,YAAqB,WAAW,OAAA,IAAoB;AAExG,SAAOE,KAAkBC;AAC3B;"}

package/build/esm/components/Table/utils/tableUtils.d.ts

@@ -2,4 +2,5 @@ import { Sizes } from '../../../react-base/src/consts';
 import { type TableTypes } from '../../../react-base/src/components/Table';
 export declare const getSize: (size: TableTypes.Size) => Sizes.XSmall | Sizes.Small | Sizes.Medium;
 export declare const getInfoBarSize: (size: TableTypes.Size) => Sizes.Small | Sizes.Medium | Sizes.Large;
+export declare const getExpanderPaddingSize: (size: TableTypes.Size) => "medium" | "large" | "small" | Sizes.Small;
 //# sourceMappingURL=tableUtils.d.ts.map

package/build/esm/components/Table/utils/tableUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tableUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/utils/tableUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AACvD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAE3E,eAAO,MAAM,OAAO,SAAU,UAAU,CAAC,IAAI,8CAS5C,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,UAAU,CAAC,IAAI,6CAWnD,CAAC"}
+{"version":3,"file":"tableUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/utils/tableUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AACvD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAE3E,eAAO,MAAM,OAAO,SAAU,UAAU,CAAC,IAAI,8CAS5C,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,UAAU,CAAC,IAAI,6CAWnD,CAAC;AAEF,eAAO,MAAM,sBAAsB,SAAU,UAAU,CAAC,IAAI,+CAK3D,CAAC"}

package/build/esm/components/Table/utils/tableUtils.js

@@ -8,8 +8,9 @@ const a = (r) => {
     default:
       return e.XSmall;
   }
-};
+}, l = (r) => r === e.XSmall ? e.Small : r;
 export {
+  l as getExpanderPaddingSize,
   a as getSize
 };
 //# sourceMappingURL=tableUtils.js.map

package/build/esm/components/Table/utils/tableUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableUtils.js","sources":["../../../../../src/components/Table/utils/tableUtils.ts"],"sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type TableTypes } from 'acinguiux-ds-react-base/components/Table';\n\nexport const getSize = (size: TableTypes.Size) => {\n  switch (size) {\n    case Sizes.Medium:\n      return Sizes.Small;\n    case Sizes.Large:\n      return Sizes.Medium;\n    default:\n      return Sizes.XSmall;\n  }\n};\n\nexport const getInfoBarSize = (size: TableTypes.Size) => {\n  switch (size) {\n    case Sizes.XSmall:\n    case Sizes.Small:\n      return Sizes.Small;\n    case Sizes.Large:\n      return Sizes.Large;\n    case Sizes.Medium:\n    default:\n      return Sizes.Medium;\n  }\n};\n"],"names":["getSize","size","Sizes"],"mappings":";AAGO,MAAMA,IAAU,CAACC,MAA0B;AAChD,UAAQA,GAAA;AAAA,IACN,KAAKC,EAAM;AACT,aAAOA,EAAM;AAAA,IACf,KAAKA,EAAM;AACT,aAAOA,EAAM;AAAA,IACf;AACE,aAAOA,EAAM;AAAA,EAAA;AAEnB;"}
+{"version":3,"file":"tableUtils.js","sources":["../../../../../src/components/Table/utils/tableUtils.ts"],"sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type TableTypes } from 'acinguiux-ds-react-base/components/Table';\n\nexport const getSize = (size: TableTypes.Size) => {\n  switch (size) {\n    case Sizes.Medium:\n      return Sizes.Small;\n    case Sizes.Large:\n      return Sizes.Medium;\n    default:\n      return Sizes.XSmall;\n  }\n};\n\nexport const getInfoBarSize = (size: TableTypes.Size) => {\n  switch (size) {\n    case Sizes.XSmall:\n    case Sizes.Small:\n      return Sizes.Small;\n    case Sizes.Large:\n      return Sizes.Large;\n    case Sizes.Medium:\n    default:\n      return Sizes.Medium;\n  }\n};\n\nexport const getExpanderPaddingSize = (size: TableTypes.Size) => {\n  if (size === Sizes.XSmall) {\n    return Sizes.Small;\n  }\n  return size;\n};\n"],"names":["getSize","size","Sizes","getExpanderPaddingSize"],"mappings":";AAGO,MAAMA,IAAU,CAACC,MAA0B;AAChD,UAAQA,GAAA;AAAA,IACN,KAAKC,EAAM;AACT,aAAOA,EAAM;AAAA,IACf,KAAKA,EAAM;AACT,aAAOA,EAAM;AAAA,IACf;AACE,aAAOA,EAAM;AAAA,EAAA;AAEnB,GAeaC,IAAyB,CAACF,MACjCA,MAASC,EAAM,SACVA,EAAM,QAERD;"}

package/build/esm/components/Tabs/Tabs.js

@@ -1,44 +1,44 @@
-import { jsx as t, jsxs as e } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { Sizes as d, Positions as f } from "../../react-base/src/consts/index.js";
-import { Tabs as T, TabsLabel as $, TabsLabelTextContainer as m } from "./Tabs.styles.js";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Sizes as p, Positions as d } from "../../react-base/src/consts/index.js";
+import { Tabs as f, TabsLabel as T, TabsLabelTextContainer as $ } from "./Tabs.styles.js";
 import u from "../Badge/Badge.js";
 import { useAccessibilitySetup as P } from "./Tabs.hooks.js";
 const h = ({
-  size: a,
+  size: i,
   label: s,
-  icon: n,
-  badge: r,
-  iconPosition: o
-}) => /* @__PURE__ */ e($, { $size: a, $iconPosition: o, $icon: n, children: [
-  /* @__PURE__ */ e(m, { children: [
-    n,
+  icon: a,
+  badge: n,
+  iconPosition: e
+}) => /* @__PURE__ */ r(T, { $size: i, $iconPosition: e, $icon: a, children: [
+  /* @__PURE__ */ r($, { children: [
+    a,
     /* @__PURE__ */ t("span", { children: s })
   ] }),
-  !!r && /* @__PURE__ */ t(u, { size: a, ...r })
-] }), w = p(
-  ({ className: a, size: s = `${d.Medium}`, indicatorPosition: n, placement: r = `${f.Top}`, items: o, ...b }, l) => {
-    const c = o == null ? void 0 : o.map((i) => ({
-      ...i,
+  !!n && /* @__PURE__ */ t(u, { size: i, ...n })
+] }), w = m(
+  ({ className: i, size: s = `${p.Medium}`, indicatorPosition: a, placement: n = `${d.Top}`, items: e, ...b }, l) => {
+    const c = e?.map((o) => ({
+      ...o,
       icon: null,
       label: /* @__PURE__ */ t(
         h,
         {
           size: s,
-          label: i.label,
-          icon: i.icon,
-          iconPosition: i.iconPosition,
-          badge: i.badge
+          label: o.label,
+          icon: o.icon,
+          iconPosition: o.iconPosition,
+          badge: o.badge
         }
       )
     }));
     return P(), /* @__PURE__ */ t(
-      T,
+      f,
       {
-        className: a,
+        className: i,
         $size: s,
-        tabPosition: r,
-        $indicatorPosition: n,
+        tabPosition: n,
+        $indicatorPosition: a,
         ref: l,
         items: c,
         ...b

package/build/esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Sizes, Positions } from 'acinguiux-ds-react-base/consts';\nimport type { TabsTypes } from 'acinguiux-ds-react-base/components/Tabs';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\n\nimport * as Styled from './Tabs.styles';\nimport type { ITabsProps } from './Tabs.types';\nimport Badge from '../Badge/Badge';\nimport { useAccessibilitySetup } from './Tabs.hooks';\n\nconst TabsLabel = ({\n  size,\n  label,\n  icon,\n  badge,\n  iconPosition,\n}: {\n  size: TabsTypes.Size;\n  label: ReactNode;\n  icon?: ReactNode;\n  badge?: BadgeTypes.IProps;\n  iconPosition?: TabsTypes.IconPosition;\n}) => (\n  <Styled.TabsLabel $size={size} $iconPosition={iconPosition} $icon={icon}>\n    <Styled.TabsLabelTextContainer>\n      {icon}\n      <span>{label}</span>\n    </Styled.TabsLabelTextContainer>\n    {!!badge && <Badge size={size} {...badge} />}\n  </Styled.TabsLabel>\n);\n\nconst Tabs = forwardRef<HTMLDivElement, ITabsProps>(\n  (\n    { className, size = `${Sizes.Medium}`, indicatorPosition, placement = `${Positions.Top}`, items, ...rest },\n    ref,\n  ): ReactElement => {\n    const itemsWithBadges = items?.map((item) => ({\n      ...item,\n      icon: null,\n      label: (\n        <TabsLabel\n          size={size}\n          label={item.label}\n          icon={item.icon}\n          iconPosition={item.iconPosition}\n          badge={item.badge}\n        />\n      ),\n    }));\n\n    useAccessibilitySetup();\n\n    return (\n      <Styled.Tabs\n        className={className}\n        $size={size}\n        tabPosition={placement}\n        $indicatorPosition={indicatorPosition}\n        ref={ref}\n        items={itemsWithBadges}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default Tabs;\n"],"names":["TabsLabel","size","label","icon","badge","iconPosition","jsxs","Styled.TabsLabel","Styled.TabsLabelTextContainer","jsx","Badge","Tabs","forwardRef","className","Sizes","indicatorPosition","placement","Positions","items","rest","ref","itemsWithBadges","item","useAccessibilitySetup","Styled.Tabs"],"mappings":";;;;;;AAWA,MAAMA,IAAY,CAAC;AAAA,EACjB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AACF,MAOE,gBAAAC,EAACC,GAAA,EAAiB,OAAON,GAAM,eAAeI,GAAc,OAAOF,GACjE,UAAA;AAAA,EAAA,gBAAAG,EAACE,GAAA,EACE,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAM,EAAC,UAAM,UAAAP,EAAA,CAAM;AAAA,EAAA,GACf;AAAA,EACC,CAAC,CAACE,uBAAUM,GAAA,EAAM,MAAAT,GAAa,GAAGG,EAAA,CAAO;AAAA,GAC5C,GAGIO,IAAOC;AAAA,EACX,CACE,EAAE,WAAAC,GAAW,MAAAZ,IAAO,GAAGa,EAAM,MAAM,IAAI,mBAAAC,GAAmB,WAAAC,IAAY,GAAGC,EAAU,GAAG,IAAI,OAAAC,GAAO,GAAGC,EAAA,GACpGC,MACiB;AACjB,UAAMC,IAAkBH,KAAA,gBAAAA,EAAO,IAAI,CAACI,OAAU;AAAA,MAC5C,GAAGA;AAAA,MACH,MAAM;AAAA,MACN,OACE,gBAAAb;AAAA,QAACT;AAAA,QAAA;AAAA,UACC,MAAAC;AAAA,UACA,OAAOqB,EAAK;AAAA,UACZ,MAAMA,EAAK;AAAA,UACX,cAAcA,EAAK;AAAA,UACnB,OAAOA,EAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAIJ,WAAAC,EAAA,GAGE,gBAAAd;AAAA,MAACe;AAAAA,MAAA;AAAA,QACC,WAAAX;AAAA,QACA,OAAOZ;AAAA,QACP,aAAae;AAAA,QACb,oBAAoBD;AAAA,QACpB,KAAAK;AAAA,QACA,OAAOC;AAAA,QACN,GAAGF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Sizes, Positions } from 'acinguiux-ds-react-base/consts';\nimport type { TabsTypes } from 'acinguiux-ds-react-base/components/Tabs';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\n\nimport * as Styled from './Tabs.styles';\nimport type { ITabsProps } from './Tabs.types';\nimport Badge from '../Badge/Badge';\nimport { useAccessibilitySetup } from './Tabs.hooks';\n\nconst TabsLabel = ({\n  size,\n  label,\n  icon,\n  badge,\n  iconPosition,\n}: {\n  size: TabsTypes.Size;\n  label: ReactNode;\n  icon?: ReactNode;\n  badge?: BadgeTypes.IProps;\n  iconPosition?: TabsTypes.IconPosition;\n}) => (\n  <Styled.TabsLabel $size={size} $iconPosition={iconPosition} $icon={icon}>\n    <Styled.TabsLabelTextContainer>\n      {icon}\n      <span>{label}</span>\n    </Styled.TabsLabelTextContainer>\n    {!!badge && <Badge size={size} {...badge} />}\n  </Styled.TabsLabel>\n);\n\nconst Tabs = forwardRef<HTMLDivElement, ITabsProps>(\n  (\n    { className, size = `${Sizes.Medium}`, indicatorPosition, placement = `${Positions.Top}`, items, ...rest },\n    ref,\n  ): ReactElement => {\n    const itemsWithBadges = items?.map((item) => ({\n      ...item,\n      icon: null,\n      label: (\n        <TabsLabel\n          size={size}\n          label={item.label}\n          icon={item.icon}\n          iconPosition={item.iconPosition}\n          badge={item.badge}\n        />\n      ),\n    }));\n\n    useAccessibilitySetup();\n\n    return (\n      <Styled.Tabs\n        className={className}\n        $size={size}\n        tabPosition={placement}\n        $indicatorPosition={indicatorPosition}\n        ref={ref}\n        items={itemsWithBadges}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default Tabs;\n"],"names":["TabsLabel","size","label","icon","badge","iconPosition","jsxs","Styled.TabsLabel","Styled.TabsLabelTextContainer","jsx","Badge","Tabs","forwardRef","className","Sizes","indicatorPosition","placement","Positions","items","rest","ref","itemsWithBadges","item","useAccessibilitySetup","Styled.Tabs"],"mappings":";;;;;;AAWA,MAAMA,IAAY,CAAC;AAAA,EACjB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AACF,MAOE,gBAAAC,EAACC,GAAA,EAAiB,OAAON,GAAM,eAAeI,GAAc,OAAOF,GACjE,UAAA;AAAA,EAAA,gBAAAG,EAACE,GAAA,EACE,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAM,EAAC,UAAM,UAAAP,EAAA,CAAM;AAAA,EAAA,GACf;AAAA,EACC,CAAC,CAACE,uBAAUM,GAAA,EAAM,MAAAT,GAAa,GAAGG,EAAA,CAAO;AAAA,GAC5C,GAGIO,IAAOC;AAAA,EACX,CACE,EAAE,WAAAC,GAAW,MAAAZ,IAAO,GAAGa,EAAM,MAAM,IAAI,mBAAAC,GAAmB,WAAAC,IAAY,GAAGC,EAAU,GAAG,IAAI,OAAAC,GAAO,GAAGC,EAAA,GACpGC,MACiB;AACjB,UAAMC,IAAkBH,GAAO,IAAI,CAACI,OAAU;AAAA,MAC5C,GAAGA;AAAA,MACH,MAAM;AAAA,MACN,OACE,gBAAAb;AAAA,QAACT;AAAA,QAAA;AAAA,UACC,MAAAC;AAAA,UACA,OAAOqB,EAAK;AAAA,UACZ,MAAMA,EAAK;AAAA,UACX,cAAcA,EAAK;AAAA,UACnB,OAAOA,EAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAEF;AAEF,WAAAC,EAAA,GAGE,gBAAAd;AAAA,MAACe;AAAAA,MAAA;AAAA,QACC,WAAAX;AAAA,QACA,OAAOZ;AAAA,QACP,aAAae;AAAA,QACb,oBAAoBD;AAAA,QACpB,KAAAK;AAAA,QACA,OAAOC;AAAA,QACN,GAAGF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/build/esm/components/Tag/Tag.styles.js

@@ -1,8 +1,8 @@
-import { css as n, styled as i } from "styled-components";
+import { css as d, styled as i } from "styled-components";
 import { useStyles as S } from "../../react-base/src/components/Tag/Tag.utils.js";
 import k from "../Button/OnSentimentButton.js";
 import { Label as C } from "../Text/components/Label/Label.styles.js";
-const d = i(k)`
+const a = i(k)`
   width: auto;
   min-width: auto;
   height: auto;
@@ -14,73 +14,74 @@ const d = i(k)`
     background-color: inherit;
     color: inherit;
   }
-`, a = i.div``, L = i.div`
-  ${({ theme: l, $sentiment: s, $shape: g, $size: p, $variant: c, $iconPosition: $, $icon: h, $iconOnly: b }) => {
+`, l = i.div``, L = i.div`
+  ${({ theme: s, $sentiment: g, $shape: p, $size: c, $variant: $, $iconPosition: o, $icon: h, $iconOnly: b }) => {
   const {
     backgroundColor: m,
-    color: o,
+    color: e,
     borderColor: u,
     minHeight: x,
-    gap: e,
-    borderRadius: r,
+    gap: r,
+    borderRadius: t,
     borderWidth: f,
     borderStyle: v,
     labelPaddingInline: y,
     paddingInline: w,
-    iconSize: t
+    iconSize: n
   } = S({
-    theme: l,
-    sentiment: s,
-    variant: c,
-    size: p,
+    theme: s,
+    sentiment: g,
+    variant: $,
+    size: c,
     icon: h,
     iconOnly: b,
-    shape: g
+    iconPosition: o,
+    shape: p
   });
-  return n`
+  return d`
       display: flex;
       align-items: center;
       width: fit-content;
-      gap: ${e}px;
+      gap: ${r}px;
       min-height: ${x}px;
       padding-inline: ${w}px;
-      border-radius: ${r}px;
+      border-radius: ${t}px;
       border-width: ${f}px;
       border-style: ${v};
       background-color: ${m};
-      color: ${o};
+      color: ${e};
       border-color: ${u};
 
-      ${$ === "right" && n`
-        flex-direction: row-reverse;
-      `};
-
-      & > ${a} {
+      & > ${l} {
         display: flex;
         align-items: center;
-        gap: ${e}px;
+        gap: ${r}px;
         padding-inline: ${y};
+
+        ${o === "right" && d`
+          flex-direction: row-reverse;
+        `};
         &,
         & > ${C} {
-          color: ${o};
+          color: ${e};
         }
       }
 
-      & > ${d} {
-        border-radius: ${r}px;
+      & > ${a} {
+        border-radius: ${t}px;
       }
 
-      & > ${d} > svg,
-      & > ${a} > svg {
-        width: ${t}px;
-        height: ${t}px;
+      & > ${a} > svg,
+      & > ${l} > svg {
+        width: ${n}px;
+        height: ${n}px;
       }
     `;
 }}
 `;
 export {
   L as Tag,
-  d as TagButton,
-  a as TagLabelContainer
+  a as TagButton,
+  l as TagLabelContainer
 };
 //# sourceMappingURL=Tag.styles.js.map

package/build/esm/components/Tag/Tag.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { TagUtils } from 'acinguiux-ds-react-base/components/Tag';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\n\nimport { ITagProps } from './Tag.types';\nimport OnSentimentButton from '../Button/OnSentimentButton';\nimport { Label } from '../Text/components/Label/Label.styles';\n\ntype StylePropsRequired = 'size' | 'shape' | 'sentiment' | 'variant' | 'iconPosition' | 'icon' | 'iconOnly';\n\nexport const TagButton = styled(OnSentimentButton)`\n  width: auto;\n  min-width: auto;\n  height: auto;\n  min-height: auto;\n  padding: 0;\n\n  &:not(:disabled):hover,\n  &:not(:disabled):active {\n    background-color: inherit;\n    color: inherit;\n  }\n`;\n\nexport const TagLabelContainer = styled.div``;\n\nexport const Tag = styled.div<Required<PickTransient<ITagProps, StylePropsRequired>>>`\n  ${({ theme, $sentiment, $shape, $size, $variant, $iconPosition, $icon, $iconOnly }) => {\n    const {\n      backgroundColor,\n      color,\n      borderColor,\n      minHeight,\n      gap,\n      borderRadius,\n      borderWidth,\n      borderStyle,\n      labelPaddingInline,\n      paddingInline,\n      iconSize,\n    } = TagUtils.useStyles({\n      theme,\n      sentiment: $sentiment,\n      variant: $variant,\n      size: $size,\n      icon: $icon,\n      iconOnly: $iconOnly,\n      iconPosition: $iconPosition,\n      shape: $shape,\n    });\n\n    return css`\n      display: flex;\n      align-items: center;\n      width: fit-content;\n      gap: ${gap}px;\n      min-height: ${minHeight}px;\n      padding-inline: ${paddingInline}px;\n      border-radius: ${borderRadius}px;\n      border-width: ${borderWidth}px;\n      border-style: ${borderStyle};\n      background-color: ${backgroundColor};\n      color: ${color};\n      border-color: ${borderColor};\n\n      ${$iconPosition === 'right' &&\n      css`\n        flex-direction: row-reverse;\n      `};\n\n      & > ${TagLabelContainer} {\n        display: flex;\n        align-items: center;\n        gap: ${gap}px;\n        padding-inline: ${labelPaddingInline};\n        &,\n        & > ${Label} {\n          color: ${color};\n        }\n      }\n\n      & > ${TagButton} {\n        border-radius: ${borderRadius}px;\n      }\n\n      & > ${TagButton} > svg,\n      & > ${TagLabelContainer} > svg {\n        width: ${iconSize}px;\n        height: ${iconSize}px;\n      }\n    `;\n  }}\n`;\n"],"names":["TagButton","styled","OnSentimentButton","TagLabelContainer","Tag","theme","$sentiment","$shape","$size","$variant","$iconPosition","$icon","$iconOnly","backgroundColor","color","borderColor","minHeight","gap","borderRadius","borderWidth","borderStyle","labelPaddingInline","paddingInline","iconSize","TagUtils.useStyles","css","Label"],"mappings":";;;;AAUO,MAAMA,IAAYC,EAAOC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcpCC,IAAoBF,EAAO,OAE3BG,IAAMH,EAAO;AAAA,IACtB,CAAC,EAAE,OAAAI,GAAO,YAAAC,GAAY,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,OAAAC,GAAO,WAAAC,QAAgB;AACrF,QAAM;AAAA,IACJ,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,KAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEC,EAAmB;AAAA,IACrB,OAAAnB;AAAA,IACA,WAAWC;AAAA,IACX,SAASG;AAAA,IACT,MAAMD;AAAA,IACN,MAAMG;AAAA,IACN,UAAUC;AAAA,IAEV,OAAOL;AAAA,EAAA,CACR;AAED,SAAOkB;AAAA;AAAA;AAAA;AAAA,aAIER,CAAG;AAAA,oBACID,CAAS;AAAA,wBACLM,CAAa;AAAA,uBACdJ,CAAY;AAAA,sBACbC,CAAW;AAAA,sBACXC,CAAW;AAAA,0BACPP,CAAe;AAAA,eAC1BC,CAAK;AAAA,sBACEC,CAAW;AAAA;AAAA,QAEzBL,MAAkB,WACpBe;AAAA;AAAA,OAEC;AAAA;AAAA,YAEKtB,CAAiB;AAAA;AAAA;AAAA,eAGdc,CAAG;AAAA,0BACQI,CAAkB;AAAA;AAAA,cAE9BK,CAAK;AAAA,mBACAZ,CAAK;AAAA;AAAA;AAAA;AAAA,YAIZd,CAAS;AAAA,yBACIkB,CAAY;AAAA;AAAA;AAAA,YAGzBlB,CAAS;AAAA,YACTG,CAAiB;AAAA,iBACZoB,CAAQ;AAAA,kBACPA,CAAQ;AAAA;AAAA;AAGxB,CAAC;AAAA;"}
+{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { TagUtils } from 'acinguiux-ds-react-base/components/Tag';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\n\nimport { ITagProps } from './Tag.types';\nimport OnSentimentButton from '../Button/OnSentimentButton';\nimport { Label } from '../Text/components/Label/Label.styles';\n\ntype StylePropsRequired = 'size' | 'shape' | 'sentiment' | 'variant' | 'iconPosition' | 'icon' | 'iconOnly';\n\nexport const TagButton = styled(OnSentimentButton)`\n  width: auto;\n  min-width: auto;\n  height: auto;\n  min-height: auto;\n  padding: 0;\n\n  &:not(:disabled):hover,\n  &:not(:disabled):active {\n    background-color: inherit;\n    color: inherit;\n  }\n`;\n\nexport const TagLabelContainer = styled.div``;\n\nexport const Tag = styled.div<Required<PickTransient<ITagProps, StylePropsRequired>>>`\n  ${({ theme, $sentiment, $shape, $size, $variant, $iconPosition, $icon, $iconOnly }) => {\n    const {\n      backgroundColor,\n      color,\n      borderColor,\n      minHeight,\n      gap,\n      borderRadius,\n      borderWidth,\n      borderStyle,\n      labelPaddingInline,\n      paddingInline,\n      iconSize,\n    } = TagUtils.useStyles({\n      theme,\n      sentiment: $sentiment,\n      variant: $variant,\n      size: $size,\n      icon: $icon,\n      iconOnly: $iconOnly,\n      iconPosition: $iconPosition,\n      shape: $shape,\n    });\n\n    return css`\n      display: flex;\n      align-items: center;\n      width: fit-content;\n      gap: ${gap}px;\n      min-height: ${minHeight}px;\n      padding-inline: ${paddingInline}px;\n      border-radius: ${borderRadius}px;\n      border-width: ${borderWidth}px;\n      border-style: ${borderStyle};\n      background-color: ${backgroundColor};\n      color: ${color};\n      border-color: ${borderColor};\n\n      & > ${TagLabelContainer} {\n        display: flex;\n        align-items: center;\n        gap: ${gap}px;\n        padding-inline: ${labelPaddingInline};\n\n        ${$iconPosition === 'right' &&\n        css`\n          flex-direction: row-reverse;\n        `};\n        &,\n        & > ${Label} {\n          color: ${color};\n        }\n      }\n\n      & > ${TagButton} {\n        border-radius: ${borderRadius}px;\n      }\n\n      & > ${TagButton} > svg,\n      & > ${TagLabelContainer} > svg {\n        width: ${iconSize}px;\n        height: ${iconSize}px;\n      }\n    `;\n  }}\n`;\n"],"names":["TagButton","styled","OnSentimentButton","TagLabelContainer","Tag","theme","$sentiment","$shape","$size","$variant","$iconPosition","$icon","$iconOnly","backgroundColor","color","borderColor","minHeight","gap","borderRadius","borderWidth","borderStyle","labelPaddingInline","paddingInline","iconSize","TagUtils.useStyles","css","Label"],"mappings":";;;;AAUO,MAAMA,IAAYC,EAAOC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcpCC,IAAoBF,EAAO,OAE3BG,IAAMH,EAAO;AAAA,IACtB,CAAC,EAAE,OAAAI,GAAO,YAAAC,GAAY,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,OAAAC,GAAO,WAAAC,QAAgB;AACrF,QAAM;AAAA,IACJ,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,KAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEC,EAAmB;AAAA,IACrB,OAAAnB;AAAA,IACA,WAAWC;AAAA,IACX,SAASG;AAAA,IACT,MAAMD;AAAA,IACN,MAAMG;AAAA,IACN,UAAUC;AAAA,IACV,cAAcF;AAAA,IACd,OAAOH;AAAA,EAAA,CACR;AAED,SAAOkB;AAAA;AAAA;AAAA;AAAA,aAIER,CAAG;AAAA,oBACID,CAAS;AAAA,wBACLM,CAAa;AAAA,uBACdJ,CAAY;AAAA,sBACbC,CAAW;AAAA,sBACXC,CAAW;AAAA,0BACPP,CAAe;AAAA,eAC1BC,CAAK;AAAA,sBACEC,CAAW;AAAA;AAAA,YAErBZ,CAAiB;AAAA;AAAA;AAAA,eAGdc,CAAG;AAAA,0BACQI,CAAkB;AAAA;AAAA,UAElCX,MAAkB,WACpBe;AAAA;AAAA,SAEC;AAAA;AAAA,cAEKC,CAAK;AAAA,mBACAZ,CAAK;AAAA;AAAA;AAAA;AAAA,YAIZd,CAAS;AAAA,yBACIkB,CAAY;AAAA;AAAA;AAAA,YAGzBlB,CAAS;AAAA,YACTG,CAAiB;AAAA,iBACZoB,CAAQ;AAAA,kBACPA,CAAQ;AAAA;AAAA;AAGxB,CAAC;AAAA;"}