@etsoo/materialui 1.6.39 → 1.6.40

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/UserAvatarEditor.js +7 -4
  2. package/lib/mjs/UserAvatarEditor.js +7 -4
  3. package/package.json +8 -8
  4. package/src/UserAvatarEditor.tsx +13 -7
  5. package/tsconfig.cjs.json +1 -1
  6. package/tsconfig.json +2 -2
package/lib/cjs/UserAvatarEditor.js CHANGED
@@ -15,6 +15,7 @@ const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
15
15
  const Add_1 = __importDefault(require("@mui/icons-material/Add"));
16
16
  const Labels_1 = require("./app/Labels");
17
17
  const FileUploadButton_1 = require("./FileUploadButton");
18
+ const react_avatar_editor_1 = __importDefault(require("react-avatar-editor"));
18
19
  const Stack_1 = __importDefault(require("@mui/material/Stack"));
19
20
  const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
20
21
  const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
@@ -42,7 +43,7 @@ function UserAvatarEditor(props) {
42
43
  // Calculated max width
43
44
  const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
44
45
  // Ref
45
- const ref = react_1.default.createRef();
46
+ const ref = react_1.default.useRef(null);
46
47
  // Image type
47
48
  const type = react_1.default.useRef("image/jpeg");
48
49
  // Button ref
@@ -87,6 +88,10 @@ function UserAvatarEditor(props) {
87
88
  };
88
89
  // Handle image load
89
90
  const handleLoad = (imageInfo) => {
91
+ if (imageInfo.resource == null ||
92
+ imageInfo.height == null ||
93
+ imageInfo.width == null)
94
+ return;
90
95
  // Ignore too small images
91
96
  if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10)
92
97
  return;
@@ -167,8 +172,6 @@ function UserAvatarEditor(props) {
167
172
  }
168
173
  }
169
174
  };
170
- // Load the component
171
- const AE = react_1.default.lazy(() => import("react-avatar-editor"));
172
- return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, width: containerWidth, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
175
+ return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, width: containerWidth, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(react_avatar_editor_1.default, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
173
176
  "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(Slider_1.default, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
174
177
  }
package/lib/mjs/UserAvatarEditor.js CHANGED
@@ -9,6 +9,7 @@ import RemoveIcon from "@mui/icons-material/Remove";
9
9
  import AddIcon from "@mui/icons-material/Add";
10
10
  import { Labels } from "./app/Labels";
11
11
  import { FileUploadButton } from "./FileUploadButton";
12
+ import AvatarEditor from "react-avatar-editor";
12
13
  import Stack from "@mui/material/Stack";
13
14
  import Skeleton from "@mui/material/Skeleton";
14
15
  import ButtonGroup from "@mui/material/ButtonGroup";
@@ -36,7 +37,7 @@ export function UserAvatarEditor(props) {
36
37
  // Calculated max width
37
38
  const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
38
39
  // Ref
39
- const ref = React.createRef();
40
+ const ref = React.useRef(null);
40
41
  // Image type
41
42
  const type = React.useRef("image/jpeg");
42
43
  // Button ref
@@ -81,6 +82,10 @@ export function UserAvatarEditor(props) {
81
82
  };
82
83
  // Handle image load
83
84
  const handleLoad = (imageInfo) => {
85
+ if (imageInfo.resource == null ||
86
+ imageInfo.height == null ||
87
+ imageInfo.width == null)
88
+ return;
84
89
  // Ignore too small images
85
90
  if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10)
86
91
  return;
@@ -161,8 +166,6 @@ export function UserAvatarEditor(props) {
161
166
  }
162
167
  }
163
168
  };
164
- // Load the component
165
- const AE = React.lazy(() => import("react-avatar-editor"));
166
- return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
169
+ return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AvatarEditor, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
167
170
  "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
168
171
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.6.39",
3
+ "version": "1.6.40",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
40
40
  "@dnd-kit/react": "^0.3.2",
41
41
  "@emotion/react": "^11.14.0",
42
42
  "@emotion/styled": "^11.14.1",
43
- "@etsoo/appscript": "^1.6.59",
44
- "@etsoo/notificationbase": "^1.1.68",
45
- "@etsoo/react": "^1.8.83",
46
- "@etsoo/shared": "^1.2.81",
43
+ "@etsoo/appscript": "^1.6.60",
44
+ "@etsoo/notificationbase": "^1.1.69",
45
+ "@etsoo/react": "^1.8.84",
46
+ "@etsoo/shared": "^1.2.82",
47
47
  "@mui/icons-material": "^7.3.9",
