baaz-custom-components 5.0.19 → 5.0.22

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 (7) hide show
  1. package/dist/index.css +0 -3
  2. package/dist/index.d.mts +17 -3
  3. package/dist/index.d.ts +17 -3
  4. package/dist/index.js +158 -180
  5. package/dist/index.mjs +161 -179
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -675,9 +675,6 @@
675
675
  .touch-none {
676
676
  touch-action: none;
677
677
  }
678
- .resize {
679
- resize: both;
680
- }
681
678
  .scroll-my-1 {
682
679
  scroll-margin-block: calc(var(--spacing) * 1);
683
680
  }
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as react from 'react';
2
+ import { IApi } from '@svar-ui/react-grid';
2
3
 
3
4
  type NavbarData = NavbarEntry[];
4
5
  interface hubDetail {
@@ -58,6 +59,7 @@ type BreadcrumbProps = {
58
59
  declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
59
60
 
60
61
  type SortOrder = "asc" | "desc";
62
+
61
63
  type GridColumn = {
62
64
  id: string;
63
65
  header: string;
@@ -90,7 +92,7 @@ type GridProps = {
90
92
  fonts?: boolean;
91
93
  autoConfig?: boolean | {};
92
94
  downloadable?: boolean;
93
- fileNmae?: string;
95
+ fileName?: string;
94
96
  search: boolean;
95
97
  searchkey: string;
96
98
  searchValue: string;
@@ -99,6 +101,7 @@ type GridProps = {
99
101
  onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
100
102
  filterList: Filters[];
101
103
  onFilterChange: (filter: ActiveFilter) => void;
104
+ onApiReady?: (api: IApi) => void;
102
105
  };
103
106
  type ActiveFilter = {
104
107
  column?: string | null;
@@ -108,7 +111,18 @@ type ActiveFilter = {
108
111
  endDate?: string | null;
109
112
  };
110
113
 
111
- declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
114
+ declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
115
+
116
+ type Props = {
117
+ cell: {
118
+ id?: string;
119
+ text?: string;
120
+ };
121
+ sortKey?: string | null;
122
+ sortOrder?: SortOrder | null;
123
+ onSortChange?: (key: string, order: SortOrder) => void;
124
+ };
125
+ declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
112
126
 
113
127
  type Pagination$1 = {
114
128
  totalCount: number;
@@ -124,4 +138,4 @@ type Pagination$1 = {
124
138
 
125
139
  declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element | null;
126
140
 
127
- export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, type UserData };
141
+ export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as react from 'react';
2
+ import { IApi } from '@svar-ui/react-grid';
2
3
 
3
4
  type NavbarData = NavbarEntry[];
4
5
  interface hubDetail {
@@ -58,6 +59,7 @@ type BreadcrumbProps = {
58
59
  declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
59
60
 
60
61
  type SortOrder = "asc" | "desc";
62
+
61
63
  type GridColumn = {
62
64
  id: string;
63
65
  header: string;
@@ -90,7 +92,7 @@ type GridProps = {
90
92
  fonts?: boolean;
91
93
  autoConfig?: boolean | {};
92
94
  downloadable?: boolean;
93
- fileNmae?: string;
95
+ fileName?: string;
94
96
  search: boolean;
95
97
  searchkey: string;
96
98
  searchValue: string;
@@ -99,6 +101,7 @@ type GridProps = {
99
101
  onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
100
102
  filterList: Filters[];
101
103
  onFilterChange: (filter: ActiveFilter) => void;
104
+ onApiReady?: (api: IApi) => void;
102
105
  };
103
106
  type ActiveFilter = {
104
107
  column?: string | null;
@@ -108,7 +111,18 @@ type ActiveFilter = {
108
111
  endDate?: string | null;
109
112
  };
110
113
 
111
- declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
114
+ declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
115
+
116
+ type Props = {
117
+ cell: {
118
+ id?: string;
119
+ text?: string;
120
+ };
121
+ sortKey?: string | null;
122
+ sortOrder?: SortOrder | null;
123
+ onSortChange?: (key: string, order: SortOrder) => void;
124
+ };
125
+ declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
112
126
 
113
127
  type Pagination$1 = {
114
128
  totalCount: number;
@@ -124,4 +138,4 @@ type Pagination$1 = {
124
138
 
125
139
  declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element | null;
126
140
 
127
- export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, type UserData };
141
+ export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };
package/dist/index.js CHANGED
@@ -62,7 +62,8 @@ __export(index_exports, {
62
62
  CustomBreadcrumb: () => breadcrumb_default,
63
63
  Grid: () => grid_default,
64
64
  Navbar: () => Navbar,
65
- Pagination: () => pagination_default
65
+ Pagination: () => pagination_default,
66
+ SortableHeaderCell: () => sortableHeaderCell_default
66
67
  });
67
68
  module.exports = __toCommonJS(index_exports);
68
69
 
@@ -1948,39 +1949,6 @@ var breadcrumb_default = CustomBreadcrumb;
1948
1949
  var import_react6 = require("react");
1949
1950
  var import_react_grid = require("@svar-ui/react-grid");
1950
1951
 
1951
- // src/components/custom/grid/sortableHeaderCell.tsx
1952
- var import_lucide_react12 = require("lucide-react");
1953
- var import_jsx_runtime23 = require("react/jsx-runtime");
1954
- function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
1955
- if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: cell == null ? void 0 : cell.text });
1956
- const active = sortKey === cell.id;
1957
- const handleClick = () => {
1958
- if (!onSortChange || !cell.id) return;
1959
- if (!active) {
1960
- onSortChange(cell.id, "asc");
1961
- return;
1962
- }
1963
- if (sortOrder === "asc") {
1964
- onSortChange(cell.id, "desc");
1965
- return;
1966
- }
1967
- onSortChange("", null);
1968
- };
1969
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1970
- "div",
1971
- {
1972
- onClick: handleClick,
1973
- className: "cursor-pointer flex items-center gap-2 justify-between select-none",
1974
- children: [
1975
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: cell.text }),
1976
- !active && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
1977
- active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MoveUp, { className: "w-4 h-4" }))
1978
- ]
1979
- }
1980
- );
1981
- }
1982
- var sortableHeaderCell_default = SortableHeaderCell;
1983
-
1984
1952
  // src/utils/exportPdf.ts
1985
1953
  var import_jspdf = __toESM(require("jspdf"));
1986
1954
  var import_jspdf_autotable = __toESM(require("jspdf-autotable"));
@@ -2013,12 +1981,13 @@ function exportExcel(rows, name) {
2013
1981
 
2014
1982
  // src/components/custom/grid/gridHeader.tsx
2015
1983
  var import_react5 = require("react");
2016
- var import_lucide_react13 = require("lucide-react");
2017
- var import_jsx_runtime24 = require("react/jsx-runtime");
1984
+ var import_lucide_react12 = require("lucide-react");
1985
+ var import_jsx_runtime23 = require("react/jsx-runtime");
2018
1986
  var GridHeader = ({
2019
1987
  onPdf,
2020
1988
  onExcel,
2021
- onSearch,
1989
+ onSearch = () => {
1990
+ },
2022
1991
  download,
2023
1992
  search,
2024
1993
  searchValue,
@@ -2032,9 +2001,7 @@ var GridHeader = ({
2032
2001
  const [filter, setFilter] = (0, import_react5.useState)({});
2033
2002
  const downloadRef = (0, import_react5.useRef)(null);
2034
2003
  const filterRef = (0, import_react5.useRef)(null);
2035
- const selectedColumn = filterList.find(
2036
- (f) => f.columnName === filter.column
2037
- );
2004
+ const selectedColumn = filterList.find((f) => f.columnName === filter.column);
2038
2005
  const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
2039
2006
  (op) => op.label === filter.operator
2040
2007
  );
@@ -2059,26 +2026,26 @@ var GridHeader = ({
2059
2026
  document.addEventListener("mousedown", handleClickOutside);
2060
2027
  return () => document.removeEventListener("mousedown", handleClickOutside);
2061
2028
  }, []);
2062
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-end gap-4 items-center", children: [
2063
- filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: filterRef, children: [
2064
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2029
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-end gap-4 items-center", children: [
2030
+ filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
2031
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2065
2032
  "button",
2066
2033
  {
2067
2034
  onClick: () => setFilterMenu((p) => !p),
2068
2035
  className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition cursor-pointer",
2069
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.ListFilter, { size: 18 })
2036
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 18 })
2070
2037
  }
2071
2038
  ),
2072
- filterMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 p-3 rounded-md border bg-background shadow-lg z-50 flex items-center gap-2", children: [
2073
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2039
+ filterMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 p-3 rounded-md border bg-background shadow-lg z-50 flex items-center gap-2", children: [
2040
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2074
2041
  "button",
2075
2042
  {
2076
2043
  onClick: clearFilters,
2077
2044
  className: "mr-auto p-2 rounded-md hover:bg-destructive bg-destructive/40 transition cursor-pointer",
2078
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.X, { size: 16 })
2045
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
2079
2046
  }
2080
2047
  ),
2081
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2048
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2082
2049
  "select",
2083
2050
  {
2084
2051
  value: (_a = filter.column) != null ? _a : "",
@@ -2089,12 +2056,12 @@ var GridHeader = ({
2089
2056
  }),
2090
2057
  className: "px-4 py-2 rounded-md bg-input text-sm",
2091
2058
  children: [
2092
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Columns" }),
2093
- filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: f.columnName, children: f.columnName }, f.columnName))
2059
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Columns" }),
2060
+ filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: f.columnName, children: f.columnName }, f.columnName))
2094
2061
  ]
