@etsoo/materialui 1.5.82 → 1.5.83

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 (13) hide show
  1. package/lib/cjs/EmailInput.js +7 -3
  2. package/lib/cjs/InputField.js +16 -9
  3. package/lib/cjs/MobileInput.js +6 -2
  4. package/lib/cjs/PhoneInput.js +6 -2
  5. package/lib/mjs/EmailInput.js +7 -3
  6. package/lib/mjs/InputField.js +16 -9
  7. package/lib/mjs/MobileInput.js +6 -2
  8. package/lib/mjs/PhoneInput.js +6 -2
  9. package/package.json +1 -1
  10. package/src/EmailInput.tsx +8 -3
  11. package/src/InputField.tsx +17 -13
  12. package/src/MobileInput.tsx +7 -2
  13. package/src/PhoneInput.tsx +7 -2
package/lib/cjs/EmailInput.js CHANGED
@@ -7,6 +7,7 @@ exports.EmailInput = EmailInput;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const TextField_1 = __importDefault(require("@mui/material/TextField"));
9
9
  const ReactApp_1 = require("./app/ReactApp");
10
+ const MUGlobal_1 = require("./MUGlobal");
10
11
  /**
11
12
  * Email input
12
13
  * @param props Props
@@ -15,10 +16,13 @@ function EmailInput(props) {
15
16
  // Global app
16
17
  const app = (0, ReactApp_1.useAppContext)();
17
18
  // Destruct
18
- const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", ...rest } = props;
19
+ const { autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", slotProps, ...rest } = props;
20
+ // Slot props
21
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
19
22
  // Layout
20
23
  return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
21
- htmlInput: { inputMode: "email", maxLength: 128 },
22
- ...slotProps
24
+ htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
25
+ inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
26
+ ...restSlotProps
23
27
  }, ...rest }));
24
28
  }
package/lib/cjs/InputField.js CHANGED
@@ -16,14 +16,9 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
16
16
  */
