@rufous/ui 0.1.67 → 0.1.68

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.
@@ -36,13 +36,18 @@ module.exports = __toCommonJS(DataGrid_exports);
36
36
  var import_react = __toESM(require("react"), 1);
37
37
  var import_lucide_react = require("lucide-react");
38
38
  function DataGrid({
39
- columns: initialColumns,
39
+ columns: initialColumnsProp,
40
40
  data,
41
41
  actions,
42
42
  pageSize: initialPageSize = 10,
43
43
  pageSizeOptions = [5, 10, 25, 50],
44
44
  title
45
45
  }) {
46
+ const initialColumns = (0, import_react.useMemo)(() => initialColumnsProp.map((col) => ({
47
+ ...col,
48
+ key: col.key || col.field || "",
49
+ header: col.header || col.headerName || ""
50
+ })), [initialColumnsProp]);
46
51
  const [columns, setColumns] = (0, import_react.useState)(initialColumns);
47
52
  const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
48
53
  const widths = {};
@@ -67,8 +72,34 @@ function DataGrid({
67
72
  const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
68
73
  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
69
74
  const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
70
- { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
75
+ { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
71
76
  ]);
77
+ (0, import_react.useEffect)(() => {
78
+ setColumns((prevColumns) => {
79
+ return initialColumns.map((newCol) => {
80
+ const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
81
+ if (!prevCol) return newCol;
82
+ return {
83
+ ...newCol,
84
+ hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
85
+ pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
86
+ };
87
+ });
88
+ });
89
+ }, [initialColumns]);
90
+ (0, import_react.useEffect)(() => {
91
+ setColumnWidths((prev) => {
92
+ const next = { ...prev };
93
+ initialColumns.forEach((col) => {
94
+ const key = String(col.key);
95
+ if (next[key] === void 0) {
96
+ const w = col.width || 200;
97
+ next[key] = typeof w === "number" ? w : parseInt(w);
98
+ }
99
+ });
100
+ return next;
101
+ });
102
+ }, [initialColumns]);
72
103
  const [colSearch, setColSearch] = (0, import_react.useState)("");
73
104
  (0, import_react.useEffect)(() => {
74
105
  const handleMouseMove = (e) => {
@@ -3,6 +3,6 @@ import { DataGridProps } from './types.cjs';
3
3
 
4
4
  declare function DataGrid<T extends {
5
5
  id: string | number;
6
- }>({ columns: initialColumns, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
6
+ }>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
7
7
 
8
8
  export { DataGrid, DataGrid as default };
@@ -3,6 +3,6 @@ import { DataGridProps } from './types.js';
3
3
 
4
4
  declare function DataGrid<T extends {
5
5
  id: string | number;
6
- }>({ columns: initialColumns, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
6
+ }>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
7
7
 
8
8
  export { DataGrid, DataGrid as default };
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  DataGrid,
3
3
  DataGrid_default
4
- } from "../chunk-IKG2B6JQ.js";
4
+ } from "../chunk-B6EOV25J.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid,
@@ -37,13 +37,18 @@ module.exports = __toCommonJS(DataGrid_exports);
37
37
  var import_react = __toESM(require("react"), 1);
38
38
  var import_lucide_react = require("lucide-react");
39
39
  function DataGrid({
40
- columns: initialColumns,
40
+ columns: initialColumnsProp,
41
41
  data,
42
42
  actions,
43
43
  pageSize: initialPageSize = 10,
44
44
  pageSizeOptions = [5, 10, 25, 50],
45
45
  title
46
46
  }) {
47
+ const initialColumns = (0, import_react.useMemo)(() => initialColumnsProp.map((col) => ({
48
+ ...col,
49
+ key: col.key || col.field || "",
50
+ header: col.header || col.headerName || ""
51
+ })), [initialColumnsProp]);
47
52
  const [columns, setColumns] = (0, import_react.useState)(initialColumns);
48
53
  const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
49
54
  const widths = {};
@@ -68,8 +73,34 @@ function DataGrid({
68
73
  const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
69
74
  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
70
75
  const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
71
- { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
76
+ { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
72
77
  ]);
78
+ (0, import_react.useEffect)(() => {
79
+ setColumns((prevColumns) => {
80
+ return initialColumns.map((newCol) => {
81
+ const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
82
+ if (!prevCol) return newCol;
83
+ return {
84
+ ...newCol,
85
+ hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
86
+ pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
87
+ };
88
+ });
89
+ });
90
+ }, [initialColumns]);
91
+ (0, import_react.useEffect)(() => {
92
+ setColumnWidths((prev) => {
93
+ const next = { ...prev };
94
+ initialColumns.forEach((col) => {
95
+ const key = String(col.key);
96
+ if (next[key] === void 0) {
97
+ const w = col.width || 200;
98
+ next[key] = typeof w === "number" ? w : parseInt(w);
99
+ }
100
+ });
101
+ return next;
102
+ });
103
+ }, [initialColumns]);
73
104
  const [colSearch, setColSearch] = (0, import_react.useState)("");
74
105
  (0, import_react.useEffect)(() => {
75
106
  const handleMouseMove = (e) => {
@@ -1,7 +1,7 @@
1
1
  import "../chunk-7KRG7VNW.js";
2
2
  import {
3
3
  DataGrid
4
- } from "../chunk-IKG2B6JQ.js";
4
+ } from "../chunk-B6EOV25J.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid
@@ -2,8 +2,10 @@ import React__default from 'react';
2
2
 
3
3
  type SortDirection = 'asc' | 'desc' | null;
4
4
  interface Column<T> {
5
- key: keyof T | string;
6
- header: string;
5
+ key?: keyof T | string;
6
+ field?: keyof T | string;
7
+ header?: string;
8
+ headerName?: string;
7
9
  sortable?: boolean;
8
10
  filterable?: boolean;
9
11
  render?: (value: any, item: T) => React__default.ReactNode;
@@ -2,8 +2,10 @@ import React__default from 'react';
2
2
 
3
3
  type SortDirection = 'asc' | 'desc' | null;
4
4
  interface Column<T> {
5
- key: keyof T | string;
6
- header: string;
5
+ key?: keyof T | string;
6
+ field?: keyof T | string;
7
+ header?: string;
8
+ headerName?: string;
7
9
  sortable?: boolean;
8
10
  filterable?: boolean;
9
11
  render?: (value: any, item: T) => React__default.ReactNode;
@@ -58,13 +58,12 @@ import "../chunk-AH6RCYDL.js";
58
58
  import "../chunk-3IBCGGN3.js";
59
59
  import "../chunk-MNPAE2ZF.js";
60
60
  import "../chunk-Q5XKCUE3.js";
61
- import "../chunk-GJGRMMAQ.js";
62
- import "../chunk-GHCM2AWR.js";
61
+ import "../chunk-EB6MPFGC.js";
63
62
  import "../chunk-UPCMMCPQ.js";
64
- import "../chunk-7KRG7VNW.js";
65
- import "../chunk-BOE27BFQ.js";
66
- import "../chunk-S7BNFVQO.js";
67
63
  import "../chunk-X357WQOT.js";
64
+ import "../chunk-7KRG7VNW.js";
65
+ import "../chunk-B6EOV25J.js";
66
+ import "../chunk-GJGRMMAQ.js";
68
67
  import "../chunk-66HHM7VI.js";
69
68
  import "../chunk-QPGJCRBS.js";
70
69
  import "../chunk-U7SARO5B.js";
@@ -72,7 +71,8 @@ import "../chunk-BMMDUQDJ.js";
72
71
  import "../chunk-R3GARAVJ.js";
73
72
  import "../chunk-YRLN3TBF.js";
74
73
  import "../chunk-CTBYVXFP.js";
75
- import "../chunk-IKG2B6JQ.js";
74
+ import "../chunk-BOE27BFQ.js";
75
+ import "../chunk-S7BNFVQO.js";
76
76
  import "../chunk-LI4N7JWK.js";
77
77
  export {
78
78
  BaseDialog_default as default
@@ -58,13 +58,12 @@ import "../chunk-AH6RCYDL.js";
58
58
  import "../chunk-3IBCGGN3.js";
59
59
  import "../chunk-MNPAE2ZF.js";
60
60
  import "../chunk-Q5XKCUE3.js";
61
- import "../chunk-GJGRMMAQ.js";
62
- import "../chunk-GHCM2AWR.js";
61
+ import "../chunk-EB6MPFGC.js";
63
62
  import "../chunk-UPCMMCPQ.js";
64
- import "../chunk-7KRG7VNW.js";
65
- import "../chunk-BOE27BFQ.js";
66
- import "../chunk-S7BNFVQO.js";
67
63
  import "../chunk-X357WQOT.js";
64
+ import "../chunk-7KRG7VNW.js";
65
+ import "../chunk-B6EOV25J.js";
66
+ import "../chunk-GJGRMMAQ.js";
68
67
  import "../chunk-66HHM7VI.js";
69
68
  import "../chunk-QPGJCRBS.js";
70
69
  import "../chunk-U7SARO5B.js";
@@ -72,7 +71,8 @@ import "../chunk-BMMDUQDJ.js";
72
71
  import "../chunk-R3GARAVJ.js";
73
72
  import "../chunk-YRLN3TBF.js";
74
73
  import "../chunk-CTBYVXFP.js";
75
- import "../chunk-IKG2B6JQ.js";
74
+ import "../chunk-BOE27BFQ.js";
75
+ import "../chunk-S7BNFVQO.js";
76
76
  import "../chunk-LI4N7JWK.js";
77
77
  export {
78
78
  BaseDialog_default as BaseDialog
@@ -1,10 +1,10 @@
1
1
  import {
2
2
  AddressLookup_default
3
- } from "../chunk-GHCM2AWR.js";
3
+ } from "../chunk-EB6MPFGC.js";
4
4
  import "../chunk-UPCMMCPQ.js";
5
+ import "../chunk-CTBYVXFP.js";
5
6
  import "../chunk-BOE27BFQ.js";
6
7
  import "../chunk-S7BNFVQO.js";
7
- import "../chunk-CTBYVXFP.js";
8
8
  import "../chunk-LI4N7JWK.js";
9
9
  export {
10
10
  AddressLookup_default as default
@@ -19,13 +19,18 @@ import {
19
19
  Plus
20
20
  } from "lucide-react";
21
21
  function DataGrid({
22
- columns: initialColumns,
22
+ columns: initialColumnsProp,
23
23
  data,
24
24
  actions,
25
25
  pageSize: initialPageSize = 10,
26
26
  pageSizeOptions = [5, 10, 25, 50],
27
27
  title
28
28
  }) {
29
+ const initialColumns = useMemo(() => initialColumnsProp.map((col) => ({
30
+ ...col,
31
+ key: col.key || col.field || "",
32
+ header: col.header || col.headerName || ""
33
+ })), [initialColumnsProp]);
29
34
  const [columns, setColumns] = useState(initialColumns);
30
35
  const [columnWidths, setColumnWidths] = useState(() => {
31
36
  const widths = {};
@@ -50,8 +55,34 @@ function DataGrid({
50
55
  const [showManageColumns, setShowManageColumns] = useState(false);
51
56
  const [showAdvancedFilter, setShowAdvancedFilter] = useState(false);
52
57
  const [advancedFilters, setAdvancedFilters] = useState([
53
- { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
58
+ { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
54
59
  ]);
60
+ useEffect(() => {
61
+ setColumns((prevColumns) => {
62
+ return initialColumns.map((newCol) => {
63
+ const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
64
+ if (!prevCol) return newCol;
65
+ return {
66
+ ...newCol,
67
+ hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
68
+ pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
69
+ };
70
+ });
71
+ });
72
+ }, [initialColumns]);
73
+ useEffect(() => {
74
+ setColumnWidths((prev) => {
75
+ const next = { ...prev };
76
+ initialColumns.forEach((col) => {
77
+ const key = String(col.key);
78
+ if (next[key] === void 0) {
79
+ const w = col.width || 200;
80
+ next[key] = typeof w === "number" ? w : parseInt(w);
81
+ }
82
+ });
83
+ return next;
84
+ });
85
+ }, [initialColumns]);
55
86
  const [colSearch, setColSearch] = useState("");
56
87
  useEffect(() => {
57
88
  const handleMouseMove = (e) => {
package/dist/main.cjs CHANGED
@@ -30377,13 +30377,18 @@ var AddressLookup_default = AddressLookup;
30377
30377
  var import_react18 = __toESM(require("react"), 1);
30378
30378
  var import_lucide_react = require("lucide-react");
30379
30379
  function DataGrid({
30380
- columns: initialColumns,
30380
+ columns: initialColumnsProp,
30381
30381
  data,
30382
30382
  actions,
30383
30383
  pageSize: initialPageSize = 10,
30384
30384
  pageSizeOptions = [5, 10, 25, 50],
30385
30385
  title
30386
30386
  }) {
30387
+ const initialColumns = (0, import_react18.useMemo)(() => initialColumnsProp.map((col) => ({
30388
+ ...col,
30389
+ key: col.key || col.field || "",
30390
+ header: col.header || col.headerName || ""
30391
+ })), [initialColumnsProp]);
30387
30392
  const [columns, setColumns] = (0, import_react18.useState)(initialColumns);
30388
30393
  const [columnWidths, setColumnWidths] = (0, import_react18.useState)(() => {
30389
30394
  const widths = {};
@@ -30408,8 +30413,34 @@ function DataGrid({
30408
30413
  const [showManageColumns, setShowManageColumns] = (0, import_react18.useState)(false);
30409
30414
  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react18.useState)(false);
30410
30415
  const [advancedFilters, setAdvancedFilters] = (0, import_react18.useState)([
30411
- { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
30416
+ { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
30412
30417
  ]);
30418
+ (0, import_react18.useEffect)(() => {
30419
+ setColumns((prevColumns) => {
30420
+ return initialColumns.map((newCol) => {
30421
+ const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
30422
+ if (!prevCol) return newCol;
30423
+ return {
30424
+ ...newCol,
30425
+ hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
30426
+ pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
30427
+ };
30428
+ });
30429
+ });
30430
+ }, [initialColumns]);
30431
+ (0, import_react18.useEffect)(() => {
30432
+ setColumnWidths((prev) => {
30433
+ const next = { ...prev };
30434
+ initialColumns.forEach((col) => {
30435
+ const key = String(col.key);
30436
+ if (next[key] === void 0) {
30437
+ const w = col.width || 200;
30438
+ next[key] = typeof w === "number" ? w : parseInt(w);
30439
+ }
30440
+ });
30441
+ return next;
30442
+ });
30443
+ }, [initialColumns]);
30413
30444
  const [colSearch, setColSearch] = (0, import_react18.useState)("");
30414
30445
  (0, import_react18.useEffect)(() => {
30415
30446
  const handleMouseMove = (e) => {
package/dist/main.js CHANGED
@@ -170,24 +170,20 @@ import {
170
170
  import {
171
171
  closeIcon_default
172
172
  } from "./chunk-Q5XKCUE3.js";
173
- import "./chunk-GJGRMMAQ.js";
174
173
  import {
175
174
  AddressLookup_default
176
- } from "./chunk-GHCM2AWR.js";
175
+ } from "./chunk-EB6MPFGC.js";
177
176
  import {
178
177
  FloatingInput
179
178
  } from "./chunk-UPCMMCPQ.js";
180
- import "./chunk-7KRG7VNW.js";
181
- import {
182
- RufousThemeProvider,
183
- useRufousTheme
184
- } from "./chunk-BOE27BFQ.js";
185
- import {
186
- APP_THEMES
187
- } from "./chunk-S7BNFVQO.js";
188
179
  import {
189
180
  Checkbox
190
181
  } from "./chunk-X357WQOT.js";
182
+ import "./chunk-7KRG7VNW.js";
183
+ import {
184
+ DataGrid
185
+ } from "./chunk-B6EOV25J.js";
186
+ import "./chunk-GJGRMMAQ.js";
191
187
  import {
192
188
  RichTextEditor
193
189
  } from "./chunk-66HHM7VI.js";
@@ -208,8 +204,12 @@ import {
208
204
  circularProgress_default
209
205
  } from "./chunk-CTBYVXFP.js";
210
206
  import {
211
- DataGrid
212
- } from "./chunk-IKG2B6JQ.js";
207
+ RufousThemeProvider,
208
+ useRufousTheme
209
+ } from "./chunk-BOE27BFQ.js";
210
+ import {
211
+ APP_THEMES
212
+ } from "./chunk-S7BNFVQO.js";
213
213
  import "./chunk-LI4N7JWK.js";
214
214
  export {
215
215
  APP_THEMES,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.1.67",
4
+ "version": "0.1.68",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/style.css",
@@ -1,12 +1,12 @@
1
1
  import {
2
2
  FloatingInput
3
3
  } from "./chunk-UPCMMCPQ.js";
4
- import {
5
- useRufousTheme
6
- } from "./chunk-BOE27BFQ.js";
7
4
  import {
8
5
  circularProgress_default
9
6
  } from "./chunk-CTBYVXFP.js";
7
+ import {
8
+ useRufousTheme
9
+ } from "./chunk-BOE27BFQ.js";
10
10
 
11
11
  // lib/TextFields/AddressLookup.tsx
12
12
  import React, { useState, useRef, useEffect } from "react";