@etsoo/materialui 1.3.34 → 1.3.36

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 (11) hide show
  1. package/lib/DataGridEx.js +3 -3
  2. package/lib/HiSelector.d.ts +4 -0
  3. package/lib/HiSelector.js +5 -5
  4. package/lib/MaskInput.d.ts +7 -6
  5. package/lib/MaskInput.js +5 -7
  6. package/lib/pages/ViewPage.d.ts +1 -1
  7. package/lib/pages/ViewPage.js +1 -1
  8. package/package.json +25 -25
  9. package/src/HiSelector.tsx +11 -1
  10. package/src/MaskInput.tsx +76 -86
  11. package/src/pages/ViewPage.tsx +2 -2
package/lib/DataGridEx.js CHANGED
@@ -84,7 +84,7 @@ export function DataGridEx(props) {
84
84
  sortLabel = headerCellRenderer({
85
85
  cellProps,
86
86
  column,
87
- columnIndex: checkable ? index - 1 : index,
87
+ columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
88
88
  states
89
89
  });
90
90
  }
@@ -113,7 +113,7 @@ export function DataGridEx(props) {
113
113
  const cell = footerItemRenderer
114
114
  ? footerItemRenderer(rows, {
115
115
  column,
116
- index: checkable ? index - 1 : index,
116
+ index: checkable ? index - 1 : index, // Ignore the checkbox case
117
117
  states,
118
118
  cellProps,
119
119
  checkable
@@ -127,7 +127,7 @@ export function DataGridEx(props) {
127
127
  const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
128
128
  if (checkable) {
129
129
  const cbColumn = {
130
- field: "selected",
130
+ field: "selected", // Avoid validation from data model
131
131
  header: "",
132
132
  sortable: false,
133
133
  width: 50,
package/lib/HiSelector.d.ts CHANGED
@@ -65,6 +65,10 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
65
65
  * Values
66
66
  */
67
67
  values?: T[D][];
68
+ /**
69
+ * Variant
70
+ */
71
+ variant?: "outlined" | "standard" | "filled";
68
72
  };
69
73
  /**
70
74
  * Hierarchy selector
package/lib/HiSelector.js CHANGED
@@ -8,7 +8,7 @@ import { SelectEx } from "./SelectEx";
8
8
  */
9
9
  export function HiSelector(props) {
10
10
  // Destruct
11
- const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
11
+ const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [], variant = "outlined" } = props;
12
12
  const [localValues, setValues] = React.useState(values);
13
13
  const updateValue = (value) => {
14
14
  if (onChange)
@@ -43,11 +43,11 @@ export function HiSelector(props) {
43
43
  React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
44
44
  React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
45
45
  React.createElement(Grid, { item: true, ...breakPoints },
46
- React.createElement(SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText })),
46
+ React.createElement(SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant })),
47
47
  localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
48
- React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
48
+ React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }))),
49
49
  localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
50
- React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
50
+ React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }))),
51
51
  localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
52
- React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
52
+ React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant })))));
53
53
  }
package/lib/MaskInput.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { TextFieldProps } from '@mui/material';
2
- import React from 'react';
1
+ import { TextFieldProps } from "@mui/material";
2
+ import React from "react";
3
+ import { type InputMask, type FactoryOpts } from "imask";
3
4
  /**
4
5
  * Mask input props
5
6
  */
