@etsoo/materialui 1.5.85 → 1.5.87

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 (6) hide show
  1. package/lib/cjs/InputTipField.d.ts +29 -26
  2. package/lib/cjs/InputTipField.js +4 -3
  3. package/lib/mjs/InputTipField.d.ts +29 -26
  4. package/lib/mjs/InputTipField.js +4 -3
  5. package/package.json +4 -4
  6. package/src/InputTipField.tsx +48 -39
package/lib/cjs/InputTipField.d.ts CHANGED
@@ -1,11 +1,13 @@
1
- import { DataTypes } from "@etsoo/shared";
1
+ import { IdType } from "@etsoo/shared";
2
2
  import { TypographyProps } from "@mui/material/Typography";
3
3
  import React from "react";
4
4
  import { InputField } from "./InputField";
5
5
  import { EmailInput } from "./EmailInput";
6
6
  import { MobileInput } from "./MobileInput";
7
7
  import { PhoneInput } from "./PhoneInput";
8
- type ItemType = DataTypes.IdLabelItem<string | number>;
8
+ type ItemType = {
9
+ id: IdType;
10
+ };
9
11
  declare const componentMap: {
10
12
  input: typeof InputField;
11
13
  email: typeof EmailInput;
@@ -17,36 +19,37 @@ type ComponentKey = keyof ComponentMap;
17
19
  /**
18
20
  * InputField with tips properties
19
21
  */
20
- export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = {
22
+ export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
21
23
  /**
22
24
  * Component key
23
25
  */
24
26
  component?: K;
25
27
  /**
26
- * Component props
27
- */
28
- componentProps?: React.ComponentProps<ComponentMap[K]>;
29
- /**
30
- * Load data
31
- * @param value Duplicate test value
32
- */
33
- loadData(value: string): Promise<[T[]?, string?]>;
34
- /**
35
- * Label props
36
- */
37
- labelProps?: Omit<TypographyProps, "onClick">;
38
- /**
39
- * Custom item label
40
- * @param item List item data
41
- * @returns Result
42
- */
43
- itemLabel?: (item: T) => React.ReactNode;
44
- /**
45
- * Custom render item
46
- * @param item List item data
47
- * @returns Result
28
+ * Component properties
48
29
  */
49
- renderItem?: (item: T) => React.ReactNode;
30
+ componentProps: {
31
+ /**
32
+ * Load data
33
+ * @param value Duplicate test value
34
+ */
35
+ loadData(value: string): Promise<[T[]?, string?]>;
36
+ /**
37
+ * Label props
38
+ */
39
+ labelProps?: Omit<TypographyProps, "onClick">;
40
+ /**
41
+ * Custom item label
42
+ * @param item List item data
43
+ * @returns Result
44
+ */
45
+ itemLabel?: (item: T) => React.ReactNode;
46
+ /**
47
+ * Custom render item
48
+ * @param item List item data
49
+ * @returns Result
50
+ */
51
+ renderItem?: (item: T) => React.ReactNode;
52
+ };
50
53
  };
51
54
  /**
52
55
  * InputField with tips
package/lib/cjs/InputTipField.js CHANGED
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.InputTipField = InputTipField;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const shared_1 = require("@etsoo/shared");
8
9
  const Typography_1 = __importDefault(require("@mui/material/Typography"));
9
10
  const react_1 = __importDefault(require("react"));
10
11
  const InputField_1 = require("./InputField");
@@ -35,11 +36,11 @@ function InputTipField(props) {
35
36
  const [anchorEl, setAnchorEl] = react_1.default.useState();
36
37
  const [data, setData] = react_1.default.useState();
37
38
  // Destruct
39
+ const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
38
40
  const { labelProps = {
39
41
  title: app?.get("clickForDetails"),
40
42
  sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
41
- }, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id), component = "input", componentProps = {}, ...rest } = props;
42
- const { changeDelay = 480, onChangeDelay, slotProps = {} } = componentProps;
43
+ }, loadData, itemLabel = (item) => shared_1.DataTypes.getObjectItemLabel(item), renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id) } = componentProps;
43
44
  const { input, ...slotRests } = slotProps;
44
45
  const Component = componentMap[component];
45
46
  const load = (value) => {
@@ -55,7 +56,7 @@ function InputTipField(props) {
55
56
  return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.default, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
56
57
  vertical: "bottom",
57
58
  horizontal: "left"
58
- }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(Component, { changeDelay: changeDelay, onChangeDelay: (event) => {
59
+ }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(Component, { changeDelay: changeDelay, fullWidth: fullWidth, onChangeDelay: (event) => {
59
60
  load(event.target.value);
60
61
  if (onChangeDelay)
61
62
  onChangeDelay(event);
package/lib/mjs/InputTipField.d.ts CHANGED
@@ -1,11 +1,13 @@
1
- import { DataTypes } from "@etsoo/shared";
1
+ import { IdType } from "@etsoo/shared";
2
2
  import { TypographyProps } from "@mui/material/Typography";
3
3
  import React from "react";
4
4
  import { InputField } from "./InputField";
5
5
  import { EmailInput } from "./EmailInput";
6
6
  import { MobileInput } from "./MobileInput";
7
7
  import { PhoneInput } from "./PhoneInput";
8
- type ItemType = DataTypes.IdLabelItem<string | number>;
8
+ type ItemType = {
9
+ id: IdType;
10
+ };
9
11
  declare const componentMap: {
10
12
  input: typeof InputField;
11
13
  email: typeof EmailInput;
@@ -17,36 +19,37 @@ type ComponentKey = keyof ComponentMap;
17
19
  /**
18
20
  * InputField with tips properties
19
21
  */
20
- export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = {
22
+ export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
21
23
  /**
22
24
  * Component key
23
25
  */
24
26
  component?: K;
25
27
  /**
26
- * Component props
27
- */
28
- componentProps?: React.ComponentProps<ComponentMap[K]>;
29
- /**
30
- * Load data
31
- * @param value Duplicate test value
32
- */
33
- loadData(value: string): Promise<[T[]?, string?]>;
34
- /**
35
- * Label props
36
- */
37
- labelProps?: Omit<TypographyProps, "onClick">;
38
- /**
39
- * Custom item label
40
- * @param item List item data
41
- * @returns Result
42
- */
43
- itemLabel?: (item: T) => React.ReactNode;
44
- /**
45
- * Custom render item
46
- * @param item List item data
47
- * @returns Result
28
+ * Component properties
48
29
  */
49
- renderItem?: (item: T) => React.ReactNode;
30
+ componentProps: {
31
+ /**
32
+ * Load data
33
+ * @param value Duplicate test value
34
+ */
35
+ loadData(value: string): Promise<[T[]?, string?]>;
36
+ /**
37
+ * Label props
38
+ */
39
+ labelProps?: Omit<TypographyProps, "onClick">;
40
+ /**
41
+ * Custom item label
42
+ * @param item List item data
43
+ * @returns Result
44
+ */
45
+ itemLabel?: (item: T) => React.ReactNode;
46
+ /**
47
+ * Custom render item
48
+ * @param item List item data
49
+ * @returns Result
50
+ */
51
+ renderItem?: (item: T) => React.ReactNode;
52
+ };
50
53
  };
51
54
  /**
52
55
  * InputField with tips
package/lib/mjs/InputTipField.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { DataTypes } from "@etsoo/shared";
2
3
  import Typography from "@mui/material/Typography";
3
4
  import React from "react";
4
5
  import { InputField } from "./InputField";
@@ -29,11 +30,11 @@ export function InputTipField(props) {
29
30
  const [anchorEl, setAnchorEl] = React.useState();
30
31
  const [data, setData] = React.useState();
31
32
  // Destruct
33
+ const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
32
34
  const { labelProps = {
33
35
  title: app?.get("clickForDetails"),
34
36
  sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
35
- }, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id), component = "input", componentProps = {}, ...rest } = props;
36
- const { changeDelay = 480, onChangeDelay, slotProps = {} } = componentProps;
37
+ }, loadData, itemLabel = (item) => DataTypes.getObjectItemLabel(item), renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id) } = componentProps;
37
38
  const { input, ...slotRests } = slotProps;
38
39
  const Component = componentMap[component];
39
40
  const load = (value) => {
@@ -49,7 +50,7 @@ export function InputTipField(props) {
49
50
  return (_jsxs(React.Fragment, { children: [_jsx(Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
50
51
  vertical: "bottom",
51
52
  horizontal: "left"
52
- }, children: data && _jsx(List, { children: data.map((item) => renderItem(item)) }) }), _jsx(Component, { changeDelay: changeDelay, onChangeDelay: (event) => {
53
+ }, children: data && _jsx(List, { children: data.map((item) => renderItem(item)) }) }), _jsx(Component, { changeDelay: changeDelay, fullWidth: fullWidth, onChangeDelay: (event) => {
53
54
  load(event.target.value);
54
55
  if (onChangeDelay)
55
56
  onChangeDelay(event);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.85",
3
+ "version": "1.5.87",
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.1",
43
43
  "@etsoo/appscript": "^1.6.48",
44
44
  "@etsoo/notificationbase": "^1.1.66",
45
- "@etsoo/react": "^1.8.62",
45
+ "@etsoo/react": "^1.8.63",
46
46
  "@etsoo/shared": "^1.2.79",
47
47
  "@mui/icons-material": "^7.3.5",
48
48
  "@mui/material": "^7.3.5",
@@ -76,13 +76,13 @@
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": "^19.2.4",
79
+ "@types/react": "^19.2.5",
80
80
  "@types/react-avatar-editor": "^13.0.4",
81
81
  "@types/react-dom": "^19.2.3",
82
82
  "@types/react-input-mask": "^3.0.6",
83
83
  "@vitejs/plugin-react": "^5.1.1",
84
84
  "jsdom": "^27.2.0",
85
85
  "typescript": "^5.9.3",
86
- "vitest": "^4.0.8"
86
+ "vitest": "^4.0.9"
87
87
  }
88
88
  }
package/src/InputTipField.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { DataTypes } from "@etsoo/shared";
1
+ import { DataTypes, IdType } from "@etsoo/shared";
2
2
  import Typography, { TypographyProps } from "@mui/material/Typography";
3
3
  import React from "react";
4
4
  import { InputField } from "./InputField";
@@ -11,7 +11,9 @@ import { EmailInput } from "./EmailInput";
11
11
  import { MobileInput } from "./MobileInput";
12
12
  import { PhoneInput } from "./PhoneInput";
13
13
 
14
- type ItemType = DataTypes.IdLabelItem<string | number>;
14
+ type ItemType = {
15
+ id: IdType;
16
+ };
15
17
 
16
18
  const componentMap = {
17
19
  input: InputField,
@@ -29,41 +31,41 @@ type ComponentKey = keyof ComponentMap;
29
31
  export type InputTipFieldProps<
30
32
  T extends ItemType = ItemType,
31
33
  K extends ComponentKey = "input"
32
- > = {
34
+ > = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
33
35
  /**
34
36
  * Component key
35
37
  */
36
38
  component?: K;
37
39
 
38
40
  /**
39
- * Component props
40
- */
41
- componentProps?: React.ComponentProps<ComponentMap[K]>;
42
-
43
- /**
44
- * Load data
45
- * @param value Duplicate test value
46
- */
47
- loadData(value: string): Promise<[T[]?, string?]>;
48
-
49
- /**
50
- * Label props
51
- */
52
- labelProps?: Omit<TypographyProps, "onClick">;
53
-
54
- /**
55
- * Custom item label
56
- * @param item List item data
57
- * @returns Result
58
- */
59
- itemLabel?: (item: T) => React.ReactNode;
60
-
61
- /**
62
- * Custom render item
63
- * @param item List item data
64
- * @returns Result
41
+ * Component properties
65
42
  */
66
- renderItem?: (item: T) => React.ReactNode;
43
+ componentProps: {
44
+ /**
45
+ * Load data
46
+ * @param value Duplicate test value
47
+ */
48
+ loadData(value: string): Promise<[T[]?, string?]>;
49
+
50
+ /**
51
+ * Label props
52
+ */
53
+ labelProps?: Omit<TypographyProps, "onClick">;
54
+
55
+ /**
56
+ * Custom item label
57
+ * @param item List item data
58
+ * @returns Result
59
+ */
60
+ itemLabel?: (item: T) => React.ReactNode;
61
+
62
+ /**
63
+ * Custom render item
64
+ * @param item List item data
65
+ * @returns Result
66
+ */
67
+ renderItem?: (item: T) => React.ReactNode;
68
+ };
67
69
  };
