iguazio.dashboard-react-controls 3.2.21 → 3.2.23

package/dist/nextGenComponents/components/CustomRangePicker/TimePickerInput.mjs

@@ -0,0 +1,109 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { useState as m, useRef as p, useMemo as z, useEffect as f, useCallback as h } from "react";
+import { isMaskComplete as b, MaskedInput as E } from "./MaskedInput.mjs";
+import I from "../../../images/select.svg.mjs";
+import { cn as d } from "../../lib/utils.mjs";
+import { is12HourFormat as N, getTimePlaceholder as P, buildHalfHourOptions as D, parseTimeInput as x } from "../../utils/date.utils.mjs";
+const w = "_", H = N(), O = (t) => {
+  const r = t[0];
+  return [
+    /[0-1]/,
+    r === "1" ? /[0-2]/ : /[0-9]/,
+    ":",
+    /[0-5]/,
+    /[0-9]/,
+    " ",
+    /[AaPp]/,
+    /[Mm]/
+  ];
+}, R = (t) => {
+  const r = t[0];
+  return [/[0-2]/, r === "2" ? /[0-3]/ : /[0-9]/, ":", /[0-5]/, /[0-9]/];
+}, S = H ? O : R, L = P(), q = ({ value: t, onChange: r, className: g }) => {
+  const [n, o] = m(""), [c, l] = m(!1), a = p(null), u = p(null), k = z(() => D(), []);
+  f(() => {
+    o(t);
+  }, [t]), f(() => {
+    if (!c) return;
+    const e = (s) => {
+      a.current && !a.current.contains(s.target) && l(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [c]), f(() => {
+    if (!c || !u.current || !t) return;
+    const e = u.current.querySelector('[data-active="true"]');
+    e && e.scrollIntoView({ block: "nearest" });
+  }, [c, t]);
+  const v = h(
+    (e) => {
+      if (o(e), l(!1), b(e, w)) {
+        const s = x(e);
+        s && r(s);
+      }
+    },
+    [r]
+  ), C = h(() => {
+    if (n)
+      if (b(n, w)) {
+        const e = x(n);
+        e ? (o(e), r(e)) : o(t);
+      } else
+        o(t);
+  }, [n, t, r]), M = (e) => {
+    o(e), r(e), l(!1);
+  };
+  return /* @__PURE__ */ y("div", { ref: a, className: d("relative", g), children: [
+    /* @__PURE__ */ i(
+      E,
+      {
+        mask: S,
+        value: n,
+        onChange: v,
+        onBlur: C,
+        textPlaceholder: L,
+        className: d(
+          "h-10 w-full pr-7 text-center text-[14px] border border-[#C4C2C8] rounded-md focus-visible:ring-1 focus-visible:ring-igz-light-purple focus-visible:outline-none",
+          t ? "text-igz-primary" : "text-[#C4C2C8]"
+        )
+      }
+    ),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => l((e) => !e),
+        tabIndex: -1,
+        children: /* @__PURE__ */ i(I, { className: "h-3 w-3 opacity-70" })
+      }
+    ),
+    c && /* @__PURE__ */ i(
+      "div",
+      {
+        ref: u,
+        className: "absolute top-full left-0 mt-1 w-full z-50 max-h-[200px] overflow-y-auto rounded-md border border-[#ccc] bg-white shadow-md",
+        children: k.map((e) => /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            "data-active": e === t || void 0,
+            className: d(
+              "w-full h-[46px] px-4 text-left text-[14px] hover:bg-igz-accent-hover cursor-pointer",
+              e === t && "bg-igz-accent-hover font-medium"
+            ),
+            onMouseDown: (s) => {
+              s.preventDefault(), M(e);
+            },
+            children: e
+          },
+          e
+        ))
+      }
+    )
+  ] });
+};
+export {
+  q as TimePickerInput
+};
+//# sourceMappingURL=TimePickerInput.mjs.map

