@etsoo/materialui 1.5.58 → 1.5.60

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 +12 -13
  2. package/lib/cjs/DnDList.js +21 -21
  3. package/lib/mjs/ButtonPopupCheckbox.js +12 -13
  4. package/lib/mjs/DnDList.js +21 -21
  5. package/package.json +2 -2
  6. package/src/ButtonPopupCheckbox.tsx +49 -52
  7. package/src/DnDList.tsx +31 -31
package/lib/cjs/ButtonPopupCheckbox.js CHANGED
@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const Button_1 = __importDefault(require("@mui/material/Button"));
9
9
  const Chip_1 = __importDefault(require("@mui/material/Chip"));
10
10
  const react_1 = __importDefault(require("react"));
11
- const FormGroup_1 = __importDefault(require("@mui/material/FormGroup"));
12
11
  const Grid_1 = __importDefault(require("@mui/material/Grid"));
13
12
  const Typography_1 = __importDefault(require("@mui/material/Typography"));
14
13
  const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
@@ -36,18 +35,18 @@ function ButtonPopupList(props) {
36
35
  // Set selected ids
37
36
  setSelectedIds([...value]);
38
37
  }, [value]);
39
- return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(FormGroup_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
40
- const ids = items
41
- .filter((item) => selectedIds.includes(item.id))
42
- .map((item) => item.id);
43
- onValueChange(ids);
44
- }, 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
- const checked = e.target.checked;
46
- const newIds = [
47
- ...selectedIds.toggleItem(item.id, checked)
48
- ];
49
- setSelectedIds(newIds);
50
- } }), 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 () => {
38
+ return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
39
+ const ids = items
40
+ .filter((item) => selectedIds.includes(item.id))
41
+ .map((item) => item.id);
42
+ onValueChange(ids);
43
+ }, 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) => {
44
+ const checked = e.target.checked;
45
+ const newIds = [
46
+ ...selectedIds.toggleItem(item.id, checked)
47
+ ];
48
+ setSelectedIds(newIds);
49
+ } }), 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 () => {
51
50
  if (inputRef.current == null)
52
51
  return;
53
52
  const input = inputRef.current.value.trim();
package/lib/cjs/DnDList.js CHANGED
@@ -152,6 +152,27 @@ function DnDList(props) {
152
152
  ]);
153
153
  });
154
154
  }, []);
155
+ const doChange = react_1.default.useCallback(() => doFormChange(), []);
156
+ const setupDiv = (div, clearup = false) => {
157
+ // Inputs
158
+ div
159
+ .querySelectorAll("input")
160
+ .forEach((input) => clearup
161
+ ? input.removeEventListener("change", doChange)
162
+ : input.addEventListener("change", doChange));
163
+ // Textareas
164
+ div
165
+ .querySelectorAll("textarea")
166
+ .forEach((input) => clearup
167
+ ? input.removeEventListener("change", doChange)
168
+ : input.addEventListener("change", doChange));
169
+ // Select
170
+ div
171
+ .querySelectorAll("select")
172
+ .forEach((input) => clearup
173
+ ? input.removeEventListener("change", doChange)
174
+ : input.addEventListener("change", doChange));
175
+ };
155
176
  const divRef = react_1.default.useRef(null);
156
177
  react_1.default.useEffect(() => {
157
178
  if (divRef.current) {
@@ -206,27 +227,6 @@ function DnDList(props) {
206
227
  }
207
228
  setActiveId(undefined);
208
229
  }
209
- const doChange = react_1.default.useCallback(() => doFormChange(), []);
210
- const setupDiv = (div, clearup = false) => {
211
- // Inputs
212
- div
213
- .querySelectorAll("input")
214
- .forEach((input) => clearup
215
- ? input.removeEventListener("change", doChange)
216
- : input.addEventListener("change", doChange));
217
- // Textareas
218
- div
219
- .querySelectorAll("textarea")
220
- .forEach((input) => clearup
221
- ? input.removeEventListener("change", doChange)
222
- : input.addEventListener("change", doChange));
223
- // Select
224
- div
225
- .querySelectorAll("select")
226
- .forEach((input) => clearup
227
- ? input.removeEventListener("change", doChange)
228
- : input.addEventListener("change", doChange));
229
- };
230
230
  const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
231
231
  const id = item.id;
232
232
  return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
package/lib/mjs/ButtonPopupCheckbox.js CHANGED
@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import Button from "@mui/material/Button";
3
3
  import Chip from "@mui/material/Chip";
4
4
  import React from "react";
5
- import FormGroup from "@mui/material/FormGroup";
6
5
  import Grid from "@mui/material/Grid";
7
6
  import Typography from "@mui/material/Typography";
8
7
  import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
@@ -30,18 +29,18 @@ function ButtonPopupList(props) {
30
29
  // Set selected ids
31
30
  setSelectedIds([...value]);
32
31
  }, [value]);
33
- return (_jsxs(VBox, { gap: 2, children: [_jsx(FormGroup, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
34
- const ids = items
35
- .filter((item) => selectedIds.includes(item.id))
36
- .map((item) => item.id);
37
- onValueChange(ids);
38
- }, 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
- const checked = e.target.checked;
40
- const newIds = [
41
- ...selectedIds.toggleItem(item.id, checked)
42
- ];
43
- setSelectedIds(newIds);
44
- } }), 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 () => {
32
+ return (_jsxs(VBox, { gap: 2, children: [_jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
33
+ const ids = items
34
+ .filter((item) => selectedIds.includes(item.id))
35
+ .map((item) => item.id);
36
+ onValueChange(ids);
37
+ }, 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) => {
38
+ const checked = e.target.checked;
39
+ const newIds = [
40
+ ...selectedIds.toggleItem(item.id, checked)
41
+ ];
42
+ setSelectedIds(newIds);
43
+ } }), 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 () => {
45
44
  if (inputRef.current == null)
46
45
  return;
47
46
  const input = inputRef.current.value.trim();
package/lib/mjs/DnDList.js CHANGED
@@ -144,6 +144,27 @@ export function DnDList(props) {
144
144
  ]);
145
145
  });
146
146
  }, []);