6
- export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps & {
7
+ export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
7
8
  /**
8
9
  * Mask props
9
10
  */
@@ -11,11 +12,11 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps &
11
12
  /**
12
13
  * Accept hanlder
13
14
  */
14
- onAccept?: (value: unknown, maskRef: IMask.InputMask<T>, e?: InputEvent) => void;
15
+ onAccept?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
15
16
  /**
16
17
  * Complete handler
17
18
  */
18
- onComplete?: (value: unknown, maskRef: IMask.InputMask<T>, e?: InputEvent) => void;
19
+ onComplete?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
19
20
  /**
20
21
  * Is the field read only?
21
22
  */
@@ -31,4 +32,4 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> = TextFieldProps &
31
32
  * @param props Props
32
33
  * @returns Component
33
34
  */
34
- export declare function MaskInput<T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions>(props: MaskInputProps<T>): React.JSX.Element;
35
+ export declare function MaskInput<T extends FactoryOpts = FactoryOpts>(props: MaskInputProps<T>): React.JSX.Element;
package/lib/MaskInput.js CHANGED
@@ -1,7 +1,7 @@
1
- import { TextField } from '@mui/material';
2
- import React from 'react';
3
- import { MUGlobal } from './MUGlobal';
4
- import { useIMask } from 'react-imask';
1
+ import { TextField } from "@mui/material";
2
+ import React from "react";
3
+ import { MUGlobal } from "./MUGlobal";
4
+ import { useIMask } from "react-imask";
5
5
  /**
6
6
  * Mask input
7
7
  * https://imask.js.org/
@@ -11,9 +11,7 @@ import { useIMask } from 'react-imask';
11
11
  export function MaskInput(props) {
12
12
  var _a;
13
13
  // Destruct
14
- const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search
15
- ? MUGlobal.searchFieldVariant
16
- : MUGlobal.inputFieldVariant, ...rest } = props;
14
+ const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant, ...rest } = props;
17
15
  const { ref, maskRef } = useIMask(mask, {
18
16
  onAccept: (value, maskRef, event) => {
19
17
  if (onAccept)
package/lib/pages/ViewPage.d.ts CHANGED
@@ -37,7 +37,7 @@ export interface ViewPageField<T extends object> extends GridProps {
37
37
  /**
38
38
  * Label field
39
39
  */
40
- label?: string | (() => React.ReactNode);
40
+ label?: string | ((item: T) => React.ReactNode);
41
41
  /**
42
42
  * Display as single row
43
43
  */
package/lib/pages/ViewPage.js CHANGED
@@ -86,7 +86,7 @@ function getItemField(field, data) {
86
86
  // Field label
87
87
  itemLabel =
88
88
  typeof fieldLabel === "function"
89
- ? fieldLabel()
89
+ ? fieldLabel(data)
90
90
  : fieldLabel != null
91
91
  ? (_b = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(fieldLabel)) !== null && _b !== void 0 ? _b : fieldLabel
92
92
  : fieldLabel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.3.34",
3
+ "version": "1.3.36",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -48,47 +48,47 @@
48
48
  "@dnd-kit/core": "^6.1.0",
49
49
  "@dnd-kit/sortable": "^8.0.0",
50
50
  "@emotion/css": "^11.11.2",
51
- "@emotion/react": "^11.11.1",
51
+ "@emotion/react": "^11.11.3",
52
52
  "@emotion/styled": "^11.11.0",
53
- "@etsoo/appscript": "^1.4.73",
54
- "@etsoo/notificationbase": "^1.1.32",
55
- "@etsoo/react": "^1.7.24",
56
- "@etsoo/shared": "^1.2.22",
57
- "@mui/icons-material": "^5.14.18",
58
- "@mui/material": "^5.14.18",
59
- "@mui/x-data-grid": "^6.18.1",
53
+ "@etsoo/appscript": "^1.4.74",
54
+ "@etsoo/notificationbase": "^1.1.35",
55
+ "@etsoo/react": "^1.7.25",
56
+ "@etsoo/shared": "^1.2.26",
57
+ "@mui/icons-material": "^5.15.11",
58
+ "@mui/material": "^5.15.11",
59
+ "@mui/x-data-grid": "^6.19.5",
60
60
  "@types/pica": "^9.0.4",
61
61
  "@types/pulltorefreshjs": "^0.1.7",
62
- "@types/react": "^18.2.37",
62
+ "@types/react": "^18.2.58",
63
63
  "@types/react-avatar-editor": "^13.0.2",
64
- "@types/react-dom": "^18.2.15",
64
+ "@types/react-dom": "^18.2.19",
65
65
  "@types/react-input-mask": "^3.0.5",
66
- "chart.js": "^4.4.0",
66
+ "chart.js": "^4.4.1",
67
67
  "chartjs-plugin-datalabels": "^2.2.0",
68
68
  "pica": "^9.0.1",
69
69
  "pulltorefreshjs": "^0.1.22",
70
70
  "react": "^18.2.0",
71
- "react-avatar-editor": "^13.0.0",
71
+ "react-avatar-editor": "^13.0.2",
72
72
  "react-chartjs-2": "^5.2.0",
73
73
  "react-dom": "^18.2.0",
74
74
  "react-draggable": "^4.4.6",
75
- "react-imask": "6.6.3"
75
+ "react-imask": "7.4.0"
76
76
  },
77
77
  "devDependencies": {
78
- "@babel/cli": "^7.23.0",
79
- "@babel/core": "^7.23.3",
80
- "@babel/plugin-transform-runtime": "^7.23.3",
81
- "@babel/preset-env": "^7.23.3",
78
+ "@babel/cli": "^7.23.9",
79
+ "@babel/core": "^7.23.9",
80
+ "@babel/plugin-transform-runtime": "^7.23.9",
81
+ "@babel/preset-env": "^7.23.9",
82
82
  "@babel/preset-react": "^7.23.3",
83
83
  "@babel/preset-typescript": "^7.23.3",
84
- "@babel/runtime-corejs3": "^7.23.2",
85
- "@testing-library/jest-dom": "^6.1.4",
86
- "@testing-library/react": "^14.1.0",
87
- "@types/jest": "^29.5.8",
88
- "@typescript-eslint/eslint-plugin": "^6.11.0",
89
- "@typescript-eslint/parser": "^6.11.0",
84
+ "@babel/runtime-corejs3": "^7.23.9",
85
+ "@testing-library/jest-dom": "^6.4.2",
86
+ "@testing-library/react": "^14.2.1",
87
+ "@types/jest": "^29.5.12",
88
+ "@typescript-eslint/eslint-plugin": "^7.0.2",
89
+ "@typescript-eslint/parser": "^7.0.2",
90
90
  "jest": "^29.7.0",
91
91
  "jest-environment-jsdom": "^29.7.0",
92
- "typescript": "^5.2.2"
92
+ "typescript": "^5.3.3"
93
93
  }
94
94
  }