2095
2062
  }
2096
2063
  ),
2097
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2064
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2098
2065
  "select",
2099
2066
  {
2100
2067
  value: (_b = filter.operator) != null ? _b : "",
@@ -2105,12 +2072,12 @@ var GridHeader = ({
2105
2072
  }),
2106
2073
  className: "px-4 py-2 rounded-md bg-input text-sm",
2107
2074
  children: [
2108
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Operator" }),
2109
- selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: op.label, children: op.label }, op.label))
2075
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Operator" }),
2076
+ selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: op.label, children: op.label }, op.label))
2110
2077
  ]
2111
2078
  }
2112
2079
  ),
2113
- (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2080
+ (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2114
2081
  "input",
2115
2082
  {
2116
2083
  placeholder: "Filter value",
@@ -2119,31 +2086,31 @@ var GridHeader = ({
2119
2086
  className: "px-4 py-2 rounded-md bg-input text-sm"
2120
2087
  }
2121
2088
  ),
2122
- (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2089
+ (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2123
2090
  "select",
2124
2091
  {
2125
2092
  value: (_d = filter.value) != null ? _d : "",
2126
2093
  onChange: (e) => updateFilter({ value: e.target.value }),
2127
2094
  className: "px-4 py-2 rounded-md bg-input text-sm",
2128
2095
  children: [
2129
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Value" }),
2130
- (_e = selectedOperator.options) == null ? void 0 : _e.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
2096
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Value" }),
2097
+ (_e = selectedOperator.options) == null ? void 0 : _e.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
2131
2098
  ]
2132
2099
  }
2133
2100
  )
2134
2101
  ] })
2135
2102
  ] }),
