@etsoo/materialui 1.5.59 → 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 (4) hide show
  1. package/lib/cjs/ButtonPopupCheckbox.js +12 -13
  2. package/lib/mjs/ButtonPopupCheckbox.js +12 -13
  3. package/package.json +2 -2
  4. package/src/ButtonPopupCheckbox.tsx +49 -52
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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.59",
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