17
17
  exports.InputField = react_2.default.forwardRef((props, ref) => {
18
18
  // Destruct
19
- const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
20
- // Shrink
21
- InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
22
- // Read only
23
- if (readOnly != null)
24
- InputProps.readOnly = readOnly;
25
- // Min characters
26
- inputProps["data-min-chars"] = minChars;
19
+ const { InputProps = {}, inputProps = {}, changeDelay, slotProps, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
20
+ // Slot props
21
+ const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
27
22
  const isMounted = react_2.default.useRef(true);
28
23
  const createDelayed = () => {
29
24
  if (changeDelay != null && changeDelay >= 1) {
@@ -54,5 +49,17 @@ exports.InputField = react_2.default.forwardRef((props, ref) => {
54
49
  };
55
50
  }, []);
56
51
  // Layout
57
- return ((0, jsx_runtime_1.jsx)(TextField_1.default, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
52
+ return ((0, jsx_runtime_1.jsx)(TextField_1.default, { ref: ref, slotProps: {
53
+ htmlInput: {
54
+ ["data-min-chars"]: minChars,
55
+ ...htmlInput,
56
+ ...inputProps
57
+ },
58
+ input: { readOnly, ...input, ...InputProps },
59
+ inputLabel: {
60
+ shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
61
+ ...inputLabel
62
+ },
63
+ ...restSlotProps
64
+ }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
58
65
  });
package/lib/cjs/MobileInput.js CHANGED
@@ -7,6 +7,7 @@ exports.MobileInput = MobileInput;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const TextField_1 = __importDefault(require("@mui/material/TextField"));
9
9
  const ReactApp_1 = require("./app/ReactApp");
10
+ const MUGlobal_1 = require("./MUGlobal");
10
11
  /**
11
12
  * Mobile input
12
13
  * @param props Props
@@ -16,9 +17,12 @@ function MobileInput(props) {
16
17
  const app = (0, ReactApp_1.useAppContext)();
17
18
  // Destruct
18
19
  const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, label = app?.get("mobile"), name = "mobile", ...rest } = props;
20
+ // Slot props
21
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
19
22
  // Layout
20
23
  return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
21
- htmlInput: { inputMode: "tel", maxLength: 18 },
22
- ...slotProps
24
+ htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
25
+ inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
26
+ ...restSlotProps
23
27
  }, ...rest }));
24
28
  }
package/lib/cjs/PhoneInput.js CHANGED
@@ -7,6 +7,7 @@ exports.PhoInput = PhoInput;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const TextField_1 = __importDefault(require("@mui/material/TextField"));
9
9
  const ReactApp_1 = require("./app/ReactApp");
10
+ const MUGlobal_1 = require("./MUGlobal");
10
11
  /**
11
12
  * Phone input
12
13
  * @param props Props
@@ -16,9 +17,12 @@ function PhoInput(props) {
16
17
  const app = (0, ReactApp_1.useAppContext)();
17
18
  // Destruct
18
19
  const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, label = app?.get("phone"), name = "phone", ...rest } = props;
20
+ // Slot props
21
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
19
22
  // Layout
20
23
  return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
21
- htmlInput: { inputMode: "tel", maxLength: 18 },
22
- ...slotProps
24
+ htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
25
+ inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
26
+ ...restSlotProps
23
27
  }, ...rest }));
24
28
  }
package/lib/mjs/EmailInput.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import TextField from "@mui/material/TextField";
3
3
  import { useAppContext } from "./app/ReactApp";
4
+ import { MUGlobal } from "./MUGlobal";
4
5
  /**
5
6
  * Email input
6
7
  * @param props Props
@@ -9,10 +10,13 @@ export function EmailInput(props) {
9
10
  // Global app
10
11
  const app = useAppContext();
11
12
  // Destruct
12
- const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", ...rest } = props;
13
+ const { autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", slotProps, ...rest } = props;
14
+ // Slot props
15
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
13
16
  // Layout
14
17
  return (_jsx(TextField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
15
- htmlInput: { inputMode: "email", maxLength: 128 },
16
- ...slotProps
18
+ htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
19
+ inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
20
+ ...restSlotProps
17
21
  }, ...rest }));
18
22
  }
package/lib/mjs/InputField.js CHANGED
@@ -10,14 +10,9 @@ import TextField from "@mui/material/TextField";
10
10
  */
11
11
  export const InputField = React.forwardRef((props, ref) => {
12
12
  // Destruct
13
- const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
14
- // Shrink
15
- InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
16
- // Read only
17
- if (readOnly != null)
18
- InputProps.readOnly = readOnly;
19
- // Min characters
20
- inputProps["data-min-chars"] = minChars;
13
+ const { InputProps = {}, inputProps = {}, changeDelay, slotProps, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
14
+ // Slot props
15
+ const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
21
16
  const isMounted = React.useRef(true);
22
17
  const createDelayed = () => {
23
18
  if (changeDelay != null && changeDelay >= 1) {
@@ -48,5 +43,17 @@ export const InputField = React.forwardRef((props, ref) => {
48
43
  };
49
44
  }, []);
50
45
  // Layout
51
- return (_jsx(TextField, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
46
+ return (_jsx(TextField, { ref: ref, slotProps: {
47
+ htmlInput: {
48
+ ["data-min-chars"]: minChars,
49
+ ...htmlInput,
50
+ ...inputProps
51
+ },
52
+ input: { readOnly, ...input, ...InputProps },
53
+ inputLabel: {
54
+ shrink: MUGlobal.inputFieldShrink,
55
+ ...inputLabel
56
+ },
57
+ ...restSlotProps
58
+ }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
52
59
  });
package/lib/mjs/MobileInput.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import TextField from "@mui/material/TextField";
3
3
  import { useAppContext } from "./app/ReactApp";
4
+ import { MUGlobal } from "./MUGlobal";
4
5
  /**
5
6
  * Mobile input
6
7
  * @param props Props
@@ -10,9 +11,12 @@ export function MobileInput(props) {
10
11
  const app = useAppContext();
11
12
  // Destruct
12
13
  const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, label = app?.get("mobile"), name = "mobile", ...rest } = props;
14
+ // Slot props
15
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
13
16
  // Layout
14
17
  return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
15
- htmlInput: { inputMode: "tel", maxLength: 18 },
16
- ...slotProps
18
+ htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
19
+ inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
20
+ ...restSlotProps
17
21
  }, ...rest }));
18
22
  }
package/lib/mjs/PhoneInput.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import TextField from "@mui/material/TextField";
3
3
  import { useAppContext } from "./app/ReactApp";
4
+ import { MUGlobal } from "./MUGlobal";
4
5
  /**
5
6
  * Phone input
6
7
  * @param props Props
@@ -10,9 +11,12 @@ export function PhoInput(props) {
10
11
  const app = useAppContext();
11
12
  // Destruct
12
13
  const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, label = app?.get("phone"), name = "phone", ...rest } = props;
14
+ // Slot props
15
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
13
16
  // Layout
14
17
  return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
15
- htmlInput: { inputMode: "tel", maxLength: 18 },
16
- ...slotProps
18
+ htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
19
+ inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
20
+ ...restSlotProps
17
21
  }, ...rest }));
18
22
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.82",
3
+ "version": "1.5.83",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
package/src/EmailInput.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import TextField, { TextFieldProps } from "@mui/material/TextField";
2
2
  import { useAppContext } from "./app/ReactApp";
3
+ import { MUGlobal } from "./MUGlobal";
3
4
 
4
5
  /**
5
6
  * Email input props
@@ -16,16 +17,19 @@ export function EmailInput(props: EmailInputProps) {
16
17
 
17
18
  // Destruct
18
19
  const {
19
- slotProps,
20
20
  autoCapitalize = "none",
21
21
  autoCorrect = "off",
22
22
  autoComplete = "email",
23
23
  fullWidth = true,
24
24
  label = app?.get("email"),
25
25
  name = "email",
26
+ slotProps,
26
27
  ...rest
27
28
  } = props;
28
29
 
30
+ // Slot props
31
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
32
+
29
33
  // Layout
30
34
  return (
31
35
  <TextField
@@ -37,8 +41,9 @@ export function EmailInput(props: EmailInputProps) {
37
41
  label={label}
38
42
  name={name}
39
43
  slotProps={{
40
- htmlInput: { inputMode: "email", maxLength: 128 },
41
- ...slotProps
44
+ htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
45
+ inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
46
+ ...restSlotProps
42
47
  }}
43
48
  {...rest}
44
49
  />
package/src/InputField.tsx CHANGED
@@ -39,10 +39,10 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
39
39
  (props, ref) => {
40
40
  // Destruct
41
41
  const {
42
- changeDelay,
43
- InputLabelProps = {},
44
42
  InputProps = {},
45
43
  inputProps = {},
44
+ changeDelay,
45
+ slotProps,
46
46
  onChange,
47
47
  onChangeDelay,
48
48
  readOnly,
@@ -52,14 +52,8 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
52
52
  ...rest
53
53
  } = props;
54
54
 
55
- // Shrink
56
- InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
57
-
58
- // Read only
59
- if (readOnly != null) InputProps.readOnly = readOnly;
60
-
61
- // Min characters
62
- inputProps["data-min-chars"] = minChars;
55
+ // Slot props
56
+ const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
63
57
 
64
58
  const isMounted = React.useRef(true);
65
59
  const createDelayed = () => {
@@ -100,9 +94,19 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
100
94
  return (
101
95
  <TextField
102
96
  ref={ref}
103
- InputLabelProps={InputLabelProps}
104
- InputProps={InputProps}
105
- inputProps={inputProps}
97
+ slotProps={{
98
+ htmlInput: {
99
+ ["data-min-chars"]: minChars,
100
+ ...htmlInput,
101
+ ...inputProps
102
+ },
103
+ input: { readOnly, ...input, ...InputProps },
104
+ inputLabel: {
105
+ shrink: MUGlobal.inputFieldShrink,
106
+ ...inputLabel
107
+ },
108
+ ...restSlotProps
109
+ }}
106
110
  onChange={onChangeEx}
107
111
  size={size}
108
112
  variant={variant}
package/src/MobileInput.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import TextField, { TextFieldProps } from "@mui/material/TextField";
2
2
  import { useAppContext } from "./app/ReactApp";
3
+ import { MUGlobal } from "./MUGlobal";
3
4
 
4
5
  /**
5
6
  * Mobile input props
@@ -26,6 +27,9 @@ export function MobileInput(props: MobileInputProps) {
26
27
  ...rest
27
28
  } = props;
28
29
 
30
+ // Slot props
31
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
32
+
29
33
  // Layout
30
34
  return (
31
35
  <TextField
@@ -37,8 +41,9 @@ export function MobileInput(props: MobileInputProps) {
37
41
  label={label}
38
42
  name={name}
39
43
  slotProps={{
40
- htmlInput: { inputMode: "tel", maxLength: 18 },
41
- ...slotProps
44
+ htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
45
+ inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
46
+ ...restSlotProps
42
47
  }}
43
48
  {...rest}
44
49
  />
package/src/PhoneInput.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import TextField, { TextFieldProps } from "@mui/material/TextField";
2
2
  import { useAppContext } from "./app/ReactApp";
3
+ import { MUGlobal } from "./MUGlobal";
3
4
 
4
5
  /**
5
6
  * Phone input props
@@ -26,6 +27,9 @@ export function PhoInput(props: PhoneInputProps) {
26
27
  ...rest
27
28
  } = props;
28
29
 
30
+ // Slot props
31
+ const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
32
+
29
33
  // Layout
30
34
  return (
31
35
  <TextField
@@ -37,8 +41,9 @@ export function PhoInput(props: PhoneInputProps) {
37
41
  label={label}
38
42
  name={name}
39
43
  slotProps={{
40
- htmlInput: { inputMode: "tel", maxLength: 18 },
41
- ...slotProps
44
+ htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
45
+ inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
46
+ ...restSlotProps
42
47
  }}
43
48
  {...rest}
44
49
  />