2136
- download && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: downloadRef, children: [
2137
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2103
+ download && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: downloadRef, children: [
2104
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2138
2105
  "button",
2139
2106
  {
2140
2107
  onClick: () => setDownloadMenu((p) => !p),
2141
2108
  className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition",
2142
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Download, { size: 18 })
2109
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Download, { size: 18 })
2143
2110
  }
2144
2111
  ),
2145
- downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
2146
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2112
+ downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
2113
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2147
2114
  "button",
2148
2115
  {
2149
2116
  onClick: () => {
@@ -2152,12 +2119,12 @@ var GridHeader = ({
2152
2119
  },
2153
2120
  className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
2154
2121
  children: [
2155
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 14 }),
2122
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileText, { size: 14 }),
2156
2123
  "PDF"
2157
2124
  ]
2158
2125
  }
2159
2126
  ),
2160
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2127
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2161
2128
  "button",
2162
2129
  {
2163
2130
  onClick: () => {
@@ -2166,16 +2133,16 @@ var GridHeader = ({
2166
2133
  },
2167
2134
  className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
2168
2135
  children: [
2169
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileSpreadsheet, { size: 14 }),
2136
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileSpreadsheet, { size: 14 }),
2170
2137
  "Excel"
2171
2138
  ]
2172
2139
  }
2173
2140
  )
2174
2141
  ] })
2175
2142
  ] }),
2176
- search && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "py-2 px-4 w-[20rem] rounded-md border border-input bg-background flex items-center gap-2 text-sm", children: [
2177
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { className: "w-4 h-4" }),
2178
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2143
+ search && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "py-2 px-4 w-[20rem] rounded-md border border-input bg-background flex items-center gap-2 text-sm", children: [
2144
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { className: "w-4 h-4" }),
2145
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2179
2146
  "input",
