@etsoo/materialui 1.3.21 → 1.3.25

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/__tests__/SelectEx.tsx +3 -3
  2. package/lib/ComboBoxMultiple.js +1 -1
  3. package/lib/HiSelector.d.ts +4 -0
  4. package/lib/HiSelector.js +5 -5
  5. package/lib/HiSelectorTL.d.ts +4 -0
  6. package/lib/HiSelectorTL.js +5 -5
  7. package/package.json +18 -18
  8. package/src/ComboBoxMultiple.tsx +2 -0
  9. package/src/HiSelector.tsx +10 -0
  10. package/src/HiSelectorTL.tsx +10 -4
  11. package/src/SelectEx.tsx +1 -1
package/__tests__/SelectEx.tsx CHANGED
@@ -20,7 +20,7 @@ it("Render SelectEx", async () => {
20
20
  });
21
21
 
22
22
  // Render component
23
- const { baseElement } = render(
23
+ render(
24
24
  <SelectEx<T>
25
25
  options={options}
26
26
  name="test"
@@ -34,7 +34,7 @@ it("Render SelectEx", async () => {
34
34
  expect(itemChangeCallback).toBeCalled();
35
35
 
36
36
  // Act, click to show the list
37
- const button = screen.getByRole("button");
37
+ const button = screen.getByRole("combobox");
38
38
 
39
39
  // https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b
40
40
  act(() => {
@@ -89,7 +89,7 @@ it("Render multiple SelectEx", async () => {
89
89
  expect(itemChangeCallback).toBeCalled();
90
90
 
91
91
  // Act, click to show the list
92
- const button = screen.getByRole("button");
92
+ const button = screen.getByRole("combobox");
93
93
  fireEvent.mouseDown(button); // Not click
94
94
 
95
95
  // Get list item
package/lib/ComboBoxMultiple.js CHANGED
@@ -127,5 +127,5 @@ export function ComboBoxMultiple(props) {
127
127
  // Custom
128
128
  if (onChange != null)
129
129
  onChange(event, value, reason, details);
130
- }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })));
130
+ }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, value: getValue(stateValue) })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, value: getValue(stateValue) })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })));
131
131
  }
package/lib/HiSelector.d.ts CHANGED
@@ -29,6 +29,10 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
29
29
  * Label
30
30
  */
31
31
  label?: string;
32
+ /**
33
+ * Labels for each select
34
+ */
35
+ labels?: string[];
32
36
  /**
33
37
  * Label field
34
38
  */
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", 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 = [] } = 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, 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 })),
47
47
  localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
48
- React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, 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 }))),
49
49
  localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
50
- React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, 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 }))),
51
51
  localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
52
- React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, 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 })))));
53
53
  }
package/lib/HiSelectorTL.d.ts CHANGED
@@ -29,6 +29,10 @@ export type HiSelectorTLProps<T extends object, D extends DataTypes.Keys<T> = Id
29
29
  * Label
30
30
  */
31
31
  label?: string;
32
+ /**
33
+ * Labels for each select
34
+ */
35
+ labels?: string[];
32
36
  /**
33
37
  * Load data callback
34
38
  */
package/lib/HiSelectorTL.js CHANGED
@@ -8,7 +8,7 @@ import { Tiplist } from "./Tiplist";
8
8
  */
9
9
  export function HiSelectorTL(props) {
10
10
  // Destruct
11
- const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, loadData, onChange, onItemChange, required, search = false, values = [] } = props;
11
+ const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, labels = ["1", "2", "3", "4"], loadData, onChange, onItemChange, required, search = false, values = [] } = props;
12
12
  const [localValues, setValues] = React.useState(values);
13
13
  const updateValue = (value) => {
14
14
  if (onChange)
@@ -37,11 +37,11 @@ export function HiSelectorTL(props) {
37
37
  React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
38
38
  React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
39
39
  React.createElement(Grid, { item: true, ...breakPoints },
40
- React.createElement(Tiplist, { idField: idField, label: "1", name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) })),
40
+ React.createElement(Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) })),
41
41
  localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
42
- React.createElement(Tiplist, { key: `${localValues[0]}`, label: "2", idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }))),
42
+ React.createElement(Tiplist, { key: `${localValues[0]}`, label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }))),
43
43
  localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
