baaz-custom-components 5.0.28 → 5.0.30

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 (5) hide show
  1. package/dist/index.d.mts +4 -2
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +42 -25
  4. package/dist/index.mjs +42 -25
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -79,6 +79,7 @@ type Filters = {
79
79
  label: string;
80
80
  value: string;
81
81
  }[];
82
+ key?: string;
82
83
  }[];
83
84
  };
84
85
  type GridProps = {
@@ -117,13 +118,14 @@ type MultiFilterPayload = {
117
118
  formatted: any[];
118
119
  action: "apply" | "clear";
119
120
  };
120
- type FilterValue = string | {
121
+ type FilterValue = string | number | {
121
122
  start?: string;
122
123
  end?: string;
123
124
  };
124
125
  type ActiveFilter = {
125
126
  column?: string;
126
127
  operator?: string;
128
+ key?: string;
127
129
  value?: FilterValue;
128
130
  };
129
131
 
@@ -152,6 +154,6 @@ type Pagination$1 = {
152
154
  sizeChangerOptions?: number[];
153
155
  };
154
156
 
155
- declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element | null;
157
+ declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
156
158
 
157
159
  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
@@ -79,6 +79,7 @@ type Filters = {
79
79
  label: string;
80
80
  value: string;
81
81
  }[];
82
+ key?: string;
82
83
  }[];
83
84
  };
