@etsoo/materialui 1.5.51 → 1.5.53

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 (9) hide show
  1. package/lib/cjs/ButtonPopupCheckbox.js +4 -3
  2. package/lib/cjs/OptionBool.d.ts +10 -1
  3. package/lib/cjs/OptionBool.js +9 -1
  4. package/lib/mjs/ButtonPopupCheckbox.js +4 -3
  5. package/lib/mjs/OptionBool.d.ts +10 -1
  6. package/lib/mjs/OptionBool.js +9 -1
  7. package/package.json +10 -10
  8. package/src/ButtonPopupCheckbox.tsx +11 -3
  9. package/src/OptionBool.tsx +36 -3
package/lib/cjs/ButtonPopupCheckbox.js CHANGED
@@ -20,6 +20,7 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
20
20
  const DnDList_1 = require("./DnDList");
21
21
  const FlexBox_1 = require("./FlexBox");
22
22
  const ReactApp_1 = require("./app/ReactApp");
23
+ const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
23
24
  function ButtonPopupList(props) {
24
25
  // Destruct
25
26
  const { addSplitter = /\s*[,;]\s*/, ids = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -72,12 +73,12 @@ function ButtonPopupCheckbox(props) {
72
73
  // App
73
74
  const app = (0, ReactApp_1.useRequiredAppContext)();
74
75
  // Destruct
75
- const { addSplitter, ids, inputName, label, labelEnd, labelFormatter = (data) => {
76
+ const { addSplitter, ids = [], inputName, label, labelEnd, labelFormatter = (data) => {
76
77
  if (labelField in data) {
77
78
  return data[labelField];
78
79
  }
79
80
  return data.id.toString();
80
- }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start" }, variant = "outlined", ...rest } = props;
81
+ }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" }, variant = "outlined", ...rest } = props;
81
82
  // Default labels
82
83
  if (!labels.add)
83
84
  labels.add = app.get("add");
@@ -120,7 +121,7 @@ function ButtonPopupCheckbox(props) {
120
121
  fullScreen: app.smDown
121
122
  });
122
123
  };
123
- return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), (0, jsx_runtime_1.jsxs)(Button_1.default, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "body2", children: [label, ":"] }), selectedIds?.map((id) => {
124
+ return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), (0, jsx_runtime_1.jsxs)(Button_1.default, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.default, { required: required, sx: { fontSize: (theme) => theme.typography.body2.fontSize }, children: label })), selectedIds?.map((id) => {
124
125
  const item = items.find((item) => item.id === id);
125
126
  if (item == null)
126
127
  return null;
package/lib/cjs/OptionBool.d.ts CHANGED
@@ -3,7 +3,16 @@ import { OptionGroupProps } from "./OptionGroup";
3
3
  /**
4
4
  * OptionBool props
5
5
  */
6
- export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "options" | "row" | "multiple">;
6
+ export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "options" | "row" | "multiple" | "defaultValue" | "onValueChange"> & {
7
+ /**
8
+ * Default value
9
+ */
10
+ defaultValue?: boolean;
11
+ /**
12
+ * On value change handler
13
+ */
14
+ onValueChange?: (value?: boolean) => void;
15
+ };
7
16
  /**
8
17
  * OptionBool (yes/no)
9
18
  * @param props Props
package/lib/cjs/OptionBool.js CHANGED
@@ -4,16 +4,24 @@ exports.OptionBool = OptionBool;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const ReactApp_1 = require("./app/ReactApp");
6
6
  const OptionGroup_1 = require("./OptionGroup");
7
+ const MUGlobal_1 = require("./MUGlobal");
7
8
  /**
8
9
  * OptionBool (yes/no)
9
10
  * @param props Props
10
11
  * @returns Component
11
12
  */
12
13
  function OptionBool(props) {
14
+ // Destruct
15
+ const { defaultValue = false, onValueChange, variant = MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
13
16
  // Global app
14
17
  const app = (0, ReactApp_1.useAppContext)();
15
18
  // Options
16
19
  const options = app?.getBools() ?? [];
17
20
  // Layout
18
- return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { options: options, row: true, multiple: false, ...props }));
21
+ return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { options: options, row: true, multiple: false, variant: variant, defaultValue: defaultValue.toString(), onValueChange: (value) => {
22
+ if (onValueChange) {
23
+ const v = value == "true" ? true : value == "false" ? false : undefined;
24
+ onValueChange(v);
25
+ }
26
+ }, ...rest }));
19
27
  }
package/lib/mjs/ButtonPopupCheckbox.js CHANGED
@@ -14,6 +14,7 @@ import TextField from "@mui/material/TextField";
14
14
  import { DnDList } from "./DnDList";
15
15
  import { HBox, VBox } from "./FlexBox";