44
- React.createElement(Tiplist, { key: `${localValues[1]}`, label: "3", idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }))),
44
+ React.createElement(Tiplist, { key: `${localValues[1]}`, label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }))),
45
45
  localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
46
- React.createElement(Tiplist, { key: `${localValues[2]}`, label: "4", idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) })))));
46
+ React.createElement(Tiplist, { key: `${localValues[2]}`, label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) })))));
47
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.3.21",
3
+ "version": "1.3.25",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,19 +50,19 @@
50
50
  "@emotion/css": "^11.11.2",
51
51
  "@emotion/react": "^11.11.1",
52
52
  "@emotion/styled": "^11.11.0",
53
- "@etsoo/appscript": "^1.4.54",
53
+ "@etsoo/appscript": "^1.4.56",
54
54
  "@etsoo/notificationbase": "^1.1.28",
55
- "@etsoo/react": "^1.7.11",
56
- "@etsoo/shared": "^1.2.12",
57
- "@mui/icons-material": "^5.14.9",
58
- "@mui/material": "^5.14.9",
59
- "@mui/x-data-grid": "^6.14.0",
60
- "@types/pica": "^9.0.1",
55
+ "@etsoo/react": "^1.7.16",
56
+ "@etsoo/shared": "^1.2.15",
57
+ "@mui/icons-material": "^5.14.12",
58
+ "@mui/material": "^5.14.12",
59
+ "@mui/x-data-grid": "^6.16.1",
60
+ "@types/pica": "^9.0.2",
61
61
  "@types/pulltorefreshjs": "^0.1.5",
62
- "@types/react": "^18.2.21",
62
+ "@types/react": "^18.2.27",
63
63
  "@types/react-avatar-editor": "^13.0.0",
64
- "@types/react-dom": "^18.2.7",
65
- "@types/react-input-mask": "^3.0.2",
64
+ "@types/react-dom": "^18.2.12",
65
+ "@types/react-input-mask": "^3.0.3",
66
66
  "chart.js": "^4.4.0",
67
67
  "chartjs-plugin-datalabels": "^2.2.0",
68
68
  "pica": "^9.0.1",
@@ -71,22 +71,22 @@
71
71
  "react-avatar-editor": "^13.0.0",
72
72
  "react-chartjs-2": "^5.2.0",
73
73
  "react-dom": "^18.2.0",
74
- "react-draggable": "^4.4.5",
74
+ "react-draggable": "^4.4.6",
75
75
  "react-imask": "6.6.3"
76
76
  },
77
77
  "devDependencies": {
78
- "@babel/cli": "^7.22.15",
79
- "@babel/core": "^7.22.20",
78
+ "@babel/cli": "^7.23.0",
79
+ "@babel/core": "^7.23.0",
80
80
  "@babel/plugin-transform-runtime": "^7.22.15",
81
81
  "@babel/preset-env": "^7.22.20",
82
82
  "@babel/preset-react": "^7.22.15",
83
- "@babel/preset-typescript": "^7.22.15",
84
- "@babel/runtime-corejs3": "^7.22.15",
83
+ "@babel/preset-typescript": "^7.23.0",
84
+ "@babel/runtime-corejs3": "^7.23.1",
85
85
  "@testing-library/jest-dom": "^6.1.3",
86
86
  "@testing-library/react": "^14.0.0",
87
87
  "@types/jest": "^29.5.5",
88
- "@typescript-eslint/eslint-plugin": "^6.7.0",
89
- "@typescript-eslint/parser": "^6.7.0",
88
+ "@typescript-eslint/eslint-plugin": "^6.7.5",
89
+ "@typescript-eslint/parser": "^6.7.5",
90
90
  "jest": "^29.7.0",
91
91
  "jest-environment-jsdom": "^29.7.0",
92
92
  "typescript": "^5.2.2"
package/src/ComboBoxMultiple.tsx CHANGED
@@ -285,6 +285,7 @@ export function ComboBoxMultiple<
285
285
  required={inputRequired}
286
286
  error={inputError}
287
287
  helperText={inputHelperText}
288
+ value={getValue(stateValue)}
288
289
  />
289
290
  ) : (
290
291
  <InputField
@@ -296,6 +297,7 @@ export function ComboBoxMultiple<
296
297
  required={inputRequired}
297
298
  error={inputError}
298
299
  helperText={inputHelperText}
300
+ value={getValue(stateValue)}
299
301
  />
300
302
  )
