@etsoo/materialui 1.3.35 → 1.3.37

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/HiSelector.d.ts +4 -0
  2. package/lib/HiSelector.js +5 -5
  3. package/lib/MaskInput.d.ts +7 -6
  4. package/lib/MaskInput.js +5 -7
  5. package/lib/SelectEx.d.ts +6 -2
  6. package/package.json +25 -25
  7. package/src/HiSelector.tsx +11 -1
  8. package/src/MaskInput.tsx +76 -86
  9. package/src/SelectEx.tsx +7 -1
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/SelectEx.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { SelectProps } from "@mui/material";
1
+ import { SelectProps, SelectVariants } from "@mui/material";
2
2
  import React from "react";
3
3
  import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
4
4
  /**
5
5
  * Extended select component props
6
6
  */
7
- export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = Omit<SelectProps, "labelId" | "input" | "native"> & {
7
+ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = Omit<SelectProps, "labelId" | "input" | "native" | "variant"> & {
8
8
  /**
9
9
  * Auto add blank item
10
10
  */
@@ -61,6 +61,10 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
61
61
  * Is search case?
62
62
  */
63
63
  search?: boolean;
64
+ /**
65
+ * Variant
66
+ */
67
+ variant?: SelectVariants;
64
68
  };
65
69
  /**
66
70
  * Extended select component
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.3.35",
3
+ "version": "1.3.37",
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.19",
58
- "@mui/material": "^5.14.19",
59
- "@mui/x-data-grid": "^6.18.2",
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.40",
62
+ "@types/react": "^18.2.58",
63
63
  "@types/react-avatar-editor": "^13.0.2",
64
- "@types/react-dom": "^18.2.17",
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.4",
79
- "@babel/core": "^7.23.5",
80
- "@babel/plugin-transform-runtime": "^7.23.4",
81
- "@babel/preset-env": "^7.23.5",
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.5",
85
- "@testing-library/jest-dom": "^6.1.5",
86
- "@testing-library/react": "^14.1.2",
87
- "@types/jest": "^29.5.10",
88
- "@typescript-eslint/eslint-plugin": "^6.13.1",
89
- "@typescript-eslint/parser": "^6.13.1",
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.3.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/SelectEx.tsx CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  OutlinedInput,
10
10
  Select,
11
11
  SelectProps,
12
+ SelectVariants,
12
13
  Stack
13
14
  } from "@mui/material";
14
15
  import React from "react";
@@ -32,7 +33,7 @@ export type SelectExProps<
32
33
  T extends object,
33
34
  D extends DataTypes.Keys<T> = IdDefaultType<T>,
34
35
  L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
35
- > = Omit<SelectProps, "labelId" | "input" | "native"> & {
36
+ > = Omit<SelectProps, "labelId" | "input" | "native" | "variant"> & {
36
37
  /**
37
38
  * Auto add blank item
38
39
  */
@@ -102,6 +103,11 @@ export type SelectExProps<
102
103
  * Is search case?
103
104
  */
104
105
  search?: boolean;
106
+
107
+ /**
108
+ * Variant
109
+ */
110
+ variant?: SelectVariants;
105
111
  };
106
112
 
107
113
  /**