kiban-design-system 3.8.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/dist/components/data-table/components/DataTableFooter.d.ts +15 -0
  2. package/dist/components/data-table/components/DataTableFooter.d.ts.map +1 -0
  3. package/dist/components/data-table/components/DataTableFooter.js +25 -0
  4. package/dist/components/data-table/components/DataTableHeader.d.ts +8 -0
  5. package/dist/components/data-table/components/DataTableHeader.d.ts.map +1 -0
  6. package/dist/components/data-table/components/DataTableHeader.js +27 -0
  7. package/dist/components/data-table/components/DataTableHeaderCell.d.ts +11 -0
  8. package/dist/components/data-table/components/DataTableHeaderCell.d.ts.map +1 -0
  9. package/dist/components/data-table/components/DataTableHeaderCell.js +81 -0
  10. package/dist/components/data-table/components/DataTablePagination.d.ts +9 -0
  11. package/dist/components/data-table/components/DataTablePagination.d.ts.map +1 -0
  12. package/dist/components/data-table/components/DataTablePagination.js +36 -0
  13. package/dist/components/data-table/components/DataTableTotalsRow.d.ts +10 -0
  14. package/dist/components/data-table/components/DataTableTotalsRow.d.ts.map +1 -0
  15. package/dist/components/data-table/components/DataTableTotalsRow.js +95 -0
  16. package/dist/components/data-table/data-table.d.ts +26 -0
  17. package/dist/components/data-table/data-table.d.ts.map +1 -0
  18. package/dist/components/data-table/data-table.js +134 -0
  19. package/dist/components/data-table/hooks/useDataTableColumns.d.ts +5 -0
  20. package/dist/components/data-table/hooks/useDataTableColumns.d.ts.map +1 -0
  21. package/dist/components/data-table/hooks/useDataTableColumns.js +39 -0
  22. package/dist/components/data-table/hooks/useDataTableConfig.d.ts +18 -0
  23. package/dist/components/data-table/hooks/useDataTableConfig.d.ts.map +1 -0
  24. package/dist/components/data-table/hooks/useDataTableConfig.js +54 -0
  25. package/dist/components/data-table/hooks/useStickyColumns.d.ts +5 -0
  26. package/dist/components/data-table/hooks/useStickyColumns.d.ts.map +1 -0
  27. package/dist/components/data-table/hooks/useStickyColumns.js +20 -0
  28. package/dist/components/data-table/utils/iconMap.d.ts +4 -0
  29. package/dist/components/data-table/utils/iconMap.d.ts.map +1 -0
  30. package/dist/components/data-table/utils/iconMap.js +11 -0
  31. package/dist/components/data-table/utils/stickyColumns.d.ts +17 -0
  32. package/dist/components/data-table/utils/stickyColumns.d.ts.map +1 -0
  33. package/dist/components/data-table/utils/stickyColumns.js +10 -0
  34. package/dist/components/data-table.d.ts +2 -0
  35. package/dist/components/data-table.d.ts.map +1 -0
  36. package/dist/components/header.d.ts +26 -0
  37. package/dist/components/header.d.ts.map +1 -0
  38. package/dist/components/header.js +81 -0
  39. package/dist/components/ui/avatar.d.ts +12 -0
  40. package/dist/components/ui/avatar.d.ts.map +1 -0
  41. package/dist/components/ui/avatar.js +106 -0
  42. package/dist/components/ui/badge.d.ts +10 -0
  43. package/dist/components/ui/badge.d.ts.map +1 -0
  44. package/dist/components/ui/badge.js +40 -0
  45. package/dist/components/ui/checkbox.d.ts +5 -0
  46. package/dist/components/ui/checkbox.d.ts.map +1 -0
  47. package/dist/components/ui/checkbox.js +33 -0
  48. package/dist/components/ui/dropdown-menu.d.ts +29 -0
  49. package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
  50. package/dist/components/ui/dropdown-menu.js +118 -0
  51. package/dist/components/ui/table.d.ts +11 -0
  52. package/dist/components/ui/table.d.ts.map +1 -0
  53. package/dist/components/ui/table.js +115 -0
  54. package/dist/components/ui/tabs.d.ts +8 -0
  55. package/dist/components/ui/tabs.d.ts.map +1 -0
  56. package/dist/components/ui/tooltip.d.ts +8 -0
  57. package/dist/components/ui/tooltip.d.ts.map +1 -0
  58. package/dist/components/ui/tooltip.js +56 -0
  59. package/dist/index.d.ts +7 -0
  60. package/dist/index.d.ts.map +1 -1
  61. package/dist/index.js +97 -67
  62. package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +532 -0
  63. package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +402 -0
  64. package/dist/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +208 -0
  65. package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +136 -0
  66. package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +130 -0
  67. package/dist/node_modules/@radix-ui/primitive/dist/index.js +9 -0
  68. package/dist/node_modules/@radix-ui/react-arrow/dist/index.js +24 -0
  69. package/dist/node_modules/@radix-ui/react-collection/dist/index.js +50 -0
  70. package/dist/node_modules/@radix-ui/react-compose-refs/dist/index.js +29 -0
  71. package/dist/node_modules/@radix-ui/react-context/dist/index.js +53 -0
  72. package/dist/node_modules/@radix-ui/react-direction/dist/index.js +10 -0
  73. package/dist/node_modules/@radix-ui/react-dismissable-layer/dist/index.js +127 -0
  74. package/dist/node_modules/@radix-ui/react-dropdown-menu/dist/index.js +213 -0
  75. package/dist/node_modules/@radix-ui/react-focus-guards/dist/index.js +17 -0
  76. package/dist/node_modules/@radix-ui/react-focus-scope/dist/index.js +136 -0
  77. package/dist/node_modules/@radix-ui/react-id/dist/index.js +13 -0
  78. package/dist/node_modules/@radix-ui/react-menu/dist/index.js +608 -0
  79. package/dist/node_modules/@radix-ui/react-popper/dist/index.js +219 -0
  80. package/dist/node_modules/@radix-ui/react-portal/dist/index.js +15 -0
  81. package/dist/node_modules/@radix-ui/react-presence/dist/index.js +70 -0
  82. package/dist/node_modules/@radix-ui/react-primitive/dist/index.js +36 -0
  83. package/dist/node_modules/@radix-ui/react-roving-focus/dist/index.js +183 -0
  84. package/dist/node_modules/@radix-ui/react-tooltip/dist/index.js +338 -0
  85. package/dist/node_modules/@radix-ui/react-use-callback-ref/dist/index.js +10 -0
  86. package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.js +52 -0
  87. package/dist/node_modules/@radix-ui/react-use-escape-keydown/dist/index.js +14 -0
  88. package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.js +6 -0
  89. package/dist/node_modules/@radix-ui/react-use-size/dist/index.js +27 -0
  90. package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.js +32 -0
  91. package/dist/node_modules/aria-hidden/dist/es2015/index.js +52 -0
  92. package/dist/node_modules/get-nonce/dist/es2015/index.js +7 -0
  93. package/dist/node_modules/react-remove-scroll/dist/es2015/Combination.js +11 -0
  94. package/dist/node_modules/react-remove-scroll/dist/es2015/SideEffect.js +115 -0
  95. package/dist/node_modules/react-remove-scroll/dist/es2015/UI.js +31 -0
  96. package/dist/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js +16 -0
  97. package/dist/node_modules/react-remove-scroll/dist/es2015/handleScroll.js +68 -0
  98. package/dist/node_modules/react-remove-scroll/dist/es2015/medium.js +5 -0
  99. package/dist/node_modules/react-remove-scroll/dist/es2015/sidecar.js +7 -0
  100. package/dist/node_modules/react-remove-scroll-bar/dist/es2015/component.js +71 -0
  101. package/dist/node_modules/react-remove-scroll-bar/dist/es2015/constants.js +7 -0
  102. package/dist/node_modules/react-remove-scroll-bar/dist/es2015/utils.js +25 -0
  103. package/dist/node_modules/react-style-singleton/dist/es2015/component.js +11 -0
  104. package/dist/node_modules/react-style-singleton/dist/es2015/hook.js +15 -0
  105. package/dist/node_modules/react-style-singleton/dist/es2015/singleton.js +30 -0
  106. package/dist/node_modules/tslib/tslib.es6.js +27 -0
  107. package/dist/node_modules/use-callback-ref/dist/es2015/assignRef.js +6 -0
  108. package/dist/node_modules/use-callback-ref/dist/es2015/useMergeRef.js +26 -0
  109. package/dist/node_modules/use-callback-ref/dist/es2015/useRef.js +25 -0
  110. package/dist/node_modules/use-sidecar/dist/es2015/exports.js +18 -0
  111. package/dist/node_modules/use-sidecar/dist/es2015/medium.js +67 -0
  112. package/dist/style.css +1 -1
  113. package/package.json +8 -1
