@cryptlex/web-components 3.8.2 → 4.1.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 (95) hide show
  1. package/dist/components/data-table/data-table-filter.es.js +178 -0
  2. package/dist/components/data-table/data-table-filter.es.js.map +1 -0
  3. package/dist/components/data-table/data-table.es.js +402 -153
  4. package/dist/components/data-table/data-table.es.js.map +1 -1
  5. package/dist/components/data-table/table-commons.es.js +267 -19
  6. package/dist/components/data-table/table-commons.es.js.map +1 -1
  7. package/dist/components/inputs/calendar.es.js +12 -12
  8. package/dist/components/inputs/calendar.es.js.map +1 -1
  9. package/dist/components/inputs/checkbox.es.js +13 -13
  10. package/dist/components/inputs/checkbox.es.js.map +1 -1
  11. package/dist/components/inputs/country-select.es.js +3 -3
  12. package/dist/components/inputs/form-field.es.js +1 -1
  13. package/dist/components/inputs/input-otp.es.js +2 -2
  14. package/dist/components/inputs/input-otp.es.js.map +1 -1
  15. package/dist/components/inputs/input.es.js +7 -7
  16. package/dist/components/inputs/input.es.js.map +1 -1
  17. package/dist/components/inputs/multi-select.es.js +7 -7
  18. package/dist/components/inputs/radio-group.es.js +1 -1
  19. package/dist/components/inputs/select.es.js +10 -10
  20. package/dist/components/inputs/select.es.js.map +1 -1
  21. package/dist/components/inputs/textarea.es.js +4 -4
  22. package/dist/components/key-value-card/key-value-card.es.js +6 -9
  23. package/dist/components/key-value-card/key-value-card.es.js.map +1 -1
  24. package/dist/components/ui/accordion.es.js +6 -6
  25. package/dist/components/ui/accordion.es.js.map +1 -1
  26. package/dist/components/ui/alert.es.js +4 -4
  27. package/dist/components/ui/avatar.es.js +1 -1
  28. package/dist/components/ui/badge.es.js +1 -1
  29. package/dist/components/ui/breadcrumb.es.js +2 -2
  30. package/dist/components/ui/breadcrumb.es.js.map +1 -1
  31. package/dist/components/ui/button.es.js +27 -25
  32. package/dist/components/ui/button.es.js.map +1 -1
  33. package/dist/components/ui/card.es.js +8 -8
  34. package/dist/components/ui/card.es.js.map +1 -1
  35. package/dist/components/ui/copy-button.es.js +12 -14
  36. package/dist/components/ui/copy-button.es.js.map +1 -1
  37. package/dist/components/ui/dialog.es.js +4 -4
  38. package/dist/components/ui/dialog.es.js.map +1 -1
  39. package/dist/components/ui/drawer.es.js +10 -10
  40. package/dist/components/ui/drawer.es.js.map +1 -1
  41. package/dist/components/ui/dropdown-menu.es.js +13 -13
  42. package/dist/components/ui/dropdown-menu.es.js.map +1 -1
  43. package/dist/components/ui/label.es.js +1 -1
  44. package/dist/components/ui/loader.es.js +3 -3
  45. package/dist/components/ui/pagination.es.js +2 -2
  46. package/dist/components/ui/pagination.es.js.map +1 -1
  47. package/dist/components/ui/popover.es.js +5 -5
  48. package/dist/components/ui/popover.es.js.map +1 -1
  49. package/dist/components/ui/separator.es.js +1 -1
  50. package/dist/components/ui/sheet.es.js +1 -1
  51. package/dist/components/ui/sidebar.es.js +105 -105
  52. package/dist/components/ui/sidebar.es.js.map +1 -1
  53. package/dist/components/ui/skeleton.es.js +1 -1
  54. package/dist/components/ui/static-data-table.es.js +1 -1
  55. package/dist/components/ui/table.es.js +8 -8
  56. package/dist/components/ui/table.es.js.map +1 -1
  57. package/dist/components/ui/tabs.es.js +1 -1
  58. package/dist/components/ui/tabs.es.js.map +1 -1
  59. package/dist/components/ui/timeline.es.js +3 -3
  60. package/dist/components/ui/timeline.es.js.map +1 -1
  61. package/dist/components/ui/tooltip.es.js +1 -1
  62. package/dist/index.es.d.ts +128 -32
  63. package/dist/index.es.js +237 -238
  64. package/dist/index.es.js.map +1 -1
  65. package/dist/node_modules/.pnpm/@radix-ui_react-dropdown-menu@2.1.15_@types_react-dom@19.1.0_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0/node_modules/@radix-ui/react-dropdown-menu/dist/index.es.js +10 -10
  66. package/dist/node_modules/.pnpm/@radix-ui_react-menu@2.1.15_@types_react-dom@19.1.0_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0/node_modules/@radix-ui/react-menu/dist/index.es.js +4 -4
  67. package/dist/utils/{index.es.js → primitives.es.js} +1 -1
  68. package/dist/utils/primitives.es.js.map +1 -0
  69. package/dist/{hooks → utils}/use-mobile.es.js.map +1 -1
  70. package/lib/theme.css +10 -12
  71. package/lib/tokens.css +3 -3
  72. package/lib/utilities.css +8 -8
  73. package/package.json +9 -11
  74. package/dist/components/data-table/column-picker.es.js +0 -50
  75. package/dist/components/data-table/column-picker.es.js.map +0 -1
  76. package/dist/components/data-table/page-size.es.js +0 -25
  77. package/dist/components/data-table/page-size.es.js.map +0 -1
  78. package/dist/components/data-table/paginator.es.js +0 -64
  79. package/dist/components/data-table/paginator.es.js.map +0 -1
  80. package/dist/components/data-table/table-actions.es.js +0 -26
  81. package/dist/components/data-table/table-actions.es.js.map +0 -1
  82. package/dist/components/data-table/table-content.es.js +0 -65
  83. package/dist/components/data-table/table-content.es.js.map +0 -1
  84. package/dist/components/data-table/table-utils/constants.es.js +0 -288
  85. package/dist/components/data-table/table-utils/constants.es.js.map +0 -1
  86. package/dist/components/data-table/table-utils/createTableFetchFn.es.js +0 -25
  87. package/dist/components/data-table/table-utils/createTableFetchFn.es.js.map +0 -1
  88. package/dist/components/data-table/table-utils/date.es.js +0 -12
  89. package/dist/components/data-table/table-utils/date.es.js.map +0 -1
  90. package/dist/components/data-table/table-utils/string.es.js +0 -19
  91. package/dist/components/data-table/table-utils/string.es.js.map +0 -1
  92. package/dist/components/data-table/table-utils/types.es.js +0 -5
  93. package/dist/components/data-table/table-utils/types.es.js.map +0 -1
  94. package/dist/utils/index.es.js.map +0 -1
  95. /package/dist/{hooks → utils}/use-mobile.es.js +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"primitives.es.js","sources":["../../lib/utils/primitives.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\n/** Classnames */\nexport function cn(...inputs: ClassValue[]) {\n return clsx(inputs);\n}\n\n/**\n * This is the variable name representing the primary hue.\n * Referenced in tokens.scss -> token.css\n */\nconst PRIMARY_HUE_PROPERTY = \"--primary-hue\";\n\n/**\n *\n * @returns\n */\nexport function getThemeHue() {\n return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);\n}\n\n/**\n * @param hue the hue value to set in the document style\n */\nexport function setThemeHue(hue: number) {\n document.documentElement.style.setProperty(\n PRIMARY_HUE_PROPERTY,\n // In this case, it must be a number.\n hue as unknown as string,\n );\n}\n\nconst ACCESS_TOKEN = \"AT\";\nconst REFRESH_TOKEN = \"RT\";\nexport function logout() {\n if (typeof window !== \"undefined\" && window.localStorage) {\n try {\n localStorage.removeItem(REFRESH_TOKEN);\n localStorage.removeItem(ACCESS_TOKEN);\n window.location.replace(\"/auth/login\");\n } catch (error) {\n console.error(\"Logout failed:\", error);\n }\n }\n}\n\nexport type JwtDecode = {\n aud: string;\n email: string;\n exp: number;\n iat: number;\n jti: string;\n region: string;\n role: string;\n role_type: string;\n scope: string[];\n sub: string;\n teat: number;\n tenantid: string;\n token_usage: string;\n sadmin?: string;\n};\nexport type CtxPortals =\n | \"customer-portal\"\n | \"system-portal\"\n | \"reseller-portal\"\n | \"admin-portal\";\n"],"names":["cn","inputs","clsx","PRIMARY_HUE_PROPERTY","getThemeHue","setThemeHue","hue","ACCESS_TOKEN","REFRESH_TOKEN","logout","error"],"mappings":";AAGO,SAASA,KAAMC,GAAsB;AACxC,SAAOC,EAAKD,CAAM;AACtB;AAMA,MAAME,IAAuB;AAMtB,SAASC,IAAc;AAC1B,SAAO,SAAS,gBAAgB,MAAM,iBAAiBD,CAAoB;AAC/E;AAKO,SAASE,EAAYC,GAAa;AACrC,WAAS,gBAAgB,MAAM;AAAA,IAC3BH;AAAA;AAAA,IAEAG;AAAA,EAAA;AAER;AAEA,MAAMC,IAAe,MACfC,IAAgB;AACf,SAASC,IAAS;AACrB,MAAI,OAAO,SAAW,OAAe,OAAO;AACxC,QAAI;AACA,mBAAa,WAAWD,CAAa,GACrC,aAAa,WAAWD,CAAY,GACpC,OAAO,SAAS,QAAQ,aAAa;AAAA,IACzC,SAASG,GAAO;AACZ,cAAQ,MAAM,kBAAkBA,CAAK;AAAA,IACzC;AAER;"}