package/dist/nextGenComponents/components/CustomRangePicker/TimePickerInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerInput.mjs","sources":["../../../../src/lib/nextGenComponents/components/CustomRangePicker/TimePickerInput.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport {\n  MaskedInput,\n  isMaskComplete,\n  type MaskItem\n} from '@/components/CustomRangePicker/MaskedInput'\nimport SelectIcon from '../../../images/select.svg?react'\nimport { cn } from '@/lib/utils'\nimport {\n  buildHalfHourOptions,\n  getTimePlaceholder,\n  is12HourFormat,\n  parseTimeInput\n} from '@/utils/date.utils'\n\ntype Props = {\n  value: string\n  onChange: (value: string) => void\n  className?: string\n}\n\nconst PLACEHOLDER_CHAR = '_' as const\n\nconst use12h = is12HourFormat()\n\nconst timeMask12h = (value: string): MaskItem[] => {\n  const firstChar = value[0]\n  return [\n    /[0-1]/,\n    firstChar === '1' ? /[0-2]/ : /[0-9]/,\n    ':',\n    /[0-5]/,\n    /[0-9]/,\n    ' ',\n    /[AaPp]/,\n    /[Mm]/\n  ]\n}\n\nconst timeMask24h = (value: string): MaskItem[] => {\n  const firstChar = value[0]\n  return [/[0-2]/, firstChar === '2' ? /[0-3]/ : /[0-9]/, ':', /[0-5]/, /[0-9]/]\n}\n\nconst timeMask = use12h ? timeMask12h : timeMask24h\nconst timePlaceholder = getTimePlaceholder()\n\nexport const TimePickerInput = ({ value, onChange, className }: Props) => {\n  const [maskedValue, setMaskedValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const options = useMemo(() => buildHalfHourOptions(), [])\n\n  useEffect(() => {\n    setMaskedValue(value)\n  }, [value])\n\n  useEffect(() => {\n    if (!isOpen) return\n    const handleClick = (e: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  useEffect(() => {\n    if (!isOpen || !listRef.current || !value) return\n    const activeEl = listRef.current.querySelector('[data-active=\"true\"]')\n    if (activeEl) activeEl.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, value])\n\n  const handleMaskedChange = useCallback(\n    (masked: string) => {\n      setMaskedValue(masked)\n      setIsOpen(false)\n      if (isMaskComplete(masked, PLACEHOLDER_CHAR)) {\n        const normalized = parseTimeInput(masked)\n        if (normalized) onChange(normalized)\n      }\n    },\n    [onChange]\n  )\n\n  const handleBlur = useCallback(() => {\n    if (!maskedValue) return\n    if (isMaskComplete(maskedValue, PLACEHOLDER_CHAR)) {\n      const normalized = parseTimeInput(maskedValue)\n      if (normalized) {\n        setMaskedValue(normalized)\n        onChange(normalized)\n      } else {\n        setMaskedValue(value)\n      }\n    } else {\n      setMaskedValue(value)\n    }\n  }, [maskedValue, value, onChange])\n\n  const handleOptionSelect = (option: string) => {\n    setMaskedValue(option)\n    onChange(option)\n    setIsOpen(false)\n  }\n\n  return (\n    <div ref={wrapperRef} className={cn('relative', className)}>\n      <MaskedInput\n        mask={timeMask}\n        value={maskedValue}\n        onChange={handleMaskedChange}\n        onBlur={handleBlur}\n        textPlaceholder={timePlaceholder}\n        className={cn(\n          'h-10 w-full pr-7 text-center text-[14px] border border-[#C4C2C8] rounded-md focus-visible:ring-1 focus-visible:ring-igz-light-purple focus-visible:outline-none',\n          value ? 'text-igz-primary' : 'text-[#C4C2C8]'\n        )}\n      />\n      <button\n        type=\"button\"\n        className=\"absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer\"\n        onMouseDown={e => e.preventDefault()}\n        onClick={() => setIsOpen(prev => !prev)}\n        tabIndex={-1}\n      >\n        <SelectIcon className=\"h-3 w-3 opacity-70\" />\n      </button>\n\n      {isOpen && (\n        <div\n          ref={listRef}\n          className=\"absolute top-full left-0 mt-1 w-full z-50 max-h-[200px] overflow-y-auto rounded-md border border-[#ccc] bg-white shadow-md\"\n        >\n          {options.map(time => (\n            <button\n              key={time}\n              type=\"button\"\n              data-active={time === value || undefined}\n              className={cn(\n                'w-full h-[46px] px-4 text-left text-[14px] hover:bg-igz-accent-hover cursor-pointer',\n                time === value && 'bg-igz-accent-hover font-medium'\n              )}\n              onMouseDown={e => {\n                e.preventDefault()\n                handleOptionSelect(time)\n              }}\n            >\n              {time}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["PLACEHOLDER_CHAR","use12h","is12HourFormat","timeMask12h","value","firstChar","timeMask24h","timeMask","timePlaceholder","getTimePlaceholder","TimePickerInput","onChange","className","maskedValue","setMaskedValue","useState","isOpen","setIsOpen","wrapperRef","useRef","listRef","options","useMemo","buildHalfHourOptions","useEffect","handleClick","e","activeEl","handleMaskedChange","useCallback","masked","isMaskComplete","normalized","parseTimeInput","handleBlur","handleOptionSelect","option","jsxs","cn","jsx","MaskedInput","prev","SelectIcon","time"],"mappings":"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"}

package/dist/nextGenComponents/components/CustomRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CustomRangePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/nextGenComponents/components/CustomRangePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/nextGenComponents/components/CustomRangePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/nextGenComponents/components/CustomRangePicker/index.mjs

@@ -0,0 +1,5 @@
+import { default as o } from "./CustomRangePicker.mjs";
+export {
+  o as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/nextGenComponents/components/CustomRangePicker/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/nextGenComponents/components/DataTable/DataTable.d.ts

@@ -0,0 +1,29 @@
+import { type ColumnDef, type RowSelectionState, type SortingState } from '@tanstack/react-table';
+import { ComponentType, ReactNode } from 'react';
+import { PaginationConfig } from '@/components/PaginationControls';
+import { ActionMenuItem } from '@/components/RowActions';
+export type DetailsPanelConfig<TData extends object> = {
+    content: ComponentType<TData>;
+    titleAccessorKey?: keyof TData;
+    titleAccessorFn?: (row: TData) => string | ReactNode;
+    selectedRow?: TData;
+    onRowSelect?: (row: TData) => void;
+    onRowClose?: () => void;
+};
+export type CheckboxSelectionConfig = {
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: (state: RowSelectionState) => void;
+};
+export type DataTableProps<TData extends object> = {
+    className?: string;
+    data: TData[];
+    columns: ColumnDef<TData, unknown>[];
+    initialSorting?: SortingState;
+    pagination?: PaginationConfig;
+    rowActions?: (row: TData) => ActionMenuItem[];
+    detailsPanel?: DetailsPanelConfig<TData>;
+    checkboxSelection?: CheckboxSelectionConfig;
+};
+declare const DataTable: <TData extends object>({ className, data, columns, initialSorting, pagination, rowActions, detailsPanel, checkboxSelection }: Readonly<DataTableProps<TData>>) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/nextGenComponents/components/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/lib/nextGenComponents/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAA;AAKjE,OAA2B,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AACtF,OAAO,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAQpE,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,IAAI;IACrD,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAA;IAC9B,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAA;IACpD,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,YAAY,EAAE,iBAAiB,CAAA;IAC/B,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACzD,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,IAAI;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,cAAc,EAAE,CAAA;IAC7C,YAAY,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,iBAAiB,CAAC,EAAE,uBAAuB,CAAA;CAC5C,CAAA;AAED,QAAA,MAAM,SAAS,GAAI,KAAK,SAAS,MAAM,EAAE,uGAStC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,4CAoQjC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/nextGenComponents/components/DataTable/DataTable.mjs

@@ -0,0 +1,223 @@
+import { jsxs as r, Fragment as W, jsx as e } from "react/jsx-runtime";
+import { useReactTable as K, getSortedRowModel as U, getFilteredRowModel as q, getCoreRowModel as J, flexRender as h } from "@tanstack/react-table";
+import { useVirtualizer as Q } from "@tanstack/react-virtual";
+import { useRef as Y, useMemo as x } from "react";
+import Z from "../../../images/sort-arrow.svg.mjs";
+import "../DetailsPanel/index.mjs";
+import "../EllipsisTooltip/index.mjs";
+import "../PaginationControls/index.mjs";
+import "../RowActions/index.mjs";
+import { ESTIMATED_ROW_HEIGHT as tt, DATATABLE_TEXT as A, SORT_DIRECTION as P, NO_ROWS_MESSAGES as et } from "../../constants/index.mjs";
+import { useClickOutside as ot } from "../../hooks/useClickOutside.mjs";
+import { cn as d } from "../../lib/utils.mjs";
+import lt from "./checkboxColumn.mjs";
+import { getColumnWidthCalculator as nt, getVirtualPadding as it, getColumnSize as $ } from "./DataTable.utils.mjs";
+import L from "../EllipsisTooltip/EllipsisTooltip.mjs";
+import rt from "../RowActions/RowActions.mjs";
+import at from "../DetailsPanel/DetailsPanel.mjs";
+import st from "../PaginationControls/PaginationControls.mjs";
+const Tt = ({
+  className: V,
+  data: g,
+  columns: b,
+  initialSorting: j = [],
+  pagination: R,
+  rowActions: m,
+  detailsPanel: u,
+  checkboxSelection: n
+}) => {
+  var O;
+  const { selectedRow: c, onRowSelect: v, onRowClose: p } = u ?? {}, N = Y(null), k = ot(c ? p : void 0), X = x(() => {
+    if (!c) return {};
+    const o = g.indexOf(c);
+    return o >= 0 ? { [o]: !0 } : {};
+  }, [c, g]), E = n ? n.rowSelection : X, y = x(
+    () => n ? [lt, ...b] : b,
+    [n, b]
+  ), f = K({
+    data: g,
+    columns: y,
+    defaultColumn: {
+      size: 1,
+      minSize: 0
+    },
+    state: {
+      rowSelection: E
+    },
+    onRowSelectionChange: (o) => {
+      if (!n) return;
+      const t = typeof o == "function" ? o(E) : o;
+      n.onRowSelectionChange(t);
+    },
+    getCoreRowModel: J(),
+    getFilteredRowModel: q(),
+    getSortedRowModel: U(),
+    enableRowSelection: !0,
+    enableMultiRowSelection: !!n,
+    enableSorting: !0,
+    enableSortingRemoval: !1,
+    initialState: {
+      sorting: j
+    }
+  }), { rows: C } = f.getRowModel(), w = Q({
+    count: C.length,
+    estimateSize: () => tt,
+    getScrollElement: () => N.current,
+    overscan: 5
+  }), D = w.getVirtualItems(), T = c ?? ((O = f.getRowModel().flatRows.find((o) => o.getIsSelected())) == null ? void 0 : O.original), _ = f.getVisibleLeafColumns(), I = x(() => nt(_), [_]), S = y.length + (m ? 1 : 0), { top: M, bottom: z } = it(D, w);
+  return /* @__PURE__ */ r(W, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        "data-testid": "data-table-wrapper",
+        ref: k,
+        className: "flex flex-col relative flex-grow min-h-0",
+        children: [
+          /* @__PURE__ */ e("div", { ref: N, className: d("overflow-auto rounded-lg border", V), children: /* @__PURE__ */ r("table", { className: "w-full border-collapse table-fixed", children: [
+            /* @__PURE__ */ e("thead", { children: f.getHeaderGroups().map((o) => /* @__PURE__ */ r(
+              "tr",
+              {
+                className: "sticky top-0 z-10 bg-white shadow-[0_1px_0_0_#eee]",
+                "data-testid": "data-table-header-row",
+                children: [
+                  o.headers.map((t, l) => {
+                    const a = t.column.id === A.CHECKBOX_COLUMN_ID, i = n ? l === 1 : l === 0;
+                    return /* @__PURE__ */ e(
+                      "th",
+                      {
+                        colSpan: t.colSpan,
+                        style: $(
+                          a,
+                          i,
+                          t.column.getSize(),
+                          I
+                        ),
+                        className: d(
+                          "relative px-4 py-2 text-left text-[15px] leading-6 text-[#7F7989] border-b border-[#eee] whitespace-nowrap",
+                          i && "w-[250px] pr-[10px]",
+                          a && "w-12 px-3"
+                        ),
+                        "data-testid": `data-table-header-${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
+                        children: !t.isPlaceholder && (a ? h(t.column.columnDef.header, t.getContext()) : /* @__PURE__ */ r(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: t.column.getToggleSortingHandler(),
+                            disabled: !t.column.getCanSort(),
+                            className: d(
+                              "inline-flex items-center gap-2 w-full bg-transparent border-0 py-1 cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#b9d4ff] focus-visible:outline-offset-2 rounded disabled:cursor-default font-normal",
+                              t.column.getIsSorted() && "font-bold"
+                            ),
+                            "data-testid": `data-table-header-button-${t.column.columnDef.header}`,
+                            children: [
+                              /* @__PURE__ */ e(L, { className: "w-fit", children: h(t.column.columnDef.header, t.getContext()) }),
+                              t.column.getCanSort() && /* @__PURE__ */ e("span", { className: "w-2 h-2 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(
+                                Z,
+                                {
+                                  "aria-hidden": "true",
+                                  className: d(
+                                    "w-full h-full transition-transform duration-150 ease-in-out",
+                                    t.column.getIsSorted() === P.ASC && "rotate-180 opacity-100",
+                                    t.column.getIsSorted() === P.DESC && "rotate-0 opacity-100",
+                                    !t.column.getIsSorted() && "opacity-40"
+                                  )
+                                }
+                              ) })
+                            ]
+                          }
+                        ))
+                      },
+                      t.id
+                    );
+                  }),
+                  m && /* @__PURE__ */ e(
+                    "th",
+                    {
+                      className: "w-12 p-0 border-b border-[#eee]",
+                      "data-testid": "data-table-header-actions"
+                    }
+                  )
+                ]
+              },
+              o.id
+            )) }),
+            /* @__PURE__ */ e("tbody", { children: C.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+              "td",
+              {
+                colSpan: S,
+                className: "h-40 text-center text-[15px] text-[#4B4760]",
+                "data-testid": "data-table-empty-state",
+                children: et
+              }
+            ) }) : /* @__PURE__ */ r(W, { children: [
+              M > 0 && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: S, style: { height: M, padding: 0 } }) }),
+              D.map((o) => {
+                const t = C[o.index];
+                return /* @__PURE__ */ r(
+                  "tr",
+                  {
+                    ref: w.measureElement,
+                    "data-index": o.index,
+                    className: d(
+                      "group hover:bg-igz-accent-hover h-12 border-b border-[#eee] last:border-none",
+                      u && "cursor-pointer",
+                      t.getIsSelected() && "bg-[#f2f7ff]"
+                    ),
+                    "data-testid": `data-table-row-${t.id}`,
+                    children: [
+                      t.getVisibleCells().map((l, a) => {
+                        const i = l.column.id === A.CHECKBOX_COLUMN_ID, B = n ? a === 1 : a === 0, s = l.column.columnDef.meta, F = !!(s != null && s.skipEllipsisTooltip), H = h(
+                          l.column.columnDef.cell,
+                          l.getContext()
+                        ), G = !i && !F ? /* @__PURE__ */ e(L, { children: H }) : H;
+                        return /* @__PURE__ */ e(
+                          "td",
+                          {
+                            onClick: !i && v ? () => v(t.original) : void 0,
+                            style: $(
+                              i,
+                              B,
+                              l.column.getSize(),
+                              I
+                            ),
+                            className: d(
+                              "relative px-4 py-2 text-left text-[#4B4760] text-[15px] font-normal",
+                              F ? "min-w-0" : "truncate",
+                              B && "w-[250px] pr-[10px]",
+                              i && "w-12 px-3",
+                              s == null ? void 0 : s.tdClassName
+                            ),
+                            "data-testid": `data-table-cell-${t.id}`,
+                            children: G
+                          },
+                          l.id
+                        );
+                      }),
+                      m && /* @__PURE__ */ e(
+                        "td",
+                        {
+                          className: "relative px-1",
+                          "data-testid": `data-table-actions-cell-${t.id}`,
+                          onClick: (l) => l.stopPropagation(),
+                          children: /* @__PURE__ */ e(rt, { actions: m(t.original) })
+                        }
+                      )
+                    ]
+                  },
+                  t.id
+                );
+              }),
+              z > 0 && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: S, style: { height: z, padding: 0 } }) })
+            ] }) })
+          ] }) }),
+          T && u && /* @__PURE__ */ e(at, { row: T, ...u, onClose: () => p == null ? void 0 : p() })
+        ]
+      }
+    ),
+    R && /* @__PURE__ */ e(st, { ...R })
+  ] });
+};
+export {
+  Tt as default
+};
+//# sourceMappingURL=DataTable.mjs.map

package/dist/nextGenComponents/components/DataTable/DataTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.mjs","sources":["../../../../src/lib/nextGenComponents/components/DataTable/DataTable.tsx"],"sourcesContent":["import {\n  flexRender,\n  useReactTable,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { ComponentType, ReactNode, useRef, useMemo } from 'react'\n\nimport SortArrow from '../../../images/sort-arrow.svg?react'\nimport DetailsPanel from '@/components/DetailsPanel'\nimport EllipsisTooltip from '@/components/EllipsisTooltip'\nimport PaginationControls, { PaginationConfig } from '@/components/PaginationControls'\nimport { RowActions, ActionMenuItem } from '@/components/RowActions'\nimport { DATATABLE_TEXT, ESTIMATED_ROW_HEIGHT, NO_ROWS_MESSAGES, SORT_DIRECTION } from '@/constants'\nimport { useClickOutside } from '@/hooks/useClickOutside'\nimport { cn } from '@/lib/utils'\n\nimport checkboxColumn from './checkboxColumn'\nimport { getColumnSize, getColumnWidthCalculator, getVirtualPadding } from './DataTable.utils'\n\nexport type DetailsPanelConfig<TData extends object> = {\n  content: ComponentType<TData>\n  titleAccessorKey?: keyof TData\n  titleAccessorFn?: (row: TData) => string | ReactNode\n  selectedRow?: TData\n  onRowSelect?: (row: TData) => void\n  onRowClose?: () => void\n}\n\nexport type CheckboxSelectionConfig = {\n  rowSelection: RowSelectionState\n  onRowSelectionChange: (state: RowSelectionState) => void\n}\n\nexport type DataTableProps<TData extends object> = {\n  className?: string\n  data: TData[]\n  columns: ColumnDef<TData, unknown>[]\n  initialSorting?: SortingState\n  pagination?: PaginationConfig\n  rowActions?: (row: TData) => ActionMenuItem[]\n  detailsPanel?: DetailsPanelConfig<TData>\n  checkboxSelection?: CheckboxSelectionConfig\n}\n\nconst DataTable = <TData extends object>({\n  className,\n  data,\n  columns,\n  initialSorting = [],\n  pagination,\n  rowActions,\n  detailsPanel,\n  checkboxSelection\n}: Readonly<DataTableProps<TData>>) => {\n  const { selectedRow, onRowSelect, onRowClose } = detailsPanel ?? {}\n  const tableContainerRef = useRef<HTMLDivElement>(null)\n  const wrapperRef = useClickOutside(selectedRow ? onRowClose : undefined)\n\n  const detailsPanelSelection = useMemo(() => {\n    if (!selectedRow) return {}\n    const index = data.indexOf(selectedRow)\n    return index >= 0 ? { [index]: true } : {}\n  }, [selectedRow, data])\n\n  const rowSelection = checkboxSelection ? checkboxSelection.rowSelection : detailsPanelSelection\n\n  const allColumns = useMemo(\n    () => (checkboxSelection ? [checkboxColumn as ColumnDef<TData, unknown>, ...columns] : columns),\n    [checkboxSelection, columns]\n  )\n\n  const table = useReactTable({\n    data,\n    columns: allColumns,\n    defaultColumn: {\n      size: 1,\n      minSize: 0\n    },\n    state: {\n      rowSelection\n    },\n    onRowSelectionChange: updaterOrValue => {\n      if (!checkboxSelection) return\n      const newSelection =\n        typeof updaterOrValue === 'function' ? updaterOrValue(rowSelection) : updaterOrValue\n      checkboxSelection.onRowSelectionChange(newSelection)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    enableRowSelection: true,\n    enableMultiRowSelection: !!checkboxSelection,\n    enableSorting: true,\n    enableSortingRemoval: false,\n    initialState: {\n      sorting: initialSorting\n    }\n  })\n\n  const { rows } = table.getRowModel()\n\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    estimateSize: () => ESTIMATED_ROW_HEIGHT,\n    getScrollElement: () => tableContainerRef.current,\n    overscan: 5\n  })\n\n  const virtualRows = rowVirtualizer.getVirtualItems()\n\n  const selected =\n    selectedRow ?? table.getRowModel().flatRows.find(r => r.getIsSelected())?.original\n\n  const visibleColumns = table.getVisibleLeafColumns()\n  const getColumnWidth = useMemo(() => getColumnWidthCalculator(visibleColumns), [visibleColumns])\n\n  const totalColSpan = allColumns.length + (rowActions ? 1 : 0)\n  const { top: topPadding, bottom: bottomPadding } = getVirtualPadding(virtualRows, rowVirtualizer)\n\n  return (\n    <>\n      <div\n        data-testid=\"data-table-wrapper\"\n        ref={wrapperRef}\n        className=\"flex flex-col relative flex-grow min-h-0\"\n      >\n        <div ref={tableContainerRef} className={cn('overflow-auto rounded-lg border', className)}>\n          <table className=\"w-full border-collapse table-fixed\">\n            <thead>\n              {table.getHeaderGroups().map(headerGroup => (\n                <tr\n                  key={headerGroup.id}\n                  className=\"sticky top-0 z-10 bg-white shadow-[0_1px_0_0_#eee]\"\n                  data-testid=\"data-table-header-row\"\n                >\n                  {headerGroup.headers.map((header, headerIndex) => {\n                    const isCheckboxColumn = header.column.id === DATATABLE_TEXT.CHECKBOX_COLUMN_ID\n                    const isFirstDataColumn = checkboxSelection\n                      ? headerIndex === 1\n                      : headerIndex === 0\n                    return (\n                      <th\n                        key={header.id}\n                        colSpan={header.colSpan}\n                        style={getColumnSize(\n                          isCheckboxColumn,\n                          isFirstDataColumn,\n                          header.column.getSize(),\n                          getColumnWidth\n                        )}\n                        className={cn(\n                          'relative px-4 py-2 text-left text-[15px] leading-6 text-[#7F7989] border-b border-[#eee] whitespace-nowrap',\n                          isFirstDataColumn && 'w-[250px] pr-[10px]',\n                          isCheckboxColumn && 'w-12 px-3'\n                        )}\n                        data-testid={`data-table-header-${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                      >\n                        {!header.isPlaceholder &&\n                          (isCheckboxColumn ? (\n                            flexRender(header.column.columnDef.header, header.getContext())\n                          ) : (\n                            <button\n                              type=\"button\"\n                              onClick={header.column.getToggleSortingHandler()}\n                              disabled={!header.column.getCanSort()}\n                              className={cn(\n                                'inline-flex items-center gap-2 w-full bg-transparent border-0 py-1 cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#b9d4ff] focus-visible:outline-offset-2 rounded disabled:cursor-default font-normal',\n                                header.column.getIsSorted() && 'font-bold'\n                              )}\n                              data-testid={`data-table-header-button-${header.column.columnDef.header}`}\n                            >\n                              <EllipsisTooltip className=\"w-fit\">\n                                {flexRender(header.column.columnDef.header, header.getContext())}\n                              </EllipsisTooltip>\n\n                              {header.column.getCanSort() && (\n                                <span className=\"w-2 h-2 shrink-0 flex items-center justify-center\">\n                                  <SortArrow\n                                    aria-hidden=\"true\"\n                                    className={cn(\n                                      'w-full h-full transition-transform duration-150 ease-in-out',\n                                      header.column.getIsSorted() === SORT_DIRECTION.ASC &&\n                                        'rotate-180 opacity-100',\n                                      header.column.getIsSorted() === SORT_DIRECTION.DESC &&\n                                        'rotate-0 opacity-100',\n                                      !header.column.getIsSorted() && 'opacity-40'\n                                    )}\n                                  />\n                                </span>\n                              )}\n                            </button>\n                          ))}\n                      </th>\n                    )\n                  })}\n                  {rowActions && (\n                    <th\n                      className=\"w-12 p-0 border-b border-[#eee]\"\n                      data-testid=\"data-table-header-actions\"\n                    />\n                  )}\n                </tr>\n              ))}\n            </thead>\n\n            <tbody>\n              {rows.length === 0 ? (\n                <tr>\n                  <td\n                    colSpan={totalColSpan}\n                    className=\"h-40 text-center text-[15px] text-[#4B4760]\"\n                    data-testid=\"data-table-empty-state\"\n                  >\n                    {NO_ROWS_MESSAGES}\n                  </td>\n                </tr>\n              ) : (\n                <>\n                  {topPadding > 0 && (\n                    <tr>\n                      <td colSpan={totalColSpan} style={{ height: topPadding, padding: 0 }} />\n                    </tr>\n                  )}\n                  {virtualRows.map(virtualRow => {\n                    const row = rows[virtualRow.index]\n                    return (\n                      <tr\n                        key={row.id}\n                        ref={rowVirtualizer.measureElement}\n                        data-index={virtualRow.index}\n                        className={cn(\n                          'group hover:bg-igz-accent-hover h-12 border-b border-[#eee] last:border-none',\n                          detailsPanel && 'cursor-pointer',\n                          row.getIsSelected() && 'bg-[#f2f7ff]'\n                        )}\n                        data-testid={`data-table-row-${row.id}`}\n                      >\n                        {row.getVisibleCells().map((cell, idx) => {\n                          const isCheckboxColumn =\n                            cell.column.id === DATATABLE_TEXT.CHECKBOX_COLUMN_ID\n                          const isFirstDataColumn = checkboxSelection ? idx === 1 : idx === 0\n                          const columnMeta = cell.column.columnDef.meta as\n                            | { skipEllipsisTooltip?: boolean; tdClassName?: string }\n                            | undefined\n                          const skipEllipsisTooltip = Boolean(columnMeta?.skipEllipsisTooltip)\n                          const renderedCell = flexRender(\n                            cell.column.columnDef.cell,\n                            cell.getContext()\n                          )\n                          const wrapCellWithEllipsis = !isCheckboxColumn && !skipEllipsisTooltip\n                          const cellContent = wrapCellWithEllipsis ? (\n                            <EllipsisTooltip>{renderedCell}</EllipsisTooltip>\n                          ) : (\n                            renderedCell\n                          )\n                          return (\n                            <td\n                              key={cell.id}\n                              onClick={\n                                !isCheckboxColumn && onRowSelect\n                                  ? () => onRowSelect(row.original)\n                                  : undefined\n                              }\n                              style={getColumnSize(\n                                isCheckboxColumn,\n                                isFirstDataColumn,\n                                cell.column.getSize(),\n                                getColumnWidth\n                              )}\n                              className={cn(\n                                'relative px-4 py-2 text-left text-[#4B4760] text-[15px] font-normal',\n                                skipEllipsisTooltip ? 'min-w-0' : 'truncate',\n                                isFirstDataColumn && 'w-[250px] pr-[10px]',\n                                isCheckboxColumn && 'w-12 px-3',\n                                columnMeta?.tdClassName\n                              )}\n                              data-testid={`data-table-cell-${row.id}`}\n                            >\n                              {cellContent}\n                            </td>\n                          )\n                        })}\n                        {rowActions && (\n                          <td\n                            className=\"relative px-1\"\n                            data-testid={`data-table-actions-cell-${row.id}`}\n                            onClick={e => e.stopPropagation()}\n                          >\n                            <RowActions actions={rowActions(row.original)} />\n                          </td>\n                        )}\n                      </tr>\n                    )\n                  })}\n                  {bottomPadding > 0 && (\n                    <tr>\n                      <td colSpan={totalColSpan} style={{ height: bottomPadding, padding: 0 }} />\n                    </tr>\n                  )}\n                </>\n              )}\n            </tbody>\n          </table>\n        </div>\n\n        {selected && detailsPanel && (\n          <DetailsPanel row={selected} {...detailsPanel} onClose={() => onRowClose?.()} />\n        )}\n      </div>\n\n      {pagination && <PaginationControls {...pagination} />}\n    </>\n  )\n}\n\nexport default DataTable\n"],"names":["DataTable","className","data","columns","initialSorting","pagination","rowActions","detailsPanel","checkboxSelection","selectedRow","onRowSelect","onRowClose","tableContainerRef","useRef","wrapperRef","useClickOutside","detailsPanelSelection","useMemo","index","rowSelection","allColumns","checkboxColumn","table","useReactTable","updaterOrValue","newSelection","getCoreRowModel","getFilteredRowModel","getSortedRowModel","rows","rowVirtualizer","useVirtualizer","ESTIMATED_ROW_HEIGHT","virtualRows","selected","_a","r","visibleColumns","getColumnWidth","getColumnWidthCalculator","totalColSpan","topPadding","bottomPadding","getVirtualPadding","jsxs","Fragment","jsx","cn","headerGroup","header","headerIndex","isCheckboxColumn","DATATABLE_TEXT","isFirstDataColumn","getColumnSize","flexRender","EllipsisTooltip","SortArrow","SORT_DIRECTION","NO_ROWS_MESSAGES","virtualRow","row","cell","idx","columnMeta","skipEllipsisTooltip","renderedCell","cellContent","e","RowActions","DetailsPanel","PaginationControls"],"mappings":"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"}

package/dist/nextGenComponents/components/DataTable/DataTable.utils.d.ts

@@ -0,0 +1,11 @@
+import type { Column } from '@tanstack/react-table';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+export declare const getColumnWidthCalculator: <TData>(columns: Column<TData, unknown>[]) => (size: number) => string;
+export declare const getColumnSize: (isCheckbox: boolean, isFirstData: boolean, size: number, getColumnWidth: (size: number) => string) => {
+    width: string;
+} | undefined;
+export declare const getVirtualPadding: (virtualRows: VirtualItem[], rowVirtualizer: Virtualizer<HTMLDivElement, Element>) => {
+    top: number;
+    bottom: number;
+};
+//# sourceMappingURL=DataTable.utils.d.ts.map

package/dist/nextGenComponents/components/DataTable/DataTable.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/nextGenComponents/components/DataTable/DataTable.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAIvE,eAAO,MAAM,wBAAwB,GAAI,KAAK,EAAE,SAAS,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,MAGvE,MAAM,MAAM,WACrB,CAAA;AAED,eAAO,MAAM,aAAa,GACxB,YAAY,OAAO,EACnB,aAAa,OAAO,EACpB,MAAM,MAAM,EACZ,gBAAgB,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM;;aAKzC,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EAAE,EAC1B,gBAAgB,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC;;;CAMrD,CAAA"}

package/dist/nextGenComponents/components/DataTable/DataTable.utils.mjs

@@ -0,0 +1,17 @@
+import { DATATABLE_TEXT as i } from "../../constants/index.mjs";
+const a = (e) => {
+  const n = e.filter((t) => t.id !== i.CHECKBOX_COLUMN_ID).reduce((t, r) => t + r.getSize(), 0);
+  return (t) => `${t / n * 100}%`;
+}, c = (e, o, n, t) => {
+  if (e) return { width: "48px" };
+  if (!o) return { width: t(n) };
+}, l = (e, o) => {
+  const n = e.length > 0 ? e[0].start : 0, t = e.length > 0 ? o.getTotalSize() - e.at(-1).end : 0;
+  return { top: n, bottom: t };
+};
+export {
+  c as getColumnSize,
+  a as getColumnWidthCalculator,
+  l as getVirtualPadding
+};
+//# sourceMappingURL=DataTable.utils.mjs.map

package/dist/nextGenComponents/components/DataTable/DataTable.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.utils.mjs","sources":["../../../../src/lib/nextGenComponents/components/DataTable/DataTable.utils.ts"],"sourcesContent":["import type { Column } from '@tanstack/react-table'\nimport type { VirtualItem, Virtualizer } from '@tanstack/react-virtual'\n\nimport { DATATABLE_TEXT } from '@/constants'\n\nexport const getColumnWidthCalculator = <TData>(columns: Column<TData, unknown>[]) => {\n  const dataColumns = columns.filter(col => col.id !== DATATABLE_TEXT.CHECKBOX_COLUMN_ID)\n  const totalSize = dataColumns.reduce((sum, col) => sum + col.getSize(), 0)\n  return (size: number) => `${(size / totalSize) * 100}%`\n}\n\nexport const getColumnSize = (\n  isCheckbox: boolean,\n  isFirstData: boolean,\n  size: number,\n  getColumnWidth: (size: number) => string\n) => {\n  if (isCheckbox) return { width: '48px' }\n  if (!isFirstData) return { width: getColumnWidth(size) }\n  return undefined\n}\n\nexport const getVirtualPadding = (\n  virtualRows: VirtualItem[],\n  rowVirtualizer: Virtualizer<HTMLDivElement, Element>\n) => {\n  const top = virtualRows.length > 0 ? virtualRows[0].start : 0\n  const bottom =\n    virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - virtualRows.at(-1)!.end : 0\n  return { top, bottom }\n}\n"],"names":["getColumnWidthCalculator","columns","totalSize","col","DATATABLE_TEXT","sum","size","getColumnSize","isCheckbox","isFirstData","getColumnWidth","getVirtualPadding","virtualRows","rowVirtualizer","top","bottom"],"mappings":";AAKO,MAAMA,IAA2B,CAAQC,MAAsC;AAEpF,QAAMC,IADcD,EAAQ,OAAO,OAAOE,EAAI,OAAOC,EAAe,kBAAkB,EACxD,OAAO,CAACC,GAAKF,MAAQE,IAAMF,EAAI,QAAA,GAAW,CAAC;AACzE,SAAO,CAACG,MAAiB,GAAIA,IAAOJ,IAAa,GAAG;AACtD,GAEaK,IAAgB,CAC3BC,GACAC,GACAH,GACAI,MACG;AACH,MAAIF,EAAY,QAAO,EAAE,OAAO,OAAA;AAChC,MAAI,CAACC,EAAa,QAAO,EAAE,OAAOC,EAAeJ,CAAI,EAAA;AAEvD,GAEaK,IAAoB,CAC/BC,GACAC,MACG;AACH,QAAMC,IAAMF,EAAY,SAAS,IAAIA,EAAY,CAAC,EAAE,QAAQ,GACtDG,IACJH,EAAY,SAAS,IAAIC,EAAe,iBAAiBD,EAAY,GAAG,EAAE,EAAG,MAAM;AACrF,SAAO,EAAE,KAAAE,GAAK,QAAAC,EAAA;AAChB;"}

package/dist/nextGenComponents/components/DataTable/checkboxColumn.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnDef } from '@tanstack/react-table';
+declare const checkboxColumn: ColumnDef<object, unknown>;
+export default checkboxColumn;
+//# sourceMappingURL=checkboxColumn.d.ts.map

package/dist/nextGenComponents/components/DataTable/checkboxColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxColumn.d.ts","sourceRoot":"","sources":["../../../../src/lib/nextGenComponents/components/DataTable/checkboxColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAKtD,QAAA,MAAM,cAAc,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,CAsB9C,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/nextGenComponents/components/DataTable/checkboxColumn.mjs

@@ -0,0 +1,30 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Checkbox as c } from "../ui/checkbox.mjs";
+import { DATATABLE_TEXT as t } from "../../constants/index.mjs";
+const i = {
+  id: t.CHECKBOX_COLUMN_ID,
+  header: ({ table: e }) => /* @__PURE__ */ l(
+    c,
+    {
+      checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected() && "indeterminate",
+      onCheckedChange: (a) => e.toggleAllPageRowsSelected(!!a),
+      "aria-label": t.SELECT_ALL,
+      "data-testid": "data-table-select-all-checkbox"
+    }
+  ),
+  cell: ({ row: e }) => /* @__PURE__ */ l(
+    c,
+    {
+      checked: e.getIsSelected(),
+      onCheckedChange: (a) => e.toggleSelected(!!a),
+      "aria-label": t.SELECT_ROW,
+      "data-testid": `data-table-row-checkbox-${e.id}`
+    }
+  ),
+  enableSorting: !1,
+  enableHiding: !1
+};
+export {
+  i as default
+};
+//# sourceMappingURL=checkboxColumn.mjs.map

package/dist/nextGenComponents/components/DataTable/checkboxColumn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxColumn.mjs","sources":["../../../../src/lib/nextGenComponents/components/DataTable/checkboxColumn.tsx"],"sourcesContent":["import type { ColumnDef } from '@tanstack/react-table'\n\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { DATATABLE_TEXT } from '@/constants'\n\nconst checkboxColumn: ColumnDef<object, unknown> = {\n  id: DATATABLE_TEXT.CHECKBOX_COLUMN_ID,\n  header: ({ table }) => (\n    <Checkbox\n      checked={\n        table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')\n      }\n      onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}\n      aria-label={DATATABLE_TEXT.SELECT_ALL}\n      data-testid=\"data-table-select-all-checkbox\"\n    />\n  ),\n  cell: ({ row }) => (\n    <Checkbox\n      checked={row.getIsSelected()}\n      onCheckedChange={value => row.toggleSelected(!!value)}\n      aria-label={DATATABLE_TEXT.SELECT_ROW}\n      data-testid={`data-table-row-checkbox-${row.id}`}\n    />\n  ),\n  enableSorting: false,\n  enableHiding: false\n}\n\nexport default checkboxColumn\n"],"names":["checkboxColumn","DATATABLE_TEXT","table","jsx","Checkbox","value","row"],"mappings":";;;AAKA,MAAMA,IAA6C;AAAA,EACjD,IAAIC,EAAe;AAAA,EACnB,QAAQ,CAAC,EAAE,OAAAC,EAAA,MACT,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SACEF,EAAM,yBAAA,KAA+BA,EAAM,+BAA+B;AAAA,MAE5E,iBAAiB,CAAAG,MAASH,EAAM,0BAA0B,CAAC,CAACG,CAAK;AAAA,MACjE,cAAYJ,EAAe;AAAA,MAC3B,eAAY;AAAA,IAAA;AAAA,EAAA;AAAA,EAGhB,MAAM,CAAC,EAAE,KAAAK,EAAA,MACP,gBAAAH;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASE,EAAI,cAAA;AAAA,MACb,iBAAiB,CAAAD,MAASC,EAAI,eAAe,CAAC,CAACD,CAAK;AAAA,MACpD,cAAYJ,EAAe;AAAA,MAC3B,eAAa,2BAA2BK,EAAI,EAAE;AAAA,IAAA;AAAA,EAAA;AAAA,EAGlD,eAAe;AAAA,EACf,cAAc;AAChB;"}

package/dist/nextGenComponents/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DataTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/nextGenComponents/components/DataTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/nextGenComponents/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/nextGenComponents/components/DataTable/index.mjs

@@ -0,0 +1,5 @@
+import { default as o } from "./DataTable.mjs";
+export {
+  o as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/nextGenComponents/components/DataTable/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/nextGenComponents/components/DetailsPanel/DetailsPanel.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, ReactNode } from 'react';
+type DetailsPanelProps<TData extends object> = {
+    row: TData;
+    content: ComponentType<TData>;
+    titleAccessorKey?: keyof TData;
+    titleAccessorFn?: (row: TData) => string | ReactNode;
+    onClose: () => void;
+};
+declare const DetailsPanel: <TData extends object>({ row, content: Content, titleAccessorKey, titleAccessorFn, onClose }: DetailsPanelProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default DetailsPanel;
+//# sourceMappingURL=DetailsPanel.d.ts.map

package/dist/nextGenComponents/components/DetailsPanel/DetailsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsPanel.d.ts","sourceRoot":"","sources":["../../../../src/lib/nextGenComponents/components/DetailsPanel/DetailsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAW,MAAM,OAAO,CAAA;AAOzD,KAAK,iBAAiB,CAAC,KAAK,SAAS,MAAM,IAAI;IAC7C,GAAG,EAAE,KAAK,CAAA;IACV,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAA;IAC9B,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAA;IACpD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,YAAY,GAAI,KAAK,SAAS,MAAM,EAAE,uEAMzC,iBAAiB,CAAC,KAAK,CAAC,4CA8C1B,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/nextGenComponents/components/DetailsPanel/DetailsPanel.mjs

@@ -0,0 +1,53 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import d from "../../../images/close.svg.mjs";
+import p from "../EllipsisTooltip/EllipsisTooltip.mjs";
+import { Button as m } from "../ui/button.mjs";
+import { DETAILS_FALLBACK_TITLE as f } from "../../constants/index.mjs";
+const N = ({
+  row: t,
+  content: r,
+  titleAccessorKey: a,
+  titleAccessorFn: l,
+  onClose: n
+}) => {
+  const i = s(() => l ? l(t) : a && t[a] ? String(t[a]) : f, [t, l, a]);
+  return /* @__PURE__ */ o(
+    "aside",
+    {
+      "data-testid": "details-panel",
+      className: "absolute rounded-r-lg flex flex-col inset-y-0 right-0 w-[calc(100%-250px)] border border-[#e6e6e6] bg-white z-30",
+      style: { boxShadow: "-4px 0 6px -4px rgba(0,0,0,0.15)" },
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: "flex items-center justify-between gap-3 px-6 pr-10 py-4",
+            "data-testid": "details-panel-title",
+            children: [
+              typeof i == "string" ? /* @__PURE__ */ e(p, { className: "min-w-0 text-[24px] font-extrabold leading-tight text-[#3a3650]", children: i }) : i,
+              /* @__PURE__ */ e(
+                m,
+                {
+                  variant: "rounded",
+                  size: "icon",
+                  onClick: n,
+                  className: "absolute top-3.5 right-3",
+                  "aria-label": "Close",
+                  tooltip: "Close",
+                  "data-testid": "details-panel-close-button",
+                  children: /* @__PURE__ */ e(d, { className: "w-6 h-6" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "overflow-auto h-full px-6 py-4", "data-testid": "details-panel-content", children: /* @__PURE__ */ e(r, { ...t }) })
+      ]
+    }
+  );
+};
+export {
+  N as default
+};
+//# sourceMappingURL=DetailsPanel.mjs.map