@@ -0,0 +1,15 @@
1
+ import type { ReactNode } from "react";
2
+ import type { PaginationState } from "@tanstack/react-table";
3
+ import type { Table } from "@tanstack/react-table";
4
+ interface DataTableFooterProps<TData> {
5
+ table: Table<TData>;
6
+ pagination?: PaginationState & {
7
+ hasNextPage?: boolean;
8
+ };
9
+ footer?: ReactNode;
10
+ canGoPrevious: boolean;
11
+ canGoNext: boolean;
12
+ }
13
+ export declare function DataTableFooter<TData>({ table, pagination, footer, canGoPrevious, canGoNext, }: DataTableFooterProps<TData>): import("react/jsx-runtime").JSX.Element | null;
14
+ export {};
15
+ //# sourceMappingURL=DataTableFooter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTableFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/components/DataTableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,oBAAoB,CAAC,KAAK;IAClC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,eAAe,GAAG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,KAAK,EACL,UAAU,EACV,MAAM,EACN,aAAa,EACb,SAAS,GACV,EAAE,oBAAoB,CAAC,KAAK,CAAC,kDAmB7B"}
@@ -0,0 +1,25 @@
1
+ import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
+ import { DataTablePagination as o } from "./DataTablePagination.js";
3
+ function m({
4
+ table: r,
5
+ pagination: t,
6
+ footer: n,
7
+ canGoPrevious: l,
8
+ canGoNext: s
9
+ }) {
10
+ const a = n ?? /* @__PURE__ */ e("div", {});
11
+ return !t && !n ? null : /* @__PURE__ */ i("div", { className: "flex items-center justify-between py-3 px-6 bg-slate-50", children: [
12
+ a,
13
+ t ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e(
14
+ o,
15
+ {
16
+ table: r,
17
+ canGoPrevious: l,
18
+ canGoNext: s
19
+ }
20
+ ) }) : null
21
+ ] });
22
+ }
23
+ export {
24
+ m as DataTableFooter
25
+ };
@@ -0,0 +1,8 @@
1
+ import type { Table } from "@tanstack/react-table";
2
+ interface DataTableHeaderProps<TData> {
3
+ table: Table<TData>;
4
+ isScrolled: boolean;
5
+ }
6
+ export declare function DataTableHeader<TData>({ table, isScrolled, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
7
+ export {};
8
+ //# sourceMappingURL=DataTableHeader.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTableHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/components/DataTableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAInD,UAAU,oBAAoB,CAAC,KAAK;IAClC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,KAAK,EACL,UAAU,GACX,EAAE,oBAAoB,CAAC,KAAK,CAAC,2CA2B7B"}
@@ -0,0 +1,27 @@
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { TableHeader as m, TableRow as n } from "../../ui/table.js";
3
+ import { DataTableHeaderCell as f } from "./DataTableHeaderCell.js";
4
+ import { getStickyColumns as d, calculateStickyOffset as p } from "../utils/stickyColumns.js";
5
+ function T({
6
+ table: s,
7
+ isScrolled: c
8
+ }) {
9
+ const e = s.getHeaderGroups(), r = e.length > 0 ? d(e[0].headers) : [];
10
+ return /* @__PURE__ */ t(m, { children: e.map((a) => /* @__PURE__ */ t(n, { children: a.headers.map((o, l) => {
11
+ const i = p(r, l);
12
+ return /* @__PURE__ */ t(
13
+ f,
14
+ {
15
+ header: o,
16
+ index: l,
17
+ stickyColumnIndices: r,
18
+ isScrolled: c,
19
+ leftOffset: i
20
+ },
21
+ o.id
22
+ );
23
+ }) }, a.id)) });
24
+ }
25
+ export {
26
+ T as DataTableHeader
27
+ };
@@ -0,0 +1,11 @@
1
+ import { type Header } from "@tanstack/react-table";
2
+ interface DataTableHeaderCellProps<TData> {
3
+ header: Header<TData, unknown>;
4
+ index: number;
5
+ stickyColumnIndices: number[];
6
+ isScrolled: boolean;
7
+ leftOffset: number;
8
+ }
9
+ export declare function DataTableHeaderCell<TData>({ header, index, stickyColumnIndices, isScrolled, leftOffset, }: DataTableHeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
10
+ export {};
11
+ //# sourceMappingURL=DataTableHeaderCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTableHeaderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/components/DataTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAShE,UAAU,wBAAwB,CAAC,KAAK;IACtC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,EACzC,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,UAAU,EACV,UAAU,GACX,EAAE,wBAAwB,CAAC,KAAK,CAAC,2CAwIjC"}
@@ -0,0 +1,81 @@
1
+ import { jsx as n, jsxs as r } from "react/jsx-runtime";
2
+ import { flexRender as y } from "@tanstack/react-table";
3
+ import { TableHead as S } from "../../ui/table.js";
4
+ import { cn as m } from "../../../lib/utils.js";
5
+ import { ChevronUp as I, ChevronDown as N } from "lucide-react";
6
+ import { Tooltip as v, TooltipTrigger as D, TooltipContent as w } from "../../ui/tooltip.js";
7
+ import { iconMap as T } from "../utils/iconMap.js";
8
+ function L({
9
+ header: t,
10
+ index: u,
11
+ stickyColumnIndices: x,
12
+ isScrolled: g,
13
+ leftOffset: d
14
+ }) {
15
+ const i = x.includes(u), a = t.column.columnDef.meta, p = t.column.columnDef.enableSorting, l = p === !0 && t.column.getCanSort(), f = t.column.getIsSorted(), b = () => {
16
+ if (!l) return;
17
+ const e = t.column.getIsSorted();
18
+ e === !1 || e === "desc" ? t.column.toggleSorting(!1) : t.column.toggleSorting(!0);
19
+ }, h = () => {
20
+ if (!p || !l) return null;
21
+ const e = f === "asc", s = f === "desc";
22
+ return /* @__PURE__ */ r("div", { className: "mr-1 flex flex-col items-center justify-center", children: [
23
+ /* @__PURE__ */ n(
24
+ I,
25
+ {
26
+ className: m("w-[14px] h-[14px]", e ? "text-slate-600" : "text-slate-400")
27
+ }
28
+ ),
29
+ /* @__PURE__ */ n(
30
+ N,
31
+ {
32
+ className: m("w-[14px] h-[14px] -mt-0.5", s ? "text-slate-600" : "text-slate-400")
33
+ }
34
+ )
35
+ ] });
36
+ }, C = () => {
37
+ if (!a?.help) return null;
38
+ const { icon: e, tooltip: s } = a.help;
39
+ let o = null;
40
+ if (e)
41
+ if (typeof e == "string") {
42
+ const c = T[e.toLowerCase()];
43
+ c && (o = /* @__PURE__ */ n(c, { className: "w-4 h-4 text-slate-400" }));
44
+ } else typeof e == "object" && e !== null && "type" in e && "props" in e ? o = e : typeof e == "function" ? o = /* @__PURE__ */ n(e, { className: "w-4 h-4 text-slate-400" }) : typeof e == "object" && e !== null && "$$typeof" in e ? o = /* @__PURE__ */ n(e, { className: "w-4 h-4 text-slate-400" }) : o = e;
45
+ return o ? /* @__PURE__ */ r(v, { children: [
46
+ /* @__PURE__ */ n(D, { asChild: !0, children: /* @__PURE__ */ n(
47
+ "button",
48
+ {
49
+ type: "button",
50
+ className: "ml-1 inline-flex items-center text-slate-400 hover:text-slate-600 focus:outline-none",
51
+ "aria-label": `Help: ${s}`,
52
+ children: o
53
+ }
54
+ ) }),
55
+ /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n("p", { children: s }) })
56
+ ] }) : null;
57
+ };
58
+ return /* @__PURE__ */ n(
59
+ S,
60
+ {
61
+ className: m(
62
+ "bg-slate-50 font-semibold px-6 py-1 min-h-8",
63
+ "text-sm leading-5 text-slate-500 tracking-[-0.04em]",
64
+ i && "sticky z-30 bg-slate-50",
65
+ i && g && "border-r",
66
+ l && "cursor-pointer select-none hover:bg-slate-100"
67
+ ),
68
+ style: i ? { left: `${d}px` } : void 0,
69
+ onClick: l ? b : void 0,
70
+ children: t.isPlaceholder ? null : /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
71
+ h(),
72
+ y(t.column.columnDef.header, t.getContext()),
73
+ C()
74
+ ] })
75
+ },
76
+ t.id
77
+ );
78
+ }
79
+ export {
80
+ L as DataTableHeaderCell
81
+ };
@@ -0,0 +1,9 @@
1
+ import type { Table } from "@tanstack/react-table";
2
+ interface DataTablePaginationProps<TData> {
3
+ table: Table<TData>;
4
+ canGoPrevious: boolean;
5
+ canGoNext: boolean;
6
+ }
7
+ export declare function DataTablePagination<TData>({ table, canGoPrevious, canGoNext, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
8
+ export {};
9
+ //# sourceMappingURL=DataTablePagination.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/components/DataTablePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,wBAAwB,CAAC,KAAK;IACtC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,EACzC,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE,wBAAwB,CAAC,KAAK,CAAC,2CAuBjC"}
@@ -0,0 +1,36 @@
1
+ import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
+ import { Button as a } from "../../ui/button.js";
3
+ import { ChevronLeft as o, ChevronRight as n } from "lucide-react";
4
+ function c({
5
+ table: s,
6
+ canGoPrevious: i,
7
+ canGoNext: t
8
+ }) {
9
+ return /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
10
+ /* @__PURE__ */ e(
11
+ a,
12
+ {
13
+ variant: "outline",
14
+ size: "sm",
15
+ onClick: () => s.previousPage(),
16
+ disabled: !i,
17
+ className: "w-8 h-8 bg-slate-200 border-none hover:bg-slate-300 shadow-none disabled:opacity-100 disabled:bg-slate-100 disabled:[&>svg]:text-slate-400",
18
+ children: /* @__PURE__ */ e(o, { className: "size-4" })
19
+ }
20
+ ),
21
+ /* @__PURE__ */ e(
22
+ a,
23
+ {
24
+ variant: "outline",
25
+ size: "sm",
26
+ onClick: () => s.nextPage(),
27
+ disabled: !t,
28
+ className: "w-8 h-8 bg-slate-200 border-none hover:bg-slate-300 shadow-none disabled:opacity-100 disabled:bg-slate-100 disabled:[&>svg]:text-slate-400",
29
+ children: /* @__PURE__ */ e(n, { className: "size-4" })
30
+ }
31
+ )
32
+ ] });
33
+ }
34
+ export {
35
+ c as DataTablePagination
36
+ };
@@ -0,0 +1,10 @@
1
+ import type { Table } from "@tanstack/react-table";
2
+ interface DataTableTotalsRowProps<TData> {
3
+ table: Table<TData>;
4
+ totals: Partial<Record<string, string | number>>;
5
+ isScrolled: boolean;
6
+ totalsLabel?: string;
7
+ }
8
+ export declare function DataTableTotalsRow<TData>({ table, totals, isScrolled, totalsLabel, }: DataTableTotalsRowProps<TData>): import("react/jsx-runtime").JSX.Element | null;
9
+ export {};
10
+ //# sourceMappingURL=DataTableTotalsRow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTableTotalsRow.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/components/DataTableTotalsRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGnD,UAAU,uBAAuB,CAAC,KAAK;IACrC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IACjD,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,EACxC,KAAK,EACL,MAAM,EACN,UAAU,EACV,WAAuB,GACxB,EAAE,uBAAuB,CAAC,KAAK,CAAC,kDAkGhC"}
@@ -0,0 +1,95 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { TableCell as r, TableRow as S } from "../../ui/table.js";
3
+ import { cn as i } from "../../../lib/utils.js";
4
+ import { getStickyColumns as N, calculateStickyOffset as u } from "../utils/stickyColumns.js";
5
+ function C({
6
+ table: x,
7
+ totals: b,
8
+ isScrolled: p,
9
+ totalsLabel: g = "Totales"
10
+ }) {
11
+ const h = x.getHeaderGroups();
12
+ if (!b || h.length === 0) return null;
13
+ const c = h[0].headers, e = N(c), l = [];
14
+ let t = 0;
15
+ if (c.forEach((a, s) => {
16
+ const n = a.column.id, y = b[n], f = e.includes(s), k = u(e, s);
17
+ if (y !== void 0) {
18
+ if (t > 0) {
19
+ const m = s - t, d = e.includes(m), I = u(
20
+ e,
21
+ m
22
+ );
23
+ l.push(
24
+ /* @__PURE__ */ o(
25
+ r,
26
+ {
27
+ colSpan: t,
28
+ className: i(
29
+ "px-6 py-2 font-semibold text-sm leading-5 min-h-9 bg-slate-200 text-slate-900",
30
+ d && "sticky z-20",
31
+ d && p && "border-r border-slate-200"
32
+ ),
33
+ ...d ? { style: { left: `${I}px` } } : {}
34
+ },
35
+ `total-spacer-${m}`
36
+ )
37
+ ), t = 0;
38
+ }
39
+ l.push(
40
+ /* @__PURE__ */ o(
41
+ r,
42
+ {
43
+ className: i(
44
+ "px-6 py-2 font-semibold text-sm leading-5 min-h-9 bg-slate-200 text-slate-900",
45
+ f && "sticky z-20",
46
+ f && p && "border-r border-slate-200"
47
+ ),
48
+ ...f ? { style: { left: `${k}px` } } : {},
49
+ children: y
50
+ },
51
+ `total-${n}`
52
+ )
53
+ );
54
+ } else
55
+ t += 1;
56
+ }), t > 0) {
57
+ const a = c.length - t, s = e.includes(a), n = u(e, a);
58
+ l.push(
59
+ /* @__PURE__ */ o(
60
+ r,
61
+ {
62
+ colSpan: t,
63
+ className: i(
64
+ "px-6 py-2 font-semibold text-sm leading-5 min-h-9 bg-slate-200 text-slate-900",
65
+ s && "sticky z-20",
66
+ s && p && "border-r border-slate-200"
67
+ ),
68
+ ...s ? { style: { left: `${n}px` } } : {}
69
+ },
70
+ "total-spacer-end"
71
+ )
72
+ );
73
+ }
74
+ if (l.length === 0) {
75
+ const a = e.includes(0);
76
+ l.push(
77
+ /* @__PURE__ */ o(
78
+ r,
79
+ {
80
+ colSpan: c.length,
81
+ className: i(
82
+ "px-6 py-2 font-semibold text-sm leading-5 min-h-9 bg-slate-200 text-slate-900",
83
+ a && "sticky z-20"
84
+ ),
85
+ children: g
86
+ },
87
+ "total-label"
88
+ )
89
+ );
90
+ }
91
+ return /* @__PURE__ */ o(S, { className: "bg-slate-200", children: l });
92
+ }
93
+ export {
94
+ C as DataTableTotalsRow
95
+ };
@@ -0,0 +1,26 @@
1
+ import { type ColumnDef, type OnChangeFn, type PaginationState, type SortingState } from "@tanstack/react-table";
2
+ import { type ReactNode } from "react";
3
+ interface DataTableProps<TData, TValue> {
4
+ columns: ColumnDef<TData, TValue>[];
5
+ data: TData[];
6
+ pageCount?: number;
7
+ pagination?: PaginationState & {
8
+ hasNextPage?: boolean;
9
+ };
10
+ onPaginationChange?: OnChangeFn<PaginationState>;
11
+ enableRowSelection?: boolean;
12
+ onSelectionChange?: (selectedRows: TData[]) => void;
13
+ totals?: Partial<Record<string, string | number>>;
14
+ totalsPosition?: "top" | "bottom";
15
+ totalsLabel?: string;
16
+ footer?: ReactNode;
17
+ sorting?: SortingState;
18
+ onSortingChange?: OnChangeFn<SortingState>;
19
+ className?: string;
20
+ emptyMessage?: string;
21
+ }
22
+ declare function DataTable<TData extends {
23
+ id: string;
24
+ }, TValue>({ columns, data, pagination, pageCount, onPaginationChange, enableRowSelection, onSelectionChange, totals, totalsPosition, totalsLabel, footer, sorting, onSortingChange, className, emptyMessage, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
25
+ export { DataTable };
26
+ //# sourceMappingURL=data-table.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAGd,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAC;AAS/B,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5D,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM;IACpC,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,GAAG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzD,kBAAkB,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,SAAS,CAAC,KAAK,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,MAAM,EAAE,EACvD,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,kBAA0B,EAC1B,iBAAiB,EACjB,MAAM,EACN,cAAyB,EACzB,WAAW,EACX,MAAM,EACN,OAAO,EACP,eAAe,EACf,SAAS,EACT,YAA4B,GAC7B,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,2CAuI/B;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,134 @@
1
+ import { jsxs as d, jsx as o } from "react/jsx-runtime";
2
+ import { useReactTable as E, flexRender as V } from "@tanstack/react-table";
3
+ import { Table as W, TableBody as $, TableRow as T, TableCell as C } from "../ui/table.js";
4
+ import { cn as S } from "../../lib/utils.js";
5
+ import { useState as q, useEffect as A } from "react";
6
+ import { useDataTableColumns as J } from "./hooks/useDataTableColumns.js";
7
+ import { useDataTableConfig as K } from "./hooks/useDataTableConfig.js";
8
+ import { useStickyColumns as L } from "./hooks/useStickyColumns.js";
9
+ import { DataTableHeader as Q } from "./components/DataTableHeader.js";
10
+ import { DataTableTotalsRow as k } from "./components/DataTableTotalsRow.js";
11
+ import { DataTableFooter as U } from "./components/DataTableFooter.js";
12
+ import { getStickyColumns as X, calculateStickyOffset as Y } from "./utils/stickyColumns.js";
13
+ function ne({
14
+ columns: y,
15
+ data: n,
16
+ pagination: t,
17
+ pageCount: w,
18
+ onPaginationChange: N,
19
+ enableRowSelection: m = !1,
20
+ onSelectionChange: i,
21
+ totals: l,
22
+ totalsPosition: f = "bottom",
23
+ totalsLabel: u,
24
+ footer: R,
25
+ sorting: v,
26
+ onSortingChange: D,
27
+ className: P,
28
+ emptyMessage: G = "No results."
29
+ }) {
30
+ const [b, F] = q({}), g = J(
31
+ y,
32
+ m
33
+ ), I = K({
34
+ data: n,
35
+ columns: g,
36
+ enableRowSelection: m,
37
+ rowSelection: b,
38
+ setRowSelection: F,
39
+ pageCount: w,
40
+ pagination: t,
41
+ onPaginationChange: N,
42
+ sorting: v,
43
+ onSortingChange: D
44
+ }), e = E(I), { tableRef: M, isScrolled: c } = L();
45
+ A(() => {
46
+ if (m && i) {
47
+ const r = e.getFilteredSelectedRowModel().rows.map((s) => s.original);
48
+ i(r);
49
+ }
50
+ }, [b]);
51
+ const j = t ? n.length < t?.pageSize || !t?.hasNextPage : void 0, z = t ? t?.pageIndex === 1 : void 0, H = t ? !j : e.getCanNextPage(), O = t ? !z : e.getCanPreviousPage(), h = e.getHeaderGroups(), p = h.length > 0 ? X(h[0].headers) : [];
52
+ return /* @__PURE__ */ d(
53
+ "div",
54
+ {
55
+ className: S(
56
+ "flex flex-col border border-solid border-slate-200 rounded-xl overflow-hidden",
57
+ P
58
+ ),
59
+ children: [
60
+ /* @__PURE__ */ d(W, { ref: M, children: [
61
+ /* @__PURE__ */ o(Q, { table: e, isScrolled: c }),
62
+ /* @__PURE__ */ d($, { children: [
63
+ f === "top" && l && /* @__PURE__ */ o(
64
+ k,
65
+ {
66
+ table: e,
67
+ totals: l,
68
+ isScrolled: c,
69
+ totalsLabel: u
70
+ }
71
+ ),
72
+ e.getRowModel().rows?.length ? e.getRowModel().rows.map((r) => /* @__PURE__ */ o(
73
+ T,
74
+ {
75
+ "data-state": r.getIsSelected() && "selected",
76
+ className: "[&:hover>td]:bg-slate-50",
77
+ children: r.getVisibleCells().map((s, x) => {
78
+ const a = p.includes(x), B = a ? Y(p, x) : 0;
79
+ return /* @__PURE__ */ o(
80
+ C,
81
+ {
82
+ className: S(
83
+ "px-6 py-2 bg-background ease-in transition-all duration-200",
84
+ "text-sm leading-5 font-normal min-h-9 text-slate-900 tracking-[-0.04em]",
85
+ a && "sticky z-20 bg-background",
86
+ a && c && "border-r border-slate-200"
87
+ ),
88
+ ...a ? { style: { left: `${B}px` } } : {},
89
+ children: V(
90
+ s.column.columnDef.cell,
91
+ s.getContext()
92
+ )
93
+ },
94
+ s.id
95
+ );
96
+ })
97
+ },
98
+ r.id
99
+ )) : /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o(
100
+ C,
101
+ {
102
+ colSpan: g.length,
103
+ className: "h-24 text-center",
104
+ children: G
105
+ }
106
+ ) }),
107
+ f === "bottom" && l && /* @__PURE__ */ o(
108
+ k,
109
+ {
110
+ table: e,
111
+ totals: l,
112
+ isScrolled: c,
113
+ totalsLabel: u
114
+ }
115
+ )
116
+ ] })
117
+ ] }),
118
+ /* @__PURE__ */ o(
119
+ U,
120
+ {
121
+ table: e,
122
+ pagination: t,
123
+ footer: R,
124
+ canGoPrevious: O,
125
+ canGoNext: H
126
+ }
127
+ )
128
+ ]
129
+ }
130
+ );
131
+ }
132
+ export {
133
+ ne as DataTable
134
+ };
@@ -0,0 +1,5 @@
1
+ import type { ColumnDef } from "@tanstack/react-table";
2
+ export declare function useDataTableColumns<TData extends {
3
+ id: string;
4
+ }, TValue>(columns: ColumnDef<TData, TValue>[], enableRowSelection: boolean): ColumnDef<TData, TValue>[];
5
+ //# sourceMappingURL=useDataTableColumns.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useDataTableColumns.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/hooks/useDataTableColumns.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAA+B,MAAM,uBAAuB,CAAC;AAGpF,wBAAgB,mBAAmB,CAAC,KAAK,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,MAAM,EACtE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EACnC,kBAAkB,EAAE,OAAO,8BAyD5B"}
@@ -0,0 +1,39 @@
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { useMemo as o } from "react";
3
+ import { Checkbox as a } from "../../ui/checkbox.js";
4
+ function f(s, r) {
5
+ const l = o(() => s.map((e) => e.id && !("accessorKey" in e) && !("accessorFn" in e) ? {
6
+ ...e,
7
+ accessorKey: e.id
8
+ } : e), [s]);
9
+ return o(() => r ? [{
10
+ id: "select",
11
+ header: ({ table: t }) => {
12
+ const n = t.getIsAllPageRowsSelected(), i = t.getIsSomePageRowsSelected();
13
+ return /* @__PURE__ */ c(
14
+ a,
15
+ {
16
+ checked: n ? !0 : i ? "indeterminate" : !1,
17
+ onCheckedChange: (d) => t.toggleAllPageRowsSelected(!!d),
18
+ "aria-label": "Select all"
19
+ }
20
+ );
21
+ },
22
+ cell: ({ row: t }) => /* @__PURE__ */ c(
23
+ a,
24
+ {
25
+ checked: t.getIsSelected(),
26
+ onCheckedChange: (n) => t.toggleSelected(!!n),
27
+ "aria-label": "Select row"
28
+ }
29
+ ),
30
+ enableSorting: !1,
31
+ enableHiding: !1,
32
+ meta: {
33
+ sticky: "left"
34
+ }
35
+ }, ...l] : l, [l, r]);
36
+ }
37
+ export {
38
+ f as useDataTableColumns
39
+ };
@@ -0,0 +1,18 @@
1
+ import type { TableOptions, OnChangeFn, PaginationState, SortingState, RowSelectionState } from "@tanstack/react-table";
2
+ export declare function useDataTableConfig<TData extends {
3
+ id: string;
4
+ }>({ data, columns, enableRowSelection, rowSelection, setRowSelection, pageCount, pagination, onPaginationChange, sorting, onSortingChange, }: {
5
+ data: TData[];
6
+ columns: any[];
7
+ enableRowSelection: boolean;
8
+ rowSelection: RowSelectionState;
9
+ setRowSelection: (updater: RowSelectionState | ((prev: RowSelectionState) => RowSelectionState)) => void;
10
+ pageCount?: number;
11
+ pagination?: PaginationState & {
12
+ hasNextPage?: boolean;
13
+ };
14
+ onPaginationChange?: OnChangeFn<PaginationState>;
15
+ sorting?: SortingState;
16
+ onSortingChange?: OnChangeFn<SortingState>;
17
+ }): TableOptions<TData>;
18
+ //# sourceMappingURL=useDataTableConfig.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useDataTableConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/hooks/useDataTableConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,eAAe,EACf,YAAY,EACZ,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAO/B,wBAAgB,kBAAkB,CAAC,KAAK,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EAC/D,IAAI,EACJ,OAAO,EACP,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,OAAO,EACP,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,EAAE,iBAAiB,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,iBAAiB,GAAG,CAAC,CAAC,IAAI,EAAE,iBAAiB,KAAK,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,GAAG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzD,kBAAkB,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CAC5C,GAAG,YAAY,CAAC,KAAK,CAAC,CAqEtB"}
@@ -0,0 +1,54 @@
1
+ import { useMemo as n } from "react";
2
+ import { getCoreRowModel as M, getPaginationRowModel as R, getSortedRowModel as m } from "@tanstack/react-table";
3
+ function S({
4
+ data: d,
5
+ columns: g,
6
+ enableRowSelection: l,
7
+ rowSelection: f,
8
+ setRowSelection: s,
9
+ pageCount: o,
10
+ pagination: t,
11
+ onPaginationChange: a,
12
+ sorting: r,
13
+ onSortingChange: i
14
+ }) {
15
+ return n(() => {
16
+ const e = {
17
+ data: d,
18
+ columns: g,
19
+ getCoreRowModel: M(),
20
+ getRowId: (u) => u.id,
21
+ enableSorting: !0
22
+ // Habilitar sorting a nivel de tabla
23
+ };
24
+ return l && (e.enableRowSelection = !0, e.onRowSelectionChange = s, e.state = {
25
+ rowSelection: f
26
+ }), o && (e.pageCount = o), t && (e.manualPagination = !0, e.state = {
27
+ ...e.state,
28
+ pagination: {
29
+ pageIndex: t.pageIndex,
30
+ pageSize: t.pageSize
31
+ }
32
+ }, e.getPaginationRowModel = R()), a && (e.onPaginationChange = a), i ? (e.manualSorting = !0, e.onSortingChange = i, e.state = {
33
+ ...e.state,
34
+ sorting: r || []
35
+ }) : (e.getSortedRowModel = m(), e.state = {
36
+ ...e.state,
37
+ sorting: r || []
38
+ }), e;
39
+ }, [
40
+ d,
41
+ g,
42
+ l,
43
+ f,
44
+ s,
45
+ o,
46
+ t,
47
+ a,
48
+ r,
49
+ i
50
+ ]);
51
+ }
52
+ export {
53
+ S as useDataTableConfig
54
+ };
@@ -0,0 +1,5 @@
1
+ export declare function useStickyColumns(): {
2
+ tableRef: import("react").RefObject<HTMLTableElement | null>;
3
+ isScrolled: boolean;
4
+ };
5
+ //# sourceMappingURL=useStickyColumns.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/hooks/useStickyColumns.ts"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB;;;EAqB/B"}