84
85
  type GridProps = {
@@ -117,13 +118,14 @@ type MultiFilterPayload = {
117
118
  formatted: any[];
118
119
  action: "apply" | "clear";
119
120
  };
120
- type FilterValue = string | {
121
+ type FilterValue = string | number | {
121
122
  start?: string;
122
123
  end?: string;
123
124
  };
124
125
  type ActiveFilter = {
125
126
  column?: string;
126
127
  operator?: string;
128
+ key?: string;
127
129
  value?: FilterValue;
128
130
  };
129
131
 
@@ -152,6 +154,6 @@ type Pagination$1 = {
152
154
  sizeChangerOptions?: number[];
153
155
  };
154
156
 
155
- declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element | null;
157
+ declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
156
158
 
157
159
  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
@@ -2010,10 +2010,11 @@ var Filters = ({
2010
2010
  }, [conditions]);
2011
2011
  const activeFilterCount = (initialFilters == null ? void 0 : initialFilters.length) || 0;
2012
2012
  const formatFiltersForApi = (conditions2) => {
2013
- return conditions2.filter(isValidFilter).map(({ column, operator, value, logic }, index) => ({
2013
+ return conditions2.filter(isValidFilter).map(({ column, operator, value, logic, key }, index) => ({
2014
2014
  column,
2015
2015
  operator,
2016
2016
  value,
2017
+ key,
2017
2018
  logic: index === 0 ? "WHERE" : logic != null ? logic : "AND"
2018
2019
  }));
2019
2020
  };
@@ -2096,6 +2097,9 @@ var Filters = ({
2096
2097
  document.addEventListener("mousedown", handleClickOutside);
2097
2098
  return () => document.removeEventListener("mousedown", handleClickOutside);
2098
2099
  }, []);
2100
+ const selectedColumns = (0, import_react5.useMemo)(() => {
2101
+ return conditions.map((c) => c.column).filter(Boolean);
2102
+ }, [conditions]);
2099
2103
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
2100
2104
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2101
2105
  "button",
@@ -2104,7 +2108,7 @@ var Filters = ({
2104
2108
  className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm cursor-pointer",
2105
2109
  children: [
2106
2110
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 16 }),
2107
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden md:block", children: "Filters" }),
2111
+ "Filters",
2108
2112
  activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ml-1 px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full font-medium", children: activeFilterCount })
2109
2113
  ]
2110
2114
  }
@@ -2136,7 +2140,7 @@ var Filters = ({
2136
2140
  )
2137
2141
  ] }),
2138
2142
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "space-y-3 w-full flex flex-col overflow-auto", children: conditions.map((condition, index) => {
2139
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
2143
+ var _a, _b, _c, _d, _e, _f, _g, _h;
2140
2144
  const selectedColumn = filterList.find(
2141
2145
  (f) => f.columnName.value === condition.column
2142
2146
  );
@@ -2175,14 +2179,18 @@ var Filters = ({
2175
2179
  className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
2176
2180
  children: [
2177
2181
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Column" }),
2178
- filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2179
- "option",
2180
- {
2181
- value: f.columnName.value,
2182
- children: f.columnName.label
2183
- },
2184
- f.columnName.value
2185
- ))
2182
+ filterList.map((f) => {
2183
+ const isUsed = selectedColumns.includes(f.columnName.value) && condition.column !== f.columnName.value;
2184
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2185
+ "option",
2186
+ {
2187
+ value: f.columnName.value,
2188
+ disabled: isUsed,
2189
+ children: f.columnName.label
2190
+ },
2191
+ f.columnName.value
2192
+ );
2193
+ })
2186
2194
  ]
2187
2195
  }
2188
2196
  ),
@@ -2191,10 +2199,17 @@ var Filters = ({
2191
2199
  {
2192
2200
  value: (_c = condition.operator) != null ? _c : "",
2193
2201
  disabled: !selectedColumn,
2194
- onChange: (e) => updateCondition(condition.id, {
2195
- operator: e.target.value,
2196
- value: void 0
2197
- }),
2202
+ onChange: (e) => {
2203
+ const operatorValue = e.target.value;
2204
+ const operator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
2205
+ (op) => op.value === operatorValue
2206
+ );
2207
+ updateCondition(condition.id, {
2208
+ operator: e.target.value,
2209
+ key: operator == null ? void 0 : operator.key,
2210
+ value: void 0
2211
+ });
2212
+ },
2198
2213
  className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none",
2199
2214
  children: [
2200
2215
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Operator" }),
@@ -2237,10 +2252,13 @@ var Filters = ({
2237
2252
  "input",
2238
2253
  {
2239
2254
  type: "date",
2240
- value: (_g = condition.value) != null ? _g : "",
2241
- onChange: (e) => updateCondition(condition.id, {
2242
- value: e.target.value
2243
- }),
2255
+ value: condition.value ? new Date(condition.value).toISOString().split("T")[0] : "",
2256
+ onChange: (e) => {
2257
+ const epoch = new Date(e.target.value).getTime();
2258
+ updateCondition(condition.id, {
2259
+ value: epoch
2260
+ });
2261
+ },
2244
2262
  className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
2245
2263
  }
2246
2264
  ),
@@ -2249,10 +2267,10 @@ var Filters = ({
2249
2267
  "input",
2250
2268
  {
2251
2269
  type: "date",
2252
- value: (_i = (_h = condition.value) == null ? void 0 : _h.start) != null ? _i : "",
2270
+ value: ((_g = condition.value) == null ? void 0 : _g.start) ? new Date(condition.value.start).toISOString().split("T")[0] : "",
2253
2271
  onChange: (e) => updateCondition(condition.id, {
2254
2272
  value: __spreadProps(__spreadValues({}, condition.value), {
2255
- start: e.target.value
2273
+ start: new Date(e.target.value).getTime()
2256
2274
  })
2257
2275
  }),
2258
2276
  className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
@@ -2262,10 +2280,10 @@ var Filters = ({
2262
2280
  "input",
2263
2281
  {
2264
2282
  type: "date",
2265
- value: (_k = (_j = condition.value) == null ? void 0 : _j.end) != null ? _k : "",
2283
+ value: ((_h = condition.value) == null ? void 0 : _h.end) ? new Date(condition.value.end).toISOString().split("T")[0] : "",
2266
2284
  onChange: (e) => updateCondition(condition.id, {
2267
2285
  value: __spreadProps(__spreadValues({}, condition.value), {
2268
- end: e.target.value
2286
+ end: new Date(e.target.value).getTime()
2269
2287
  })
2270
2288
  }),
2271
2289
  className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
@@ -2410,7 +2428,7 @@ var GridHeader = ({
2410
2428
  search && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2411
2429
  "div",
2412
2430
  {
2413
- className: `absolute left-0 md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
2431
+ className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
2414
2432
  children: !searchOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2415
2433
  "button",
2416
2434
  {
@@ -2655,7 +2673,6 @@ function Pagination({
2655
2673
  showSizeChanger = false,
2656
2674
  sizeChangerOptions = [10, 20, 50, 100]
2657
2675
  }) {
2658
- if (totalPages <= 1) return null;
2659
2676
  const pages = getPaginationRange(currentPage, totalPages);
2660
2677
  const handlePageChange = (page) => {
2661
2678
  if (page < 1 || page > totalPages) return;
package/dist/index.mjs CHANGED
@@ -1985,10 +1985,11 @@ var Filters = ({
1985
1985
  }, [conditions]);
1986
1986
  const activeFilterCount = (initialFilters == null ? void 0 : initialFilters.length) || 0;
1987
1987
  const formatFiltersForApi = (conditions2) => {
1988
- return conditions2.filter(isValidFilter).map(({ column, operator, value, logic }, index) => ({
1988
+ return conditions2.filter(isValidFilter).map(({ column, operator, value, logic, key }, index) => ({
1989
1989
  column,
1990
1990
  operator,
1991
1991
  value,
1992
+ key,
1992
1993
  logic: index === 0 ? "WHERE" : logic != null ? logic : "AND"
1993
1994
  }));
1994
1995
  };
@@ -2071,6 +2072,9 @@ var Filters = ({
2071
2072
  document.addEventListener("mousedown", handleClickOutside);
2072
2073
  return () => document.removeEventListener("mousedown", handleClickOutside);
2073
2074
  }, []);
2075
+ const selectedColumns = useMemo3(() => {
2076
+ return conditions.map((c) => c.column).filter(Boolean);
2077
+ }, [conditions]);
2074
2078
  return /* @__PURE__ */ jsxs17("div", { className: "relative", ref: filterRef, children: [
2075
2079
  /* @__PURE__ */ jsxs17(
2076
2080
  "button",
@@ -2079,7 +2083,7 @@ var Filters = ({
2079
2083
  className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm cursor-pointer",
2080
2084
  children: [
2081
2085
  /* @__PURE__ */ jsx23(ListFilter, { size: 16 }),
2082
- /* @__PURE__ */ jsx23("span", { className: "hidden md:block", children: "Filters" }),
2086
+ "Filters",
2083
2087
  activeFilterCount > 0 && /* @__PURE__ */ jsx23("span", { className: "ml-1 px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full font-medium", children: activeFilterCount })
2084
2088
  ]
2085
2089
  }
@@ -2111,7 +2115,7 @@ var Filters = ({
2111
2115
  )
2112
2116
  ] }),
2113
2117
  /* @__PURE__ */ jsx23("div", { className: "space-y-3 w-full flex flex-col overflow-auto", children: conditions.map((condition, index) => {
2114
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
2118
+ var _a, _b, _c, _d, _e, _f, _g, _h;
2115
2119
  const selectedColumn = filterList.find(
2116
2120
  (f) => f.columnName.value === condition.column
2117
2121
  );
@@ -2150,14 +2154,18 @@ var Filters = ({
2150
2154
  className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
2151
2155
  children: [
2152
2156
  /* @__PURE__ */ jsx23("option", { value: "", disabled: true, children: "Column" }),
2153
- filterList.map((f) => /* @__PURE__ */ jsx23(
2154
- "option",
2155
- {
2156
- value: f.columnName.value,
2157
- children: f.columnName.label
2158
- },
2159
- f.columnName.value
2160
- ))
2157
+ filterList.map((f) => {
2158
+ const isUsed = selectedColumns.includes(f.columnName.value) && condition.column !== f.columnName.value;
2159
+ return /* @__PURE__ */ jsx23(
2160
+ "option",
2161
+ {
2162
+ value: f.columnName.value,
2163
+ disabled: isUsed,
2164
+ children: f.columnName.label
2165
+ },
2166
+ f.columnName.value
2167
+ );
2168
+ })
2161
2169
  ]
2162
2170
  }
2163
2171
  ),
@@ -2166,10 +2174,17 @@ var Filters = ({
2166
2174
  {
2167
2175
  value: (_c = condition.operator) != null ? _c : "",
2168
2176
  disabled: !selectedColumn,
2169
- onChange: (e) => updateCondition(condition.id, {
2170
- operator: e.target.value,
2171
- value: void 0
2172
- }),
2177
+ onChange: (e) => {
2178
+ const operatorValue = e.target.value;
2179
+ const operator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
2180
+ (op) => op.value === operatorValue
2181
+ );
2182
+ updateCondition(condition.id, {
2183
+ operator: e.target.value,
2184
+ key: operator == null ? void 0 : operator.key,
2185
+ value: void 0
2186
+ });
2187
+ },
2173
2188
  className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none",
2174
2189
  children: [
2175
2190
  /* @__PURE__ */ jsx23("option", { value: "", disabled: true, children: "Operator" }),
@@ -2212,10 +2227,13 @@ var Filters = ({
2212
2227
  "input",
2213
2228
  {
2214
2229
  type: "date",
2215
- value: (_g = condition.value) != null ? _g : "",
2216
- onChange: (e) => updateCondition(condition.id, {
2217
- value: e.target.value
2218
- }),
2230
+ value: condition.value ? new Date(condition.value).toISOString().split("T")[0] : "",
2231
+ onChange: (e) => {
2232
+ const epoch = new Date(e.target.value).getTime();
2233
+ updateCondition(condition.id, {
2234
+ value: epoch
2235
+ });
2236
+ },
2219
2237
  className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
2220
2238
  }
2221
2239
  ),
@@ -2224,10 +2242,10 @@ var Filters = ({
2224
2242
  "input",
2225
2243
  {
2226
2244
  type: "date",
2227
- value: (_i = (_h = condition.value) == null ? void 0 : _h.start) != null ? _i : "",
2245
+ value: ((_g = condition.value) == null ? void 0 : _g.start) ? new Date(condition.value.start).toISOString().split("T")[0] : "",
2228
2246
  onChange: (e) => updateCondition(condition.id, {
2229
2247
  value: __spreadProps(__spreadValues({}, condition.value), {
2230
- start: e.target.value
2248
+ start: new Date(e.target.value).getTime()
2231
2249
  })
2232
2250
  }),
2233
2251
  className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
@@ -2237,10 +2255,10 @@ var Filters = ({
2237
2255
  "input",
2238
2256
  {
2239
2257
  type: "date",
2240
- value: (_k = (_j = condition.value) == null ? void 0 : _j.end) != null ? _k : "",
2258
+ value: ((_h = condition.value) == null ? void 0 : _h.end) ? new Date(condition.value.end).toISOString().split("T")[0] : "",
2241
2259
  onChange: (e) => updateCondition(condition.id, {
2242
2260
  value: __spreadProps(__spreadValues({}, condition.value), {
2243
- end: e.target.value
2261
+ end: new Date(e.target.value).getTime()
2244
2262
  })
2245
2263
  }),
2246
2264
  className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
@@ -2385,7 +2403,7 @@ var GridHeader = ({
2385
2403
  search && /* @__PURE__ */ jsx24("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx24(
2386
2404
  "div",
2387
2405
  {
2388
- className: `absolute left-0 md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
2406
+ className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
2389
2407
  children: !searchOpen ? /* @__PURE__ */ jsx24(
2390
2408
  "button",
2391
2409
  {
@@ -2630,7 +2648,6 @@ function Pagination({
2630
2648
  showSizeChanger = false,
2631
2649
  sizeChangerOptions = [10, 20, 50, 100]
2632
2650
  }) {
2633
- if (totalPages <= 1) return null;
2634
2651
  const pages = getPaginationRange(currentPage, totalPages);
2635
2652
  const handlePageChange = (page) => {
2636
2653
  if (page < 1 || page > totalPages) return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baaz-custom-components",
3
- "version": "5.0.28",
3
+ "version": "5.0.30",
4
4
  "private": false,
5
5
  "sideEffects": false,
6
6
  "main": "dist/index.js",