301
303
  }
package/src/HiSelector.tsx CHANGED
@@ -46,6 +46,11 @@ export type HiSelectorProps<
46
46
  */
47
47
  label?: string;
48
48
 
49
+ /**
50
+ * Labels for each select
51
+ */
52
+ labels?: string[];
53
+
49
54
  /**
50
55
  * Label field
51
56
  */
@@ -106,6 +111,7 @@ export function HiSelector<
106
111
  name,
107
112
  label,
108
113
  labelField = "name" as L,
114
+ labels = ["1", "2", "3", "4"],
109
115
  loadData,
110
116
  onChange,
111
117
  onSelectChange,
@@ -166,6 +172,7 @@ export function HiSelector<
166
172
  <Grid item {...breakPoints}>
167
173
  <SelectEx<T, D, L>
168
174
  idField={idField}
175
+ label={labels[0]}
169
176
  labelField={labelField}
170
177
  name="tab1"
171
178
  search={search}
@@ -184,6 +191,7 @@ export function HiSelector<
184
191
  <SelectEx<T, D, L>
185
192
  key={`${localValues[0]}`}
186
193
  idField={idField}
194
+ label={labels[1]}
187
195
  labelField={labelField}
188
196
  name="tab2"
189
197
  search={search}
@@ -200,6 +208,7 @@ export function HiSelector<
200
208
  <SelectEx<T, D, L>
201
209
  key={`${localValues[1]}`}
202
210
  idField={idField}
211
+ label={labels[2]}
203
212
  labelField={labelField}
204
213
  name="tab3"
205
214
  search={search}
@@ -216,6 +225,7 @@ export function HiSelector<
216
225
  <SelectEx<T, D, L>
217
226
  key={`${localValues[2]}`}
218
227
  idField={idField}
228
+ label={labels[3]}
219
229
  labelField={labelField}
220
230
  name="tab4"
221
231
  search={search}
package/src/HiSelectorTL.tsx CHANGED
@@ -46,6 +46,11 @@ export type HiSelectorTLProps<
46
46
  */
47
47
  label?: string;
48
48
 
49
+ /**
50
+ * Labels for each select
51
+ */
52
+ labels?: string[];
53
+
49
54
  /**
50
55
  * Load data callback
51
56
  */
@@ -103,6 +108,7 @@ export function HiSelectorTL<
103
108
  helperText,
104
109
  name,
105
110
  label = name,
111
+ labels = ["1", "2", "3", "4"],
106
112
  loadData,
107
113
  onChange,
108
114
  onItemChange,
@@ -161,7 +167,7 @@ export function HiSelectorTL<
161
167
  <Grid item {...breakPoints}>
162
168
  <Tiplist<T, D>
163
169
  idField={idField}
164
- label="1"
170
+ label={labels[0]}
165
171
  name="tab1"
166
172
  search={search}
167
173
  fullWidth
@@ -177,7 +183,7 @@ export function HiSelectorTL<
177
183
  <Grid item {...breakPoints}>
178
184
  <Tiplist<T, D>
179
185
  key={`${localValues[0]}`}
180
- label="2"
186
+ label={labels[1]}
181
187
  idField={idField}
182
188
  name="tab2"
183
189
  search={search}
@@ -196,7 +202,7 @@ export function HiSelectorTL<
196
202
  <Grid item {...breakPoints}>
197
203
  <Tiplist<T, D>
198
204
  key={`${localValues[1]}`}
199
- label="3"
205
+ label={labels[2]}
200
206
  idField={idField}
201
207
  name="tab3"
202
208
  search={search}
@@ -215,7 +221,7 @@ export function HiSelectorTL<
215
221
  <Grid item {...breakPoints}>
216
222
  <Tiplist<T, D>
217
223
  key={`${localValues[2]}`}
218
- label="4"
224
+ label={labels[3]}
219
225
  idField={idField}
220
226
  name="tab4"
221
227
  search={search}
package/src/SelectEx.tsx CHANGED
@@ -354,7 +354,7 @@ export function SelectEx<
354
354
  return (
355
355
  <MenuItem
356
356
  key={id}
357
- value={id}
357
+ value={id as any}
358
358
  onClick={(event) => {
359
359
  if (onItemClick) {
360
360
  onItemClick(event, option);