48
48
  "@mui/material": "^7.3.9",
49
- "@mui/x-data-grid": "^8.28.1",
49
+ "@mui/x-data-grid": "^8.28.2",
50
50
  "chart.js": "^4.5.1",
51
51
  "chartjs-plugin-datalabels": "^2.2.0",
52
52
  "dompurify": "^3.3.3",
@@ -54,7 +54,7 @@
54
54
  "pica": "^9.0.1",
55
55
  "pulltorefreshjs": "^0.1.22",
56
56
  "react": "^19.2.4",
57
- "react-avatar-editor": "^13.0.2",
57
+ "react-avatar-editor": "^15.1.0",
58
58
  "react-chartjs-2": "^5.3.1",
59
59
  "react-dom": "^19.2.4",
60
60
  "react-draggable": "^4.5.0",
@@ -81,7 +81,7 @@
81
81
  "@types/react-input-mask": "^3.0.6",
82
82
  "@vitejs/plugin-react": "^6.0.1",
83
83
  "jsdom": "^29.0.1",
84
- "typescript": "^5.9.3",
84
+ "typescript": "^6.0.2",
85
85
  "vitest": "^4.1.2"
86
86
  }
87
87
  }
package/src/UserAvatarEditor.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import type AvatarEditor from "react-avatar-editor";
3
2
  import RotateLeftIcon from "@mui/icons-material/RotateLeft";
4
3
  import RotateRightIcon from "@mui/icons-material/RotateRight";
5
4
  import ClearAllIcon from "@mui/icons-material/ClearAll";
@@ -9,7 +8,10 @@ import RemoveIcon from "@mui/icons-material/Remove";
9
8
  import AddIcon from "@mui/icons-material/Add";
10
9
  import { Labels } from "./app/Labels";
11
10
  import { FileUploadButton } from "./FileUploadButton";
12
- import { ImageState } from "react-avatar-editor";
11
+ import AvatarEditor, {
12
+ type ImageState,
13
+ type AvatarEditorRef
14
+ } from "react-avatar-editor";
13
15
  import Stack from "@mui/material/Stack";
14
16
  import Skeleton from "@mui/material/Skeleton";
15
17
  import ButtonGroup from "@mui/material/ButtonGroup";
@@ -132,7 +134,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
132
134
  maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
133
135
 
134
136
  // Ref
135
- const ref = React.createRef<AvatarEditor>();
137
+ const ref = React.useRef<AvatarEditorRef>(null);
136
138
 
137
139
  // Image type
138
140
  const type = React.useRef<string>("image/jpeg");
@@ -196,6 +198,13 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
196
198
 
197
199
  // Handle image load
198
200
  const handleLoad = (imageInfo: ImageState) => {
201
+ if (
202
+ imageInfo.resource == null ||
203
+ imageInfo.height == null ||
204
+ imageInfo.width == null
205
+ )
206
+ return;
207
+
199
208
  // Ignore too small images
200
209
  if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10) return;
201
210
 
@@ -293,9 +302,6 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
293
302
  }
294
303
  };
295
304
 
296
- // Load the component
297
- const AE = React.lazy(() => import("react-avatar-editor"));
298
-
299
305
  return (
300
306
  <Stack direction="column" spacing={0.5} width={containerWidth}>
301
307
  <FileUploadButton
@@ -314,7 +320,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
314
320
  <Skeleton variant="rounded" width={width} height={localHeight} />
315
321
  }
316
322
  >
317
- <AE
323
+ <AvatarEditor
318
324
  ref={ref}
319
325
  border={border}
320
326
  width={width}
package/tsconfig.cjs.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  /* Visit https://aka.ms/tsconfig.json to read more about this file */
4
- "target": "ES2022",
4
+ "target": "ES2025",
5
5
  "module": "NodeNext",
6
6
  "moduleResolution": "NodeNext",
7
7
  "isolatedModules": true,
package/tsconfig.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  /* Visit https://aka.ms/tsconfig.json to read more about this file */
4
- "target": "ES2022",
5
- "module": "ES2022",
4
+ "target": "ES2025",
5
+ "module": "ESNext",
6
6
  "moduleResolution": "bundler",
7
7
  "allowJs": false,
8
8
  "isolatedModules": true,