147
+ const doChange = React.useCallback(() => doFormChange(), []);
148
+ const setupDiv = (div, clearup = false) => {
149
+ // Inputs
150
+ div
151
+ .querySelectorAll("input")
152
+ .forEach((input) => clearup
153
+ ? input.removeEventListener("change", doChange)
154
+ : input.addEventListener("change", doChange));
155
+ // Textareas
156
+ div
157
+ .querySelectorAll("textarea")
158
+ .forEach((input) => clearup
159
+ ? input.removeEventListener("change", doChange)
160
+ : input.addEventListener("change", doChange));
161
+ // Select
162
+ div
163
+ .querySelectorAll("select")
164
+ .forEach((input) => clearup
165
+ ? input.removeEventListener("change", doChange)
166
+ : input.addEventListener("change", doChange));
167
+ };
147
168
  const divRef = React.useRef(null);
148
169
  React.useEffect(() => {
149
170
  if (divRef.current) {
@@ -198,27 +219,6 @@ export function DnDList(props) {
198
219
  }
199
220
  setActiveId(undefined);
200
221
  }
201
- const doChange = React.useCallback(() => doFormChange(), []);
202
- const setupDiv = (div, clearup = false) => {
203
- // Inputs
204
- div
205
- .querySelectorAll("input")
206
- .forEach((input) => clearup
207
- ? input.removeEventListener("change", doChange)
208
- : input.addEventListener("change", doChange));
209
- // Textareas
210
- div
211
- .querySelectorAll("textarea")
212
- .forEach((input) => clearup
213
- ? input.removeEventListener("change", doChange)
214
- : input.addEventListener("change", doChange));
215
- // Select
216
- div
217
- .querySelectorAll("select")
218
- .forEach((input) => clearup
219
- ? input.removeEventListener("change", doChange)
220
- : input.addEventListener("change", doChange));
221
- };
222
222
  const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
223
223
  const id = item.id;
224
224
  return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.58",
3
+ "version": "1.5.60",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -42,7 +42,7 @@
42
42
  "@emotion/styled": "^11.14.0",
43
43
  "@etsoo/appscript": "^1.6.38",
44
44
  "@etsoo/notificationbase": "^1.1.62",
45
- "@etsoo/react": "^1.8.45",
45
+ "@etsoo/react": "^1.8.46",
46
46
  "@etsoo/shared": "^1.2.74",
47
47
  "@mui/icons-material": "^7.1.1",
48
48
  "@mui/material": "^7.1.1",
package/src/ButtonPopupCheckbox.tsx CHANGED
@@ -2,7 +2,6 @@ import Button, { ButtonProps } from "@mui/material/Button";
2
2
  import Chip from "@mui/material/Chip";
3
3
  import React from "react";
4
4
  import { DataTypes, IdType } from "@etsoo/shared";
5
- import FormGroup from "@mui/material/FormGroup";
6
5
  import Grid from "@mui/material/Grid";
7
6
  import Typography from "@mui/material/Typography";
8
7
  import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
@@ -153,58 +152,56 @@ function ButtonPopupList<D extends DnDItemType>(
153
152
 
154
153
  return (
155
154
  <VBox gap={2}>
156
- <FormGroup>
157
- <Grid container spacing={0}>
158
- <DnDList<D>
159
- items={items}
160
- labelField={labelField}
161
- onFormChange={(items) => {
162
- const ids = items
163
- .filter((item) => selectedIds.includes(item.id))
164
- .map((item) => item.id);
165
- onValueChange(ids);
166
- }}
167
- itemRenderer={(item, index, nodeRef, actionNodeRef) => (
168
- <Grid
169
- size={{ xs: 12, md: 6, lg: 4 }}
170
- display="flex"
171
- justifyContent="flex-start"
172
- alignItems="center"
173
- gap={1}
174
- {...nodeRef}
155
+ <Grid container spacing={0}>
156
+ <DnDList<D>
157
+ items={items}
158
+ labelField={labelField}
159
+ onFormChange={(items) => {
160
+ const ids = items
161
+ .filter((item) => selectedIds.includes(item.id))
162
+ .map((item) => item.id);
163
+ onValueChange(ids);
164
+ }}
165
+ itemRenderer={(item, index, nodeRef, actionNodeRef) => (
166
+ <Grid
167
+ size={{ xs: 12, md: 6, lg: 4 }}
168
+ display="flex"
169
+ justifyContent="flex-start"
170
+ alignItems="center"
171
+ gap={1}
172
+ {...nodeRef}
173
+ >
174
+ <IconButton
175
+ style={{ cursor: "move" }}
176
+ size="small"
177
+ title={labels?.dragIndicator}
178
+ {...actionNodeRef}
175
179
  >
176
- <IconButton
177
- style={{ cursor: "move" }}
178
- size="small"
179
- title={labels?.dragIndicator}
180
- {...actionNodeRef}
181
- >
182
- <DragIndicatorIcon />
183
- </IconButton>
184
- <FormControlLabel
185
- control={
186
- <Checkbox
187
- name="item"
188
- value={item.id}
189
- checked={selectedIds.includes(item.id)}
190
- onChange={(e) => {
191
- const checked = e.target.checked;
192
- const newIds = [
193
- ...selectedIds.toggleItem(item.id, checked)
194
- ];
195
- setSelectedIds(newIds);
196
- }}
197
- />
198
- }
199
- label={`${index + 1}. ${labelFormatter(item)}`}
200
- />
201
- </Grid>
202
- )}
203
- height={200}
204
- mRef={dndRef}
205
- ></DnDList>
206
- </Grid>
207
- </FormGroup>
180
+ <DragIndicatorIcon />
181
+ </IconButton>
182
+ <FormControlLabel
183
+ control={
184
+ <Checkbox
185
+ name="item"
186
+ value={item.id}
187
+ checked={selectedIds.includes(item.id)}
188
+ onChange={(e) => {
189
+ const checked = e.target.checked;
190
+ const newIds = [
191
+ ...selectedIds.toggleItem(item.id, checked)
192
+ ];
193
+ setSelectedIds(newIds);
194
+ }}
195
+ />
196
+ }
197
+ label={`${index + 1}. ${labelFormatter(item)}`}
198
+ />
199
+ </Grid>
200
+ )}
201
+ height={200}
202
+ mRef={dndRef}
203
+ ></DnDList>
204
+ </Grid>
208
205
  {onAdd && (
209
206
  <HBox gap={1}>
210
207
  <TextField
package/src/DnDList.tsx CHANGED
@@ -362,6 +362,37 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
362
362
  );
363
363
  }, []);
364
364
 
365
+ const doChange = React.useCallback(() => doFormChange(), []);
366
+
367
+ const setupDiv = (div: HTMLDivElement, clearup: boolean = false) => {
368
+ // Inputs
369
+ div
370
+ .querySelectorAll("input")
371
+ .forEach((input) =>
372
+ clearup
373
+ ? input.removeEventListener("change", doChange)
374
+ : input.addEventListener("change", doChange)
375
+ );
376
+
377
+ // Textareas
378
+ div
379
+ .querySelectorAll("textarea")
380
+ .forEach((input) =>
381
+ clearup
382
+ ? input.removeEventListener("change", doChange)
383
+ : input.addEventListener("change", doChange)
384
+ );
385
+
386
+ // Select
387
+ div
388
+ .querySelectorAll("select")
389
+ .forEach((input) =>
390
+ clearup
391
+ ? input.removeEventListener("change", doChange)
392
+ : input.addEventListener("change", doChange)
393
+ );
394
+ };
395
+
365
396
  const divRef = React.useRef<HTMLDivElement>(null);
366
397
 
367
398
  React.useEffect(() => {
@@ -442,37 +473,6 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
442
473
  setActiveId(undefined);
443
474
  }
444
475
 
445
- const doChange = React.useCallback(() => doFormChange(), []);
446
-
447
- const setupDiv = (div: HTMLDivElement, clearup: boolean = false) => {
448
- // Inputs
449
- div
450
- .querySelectorAll("input")
451
- .forEach((input) =>
452
- clearup
453
- ? input.removeEventListener("change", doChange)
454
- : input.addEventListener("change", doChange)
455
- );
456
-
457
- // Textareas
458
- div
459
- .querySelectorAll("textarea")
460
- .forEach((input) =>
461
- clearup
462
- ? input.removeEventListener("change", doChange)
463
- : input.addEventListener("change", doChange)
464
- );
465
-
466
- // Select
467
- div
468
- .querySelectorAll("select")
469
- .forEach((input) =>
470
- clearup
471
- ? input.removeEventListener("change", doChange)
472
- : input.addEventListener("change", doChange)
473
- );
474
- };
475
-
476
476
  const children = (
477
477
  <DndContextType onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
478
478
  <SortableContextType items={items} strategy={strategy}>