2180
2147
  {
2181
2148
  placeholder: `Search by ${searchkey}`,
@@ -2190,125 +2157,135 @@ var GridHeader = ({
2190
2157
  var gridHeader_default = GridHeader;
2191
2158
 
2192
2159
  // src/components/custom/grid/index.tsx
2193
- var import_jsx_runtime25 = require("react/jsx-runtime");
2194
- function Grid(_a) {
2195
- var _b = _a, {
2196
- data,
2197
- columns,
2198
- sortKey,
2199
- sortOrder,
2200
- onSortChange,
2201
- onExportPdf,
2202
- onExportExcel,
2203
- downloadable = true,
2204
- fileNmae,
2205
- fonts,
2206
- onFilterChange
2207
- } = _b, rest = __objRest(_b, [
2208
- "data",
2209
- "columns",
2210
- "sortKey",
2211
- "sortOrder",
2212
- "onSortChange",
2213
- "onExportPdf",
2214
- "onExportExcel",
2215
- "downloadable",
2216
- "fileNmae",
2217
- "fonts",
2218
- "onFilterChange"
2219
- ]);
2220
- const apiRef = (0, import_react6.useRef)(null);
2221
- const svarColumns = columns.map((col) => {
2222
- const _a2 = col, { sortable, header } = _a2, columnProps = __objRest(_a2, ["sortable", "header"]);
2223
- if (!sortable) {
2224
- return __spreadProps(__spreadValues({}, columnProps), {
2225
- header
2226
- });
2227
- }
2228
- return __spreadProps(__spreadValues({}, columnProps), {
2229
- header: {
2230
- text: header,
2231
- cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2232
- sortableHeaderCell_default,
2233
- __spreadProps(__spreadValues({}, props), {
2234
- sortKey,
2235
- sortOrder,
2236
- onSortChange
2237
- })
2238
- )
2239
- }
2240
- });
2241
- });
2242
- const init = (api) => {
2243
- apiRef.current = api;
2244
- };
2245
- (0, import_react6.useEffect)(() => {
2246
- if (!apiRef.current || !columns.length) return;
2247
- const resize = () => {
2160
+ var import_jsx_runtime24 = require("react/jsx-runtime");
2161
+ var Grid = (0, import_react6.forwardRef)(
2162
+ (_a, ref) => {
2163
+ var _b = _a, {
2164
+ data,
2165
+ columns,
2166
+ sortKey,
2167
+ sortOrder,
2168
+ onSortChange,
2169
+ onExportPdf,
2170
+ onExportExcel,
2171
+ downloadable = true,
2172
+ fileName,
2173
+ fonts,
2174
+ onFilterChange
2175
+ } = _b, rest = __objRest(_b, [
2176
+ "data",
2177
+ "columns",
2178
+ "sortKey",
2179
+ "sortOrder",
2180
+ "onSortChange",
2181
+ "onExportPdf",
2182
+ "onExportExcel",
2183
+ "downloadable",
2184
+ "fileName",
2185
+ "fonts",
2186
+ "onFilterChange"
2187
+ ]);
2188
+ const apiRef = (0, import_react6.useRef)(null);
2189
+ (0, import_react6.useImperativeHandle)(ref, () => apiRef.current, []);
2190
+ const resizeColumns = (0, import_react6.useCallback)(() => {
2191
+ const api = apiRef.current;
2192
+ if (!api) return;
2248
2193
  columns.forEach((col) => {
2249
- var _a2;
2250
- if (!(col == null ? void 0 : col.width)) {
2251
- (_a2 = apiRef.current) == null ? void 0 : _a2.exec("resize-column", {
2252
- id: col.id,
2253
- auto: "data"
2254
- });
2255
- }
2194
+ api.exec("resize-column", {
2195
+ id: col.id,
2196
+ auto: "data"
2197
+ });
2256
2198
  });
2257
- };
2258
- const run = async () => {
2259
- var _a2;
2260
- if ((_a2 = document == null ? void 0 : document.fonts) == null ? void 0 : _a2.ready) {
2261
- await document.fonts.ready;
2262
- }
2263
- requestAnimationFrame(() => {
2264
- requestAnimationFrame(resize);
2199
+ }, [columns, data]);
2200
+ const init = (0, import_react6.useCallback)((api) => {
2201
+ apiRef.current = api;
2202
+ resizeColumns();
2203
+ }, [resizeColumns]);
2204
+ const getSelectedData = () => {
2205
+ var _a2, _b2;
2206
+ const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
2207
+ let selectedData = data.filter((row) => {
2208
+ return selected.includes(row.id);
2265
2209
  });
2210
+ return selectedData;
2266
2211
  };
2267
- run();
2268
- }, [columns, data]);
2269
- const getSelectedData = () => {
2270
- var _a2, _b2;
2271
- const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
2272
- let selectedData = data.filter((row) => {
2273
- return selected.includes(row.id);
2274
- });
2275
- return selectedData;
2276
- };
2277
- const handleExportPdf = () => {
2278
- const selected = getSelectedData();
2279
- if (selected.length) {
2280
- exportPdf(selected, fileNmae);
2281
- } else {
2282
- onExportPdf == null ? void 0 : onExportPdf();
2212
+ const handleExportPdf = (0, import_react6.useCallback)(() => {
2213
+ const selected = getSelectedData();
2214
+ if (selected.length) {
2215
+ exportPdf(selected, fileName);
2216
+ } else {
2217
+ onExportPdf == null ? void 0 : onExportPdf();
2218
+ }
2219
+ }, [getSelectedData, exportPdf, onExportPdf, fileName]);
2220
+ const handleExportExcel = (0, import_react6.useCallback)(() => {
2221
+ const selected = getSelectedData();
2222
+ if (selected.length) {
2223
+ exportExcel(selected, fileName);
2224
+ } else {
2225
+ onExportExcel == null ? void 0 : onExportExcel();
2226
+ }
2227
+ }, [getSelectedData, exportExcel, onExportExcel, fileName]);
2228
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-col gap-4 overflow-hidden", children: [
2229
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2230
+ gridHeader_default,
2231
+ {
2232
+ onPdf: handleExportPdf,
2233
+ onExcel: handleExportExcel,
2234
+ download: downloadable,
2235
+ search: rest.search,
2236
+ searchkey: rest.searchkey,
2237
+ onSearch: rest.onSearch,
2238
+ searchValue: rest.searchValue,
2239
+ filterList: rest.filterList,
2240
+ onFilterChange
2241
+ }
2242
+ ),
2243
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-grid h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2244
+ import_react_grid.Grid,
2245
+ __spreadProps(__spreadValues({}, rest), {
2246
+ data,
2247
+ columns,
2248
+ init,
2249
+ onUpdateCell: () => resizeColumns()
2250
+ })
2251
+ ) }) }) })
2252
+ ] });
2253
+ }
2254
+ );
2255
+ var grid_default = Grid;
2256
+
2257
+ // src/components/custom/grid/sortableHeaderCell.tsx
2258
+ var import_lucide_react13 = require("lucide-react");
2259
+ var import_jsx_runtime25 = require("react/jsx-runtime");
2260
+ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
2261
+ if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: cell == null ? void 0 : cell.text });
2262
+ const active = sortKey === cell.id;
2263
+ const handleClick = () => {
2264
+ if (!onSortChange || !cell.id) return;
2265
+ if (!active) {
2266
+ onSortChange(cell.id, "asc");
2267
+ return;
2283
2268
  }
2284
- };
2285
- const handleExportExcel = () => {
2286
- const selected = getSelectedData();
2287
- if (selected.length) {
2288
- exportExcel(selected, fileNmae);
2289
- } else {
2290
- onExportExcel == null ? void 0 : onExportExcel();
2269
+ if (sortOrder === "asc") {
2270
+ onSortChange(cell.id, "desc");
2271
+ return;
2291
2272
  }
2273
+ onSortChange("", null);
2292
2274
  };
2293
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full flex flex-col gap-4 overflow-hidden", children: [
2294
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2295
- gridHeader_default,
2296
- {
2297
- onPdf: handleExportPdf,
2298
- onExcel: handleExportExcel,
2299
- download: downloadable,
2300
- search: rest.search,
2301
- searchkey: rest.searchkey,
2302
- onSearch: rest.onSearch,
2303
- searchValue: rest.searchValue,
2304
- filterList: rest.filterList,
2305
- onFilterChange
2306
- }
2307
- ),
2308
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-grid h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns: svarColumns, init })) }) }) })
2309
- ] });
2275
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
2276
+ "div",
2277
+ {
2278
+ onClick: handleClick,
2279
+ className: "cursor-pointer flex items-center gap-2 justify-between select-none",
2280
+ children: [
2281
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: cell.text }),
2282
+ !active && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
2283
+ active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.MoveUp, { className: "w-4 h-4" }))
2284
+ ]
2285
+ }
2286
+ );
2310
2287
  }
2311
- var grid_default = Grid;
2288
+ var sortableHeaderCell_default = SortableHeaderCell;
2312
2289
 
2313
2290
  // src/utils/pagination.ts
2314
2291
  function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
@@ -2431,5 +2408,6 @@ var pagination_default = Pagination;
2431
2408
  CustomBreadcrumb,
2432
2409
  Grid,
2433
2410
  Navbar,
2434
- Pagination
2411
+ Pagination,
2412
+ SortableHeaderCell
2435
2413
  });