68
70
 
69
71
  /**
@@ -84,23 +86,29 @@ export function InputTipField<
84
86
  const [data, setData] = React.useState<T[]>();
85
87
 
86
88
  // Destruct
89
+ const {
90
+ component = "input",
91
+ componentProps,
92
+ changeDelay = 480,
93
+ onChangeDelay,
94
+ fullWidth = true,
95
+ slotProps = {},
96
+ ...rest
97
+ } = props;
98
+
87
99
  const {
88
100
  labelProps = {
89
101
  title: app?.get("clickForDetails"),
90
102
  sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
91
103
  },
92
104
  loadData,
93
- itemLabel = (item) => item.label,
94
- renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
95
- component = "input",
96
- componentProps = {} as React.ComponentProps<ComponentMap[K]>,
97
- ...rest
98
- } = props;
105
+ itemLabel = (item) => DataTypes.getObjectItemLabel(item),
106
+ renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>
107
+ } = componentProps;
99
108
 
100
- const { changeDelay = 480, onChangeDelay, slotProps = {} } = componentProps;
101
109
  const { input, ...slotRests } = slotProps;
102
110
 
103
- const Component: typeof InputField = componentMap[component];
111
+ const Component = componentMap[component];
104
112
 
105
113
  const load = (value: string) => {
106
114
  if (value.length < 2) {
@@ -129,6 +137,7 @@ export function InputTipField<
129
137
  </Popover>
130
138
  <Component
131
139
  changeDelay={changeDelay}
140
+ fullWidth={fullWidth}
132
141
  onChangeDelay={(event) => {
133
142
  load(event.target.value);
134
143
  if (onChangeDelay) onChangeDelay(event);
@@ -151,7 +160,7 @@ export function InputTipField<
151
160
  },
152
161
  ...slotRests
153
162
  }}
154
- {...rest}
163
+ {...(rest as any)}
155
164
  />
156
165
  </React.Fragment>
157
166
  );