@etsoo/materialui 1.5.65 → 1.5.67

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/lib/cjs/ButtonPopupCheckbox.js +9 -4
  2. package/lib/cjs/ViewContainer.js +8 -5
  3. package/lib/mjs/ButtonPopupCheckbox.js +9 -4
  4. package/lib/mjs/ViewContainer.js +9 -6
  5. package/package.json +4 -4
  6. package/src/ButtonPopupCheckbox.tsx +11 -4
  7. package/src/ViewContainer.tsx +9 -5
package/lib/cjs/ButtonPopupCheckbox.js CHANGED
@@ -25,19 +25,24 @@ function ButtonPopupList(props) {
25
25
  const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
26
26
  // Methods
27
27
  const dndRef = react_1.default.createRef();
28
- // Ref
28
+ // Refs
29
29
  const inputRef = react_1.default.useRef(null);
30
+ const tempSelectedIds = react_1.default.useRef([]);
30
31
  // State
31
32
  const [selectedIds, setSelectedIds] = react_1.default.useState([]);
33
+ const setSelectedIdsHandler = (ids) => {
34
+ tempSelectedIds.current = ids;
35
+ setSelectedIds(ids);
36
+ };
32
37
  react_1.default.useEffect(() => {
33
38
  // Sort items by ids for first load
34
39
  items.sortByProperty("id", value);
35
40
  // Set selected ids
36
- setSelectedIds([...value]);
41
+ setSelectedIdsHandler([...value]);
37
42
  }, [value]);
38
43
  return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
39
44
  const ids = items
40
- .filter((item) => selectedIds.includes(item.id))
45
+ .filter((item) => tempSelectedIds.current.includes(item.id))
41
46
  .map((item) => item.id);
42
47
  onValueChange(ids);
43
48
  }, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
@@ -45,7 +50,7 @@ function ButtonPopupList(props) {
45
50
  const newIds = [
46
51
  ...selectedIds.toggleItem(item.id, checked)
47
52
  ];
48
- setSelectedIds(newIds);
53
+ setSelectedIdsHandler(newIds);
49
54
  } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
50
55
  if (inputRef.current == null)
51
56
  return;
package/lib/cjs/ViewContainer.js CHANGED
@@ -40,13 +40,16 @@ function getResp(singleRow) {
40
40
  : ViewPageSize.small;
41
41
  return size;
42
42
  }
43
+ function addLabelEnd(label) {
44
+ return label + ":";
45
+ }
43
46
  function getItemField(app, field, data) {
44
47
  // Item data and label
45
48
  let itemData, itemLabel, gridProps = {}, size, isHorizontal;
46
49
  if (Array.isArray(field)) {
47
50
  const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
48
51
  itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], fieldType, renderProps);
49
- itemLabel = app.get(fieldData) ?? fieldData;
52
+ itemLabel = addLabelEnd(app.get(fieldData) ?? fieldData);
50
53
  size = getResp(singleRow);
51
54
  gridProps = { size };
52
55
  }
@@ -73,17 +76,17 @@ function getItemField(app, field, data) {
73
76
  fieldLabel === ""
74
77
  ? undefined
75
78
  : fieldLabel == null && typeof fieldData === "string"
76
- ? app.get(fieldData) ?? fieldData
79
+ ? addLabelEnd(app.get(fieldData) ?? fieldData)
77
80
  : typeof fieldLabel === "function"
78
81
  ? fieldLabel(data)
79
82
  : fieldLabel != null
80
- ? app.get(fieldLabel) ?? fieldLabel
83
+ ? addLabelEnd(app.get(fieldLabel) ?? fieldLabel)
81
84
  : undefined;
82
85
  }
83
86
  else {
84
87
  // Single field format
85
88
  itemData = formatItemData(app, data[field]);
86
- itemLabel = app.get(field) ?? field;
89
+ itemLabel = addLabelEnd(app.get(field) ?? field);
87
90
  size = ViewPageSize.small;
88
91
  gridProps = { size };
89
92
  }
@@ -161,7 +164,7 @@ function ViewPageGridItem(props) {
161
164
  options = getResp(singleRow ?? "small");
162
165
  }
163
166
  // Layout
164
- return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "caption", component: horizontal ? "span" : "div", children: [label, ":"] })), typeof data === "object" ? (data) : horizontal ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
167
+ return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", component: horizontal ? "span" : "div", children: label })), typeof data === "object" ? (data) : horizontal ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
165
168
  }