@@ -1 +1 @@
1
- {"version":3,"file":"use-mobile.es.js","sources":["../../lib/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\treturn () => mql.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\treturn !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC7B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM;AAAA,IACrC;AAAA,EAAA;AAGD,SAAAA,EAAM,UAAU,MAAM;AACrB,UAAMC,IAAM,OAAO,WAAW,eAAeL,IAAoB,CAAC,KAAK,GACjEM,IAAW,MAAM;AACtB,MAAAH,EAAY,OAAO,aAAaH,CAAiB;AAAA,IAClD;AACA,WAAAK,EAAI,iBAAiB,UAAUC,CAAQ,GACvCH,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMK,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACxD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACJ;AACV;"}
1
+ {"version":3,"file":"use-mobile.es.js","sources":["../../lib/utils/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\treturn () => mql.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\treturn !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC7B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM;AAAA,IACrC;AAAA,EAAA;AAGD,SAAAA,EAAM,UAAU,MAAM;AACrB,UAAMC,IAAM,OAAO,WAAW,eAAeL,IAAoB,CAAC,KAAK,GACjEM,IAAW,MAAM;AACtB,MAAAH,EAAY,OAAO,aAAaH,CAAiB;AAAA,IAClD;AACA,WAAAK,EAAI,iBAAiB,UAAUC,CAAQ,GACvCH,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMK,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACxD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACJ;AACV;"}
package/lib/theme.css CHANGED
@@ -76,13 +76,17 @@
76
76
  --color-success-9: var(--success-9);
77
77
  --color-success-10: var(--success-10);
78
78
 
79
- --color-background: var(--color-neutral-2);
80
- --color-foreground: var(--color-neutral-8);
81
79
 
82
- --color-card: var(--color-neutral-1);
80
+ /* TODO, multiple levels of elevation */
81
+ --color-background: var(--color-neutral-3);
82
+ --color-elevation-1: var(--color-neutral-2);
83
+ --color-elevation-2: var(--color-neutral-1);
84
+
85
+ --color-foreground: var(--color-neutral-8);
86
+ --color-card: var(--color-elevation-1);
83
87
  --color-card-foreground: var(--color-foreground);
84
88
  /* Assuming popovers only show up over cards ??? */
85
- --color-popover: var(--color-neutral-1);
89
+ --color-popover: var(--color-elevation-2);
86
90
  --color-popover-foreground: var(--color-foreground);
87
91
 
88
92
  --color-primary: var(--color-primary-7);
@@ -108,20 +112,14 @@
108
112
  --color-chart-4: var(--color-secondary-4);
109
113
  --color-chart-5: var(--color-secondary-2);
110
114
 
111
- --color-sidebar-background: var(--color-background);
115
+ --color-sidebar-background: var(--color-elevation-1);
112
116
  --color-sidebar-foreground: var(--color-foreground);
113
-
114
- --color-sidebar-primary: var(--color-primary);
115
- --color-sidebar-primary-foreground: var(--color-primary-foreground);
116
-
117
- --color-sidebar-accent: var(--color-accent);
118
- --color-sidebar-accent-foreground: var(--color-accent-foreground);
119
117
 
120
118
  --color-sidebar-border: var(--color-border);
121
119
  --color-sidebar-ring: var(--color-ring);
122
120
 
123
- --spacing-icon: calc(var(--spacing) * 4);
124
121
  --spacing-input: calc(var(--spacing) * 8);
122
+ --spacing-icon: calc(var(--spacing-input) / 2);
125
123
  --spacing-table: calc(var(--spacing) * 100);
126
124
 
127
125
  /* Header nav */
package/lib/tokens.css CHANGED
@@ -88,15 +88,15 @@
88
88
  --success-9: var(--xsuccess-9);
89
89
  --success-10: var(--xsuccess-10);
90
90
  --neutral-hue: var(--primary-hue);
91
- --neutral-s: 0.005;
91
+ --neutral-s: 0.0005;
92
92
  --xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
93
93
  --xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
94
- --xneutral-3: oklch(0.922 var(--neutral-s) var(--neutral-hue));
94
+ --xneutral-3: oklch(0.95 var(--neutral-s) var(--neutral-hue));
95
95
  --xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
96
96
  --xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
97
97
  --xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
98
98
  --xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
99
- --xneutral-8: oklch(0.35 var(--neutral-s) var(--neutral-hue));
99
+ --xneutral-8: oklch(0.29 var(--neutral-s) var(--neutral-hue));
100
100
  --xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
101
101
  --xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
102
102
  --neutral-1: var(--xneutral-1);
package/lib/utilities.css CHANGED
@@ -32,11 +32,11 @@
32
32
 
33
33
  /* Fluid grid with minimum width */
34
34
  @utility grid-fluid {
35
- @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-4;
35
+ @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
36
36
  }
37
37
 
38
38
  @utility input {
39
- @apply border border-input bg-card px-3 py-2 body placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
39
+ @apply border border-input bg-card px-icon py-2 body placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
40
40
  }
41
41
 
42
42
  /* A base set of classes for elements that can be clicked */
@@ -44,28 +44,28 @@
44
44
  @apply cursor-pointer ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring leading-none no-underline whitespace-nowrap select-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50;
45
45
  }
46
46
  @utility btn-primary {
47
- @apply bg-primary text-primary-foreground hover:bg-primary/80 focus:bg-primary/80;
47
+ @apply border border-primary text-primary hover:bg-primary/10 focus:bg-primary/10;
48
48
  }
49
49
  @utility btn-destructive {
50
- @apply bg-destructive text-destructive-foreground hover:bg-destructive/80 focus:bg-destructive/80;
50
+ @apply border border-destructive text-destructive hover:bg-destructive/10 focus:bg-destructive/10;
51
51
  }
52
- @utility btn-outline {
52
+ @utility btn-neutral {
53
53
  @apply border border-input text-accent bg-card hover:bg-accent/10 focus:bg-accent/10;
54
54
  }
55
55
  @utility btn-secondary {
56
- @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:bg-secondary/80;
56
+ @apply border border-secondary text-secondary hover:bg-secondary/10 focus:bg-secondary/10;
57
57
  }
58
58
  @utility btn-ghost {
59
59
  @apply bg-transparent hover:bg-accent/10 focus:bg-accent/10;
60
60
  }
61
61
 
62
62
  @utility btn-dropdown {
63
- @apply w-full btn btn-outline h-input text-sm text-left px-2 truncate;
63
+ @apply w-full btn btn-neutral leading-normal h-input text-sm text-left px-2 truncate;
64
64
  }
65
65
 
66
66
  /* Dimensions for a standard input */
67
67
  @utility input-dim {
68
- @apply h-input px-4 py-2 text-sm;
68
+ @apply h-input px-icon py-2 text-sm;
69
69
  }
70
70
 
71
71
  @utility dropdown-item {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cryptlex/web-components",
3
- "version": "3.8.2",
3
+ "version": "4.1.0",
4
4
  "description": "React component library for Cryptlex web applications",
5
5
  "author": "Cryptlex",
6
6
  "type": "module",
@@ -48,6 +48,9 @@
48
48
  },
49
49
  "peerDependencies": {
50
50
  "@cryptlex/web-api-types": "1.41.0",
51
+ "@dnd-kit/core": "6.3.1",
52
+ "@dnd-kit/sortable": "10.0.0",
53
+ "@dnd-kit/utilities": "3.2.2",
51
54
  "@tanstack/react-form": "1.6.3",
52
55
  "@tanstack/react-query": "5.62.3",
53
56
  "@tanstack/react-table": "8.20.5",
@@ -79,15 +82,10 @@
79
82
  "@radix-ui/react-slot": "1.2.3",
80
83
  "@radix-ui/react-tabs": "1.1.12",
81
84
  "@radix-ui/react-tooltip": "1.2.7",
82
- "@storybook/addon-docs": "^8.6.12",
83
- "@storybook/addon-essentials": "^8.6.12",
84
- "@storybook/addon-interactions": "^8.6.12",
85
- "@storybook/addon-links": "^8.6.12",
86
- "@storybook/addon-onboarding": "^8.6.12",
87
- "@storybook/blocks": "^8.6.12",
88
- "@storybook/react": "^8.6.12",
89
- "@storybook/react-vite": "^8.6.12",
90
- "@storybook/test": "^8.6.12",
85
+ "@storybook/addon-docs": "^9.0.16",
86
+ "@storybook/addon-links": "^9.0.16",
87
+ "@storybook/addon-onboarding": "^9.0.16",
88
+ "@storybook/react-vite": "^9.0.16",
91
89
  "@tailwindcss/vite": "^4.0.6",
92
90
  "@types/lodash-es": "^4.17.12",
93
91
  "@types/node": "^22.7.8",
@@ -97,7 +95,7 @@
97
95
  "react-day-picker": "9.7.0",
98
96
  "rollup-preserve-directives": "1.1.3",
99
97
  "sass": "^1.80.6",
100
- "storybook": "^8.6.12",
98
+ "storybook": "^9.0.16",
101
99
  "typescript": "^5.5.3",
102
100
  "typescript-eslint": "^8.7.0",
103
101
  "vite": "^5.4.8",
@@ -1,50 +0,0 @@
1
- import { jsxs as i, jsx as r } from "react/jsx-runtime";
2
- import "react";
3
- import "../../utils/form-context.es.js";
4
- import "../../utils/form-hook.es.js";
5
- import { Columns3 as m } from "lucide-react";
6
- import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as a, DropdownMenuGroup as c, DropdownMenuCheckboxItem as n } from "../ui/dropdown-menu.es.js";
7
- import { Button as s } from "../ui/button.es.js";
8
- import { getResourceDisplayName as h } from "./table-utils/constants.es.js";
9
- function x({
10
- toggleAllColumnsVisible: o,
11
- getIsAllColumnsVisible: t,
12
- getAllColumns: d
13
- }) {
14
- return /* @__PURE__ */ i(p, { children: [
15
- /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(s, { icon: () => m, variant: "outline", children: "Columns" }) }),
16
- /* @__PURE__ */ r(a, { children: /* @__PURE__ */ i(c, { children: [
17
- /* @__PURE__ */ r(
18
- n,
19
- {
20
- className: "italic",
21
- onSelect: (e) => {
22
- e.preventDefault(), o();
23
- },
24
- checked: t(),
25
- children: "(Select all)"
26
- }
27
- ),
28
- d().map((e) => /* @__PURE__ */ i(
29
- n,
30
- {
31
- onSelect: (l) => {
32
- l.preventDefault(), e.toggleVisibility();
33
- },
34
- disabled: !e.getCanHide(),
35
- checked: e.getIsVisible(),
36
- children: [
37
- e.getIsSorted(),
38
- " ",
39
- h(e.id, "admin-portal")
40
- ]
41
- },
42
- e.id
43
- ))
44
- ] }) })
45
- ] });
46
- }
47
- export {
48
- x as ColumnPicker
49
- };
50
- //# sourceMappingURL=column-picker.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n\tButton,\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuTrigger,\n\tgetResourceDisplayName,\n} from \"@/index\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { Columns3 } from \"lucide-react\";\n\nexport function ColumnPicker({\n\ttoggleAllColumnsVisible,\n\tgetIsAllColumnsVisible,\n\tgetAllColumns,\n}: {\n\ttoggleAllColumnsVisible: () => void;\n\tgetIsAllColumnsVisible: () => boolean;\n\tgetAllColumns: () => Column<any, any>[];\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Columns3} variant={\"outline\"}>\n\t\t\t\t\tColumns\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tclassName=\"italic\"\n\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\ttoggleAllColumnsVisible();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tchecked={getIsAllColumnsVisible()}\n\t\t\t\t\t>\n\t\t\t\t\t\t(Select all)\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t{getAllColumns().map((col) => (\n\t\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tcol.toggleVisibility();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={col.id}\n\t\t\t\t\t\t\tdisabled={!col.getCanHide()}\n\t\t\t\t\t\t\tchecked={col.getIsVisible()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{col.getIsSorted()}{\" \"}\n\t\t\t\t\t\t\t{getResourceDisplayName(col.id, \"admin-portal\")}\n\t\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t))}\n\t\t\t\t\t{/* TODO getResourceDisplayName needs some review here. */}\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["ColumnPicker","toggleAllColumnsVisible","getIsAllColumnsVisible","getAllColumns","DropdownMenu","jsx","DropdownMenuTrigger","Button","Columns3","DropdownMenuContent","jsxs","DropdownMenuGroup","DropdownMenuCheckboxItem","col","e","getResourceDisplayName"],"mappings":";;;;;;;;AAYO,SAASA,EAAa;AAAA,EAC5B,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,eAAAC;AACD,GAIG;AACF,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD,EAACE,GAAA,EAAO,MAAM,MAAMC,GAAU,SAAS,WAAW,UAAA,UAAA,CAElD,GACD;AAAA,IACA,gBAAAH,EAACI,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,UAAU,CAAC,MAAM;AAChB,cAAE,eAAA,GACFX,EAAA;AAAA,UACD;AAAA,UACA,SAASC,EAAA;AAAA,UACT,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGAC,IAAgB,IAAI,CAACU,MACrB,gBAAAH;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,UAAU,CAACE,MAAM;AAChB,YAAAA,EAAE,eAAA,GACFD,EAAI,iBAAA;AAAA,UACL;AAAA,UAEA,UAAU,CAACA,EAAI,WAAA;AAAA,UACf,SAASA,EAAI,aAAA;AAAA,UAEZ,UAAA;AAAA,YAAAA,EAAI,YAAA;AAAA,YAAe;AAAA,YACnBE,EAAuBF,EAAI,IAAI,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QALzCA,EAAI;AAAA,MAAA,CAOV;AAAA,IAAA,EAAA,CAEF,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
@@ -1,25 +0,0 @@
1
- import { jsxs as i, jsx as o } from "react/jsx-runtime";
2
- import { Button as d } from "../ui/button.es.js";
3
- import { DropdownMenu as u, DropdownMenuTrigger as l, DropdownMenuContent as p, DropdownMenuRadioGroup as c, DropdownMenuRadioItem as m } from "../ui/dropdown-menu.es.js";
4
- import { Menu as a } from "lucide-react";
5
- function w({
6
- size: r,
7
- onSelect: e
8
- }) {
9
- const t = [10, 20, 30, 40, 50];
10
- return /* @__PURE__ */ i(u, { children: [
11
- /* @__PURE__ */ o(l, { asChild: !0, children: /* @__PURE__ */ o(d, { icon: () => a, variant: "outline", children: r }) }),
12
- /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(c, { value: r.toString(), children: t.map((n) => /* @__PURE__ */ o(
13
- m,
14
- {
15
- value: n.toString(),
16
- onSelect: () => e(n),
17
- children: n
18
- }
19
- )) }) })
20
- ] });
21
- }
22
- export {
23
- w as PageSize
24
- };
25
- //# sourceMappingURL=page-size.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from \"@/components/ui/button\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Menu } from \"lucide-react\";\n\nexport function PageSize({\n\tsize,\n\tonSelect,\n}: { size: number; onSelect: (v: number) => void }) {\n\t// const currentPageSize = table.getState().pagination.pageSize;\n\tconst pageSizes = [10, 20, 30, 40, 50];\n\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Menu} variant=\"outline\">\n\t\t\t\t\t{size}\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuRadioGroup value={size.toString()}>\n\t\t\t\t\t{pageSizes.map((pageSize) => (\n\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\tvalue={pageSize.toString()}\n\t\t\t\t\t\t\tonSelect={() => onSelect(pageSize)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{pageSize}\n\t\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t\t))}\n\t\t\t\t</DropdownMenuRadioGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["PageSize","size","onSelect","pageSizes","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","DropdownMenuRadioGroup","pageSize","DropdownMenuRadioItem"],"mappings":";;;;AAUO,SAASA,EAAS;AAAA,EACxB,MAAAC;AAAA,EACA,UAAAC;AACD,GAAoD;AAEnD,QAAMC,IAAY,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AAErC,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD,EAACE,GAAA,EAAO,MAAM,MAAMC,GAAM,SAAQ,WAChC,UAAAP,EAAA,CACF,GACD;AAAA,IACA,gBAAAI,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAuB,OAAOT,EAAK,SAAA,GAClC,UAAAE,EAAU,IAAI,CAACQ,MACf,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,OAAOD,EAAS,SAAA;AAAA,QAChB,UAAU,MAAMT,EAASS,CAAQ;AAAA,QAEhC,UAAAA;AAAA,MAAA;AAAA,IAAA,CAEF,GACF,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
@@ -1,64 +0,0 @@
1
- import { jsxs as p, jsx as i } from "react/jsx-runtime";
2
- import { Button as e } from "../ui/button.es.js";
3
- import { ChevronFirst as d, ChevronLeft as m, ChevronRight as h, ChevronLast as v } from "lucide-react";
4
- function g({
5
- getCanPreviousPage: o,
6
- getCanNextPage: c,
7
- firstPage: s,
8
- previousPage: l,
9
- nextPage: r,
10
- lastPage: t,
11
- getState: n,
12
- rowCount: a
13
- }) {
14
- return /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
15
- /* @__PURE__ */ i("span", { className: "whitespace-nowrap caption text-muted", children: `${n().pagination.pageIndex * n().pagination.pageSize + 1} - ${Math.min(
16
- (n().pagination.pageIndex + 1) * n().pagination.pageSize,
17
- a
18
- )} of ${a == null ? void 0 : a.toLocaleString()}` }),
19
- /* @__PURE__ */ i(
20
- e,
21
- {
22
- onClick: () => s(),
23
- disabled: !o(),
24
- variant: "outline",
25
- size: "icon",
26
- icon: () => d
27
- }
28
- ),
29
- /* @__PURE__ */ i(
30
- e,
31
- {
32
- onClick: () => l(),
33
- disabled: !o(),
34
- variant: "outline",
35
- size: "icon",
36
- icon: () => m
37
- }
38
- ),
39
- /* @__PURE__ */ i(
40
- e,
41
- {
42
- onClick: () => r(),
43
- disabled: !c(),
44
- variant: "outline",
45
- size: "icon",
46
- icon: () => h
47
- }
48
- ),
49
- /* @__PURE__ */ i(
50
- e,
51
- {
52
- onClick: () => t(),
53
- disabled: !c(),
54
- variant: "outline",
55
- size: "icon",
56
- icon: () => v
57
- }
58
- )
59
- ] });
60
- }
61
- export {
62
- g as Paginator
63
- };
64
- //# sourceMappingURL=paginator.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"paginator.es.js","sources":["../../../lib/components/data-table/paginator.tsx"],"sourcesContent":["import { Button } from \"@/components/ui/button\";\nimport type { TableState } from \"@tanstack/react-table\";\nimport {\n\tChevronFirst,\n\tChevronLast,\n\tChevronLeft,\n\tChevronRight,\n} from \"lucide-react\";\n\nexport function Paginator({\n\tgetCanPreviousPage,\n\tgetCanNextPage,\n\tfirstPage,\n\tpreviousPage,\n\tnextPage,\n\tlastPage,\n\tgetState,\n\trowCount,\n}: {\n\tgetCanPreviousPage: () => boolean;\n\tgetCanNextPage: () => boolean;\n\tfirstPage: () => void;\n\tpreviousPage: () => void;\n\tnextPage: () => void;\n\tlastPage: () => void;\n\tgetState: () => TableState;\n\trowCount: number;\n}) {\n\treturn (\n\t\t<div className=\"flex items-center gap-2\">\n\t\t\t<span className=\"whitespace-nowrap caption text-muted\">\n\t\t\t\t{`${getState().pagination.pageIndex * getState().pagination.pageSize + 1} - ${Math.min(\n\t\t\t\t\t(getState().pagination.pageIndex + 1) *\n\t\t\t\t\t\tgetState().pagination.pageSize,\n\t\t\t\t\trowCount,\n\t\t\t\t)} of ${rowCount?.toLocaleString()}`}\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tonClick={() => firstPage()}\n\t\t\t\tdisabled={!getCanPreviousPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronFirst}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => previousPage()}\n\t\t\t\tdisabled={!getCanPreviousPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronLeft}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => nextPage()}\n\t\t\t\tdisabled={!getCanNextPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronRight}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => lastPage()}\n\t\t\t\tdisabled={!getCanNextPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronLast}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["Paginator","getCanPreviousPage","getCanNextPage","firstPage","previousPage","nextPage","lastPage","getState","rowCount","jsxs","jsx","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast"],"mappings":";;;AASO,SAASA,EAAU;AAAA,EACzB,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACD,GASG;AACF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,wCACd,UAAA,GAAGH,IAAW,WAAW,YAAYA,EAAA,EAAW,WAAW,WAAW,CAAC,MAAM,KAAK;AAAA,OACjFA,IAAW,WAAW,YAAY,KAClCA,EAAA,EAAW,WAAW;AAAA,MACvBC;AAAA,IAAA,CACA,OAAOA,KAAA,gBAAAA,EAAU,gBAAgB,GAAA,CACnC;AAAA,IAEA,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMR,EAAA;AAAA,QACf,UAAU,CAACF,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMP,EAAA;AAAA,QACf,UAAU,CAACH,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMN,EAAA;AAAA,QACf,UAAU,CAACH,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAML,EAAA;AAAA,QACf,UAAU,CAACJ,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMa;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACD;AAEF;"}
@@ -1,26 +0,0 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import { RotateCw as o } from "lucide-react";
3
- import { Button as i } from "../ui/button.es.js";
4
- import { useState as r } from "react";
5
- function p({
6
- tableActions: n,
7
- getSelectedRowModel: a,
8
- handleSearching: c,
9
- dataQuery: t
10
- }) {
11
- const [l, s] = r("");
12
- return /* @__PURE__ */ e("div", { className: "flex bg-card justify-between my-0 p-4 border gap-4 overflow-auto", children: /* @__PURE__ */ e("div", { className: "flex gap-4", children: /* @__PURE__ */ e(
13
- i,
14
- {
15
- loading: t.isFetching,
16
- icon: () => o,
17
- onClick: () => t.refetch(),
18
- variant: "outline",
19
- size: "icon"
20
- }
21
- ) }) });
22
- }
23
- export {
24
- p as default
25
- };
26
- //# sourceMappingURL=table-actions.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { RotateCw } from \"lucide-react\";\n\nimport type { TableActions } from \"@/components/data-table/table-utils/index\";\nimport { Button } from \"@/components/ui/button\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport type { RowModel } from \"@tanstack/react-table\";\nimport { useState } from \"react\";\n\nexport default function Actions({\n\ttableActions,\n\tgetSelectedRowModel,\n\thandleSearching,\n\tdataQuery,\n}: {\n\ttableActions: TableActions;\n\tgetSelectedRowModel: () => RowModel<any>;\n\thandleSearching: (value: string) => void;\n\tdataQuery: UseQueryResult<any, unknown>;\n}) {\n\t// const { location: { href } = {} } = useRouterState();\n\tconst [search, setSearch] = useState<string>(\"\");\n\treturn (\n\t\t<div className=\"flex bg-card justify-between my-0 p-4 border gap-4 overflow-auto\">\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<Button\n\t\t\t\t\tloading={dataQuery.isFetching}\n\t\t\t\t\ticon={() => RotateCw}\n\t\t\t\t\tonClick={() => dataQuery.refetch()}\n\t\t\t\t\tvariant={\"outline\"}\n\t\t\t\t\tsize={\"icon\"}\n\t\t\t\t/>\n\t\t\t\t{/* //TODO: we can show the create, delete button based on permsission\n\t\t\t\t{/* All the creating routes will be with url /create in host app */}\n\t\t\t\t{/* */}\n\t\t\t</div>\n\t\t\t{/* {tableActions?.search && (\n\t\t\t\t<SearchInput\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetSearch(e);\n\t\t\t\t\t\thandleSearching(e);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)} */}\n\t\t</div>\n\t);\n}\n"],"names":["Actions","tableActions","getSelectedRowModel","handleSearching","dataQuery","search","setSearch","useState","jsx","Button","RotateCw"],"mappings":";;;;AAQA,SAAwBA,EAAQ;AAAA,EAC/B,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACD,GAKG;AAEF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAC/C,2BACE,OAAA,EAAI,WAAU,oEACd,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACd,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAASL,EAAU;AAAA,MACnB,MAAM,MAAMM;AAAA,MACZ,SAAS,MAAMN,EAAU,QAAA;AAAA,MACzB,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EAAA,GAKR,EAAA,CAUD;AAEF;"}
@@ -1,65 +0,0 @@
1
- import { jsxs as i, jsx as t } from "react/jsx-runtime";
2
- import { ACTIONS_COLUMN_ID as l } from "./data-table.es.js";
3
- import { Table as d, TableHeader as p, TableRow as a, TableHead as u, TableBody as f, TableCell as g } from "../ui/table.es.js";
4
- import { flexRender as s } from "@tanstack/react-table";
5
- import { ArrowDownNarrowWide as x, ArrowDownWideNarrow as w, ArrowUpDown as b } from "lucide-react";
6
- import { Button as h } from "../ui/button.es.js";
7
- function k({
8
- className: c,
9
- getHeaderGroups: m,
10
- getRowModel: r
11
- }) {
12
- return /* @__PURE__ */ i(d, { className: c, children: [
13
- /* @__PURE__ */ t(p, { className: "sticky top-0 z-10", children: m().map((o) => /* @__PURE__ */ t(a, { children: o.headers.map((e) => /* @__PURE__ */ t(
14
- u,
15
- {
16
- className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${e.id === l ? "sticky right-0 z-50 text-center" : ""}`,
17
- children: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1", children: [
18
- /* @__PURE__ */ t("span", { children: e.isPlaceholder ? null : s(
19
- e.column.columnDef.header,
20
- e.getContext()
21
- ) }),
22
- e.column.getCanSort() && /* @__PURE__ */ t(
23
- h,
24
- {
25
- size: "icon",
26
- variant: "ghost",
27
- onClick: e.column.getToggleSortingHandler(),
28
- icon: () => {
29
- const n = e.column.getIsSorted();
30
- return n === "asc" ? x : n === "desc" ? w : b;
31
- }
32
- }
33
- )
34
- ] })
35
- },
36
- e.id
37
- )) }, o.id)) }),
38
- /* @__PURE__ */ t(f, { className: "flex-1 overflow-y-auto relative", children: r().rows.length !== 0 && r().rows.map((o) => /* @__PURE__ */ t(
39
- a,
40
- {
41
- className: "h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
42
- "data-state": o.getIsSelected() && "selected",
43
- children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(
44
- g,
45
- {
46
- className: `
47
- px-4 py-2 text-left text-sm whitespace-nowrap
48
- ${e.column.id === l ? "sticky right-0 w-20 bg-card" : ""}
49
- `,
50
- children: s(
51
- e.column.columnDef.cell,
52
- e.getContext()
53
- )
54
- },
55
- e.id
56
- ))
57
- },
58
- o.id
59
- )) })
60
- ] });
61
- }
62
- export {
63
- k as TableContent
64
- };
65
- //# sourceMappingURL=table-content.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown\n} from \"lucide-react\";\n\n// TODO, automate checking valid HTML\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n}) {\n\treturn (\n\t\t<TableComponent className={className}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\tclassName=\"h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableContent","className","getHeaderGroups","getRowModel","jsxs","TableComponent","jsx","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;AAsBO,SAASA,EAAa;AAAA,EAC5B,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AACD,GAIG;AACF,SACC,gBAAAC,EAACC,KAAe,WAAAJ,GACf,UAAA;AAAA,IAAA,gBAAAK,EAACC,GAAA,EAAY,WAAU,qBACrB,UAAAL,EAAA,EAAkB,IAAI,CAACM,MACvB,gBAAAF,EAACG,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,QAExJ,UAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,kCACf,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EACC,UAAAI,EAAO,gBACL,OACAG;AAAA,YACDH,EAAO,OAAO,UAAU;AAAA,YACxBA,EAAO,WAAA;AAAA,UAAW,GAErB;AAAA,UACCA,EAAO,OAAO,WAAA,KACd,gBAAAJ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACA,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,cACvB,MAAM,MAAM;AACX,sBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,uBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,cACR;AAAA,YAAA;AAAA,UAAA;AAAA,QACD,EAAA,CAEF;AAAA,MAAA;AAAA,MA9BKR,EAAO;AAAA,IAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,IACA,gBAAAF,EAACa,GAAA,EAAU,WAAU,mCACnB,cAAc,KAAK,WAAW,KAC9BhB,EAAA,EAAc,KAAK,IAAI,CAACiB,MACvB,gBAAAd;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,QAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,gBAAAf;AAAA,UAACgB;AAAA,UAAA;AAAA,YAEA,WAAW;AAAA;AAAA,sBAEED,EAAK,OAAO,OAAOT,IAC5B,gCACA,EACH;AAAA;AAAA,YAGA,UAAAC;AAAA,cACAQ,EAAK,OAAO,UAAU;AAAA,cACtBA,EAAK,WAAA;AAAA,YAAW;AAAA,UACjB;AAAA,UAZKA,EAAK;AAAA,QAAA,CAcX;AAAA,MAAA;AAAA,MAnBID,EAAI;AAAA,IAAA,CAqBV,EAAA,CACH;AAAA,EAAA,GACD;AAEF;"}