16
16
  import { useRequiredAppContext } from "./app/ReactApp";
17
+ import FormLabel from "@mui/material/FormLabel";
17
18
  function ButtonPopupList(props) {
18
19
  // Destruct
19
20
  const { addSplitter = /\s*[,;]\s*/, ids = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -66,12 +67,12 @@ export function ButtonPopupCheckbox(props) {
66
67
  // App
67
68
  const app = useRequiredAppContext();
68
69
  // Destruct
69
- const { addSplitter, ids, inputName, label, labelEnd, labelFormatter = (data) => {
70
+ const { addSplitter, ids = [], inputName, label, labelEnd, labelFormatter = (data) => {
70
71
  if (labelField in data) {
71
72
  return data[labelField];
72
73
  }
73
74
  return data.id.toString();
74
- }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start" }, variant = "outlined", ...rest } = props;
75
+ }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" }, variant = "outlined", ...rest } = props;
75
76
  // Default labels
76
77
  if (!labels.add)
77
78
  labels.add = app.get("add");
@@ -114,7 +115,7 @@ export function ButtonPopupCheckbox(props) {
114
115
  fullScreen: app.smDown
115
116
  });
116
117
  };
117
- return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), _jsxs(Button, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && _jsxs(Typography, { variant: "body2", children: [label, ":"] }), selectedIds?.map((id) => {
118
+ return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), _jsxs(Button, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && (_jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.body2.fontSize }, children: label })), selectedIds?.map((id) => {
118
119
  const item = items.find((item) => item.id === id);
119
120
  if (item == null)
120
121
  return null;
package/lib/mjs/OptionBool.d.ts CHANGED
@@ -3,7 +3,16 @@ import { OptionGroupProps } from "./OptionGroup";
3
3
  /**
4
4
  * OptionBool props
5
5
  */
6
- export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "options" | "row" | "multiple">;
6
+ export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "options" | "row" | "multiple" | "defaultValue" | "onValueChange"> & {
7
+ /**
8
+ * Default value
9
+ */
10
+ defaultValue?: boolean;
11
+ /**
12
+ * On value change handler
13
+ */
14
+ onValueChange?: (value?: boolean) => void;
15
+ };
7
16
  /**
8
17
  * OptionBool (yes/no)
9
18
  * @param props Props
package/lib/mjs/OptionBool.js CHANGED
@@ -1,16 +1,24 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useAppContext } from "./app/ReactApp";
3
3
  import { OptionGroup } from "./OptionGroup";
4
+ import { MUGlobal } from "./MUGlobal";
4
5
  /**
5
6
  * OptionBool (yes/no)
6
7
  * @param props Props
7
8
  * @returns Component
8
9
  */
9
10
  export function OptionBool(props) {
11
+ // Destruct
12
+ const { defaultValue = false, onValueChange, variant = MUGlobal.inputFieldVariant, ...rest } = props;
10
13
  // Global app
11
14
  const app = useAppContext();
12
15
  // Options
13
16
  const options = app?.getBools() ?? [];
14
17
  // Layout
15
- return (_jsx(OptionGroup, { options: options, row: true, multiple: false, ...props }));
18
+ return (_jsx(OptionGroup, { options: options, row: true, multiple: false, variant: variant, defaultValue: defaultValue.toString(), onValueChange: (value) => {
19
+ if (onValueChange) {
20
+ const v = value == "true" ? true : value == "false" ? false : undefined;
21
+ onValueChange(v);
22
+ }
23
+ }, ...rest }));
16
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.51",
3
+ "version": "1.5.53",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -44,9 +44,9 @@
44
44
  "@etsoo/notificationbase": "^1.1.62",
45
45
  "@etsoo/react": "^1.8.45",
46
46
  "@etsoo/shared": "^1.2.74",
47
- "@mui/icons-material": "^7.1.0",
48
- "@mui/material": "^7.1.0",
49
- "@mui/x-data-grid": "^8.4.0",
47
+ "@mui/icons-material": "^7.1.1",
48
+ "@mui/material": "^7.1.1",
49
+ "@mui/x-data-grid": "^8.5.1",
50
50
  "chart.js": "^4.4.9",
51
51
  "chartjs-plugin-datalabels": "^2.2.0",
52
52
  "dompurify": "^3.2.6",
@@ -67,23 +67,23 @@
67
67
  },
68
68
  "devDependencies": {
69
69
  "@babel/cli": "^7.27.2",
70
- "@babel/core": "^7.27.1",
71
- "@babel/plugin-transform-runtime": "^7.27.1",
70
+ "@babel/core": "^7.27.4",
71
+ "@babel/plugin-transform-runtime": "^7.27.4",
72
72
  "@babel/preset-env": "^7.27.2",
73
73
  "@babel/preset-react": "^7.27.1",
74
74
  "@babel/preset-typescript": "^7.27.1",
75
- "@babel/runtime-corejs3": "^7.27.1",
75
+ "@babel/runtime-corejs3": "^7.27.6",
76
76
  "@testing-library/react": "^16.3.0",
77
77
  "@types/pica": "^9.0.5",
78
78
  "@types/pulltorefreshjs": "^0.1.7",
79
- "@types/react": "^18.3.22",
79
+ "@types/react": "^18.3.23",
80
80
  "@types/react-avatar-editor": "^13.0.4",
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.5.0",
84
+ "@vitejs/plugin-react": "^4.5.1",
85
85
  "jsdom": "^26.1.0",
86
86
  "typescript": "^5.8.3",
87
- "vitest": "^3.1.4"
87
+ "vitest": "^3.2.2"
88
88
  }
89
89
  }
package/src/ButtonPopupCheckbox.tsx CHANGED
@@ -14,6 +14,7 @@ import TextField from "@mui/material/TextField";
14
14
  import { DnDList, DnDListRef } from "./DnDList";
15
15
  import { HBox, VBox } from "./FlexBox";
16
16
  import { useRequiredAppContext } from "./app/ReactApp";
17
+ import FormLabel from "@mui/material/FormLabel";
17
18
 
18
19
  type DnDItemType = {
19
20
  id: IdType;
@@ -261,7 +262,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
261
262
  // Destruct
262
263
  const {
263
264
  addSplitter,
264
- ids,
265
+ ids = [],
265
266
  inputName,
266
267
  label,
267
268
  labelEnd,
@@ -280,7 +281,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
280
281
  popupTitle = label,
281
282
  popupMessage,
282
283
  required = false,
283
- sx = { gap: 1, justifyContent: "flex-start" },
284
+ sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" },
284
285
  variant = "outlined",
285
286
  ...rest
286
287
  } = props;
@@ -356,7 +357,14 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
356
357
  {...rest}
357
358
  disabled={!items || items.length === 0}
358
359
  >
359
- {label && <Typography variant="body2">{label}:</Typography>}
360
+ {label && (
361
+ <FormLabel
362
+ required={required}
363
+ sx={{ fontSize: (theme) => theme.typography.body2.fontSize }}
364
+ >
365
+ {label}
366
+ </FormLabel>
367
+ )}
360
368
  {selectedIds?.map((id) => {
361
369
  const item = items.find((item) => item.id === id);
362
370
  if (item == null) return null;
package/src/OptionBool.tsx CHANGED
@@ -1,14 +1,25 @@
1
1
  import { ListType1 } from "@etsoo/shared";
2
2
  import { useAppContext } from "./app/ReactApp";
3
3
  import { OptionGroup, OptionGroupProps } from "./OptionGroup";
4
+ import { MUGlobal } from "./MUGlobal";
4
5
 
5
6
  /**
6
7
  * OptionBool props
7
8
  */
8
9
  export type OptionBoolProps = Omit<
9
10
  OptionGroupProps<ListType1, "id", "label">,
10
- "options" | "row" | "multiple"
11
- >;
11
+ "options" | "row" | "multiple" | "defaultValue" | "onValueChange"
12
+ > & {
13
+ /**
14
+ * Default value
15
+ */
16
+ defaultValue?: boolean;
17
+
18
+ /**
19
+ * On value change handler
20
+ */
21
+ onValueChange?: (value?: boolean) => void;
22
+ };
12
23
 
13
24
  /**
14
25
  * OptionBool (yes/no)
@@ -16,6 +27,14 @@ export type OptionBoolProps = Omit<
16
27
  * @returns Component
17
28
  */
18
29
  export function OptionBool(props: OptionBoolProps) {
30
+ // Destruct
31
+ const {
32
+ defaultValue = false,
33
+ onValueChange,
34
+ variant = MUGlobal.inputFieldVariant,
35
+ ...rest
36
+ } = props;
37
+
19
38
  // Global app
20
39
  const app = useAppContext();
21
40
 
@@ -24,6 +43,20 @@ export function OptionBool(props: OptionBoolProps) {
24
43
 
25
44
  // Layout
26
45
  return (
27
- <OptionGroup<ListType1> options={options} row multiple={false} {...props} />
46
+ <OptionGroup
47
+ options={options}
48
+ row
49
+ multiple={false}
50
+ variant={variant}
51
+ defaultValue={defaultValue.toString()}
52
+ onValueChange={(value) => {
53
+ if (onValueChange) {
54
+ const v =
55
+ value == "true" ? true : value == "false" ? false : undefined;
56
+ onValueChange(v);
57
+ }
58
+ }}
59
+ {...rest}
60
+ />
28
61
  );
29
62
  }