package/src/HiSelector.tsx CHANGED
@@ -90,6 +90,11 @@ export type HiSelectorProps<
90
90
  * Values
91
91
  */
92
92
  values?: T[D][];
93
+
94
+ /**
95
+ * Variant
96
+ */
97
+ variant?: "outlined" | "standard" | "filled";
93
98
  };
94
99
 
95
100
  /**
@@ -118,7 +123,8 @@ export function HiSelector<
118
123
  onItemChange,
119
124
  required,
120
125
  search = true,
121
- values = []
126
+ values = [],
127
+ variant = "outlined"
122
128
  } = props;
123
129
 
124
130
  // Value type
@@ -184,6 +190,7 @@ export function HiSelector<
184
190
  required={required}
185
191
  error={error}
186
192
  helperText={helperText}
193
+ variant={variant}
187
194
  />
188
195
  </Grid>
189
196
  {localValues[0] != null && (
@@ -200,6 +207,7 @@ export function HiSelector<
200
207
  value={values[1]}
201
208
  onChange={(event) => doChange(event, 1)}
202
209
  onItemChange={doItemChange}
210
+ variant={variant}
203
211
  />
204
212
  </Grid>
205
213
  )}
@@ -217,6 +225,7 @@ export function HiSelector<
217
225
  value={values[2]}
218
226
  onChange={(event) => doChange(event, 2)}
219
227
  onItemChange={doItemChange}
228
+ variant={variant}
220
229
  />
221
230
  </Grid>
222
231
  )}
@@ -234,6 +243,7 @@ export function HiSelector<
234
243
  value={values[3]}
235
244
  onChange={(event) => doChange(event, 3)}
236
245
  onItemChange={doItemChange}
246
+ variant={variant}
237
247
  />
238
248
  </Grid>
239
249
  )}
package/src/MaskInput.tsx CHANGED
@@ -1,46 +1,38 @@
1
- import { TextField, TextFieldProps } from '@mui/material';
2
- import React from 'react';
3
- import { MUGlobal } from './MUGlobal';
4
- import { useIMask } from 'react-imask';
1
+ import { TextField, TextFieldProps } from "@mui/material";
2
+ import React from "react";
3
+ import { MUGlobal } from "./MUGlobal";
4
+ import { type InputMask, type FactoryOpts } from "imask";
5
+ import { useIMask } from "react-imask";
5
6
 
6
7
  /**
7
8
  * Mask input props
8
9
  */
9
- export type MaskInputProps<T extends IMask.AnyMaskedOptions> =
10
- TextFieldProps & {
11
- /**
12
- * Mask props
13
- */
14
- mask: T;
10
+ export type MaskInputProps<T extends FactoryOpts> = TextFieldProps & {
11
+ /**
12
+ * Mask props
13
+ */
14
+ mask: T;
15
15
 
16
- /**
17
- * Accept hanlder
18
- */
19
- onAccept?: (
20
- value: unknown,
21
- maskRef: IMask.InputMask<T>,
22
- e?: InputEvent
23
- ) => void;
16
+ /**
17
+ * Accept hanlder
18
+ */
19
+ onAccept?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
24
20
 
25
- /**
26
- * Complete handler
27
- */
28
- onComplete?: (
29
- value: unknown,
30
- maskRef: IMask.InputMask<T>,
31
- e?: InputEvent
32
- ) => void;
21
+ /**
22
+ * Complete handler
23
+ */
24
+ onComplete?: (value: unknown, maskRef: InputMask<T>, e?: InputEvent) => void;
33
25
 
34
- /**
35
- * Is the field read only?
36
- */
37
- readOnly?: boolean;
26
+ /**
27
+ * Is the field read only?
28
+ */
29
+ readOnly?: boolean;
38
30
 
39
- /**
40
- * Search case
41
- */
42
- search?: boolean;
43
- };
31
+ /**
32
+ * Search case
33
+ */
34
+ search?: boolean;
35
+ };
44
36
 