166
169
  function ViewContainer(props) {
167
170
  // Global app
package/lib/mjs/ButtonPopupCheckbox.js CHANGED
@@ -19,19 +19,24 @@ function ButtonPopupList(props) {
19
19
  const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
20
20
  // Methods
21
21
  const dndRef = React.createRef();
22
- // Ref
22
+ // Refs
23
23
  const inputRef = React.useRef(null);
24
+ const tempSelectedIds = React.useRef([]);
24
25
  // State
25
26
  const [selectedIds, setSelectedIds] = React.useState([]);
27
+ const setSelectedIdsHandler = (ids) => {
28
+ tempSelectedIds.current = ids;
29
+ setSelectedIds(ids);
30
+ };
26
31
  React.useEffect(() => {
27
32
  // Sort items by ids for first load
28
33
  items.sortByProperty("id", value);
29
34
  // Set selected ids
30
- setSelectedIds([...value]);
35
+ setSelectedIdsHandler([...value]);
31
36
  }, [value]);
32
37
  return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
33
38
  const ids = items
34
- .filter((item) => selectedIds.includes(item.id))
39
+ .filter((item) => tempSelectedIds.current.includes(item.id))
35
40
  .map((item) => item.id);
36
41
  onValueChange(ids);
37
42
  }, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
@@ -39,7 +44,7 @@ function ButtonPopupList(props) {
39
44
  const newIds = [
40
45
  ...selectedIds.toggleItem(item.id, checked)
41
46
  ];
42
- setSelectedIds(newIds);
47
+ setSelectedIdsHandler(newIds);
43
48
  } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
44
49
  if (inputRef.current == null)
45
50
  return;
package/lib/mjs/ViewContainer.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createElement as _createElement } from "react";
2
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { MUGlobal } from "./MUGlobal";
5
5
  import { useCurrentBreakpoint } from "./useCurrentBreakpoint";
@@ -32,13 +32,16 @@ function getResp(singleRow) {
32
32
  : ViewPageSize.small;
33
33
  return size;
34
34
  }
