@etsoo/materialui 1.6.43 → 1.6.44
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.
- package/lib/cjs/DnDSortableList.d.ts +3 -3
- package/lib/cjs/NumberInputField.d.ts +4 -0
- package/lib/cjs/NumberInputField.js +5 -3
- package/lib/mjs/DnDSortableList.d.ts +3 -3
- package/lib/mjs/NumberInputField.d.ts +4 -0
- package/lib/mjs/NumberInputField.js +5 -3
- package/package.json +5 -5
- package/src/DnDSortableList.tsx +6 -4
- package/src/NumberInputField.tsx +10 -1
|
@@ -2,7 +2,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { CSSProperties, Theme } from "@mui/material/styles";
|
|
4
4
|
import { useSortable } from "@dnd-kit/react/sortable";
|
|
5
|
-
import {
|
|
5
|
+
import { DragDropEventHandlers } from "@dnd-kit/react";
|
|
6
6
|
/**
|
|
7
7
|
* DnD sortable item default style
|
|
8
8
|
* @param index Item index
|
|
@@ -91,11 +91,11 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
|
|
|
91
91
|
/**
|
|
92
92
|
* Drag start handler
|
|
93
93
|
*/
|
|
94
|
-
onDragStart?: (items: D[], event: Parameters<
|
|
94
|
+
onDragStart?: (items: D[], event: Parameters<DragDropEventHandlers["onDragStart"]>[0]) => void;
|
|
95
95
|
/**
|
|
96
96
|
* Drag end handler
|
|
97
97
|
*/
|
|
98
|
-
onDragEnd?: (items: D[], ...args: Parameters<
|
|
98
|
+
onDragEnd?: (items: D[], ...args: Parameters<DragDropEventHandlers["onDragEnd"]>) => void;
|
|
99
99
|
};
|
|
100
100
|
/**
|
|
101
101
|
* DnD sortable list component
|
|
@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
|
|
|
9
9
|
const InputField_1 = require("./InputField");
|
|
10
10
|
const shared_1 = require("@etsoo/shared");
|
|
11
11
|
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
|
|
12
|
+
const MUGlobal_1 = require("./MUGlobal");
|
|
12
13
|
/**
|
|
13
14
|
* Number input field, for controlled only components, please see IntInputField and MoneyInputField
|
|
14
15
|
* @param props Props
|
|
@@ -17,12 +18,13 @@ const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment")
|
|
|
17
18
|
function NumberInputField(props) {
|
|
18
19
|
const { currency, inputStyle, min = 0, step = 1, symbol = currency
|
|
19
20
|
? `${currency} ${shared_1.NumberUtils.getCurrencySymbol(currency)}`
|
|
20
|
-
: undefined, endSymbol, max = 9999999, slotProps = {}, ...rest } = props;
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", slotProps: Object.assign(slotProps, {
|
|
21
|
+
: undefined, endSymbol, max = 9999999, search = false, slotProps = {}, ...rest } = props;
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", size: search ? MUGlobal_1.MUGlobal.searchFieldSize : undefined, slotProps: Object.assign(slotProps, {
|
|
22
23
|
input: {
|
|
23
24
|
startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
|
|
24
25
|
endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
|
|
25
26
|
},
|
|
27
|
+
inputLabel: { shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : undefined },
|
|
26
28
|
htmlInput: {
|
|
27
29
|
min,
|
|
28
30
|
step,
|
|
@@ -30,5 +32,5 @@ function NumberInputField(props) {
|
|
|
30
32
|
style: inputStyle,
|
|
31
33
|
inputMode: "numeric"
|
|
32
34
|
}
|
|
33
|
-
}), ...rest }));
|
|
35
|
+
}), variant: search ? MUGlobal_1.MUGlobal.searchFieldVariant : undefined, ...rest }));
|
|
34
36
|
}
|
|
@@ -2,7 +2,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { CSSProperties, Theme } from "@mui/material/styles";
|
|
4
4
|
import { useSortable } from "@dnd-kit/react/sortable";
|
|
5
|
-
import {
|
|
5
|
+
import { DragDropEventHandlers } from "@dnd-kit/react";
|
|
6
6
|
/**
|
|
7
7
|
* DnD sortable item default style
|
|
8
8
|
* @param index Item index
|
|
@@ -91,11 +91,11 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
|
|
|
91
91
|
/**
|
|
92
92
|
* Drag start handler
|
|
93
93
|
*/
|
|
94
|
-
onDragStart?: (items: D[], event: Parameters<
|
|
94
|
+
onDragStart?: (items: D[], event: Parameters<DragDropEventHandlers["onDragStart"]>[0]) => void;
|
|
95
95
|
/**
|
|
96
96
|
* Drag end handler
|
|
97
97
|
*/
|
|
98
|
-
onDragEnd?: (items: D[], ...args: Parameters<
|
|
98
|
+
onDragEnd?: (items: D[], ...args: Parameters<DragDropEventHandlers["onDragEnd"]>) => void;
|
|
99
99
|
};
|
|
100
100
|
/**
|
|
101
101
|
* DnD sortable list component
|
|
@@ -3,6 +3,7 @@ import React from "react";
|
|
|
3
3
|
import { InputField } from "./InputField";
|
|
4
4
|
import { NumberUtils } from "@etsoo/shared";
|
|
5
5
|
import InputAdornment from "@mui/material/InputAdornment";
|
|
6
|
+
import { MUGlobal } from "./MUGlobal";
|
|
6
7
|
/**
|
|
7
8
|
* Number input field, for controlled only components, please see IntInputField and MoneyInputField
|
|
8
9
|
* @param props Props
|
|
@@ -11,12 +12,13 @@ import InputAdornment from "@mui/material/InputAdornment";
|
|
|
11
12
|
export function NumberInputField(props) {
|
|
12
13
|
const { currency, inputStyle, min = 0, step = 1, symbol = currency
|
|
13
14
|
? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
|
|
14
|
-
: undefined, endSymbol, max = 9999999, slotProps = {}, ...rest } = props;
|
|
15
|
-
return (_jsx(InputField, { type: "number", slotProps: Object.assign(slotProps, {
|
|
15
|
+
: undefined, endSymbol, max = 9999999, search = false, slotProps = {}, ...rest } = props;
|
|
16
|
+
return (_jsx(InputField, { type: "number", size: search ? MUGlobal.searchFieldSize : undefined, slotProps: Object.assign(slotProps, {
|
|
16
17
|
input: {
|
|
17
18
|
startAdornment: symbol ? (_jsx(React.Fragment, { children: _jsx(InputAdornment, { position: "start", children: symbol }) })) : undefined,
|
|
18
19
|
endAdornment: endSymbol ? (_jsx(InputAdornment, { position: "end", children: endSymbol })) : undefined
|
|
19
20
|
},
|
|
21
|
+
inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : undefined },
|
|
20
22
|
htmlInput: {
|
|
21
23
|
min,
|
|
22
24
|
step,
|
|
@@ -24,5 +26,5 @@ export function NumberInputField(props) {
|
|
|
24
26
|
style: inputStyle,
|
|
25
27
|
inputMode: "numeric"
|
|
26
28
|
}
|
|
27
|
-
}), ...rest }));
|
|
29
|
+
}), variant: search ? MUGlobal.searchFieldVariant : undefined, ...rest }));
|
|
28
30
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@etsoo/materialui",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.44",
|
|
4
4
|
"description": "TypeScript Material-UI Implementation",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/mjs/index.js",
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/ETSOO/ReactMU#readme",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@base-ui/react": "^1.
|
|
40
|
-
"@dnd-kit/react": "^0.
|
|
39
|
+
"@base-ui/react": "^1.4.0",
|
|
40
|
+
"@dnd-kit/react": "^0.4.0",
|
|
41
41
|
"@emotion/react": "^11.14.0",
|
|
42
42
|
"@emotion/styled": "^11.14.1",
|
|
43
43
|
"@etsoo/appscript": "^1.6.60",
|
|
44
44
|
"@etsoo/notificationbase": "^1.1.69",
|
|
45
45
|
"@etsoo/react": "^1.8.84",
|
|
46
|
-
"@etsoo/shared": "^1.2.
|
|
46
|
+
"@etsoo/shared": "^1.2.83",
|
|
47
47
|
"@mui/icons-material": "^9.0.0",
|
|
48
48
|
"@mui/material": "^9.0.0",
|
|
49
49
|
"@mui/x-data-grid": "^9.0.1",
|
|
50
50
|
"chart.js": "^4.5.1",
|
|
51
51
|
"chartjs-plugin-datalabels": "^2.2.0",
|
|
52
|
-
"dompurify": "^3.
|
|
52
|
+
"dompurify": "^3.4.0",
|
|
53
53
|
"eventemitter3": "^5.0.4",
|
|
54
54
|
"pica": "^9.0.1",
|
|
55
55
|
"pulltorefreshjs": "^0.1.22",
|
package/src/DnDSortableList.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { CSSProperties, Theme, useTheme } from "@mui/material/styles";
|
|
4
4
|
import { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
|
|
5
|
-
import {
|
|
5
|
+
import { DragDropEventHandlers, DragDropProvider } from "@dnd-kit/react";
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* DnD sortable item default style
|
|
@@ -126,7 +126,7 @@ export type DnDSortableListProps<
|
|
|
126
126
|
*/
|
|
127
127
|
onDragStart?: (
|
|
128
128
|
items: D[],
|
|
129
|
-
event: Parameters<
|
|
129
|
+
event: Parameters<DragDropEventHandlers["onDragStart"]>[0]
|
|
130
130
|
) => void;
|
|
131
131
|
|
|
132
132
|
/**
|
|
@@ -134,7 +134,7 @@ export type DnDSortableListProps<
|
|
|
134
134
|
*/
|
|
135
135
|
onDragEnd?: (
|
|
136
136
|
items: D[],
|
|
137
|
-
...args: Parameters<
|
|
137
|
+
...args: Parameters<DragDropEventHandlers["onDragEnd"]>
|
|
138
138
|
) => void;
|
|
139
139
|
};
|
|
140
140
|
|
|
@@ -293,7 +293,9 @@ export function DnDSortableList<
|
|
|
293
293
|
};
|
|
294
294
|
}, [items, labelFn, changeItems]);
|
|
295
295
|
|
|
296
|
-
function handleDragEnd(
|
|
296
|
+
function handleDragEnd(
|
|
297
|
+
...args: Parameters<DragDropEventHandlers["onDragEnd"]>
|
|
298
|
+
) {
|
|
297
299
|
// Event
|
|
298
300
|
const event = args[0];
|
|
299
301
|
|
package/src/NumberInputField.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import { InputField, InputFieldProps } from "./InputField";
|
|
|
3
3
|
import { Currency } from "@etsoo/appscript";
|
|
4
4
|
import { NumberUtils } from "@etsoo/shared";
|
|
5
5
|
import InputAdornment from "@mui/material/InputAdornment";
|
|
6
|
-
import {
|
|
6
|
+
import { MUGlobal } from "./MUGlobal";
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Number input field properties
|
|
@@ -42,6 +42,11 @@ export type NumberInputFieldProps = Omit<
|
|
|
42
42
|
*/
|
|
43
43
|
max?: number;
|
|
44
44
|
|
|
45
|
+
/**
|
|
46
|
+
* Is search field?
|
|
47
|
+
*/
|
|
48
|
+
search?: boolean;
|
|
49
|
+
|
|
45
50
|
/**
|
|
46
51
|
* Step value
|
|
47
52
|
*/
|
|
@@ -64,6 +69,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
|
|
|
64
69
|
: undefined,
|
|
65
70
|
endSymbol,
|
|
66
71
|
max = 9999999,
|
|
72
|
+
search = false,
|
|
67
73
|
slotProps = {},
|
|
68
74
|
...rest
|
|
69
75
|
} = props;
|
|
@@ -71,6 +77,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
|
|
|
71
77
|
return (
|
|
72
78
|
<InputField
|
|
73
79
|
type="number"
|
|
80
|
+
size={search ? MUGlobal.searchFieldSize : undefined}
|
|
74
81
|
slotProps={Object.assign(slotProps, {
|
|
75
82
|
input: {
|
|
76
83
|
startAdornment: symbol ? (
|
|
@@ -82,6 +89,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
|
|
|
82
89
|
<InputAdornment position="end">{endSymbol}</InputAdornment>
|
|
83
90
|
) : undefined
|
|
84
91
|
},
|
|
92
|
+
inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : undefined },
|
|
85
93
|
htmlInput: {
|
|
86
94
|
min,
|
|
87
95
|
step,
|
|
@@ -90,6 +98,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
|
|
|
90
98
|
inputMode: "numeric"
|
|
91
99
|
}
|
|
92
100
|
})}
|
|
101
|
+
variant={search ? MUGlobal.searchFieldVariant : undefined}
|
|
93
102
|
{...rest}
|
|
94
103
|
/>
|
|
95
104
|
);
|