45
37
  /**
46
38
  * Mask input
@@ -48,60 +40,58 @@ export type MaskInputProps<T extends IMask.AnyMaskedOptions> =
48
40
  * @param props Props
49
41
  * @returns Component
50
42
  */
51
- export function MaskInput<
52
- T extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions
53
- >(props: MaskInputProps<T>) {
54
- // Destruct
55
- const {
56
- defaultValue,
57
- mask,
58
- InputLabelProps = {},
59
- InputProps = {},
60
- onAccept,
61
- onComplete,
62
- readOnly,
63
- search = false,
64
- size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
65
- value,
66
- variant = search
67
- ? MUGlobal.searchFieldVariant
68
- : MUGlobal.inputFieldVariant,
69
- ...rest
70
- } = props;
43
+ export function MaskInput<T extends FactoryOpts = FactoryOpts>(
44
+ props: MaskInputProps<T>
45
+ ) {
46
+ // Destruct
47
+ const {
48
+ defaultValue,
49
+ mask,
50
+ InputLabelProps = {},
51
+ InputProps = {},
52
+ onAccept,
53
+ onComplete,
54
+ readOnly,
55
+ search = false,
56
+ size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
57
+ value,
58
+ variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant,
59
+ ...rest
60
+ } = props;
71
61
 
72
- const { ref, maskRef } = useIMask(mask, {
73
- onAccept: (value, maskRef, event) => {
74
- if (onAccept) onAccept(value, maskRef, event);
75
- },
76
- onComplete: (value, maskRef, event) => {
77
- if (onComplete) onComplete(value, maskRef, event);
78
- }
79
- });
80
- const localValue = defaultValue ?? value;
62
+ const { ref, maskRef } = useIMask(mask, {
63
+ onAccept: (value, maskRef, event) => {
64
+ if (onAccept) onAccept(value, maskRef, event);
65
+ },
66
+ onComplete: (value, maskRef, event) => {
67
+ if (onComplete) onComplete(value, maskRef, event);
68
+ }
69
+ });
70
+ const localValue = defaultValue ?? value;
81
71
 
82
- // Shrink
83
- InputLabelProps.shrink ??= search
84
- ? MUGlobal.searchFieldShrink
85
- : MUGlobal.inputFieldShrink;
72
+ // Shrink
73
+ InputLabelProps.shrink ??= search
74
+ ? MUGlobal.searchFieldShrink
75
+ : MUGlobal.inputFieldShrink;
86
76
 
87
- // Read only
88
- if (readOnly != null) InputProps.readOnly = readOnly;
89
- InputProps.inputRef = ref;
77
+ // Read only
78
+ if (readOnly != null) InputProps.readOnly = readOnly;
79
+ InputProps.inputRef = ref;
90
80
 
91
- React.useEffect(() => {
92
- if (maskRef.current == null || localValue == null) return;
93
- maskRef.current.value = String(localValue);
94
- maskRef.current.updateValue();
95
- }, [maskRef.current, localValue]);
81
+ React.useEffect(() => {
82
+ if (maskRef.current == null || localValue == null) return;
83
+ maskRef.current.value = String(localValue);
84
+ maskRef.current.updateValue();
85
+ }, [maskRef.current, localValue]);
96
86
 
97
- // Layout
98
- return (
99
- <TextField
100
- InputLabelProps={InputLabelProps}
101
- InputProps={InputProps}
102
- size={size}
103
- variant={variant}
104
- {...rest}
105
- />
106
- );
87
+ // Layout
88
+ return (
89
+ <TextField
90
+ InputLabelProps={InputLabelProps}
91
+ InputProps={InputProps}
92
+ size={size}
93
+ variant={variant}
94
+ {...rest}
95
+ />
96
+ );
107
97
  }
package/src/pages/ViewPage.tsx CHANGED
@@ -89,7 +89,7 @@ export interface ViewPageField<T extends object> extends GridProps {
89
89
  /**
90
90
  * Label field
91
91
  */
92
- label?: string | (() => React.ReactNode);
92
+ label?: string | ((item: T) => React.ReactNode);
93
93
 
94
94
  /**
95
95
  * Display as single row
@@ -235,7 +235,7 @@ function getItemField<T extends object>(
235
235
  // Field label
236
236
  itemLabel =
237
237
  typeof fieldLabel === "function"
238
- ? fieldLabel()
238
+ ? fieldLabel(data)
239
239
  : fieldLabel != null
240
240
  ? globalApp?.get<string>(fieldLabel) ?? fieldLabel
241
241
  : fieldLabel;