35
+ function addLabelEnd(label) {
36
+ return label + ":";
37
+ }
35
38
  function getItemField(app, field, data) {
36
39
  // Item data and label
37
40
  let itemData, itemLabel, gridProps = {}, size, isHorizontal;
38
41
  if (Array.isArray(field)) {
39
42
  const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
40
43
  itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
41
- itemLabel = app.get(fieldData) ?? fieldData;
44
+ itemLabel = addLabelEnd(app.get(fieldData) ?? fieldData);
42
45
  size = getResp(singleRow);
43
46
  gridProps = { size };
44
47
  }
@@ -65,17 +68,17 @@ function getItemField(app, field, data) {
65
68
  fieldLabel === ""
66
69
  ? undefined
67
70
  : fieldLabel == null && typeof fieldData === "string"
68
- ? app.get(fieldData) ?? fieldData
71
+ ? addLabelEnd(app.get(fieldData) ?? fieldData)
69
72
  : typeof fieldLabel === "function"
70
73
  ? fieldLabel(data)
71
74
  : fieldLabel != null
72
- ? app.get(fieldLabel) ?? fieldLabel
75
+ ? addLabelEnd(app.get(fieldLabel) ?? fieldLabel)
73
76
  : undefined;
74
77
  }
75
78
  else {
76
79
  // Single field format
77
80
  itemData = formatItemData(app, data[field]);
78
- itemLabel = app.get(field) ?? field;
81
+ itemLabel = addLabelEnd(app.get(field) ?? field);
79
82
  size = ViewPageSize.small;
80
83
  gridProps = { size };
81
84
  }
@@ -153,7 +156,7 @@ export function ViewPageGridItem(props) {
153
156
  options = getResp(singleRow ?? "small");
154
157
  }
155
158
  // Layout
156
- return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: horizontal ? "span" : "div", children: [label, ":"] })), typeof data === "object" ? (data) : horizontal ? (_jsx(Typography, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
159
+ return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsx(Typography, { variant: "caption", component: horizontal ? "span" : "div", children: label })), typeof data === "object" ? (data) : horizontal ? (_jsx(Typography, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
157
160
  }
158
161
  export function ViewContainer(props) {
159
162
  // Global app
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.65",
3
+ "version": "1.5.67",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
40
40
  "@dnd-kit/sortable": "^10.0.0",
41
41
  "@emotion/react": "^11.14.0",
42
42
  "@emotion/styled": "^11.14.1",
43
- "@etsoo/appscript": "^1.6.41",
43
+ "@etsoo/appscript": "^1.6.43",
44
44
  "@etsoo/notificationbase": "^1.1.63",
45
45
  "@etsoo/react": "^1.8.49",
46
46
  "@etsoo/shared": "^1.2.75",
47
47
  "@mui/icons-material": "^7.2.0",
48
48
  "@mui/material": "^7.2.0",
49
- "@mui/x-data-grid": "^8.7.0",
49
+ "@mui/x-data-grid": "^8.8.0",
50
50
  "chart.js": "^4.5.0",
51
51
  "chartjs-plugin-datalabels": "^2.2.0",
52
52
  "dompurify": "^3.2.6",
@@ -81,7 +81,7 @@
81
81
  "@types/react-dom": "^18.3.7",
82
82
  "@types/react-input-mask": "^3.0.6",
83
83
  "@types/react-window": "^1.8.8",
84
- "@vitejs/plugin-react": "^4.6.0",
84
+ "@vitejs/plugin-react": "^4.7.0",
85
85
  "jsdom": "^26.1.0",
86
86
  "typescript": "^5.8.3",
87
87
  "vitest": "^3.2.4"
package/src/ButtonPopupCheckbox.tsx CHANGED
@@ -136,18 +136,24 @@ function ButtonPopupList<D extends DnDItemType>(
136
136
  // Methods
137
137
  const dndRef = React.createRef<DnDListRef<D>>();
138
138
 
139
- // Ref
139
+ // Refs
140
140
  const inputRef = React.useRef<HTMLInputElement>(null);
141
+ const tempSelectedIds = React.useRef<D["id"][]>([]);
141
142
 
142
143
  // State
143
144
  const [selectedIds, setSelectedIds] = React.useState<D["id"][]>([]);
144
145
 
146
+ const setSelectedIdsHandler = (ids: D["id"][]) => {
147
+ tempSelectedIds.current = ids;
148
+ setSelectedIds(ids);
149
+ };
150
+
145
151
  React.useEffect(() => {
146
152
  // Sort items by ids for first load
147
153
  items.sortByProperty("id", value);
148
154
 
149
155
  // Set selected ids
150
- setSelectedIds([...value]);
156
+ setSelectedIdsHandler([...value]);
151
157
  }, [value]);
152
158
 
153
159
  return (
@@ -159,8 +165,9 @@ function ButtonPopupList<D extends DnDItemType>(
159
165
  labelField={labelField}
160
166
  onFormChange={(items) => {
161
167
  const ids = items
162
- .filter((item) => selectedIds.includes(item.id))
168
+ .filter((item) => tempSelectedIds.current.includes(item.id))
163
169
  .map((item) => item.id);
170
+
164
171
  onValueChange(ids);
165
172
  }}
166
173
  itemRenderer={(item, index, nodeRef, actionNodeRef) => (
@@ -191,7 +198,7 @@ function ButtonPopupList<D extends DnDItemType>(
191
198
  const newIds = [
192
199
  ...selectedIds.toggleItem(item.id, checked)
193
200
  ];
194
- setSelectedIds(newIds);
201
+ setSelectedIdsHandler(newIds);
195
202
  }}
196
203
  />
197
204
  }
package/src/ViewContainer.tsx CHANGED
@@ -36,6 +36,10 @@ function getResp(singleRow: ViewPageRowType) {
36
36
  return size;
37
37
  }
38
38
 
39
+ function addLabelEnd(label: string) {
40
+ return label + ":";
41
+ }
42
+
39
43
  function getItemField<T extends object>(
40
44
  app: ReactAppType,
41
45
  field: ViewPageFieldTypeNarrow<T>,
@@ -51,7 +55,7 @@ function getItemField<T extends object>(
51
55
  if (Array.isArray(field)) {
52
56
  const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
53
57
  itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
54
- itemLabel = app.get<string>(fieldData) ?? fieldData;
58
+ itemLabel = addLabelEnd(app.get<string>(fieldData) ?? fieldData);
55
59
  size = getResp(singleRow);
56
60
  gridProps = { size };
57
61
  } else if (typeof field === "object") {
@@ -87,16 +91,16 @@ function getItemField<T extends object>(
87
91
  fieldLabel === ""
88
92
  ? undefined
89
93
  : fieldLabel == null && typeof fieldData === "string"
90
- ? app.get<string>(fieldData) ?? fieldData
94
+ ? addLabelEnd(app.get<string>(fieldData) ?? fieldData)
91
95
  : typeof fieldLabel === "function"
92
96
  ? fieldLabel(data)
93
97
  : fieldLabel != null
94
- ? app.get<string>(fieldLabel) ?? fieldLabel
98
+ ? addLabelEnd(app.get<string>(fieldLabel) ?? fieldLabel)
95
99
  : undefined;
96
100
  } else {
97
101
  // Single field format
98
102
  itemData = formatItemData(app, data[field]);
99
- itemLabel = app.get<string>(field) ?? field;
103
+ itemLabel = addLabelEnd(app.get<string>(field) ?? field);
100
104
  size = ViewPageSize.small;
101
105
  gridProps = { size };
102
106
  }
@@ -210,7 +214,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
210
214
  <Grid {...gridProps} {...options}>
211
215
  {label != null && (
212
216
  <Typography variant="caption" component={horizontal ? "span" : "div"}>
213
- {label}:
217
+ {label}
214
218
  </Typography>
215
219
  )}
216
220
  {typeof data === "object" ? (