@useupup/react 3.3.0

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 (71) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +72 -0
  3. package/dist/AudioUploader-2WITC5YR.js +298 -0
  4. package/dist/AudioUploader-2WITC5YR.js.map +1 -0
  5. package/dist/AudioUploader-HWP4U6UJ.cjs +298 -0
  6. package/dist/AudioUploader-HWP4U6UJ.cjs.map +1 -0
  7. package/dist/BoxUploader-NEGZOMR4.cjs +172 -0
  8. package/dist/BoxUploader-NEGZOMR4.cjs.map +1 -0
  9. package/dist/BoxUploader-VE5LRJ7M.js +172 -0
  10. package/dist/BoxUploader-VE5LRJ7M.js.map +1 -0
  11. package/dist/CameraUploader-BJ3AU3VS.cjs +200 -0
  12. package/dist/CameraUploader-BJ3AU3VS.cjs.map +1 -0
  13. package/dist/CameraUploader-WF5A6UIS.js +200 -0
  14. package/dist/CameraUploader-WF5A6UIS.js.map +1 -0
  15. package/dist/DropboxUploader-INTOYHJP.cjs +174 -0
  16. package/dist/DropboxUploader-INTOYHJP.cjs.map +1 -0
  17. package/dist/DropboxUploader-VMUYG3OP.js +174 -0
  18. package/dist/DropboxUploader-VMUYG3OP.js.map +1 -0
  19. package/dist/GoogleDriveUploader-CXZUZI6R.cjs +177 -0
  20. package/dist/GoogleDriveUploader-CXZUZI6R.cjs.map +1 -0
  21. package/dist/GoogleDriveUploader-YA56X3QR.js +177 -0
  22. package/dist/GoogleDriveUploader-YA56X3QR.js.map +1 -0
  23. package/dist/ImageEditorInline-GJ3HCPPZ.cjs +185 -0
  24. package/dist/ImageEditorInline-GJ3HCPPZ.cjs.map +1 -0
  25. package/dist/ImageEditorInline-N2NSAODR.js +185 -0
  26. package/dist/ImageEditorInline-N2NSAODR.js.map +1 -0
  27. package/dist/ImageEditorModal-CWKMDVPY.js +236 -0
  28. package/dist/ImageEditorModal-CWKMDVPY.js.map +1 -0
  29. package/dist/ImageEditorModal-XJKPBTVQ.cjs +236 -0
  30. package/dist/ImageEditorModal-XJKPBTVQ.cjs.map +1 -0
  31. package/dist/OneDriveUploader-4RPTY7KT.cjs +175 -0
  32. package/dist/OneDriveUploader-4RPTY7KT.cjs.map +1 -0
  33. package/dist/OneDriveUploader-I25Y6AJP.js +175 -0
  34. package/dist/OneDriveUploader-I25Y6AJP.js.map +1 -0
  35. package/dist/ScreenCaptureUploader-7K6QPD42.cjs +281 -0
  36. package/dist/ScreenCaptureUploader-7K6QPD42.cjs.map +1 -0
  37. package/dist/ScreenCaptureUploader-WKDO4S75.js +281 -0
  38. package/dist/ScreenCaptureUploader-WKDO4S75.js.map +1 -0
  39. package/dist/chunk-6TFTTLOD.js +852 -0
  40. package/dist/chunk-6TFTTLOD.js.map +1 -0
  41. package/dist/chunk-DZQBTC6T.cjs +39 -0
  42. package/dist/chunk-DZQBTC6T.cjs.map +1 -0
  43. package/dist/chunk-GNMEQB32.cjs +195 -0
  44. package/dist/chunk-GNMEQB32.cjs.map +1 -0
  45. package/dist/chunk-IG62MHVQ.cjs +276 -0
  46. package/dist/chunk-IG62MHVQ.cjs.map +1 -0
  47. package/dist/chunk-L3E5OMY7.cjs +852 -0
  48. package/dist/chunk-L3E5OMY7.cjs.map +1 -0
  49. package/dist/chunk-LCMDDPUD.js +276 -0
  50. package/dist/chunk-LCMDDPUD.js.map +1 -0
  51. package/dist/chunk-N4XGN66E.cjs +79 -0
  52. package/dist/chunk-N4XGN66E.cjs.map +1 -0
  53. package/dist/chunk-N7TWHP5Z.js +195 -0
  54. package/dist/chunk-N7TWHP5Z.js.map +1 -0
  55. package/dist/chunk-OXWVO7Z6.cjs +70 -0
  56. package/dist/chunk-OXWVO7Z6.cjs.map +1 -0
  57. package/dist/chunk-PLGHK2Y4.js +79 -0
  58. package/dist/chunk-PLGHK2Y4.js.map +1 -0
  59. package/dist/chunk-SSLP3MEC.js +39 -0
  60. package/dist/chunk-SSLP3MEC.js.map +1 -0
  61. package/dist/chunk-WYMKISZI.js +70 -0
  62. package/dist/chunk-WYMKISZI.js.map +1 -0
  63. package/dist/index.cjs +4219 -0
  64. package/dist/index.cjs.map +1 -0
  65. package/dist/index.d.cts +240 -0
  66. package/dist/index.d.ts +240 -0
  67. package/dist/index.js +4219 -0
  68. package/dist/index.js.map +1 -0
  69. package/dist/styles.d.ts +4 -0
  70. package/dist/tailwind-prefixed.css +2529 -0
  71. package/package.json +110 -0
@@ -0,0 +1,185 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
2
+
3
+
4
+ var _chunkGNMEQB32cjs = require('./chunk-GNMEQB32.cjs');
5
+
6
+
7
+
8
+ var _chunkIG62MHVQcjs = require('./chunk-IG62MHVQ.cjs');
9
+
10
+ // src/components/ImageEditorInline.tsx
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+ var _react = require('react');
19
+ var _internal = require('@useupup/core/internal');
20
+ var _jsxruntime = require('react/jsx-runtime');
21
+ var ImageEditorInline_default = _react.memo.call(void 0, function ImageEditorInline(props) {
22
+ var _a, _b;
23
+ const { file, onClose, onSave } = props;
24
+ const { imageEditor: editorConfig } = _chunkIG62MHVQcjs.useUploaderOptions.call(void 0, );
25
+ const { isDark: dark } = _chunkIG62MHVQcjs.useUploaderTheme.call(void 0, );
26
+ const containerRef = _react.useRef.call(void 0, null);
27
+ const [EditorComponent, setEditorComponent] = _react.useState.call(void 0, null);
28
+ const [editorConstants, setEditorConstants] = _react.useState.call(void 0, null);
29
+ const [loadError, setLoadError] = _react.useState.call(void 0, null);
30
+ const [StyleSheetMgr, setStyleSheetMgr] = _react.useState.call(void 0, null);
31
+ _react.useEffect.call(void 0, () => {
32
+ if (typeof window === "undefined") return;
33
+ let cancelled = false;
34
+ void (async () => {
35
+ try {
36
+ const [mod, scMod] = await Promise.all([
37
+ Promise.resolve().then(() => _interopRequireWildcard(require("react-filerobot-image-editor"))),
38
+ Promise.resolve().then(() => _interopRequireWildcard(require("styled-components"))).catch(() => null)
39
+ ]);
40
+ if (cancelled) return;
41
+ setEditorComponent(
42
+ () => mod.default
43
+ );
44
+ setEditorConstants({
45
+ TABS: mod.TABS,
46
+ TOOLS: mod.TOOLS
47
+ });
48
+ if (scMod == null ? void 0 : scMod.StyleSheetManager) {
49
+ setStyleSheetMgr(
50
+ () => scMod.StyleSheetManager
51
+ );
52
+ }
53
+ } catch (e2) {
54
+ if (cancelled) return;
55
+ setLoadError(
56
+ 'Image editor failed to load. Make sure "react-filerobot-image-editor" is installed.'
57
+ );
58
+ }
59
+ })();
60
+ return () => {
61
+ cancelled = true;
62
+ };
63
+ }, []);
64
+ const handleKeyDown = _react.useCallback.call(void 0,
65
+ (e) => {
66
+ if (e.key === "Escape") {
67
+ e.stopPropagation();
68
+ onClose();
69
+ }
70
+ },
71
+ [onClose]
72
+ );
73
+ const handleEditorSave = _react.useCallback.call(void 0,
74
+ (imageData) => {
75
+ if (!imageData.imageBase64) return;
76
+ const dataURL = imageData.imageBase64.startsWith("data:") ? imageData.imageBase64 : `data:${imageData.mimeType || file.type};base64,${imageData.imageBase64}`;
77
+ onSave(dataURL, imageData.mimeType);
78
+ },
79
+ [file.type, onSave]
80
+ );
81
+ const shouldForwardProp = _react.useCallback.call(void 0,
82
+ (prop) => !FILEROBOT_CUSTOM_PROPS.has(prop),
83
+ []
84
+ );
85
+ const resolvedTabs = (editorConstants == null ? void 0 : editorConstants.TABS) ? (_a = editorConfig.tabs) == null ? void 0 : _a.map(
86
+ (tab) => {
87
+ var _a2;
88
+ return (_a2 = editorConstants.TABS[tab.toUpperCase()]) != null ? _a2 : tab;
89
+ }
90
+ ) : void 0;
91
+ const filerobotTheme = _react.useMemo.call(void 0, () => _chunkGNMEQB32cjs.getFilerobotTheme.call(void 0, dark), [dark]);
92
+ const editorCssOverrides = _react.useMemo.call(void 0,
93
+ () => _chunkGNMEQB32cjs.getImageEditorCssOverrides.call(void 0, dark),
94
+ [dark]
95
+ );
96
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
97
+ "div",
98
+ {
99
+ ref: containerRef,
100
+ role: "region",
101
+ "aria-label": `Editing image: ${file.name}`,
102
+ tabIndex: -1,
103
+ className: _internal.cn.call(void 0,
104
+ "upup-absolute upup-inset-0 upup-z-[9999] upup-flex upup-flex-col upup-overflow-hidden",
105
+ dark ? "upup-bg-[#232323]" : "upup-bg-white"
106
+ ),
107
+ onKeyDown: handleKeyDown,
108
+ "data-upup-slot": "image-editor",
109
+ "data-upup-theme": dark ? "dark" : "light",
110
+ children: [
111
+ editorCssOverrides && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
112
+ "style",
113
+ {
114
+ dangerouslySetInnerHTML: { __html: editorCssOverrides }
115
+ }
116
+ ),
117
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "upup-relative upup-flex-1 upup-overflow-hidden", children: [
118
+ loadError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
119
+ "p",
120
+ {
121
+ className: _internal.cn.call(void 0,
122
+ "upup-text-center upup-text-sm",
123
+ dark ? "upup-text-red-400" : "upup-text-red-600"
124
+ ),
125
+ children: loadError
126
+ }
127
+ ) }),
128
+ !EditorComponent && !loadError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
129
+ "div",
130
+ {
131
+ className: _internal.cn.call(void 0,
132
+ "upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent",
133
+ dark ? "upup-border-[#38bdf8]" : "upup-border-[#0ea5e9]"
134
+ )
135
+ }
136
+ ) }),
137
+ EditorComponent && !loadError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
138
+ EditorWrapper,
139
+ {
140
+ StyleSheetMgr,
141
+ shouldForwardProp,
142
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
143
+ EditorComponent,
144
+ {
145
+ source: (_b = file.url) != null ? _b : "",
146
+ onSave: handleEditorSave,
147
+ onClose,
148
+ savingPixelRatio: 4,
149
+ previewPixelRatio: 4,
150
+ theme: filerobotTheme,
151
+ defaultTabId: (editorConstants == null ? void 0 : editorConstants.TABS) ? editorConstants.TABS.ADJUST : void 0,
152
+ ...resolvedTabs !== void 0 ? { tabsIds: resolvedTabs } : {},
153
+ onBeforeSave: () => false
154
+ }
155
+ )
156
+ }
157
+ )
158
+ ] })
159
+ ]
160
+ }
161
+ );
162
+ });
163
+ var FILEROBOT_CUSTOM_PROPS = /* @__PURE__ */ new Set([
164
+ "active",
165
+ "noMargin",
166
+ "showBackButton",
167
+ "isPhoneScreen",
168
+ "showTabsDrawer",
169
+ "hasChildren",
170
+ "isAccordion"
171
+ ]);
172
+ function EditorWrapper({
173
+ children,
174
+ StyleSheetMgr,
175
+ shouldForwardProp
176
+ }) {
177
+ if (StyleSheetMgr) {
178
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyleSheetMgr, { shouldForwardProp, children });
179
+ }
180
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
181
+ }
182
+
183
+
184
+ exports.default = ImageEditorInline_default;
185
+ //# sourceMappingURL=ImageEditorInline-GJ3HCPPZ.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["c:\\Users\\amind\\OneDrive\\Desktop\\Projects\\INTERNAL\\upup\\packages\\react\\dist\\ImageEditorInline-GJ3HCPPZ.cjs"],"names":[],"mappings":"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CA,EAAA;AACA,IAAA;AACA,IAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,QAAA;AACA,QAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,QAAA;AACA,UAAA;AACA,UAAA;AACA,YAAA;AACA,UAAA;AACA,QAAA;AACA,wBAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,cAAA;AACA,gBAAA;AACA,gBAAA;AACA,cAAA;AACA,cAAA;AACA,YAAA;AACA,UAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,cAAA;AACA,gBAAA;AACA,gBAAA;AACA,cAAA;AACA,YAAA;AACA,UAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,cAAA;AACA,cAAA;AACA,cAAA;AACA,gBAAA;AACA,gBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,gBAAA;AACA,cAAA;AACA,YAAA;AACA,UAAA;AACA,QAAA;AACA,MAAA;AACA,IAAA;AACA,EAAA;AACA;AACA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA;AACA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA;AACA,EAAA;AACA,IAAA;AACA,EAAA;AACA,EAAA;AACA;AACA;AACA;AACA","file":"C:\\Users\\amind\\OneDrive\\Desktop\\Projects\\INTERNAL\\upup\\packages\\react\\dist\\ImageEditorInline-GJ3HCPPZ.cjs","sourcesContent":[null]}
@@ -0,0 +1,185 @@
1
+ import {
2
+ getFilerobotTheme,
3
+ getImageEditorCssOverrides
4
+ } from "./chunk-N7TWHP5Z.js";
5
+ import {
6
+ useUploaderOptions,
7
+ useUploaderTheme
8
+ } from "./chunk-LCMDDPUD.js";
9
+
10
+ // src/components/ImageEditorInline.tsx
11
+ import {
12
+ memo,
13
+ useCallback,
14
+ useEffect,
15
+ useMemo,
16
+ useRef,
17
+ useState
18
+ } from "react";
19
+ import { cn } from "@useupup/core/internal";
20
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
21
+ var ImageEditorInline_default = memo(function ImageEditorInline(props) {
22
+ var _a, _b;
23
+ const { file, onClose, onSave } = props;
24
+ const { imageEditor: editorConfig } = useUploaderOptions();
25
+ const { isDark: dark } = useUploaderTheme();
26
+ const containerRef = useRef(null);
27
+ const [EditorComponent, setEditorComponent] = useState(null);
28
+ const [editorConstants, setEditorConstants] = useState(null);
29
+ const [loadError, setLoadError] = useState(null);
30
+ const [StyleSheetMgr, setStyleSheetMgr] = useState(null);
31
+ useEffect(() => {
32
+ if (typeof window === "undefined") return;
33
+ let cancelled = false;
34
+ void (async () => {
35
+ try {
36
+ const [mod, scMod] = await Promise.all([
37
+ import("react-filerobot-image-editor"),
38
+ import("styled-components").catch(() => null)
39
+ ]);
40
+ if (cancelled) return;
41
+ setEditorComponent(
42
+ () => mod.default
43
+ );
44
+ setEditorConstants({
45
+ TABS: mod.TABS,
46
+ TOOLS: mod.TOOLS
47
+ });
48
+ if (scMod == null ? void 0 : scMod.StyleSheetManager) {
49
+ setStyleSheetMgr(
50
+ () => scMod.StyleSheetManager
51
+ );
52
+ }
53
+ } catch {
54
+ if (cancelled) return;
55
+ setLoadError(
56
+ 'Image editor failed to load. Make sure "react-filerobot-image-editor" is installed.'
57
+ );
58
+ }
59
+ })();
60
+ return () => {
61
+ cancelled = true;
62
+ };
63
+ }, []);
64
+ const handleKeyDown = useCallback(
65
+ (e) => {
66
+ if (e.key === "Escape") {
67
+ e.stopPropagation();
68
+ onClose();
69
+ }
70
+ },
71
+ [onClose]
72
+ );
73
+ const handleEditorSave = useCallback(
74
+ (imageData) => {
75
+ if (!imageData.imageBase64) return;
76
+ const dataURL = imageData.imageBase64.startsWith("data:") ? imageData.imageBase64 : `data:${imageData.mimeType || file.type};base64,${imageData.imageBase64}`;
77
+ onSave(dataURL, imageData.mimeType);
78
+ },
79
+ [file.type, onSave]
80
+ );
81
+ const shouldForwardProp = useCallback(
82
+ (prop) => !FILEROBOT_CUSTOM_PROPS.has(prop),
83
+ []
84
+ );
85
+ const resolvedTabs = (editorConstants == null ? void 0 : editorConstants.TABS) ? (_a = editorConfig.tabs) == null ? void 0 : _a.map(
86
+ (tab) => {
87
+ var _a2;
88
+ return (_a2 = editorConstants.TABS[tab.toUpperCase()]) != null ? _a2 : tab;
89
+ }
90
+ ) : void 0;
91
+ const filerobotTheme = useMemo(() => getFilerobotTheme(dark), [dark]);
92
+ const editorCssOverrides = useMemo(
93
+ () => getImageEditorCssOverrides(dark),
94
+ [dark]
95
+ );
96
+ return /* @__PURE__ */ jsxs(
97
+ "div",
98
+ {
99
+ ref: containerRef,
100
+ role: "region",
101
+ "aria-label": `Editing image: ${file.name}`,
102
+ tabIndex: -1,
103
+ className: cn(
104
+ "upup-absolute upup-inset-0 upup-z-[9999] upup-flex upup-flex-col upup-overflow-hidden",
105
+ dark ? "upup-bg-[#232323]" : "upup-bg-white"
106
+ ),
107
+ onKeyDown: handleKeyDown,
108
+ "data-upup-slot": "image-editor",
109
+ "data-upup-theme": dark ? "dark" : "light",
110
+ children: [
111
+ editorCssOverrides && /* @__PURE__ */ jsx(
112
+ "style",
113
+ {
114
+ dangerouslySetInnerHTML: { __html: editorCssOverrides }
115
+ }
116
+ ),
117
+ /* @__PURE__ */ jsxs("div", { className: "upup-relative upup-flex-1 upup-overflow-hidden", children: [
118
+ loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8", children: /* @__PURE__ */ jsx(
119
+ "p",
120
+ {
121
+ className: cn(
122
+ "upup-text-center upup-text-sm",
123
+ dark ? "upup-text-red-400" : "upup-text-red-600"
124
+ ),
125
+ children: loadError
126
+ }
127
+ ) }),
128
+ !EditorComponent && !loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center", children: /* @__PURE__ */ jsx(
129
+ "div",
130
+ {
131
+ className: cn(
132
+ "upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent",
133
+ dark ? "upup-border-[#38bdf8]" : "upup-border-[#0ea5e9]"
134
+ )
135
+ }
136
+ ) }),
137
+ EditorComponent && !loadError && /* @__PURE__ */ jsx(
138
+ EditorWrapper,
139
+ {
140
+ StyleSheetMgr,
141
+ shouldForwardProp,
142
+ children: /* @__PURE__ */ jsx(
143
+ EditorComponent,
144
+ {
145
+ source: (_b = file.url) != null ? _b : "",
146
+ onSave: handleEditorSave,
147
+ onClose,
148
+ savingPixelRatio: 4,
149
+ previewPixelRatio: 4,
150
+ theme: filerobotTheme,
151
+ defaultTabId: (editorConstants == null ? void 0 : editorConstants.TABS) ? editorConstants.TABS.ADJUST : void 0,
152
+ ...resolvedTabs !== void 0 ? { tabsIds: resolvedTabs } : {},
153
+ onBeforeSave: () => false
154
+ }
155
+ )
156
+ }
157
+ )
158
+ ] })
159
+ ]
160
+ }
161
+ );
162
+ });
163
+ var FILEROBOT_CUSTOM_PROPS = /* @__PURE__ */ new Set([
164
+ "active",
165
+ "noMargin",
166
+ "showBackButton",
167
+ "isPhoneScreen",
168
+ "showTabsDrawer",
169
+ "hasChildren",
170
+ "isAccordion"
171
+ ]);
172
+ function EditorWrapper({
173
+ children,
174
+ StyleSheetMgr,
175
+ shouldForwardProp
176
+ }) {
177
+ if (StyleSheetMgr) {
178
+ return /* @__PURE__ */ jsx(StyleSheetMgr, { shouldForwardProp, children });
179
+ }
180
+ return /* @__PURE__ */ jsx(Fragment, { children });
181
+ }
182
+ export {
183
+ ImageEditorInline_default as default
184
+ };
185
+ //# sourceMappingURL=ImageEditorInline-N2NSAODR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ImageEditorInline.tsx"],"sourcesContent":["import React, {\r\n ComponentType,\r\n memo,\r\n useCallback,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from 'react'\r\nimport { cn } from '@useupup/core/internal'\r\nimport type { UploadFile } from '@useupup/core'\r\nimport {\r\n useUploaderOptions,\r\n useUploaderTheme,\r\n} from '../context/UploaderContext'\r\nimport {\r\n getFilerobotTheme,\r\n getImageEditorCssOverrides,\r\n} from '../lib/imageEditorHelpers'\r\n\r\ntype Props = {\r\n file: UploadFile\r\n onClose: () => void\r\n onSave: (editedImageData: string, mimeType?: string) => void\r\n}\r\n\r\n/**\r\n * Filerobot's onBeforeSave / onSave callback signature.\r\n */\r\ntype FilerobotImageState = {\r\n imageBase64?: string\r\n fullName?: string\r\n mimeType?: string\r\n width?: number\r\n height?: number\r\n}\r\n\r\ntype FilerobotDesignState = Record<string, unknown>\r\n\r\ntype FilerobotEditorProps = {\r\n source: string\r\n savingPixelRatio?: number\r\n previewPixelRatio?: number\r\n onSave?: (\r\n imageData: FilerobotImageState,\r\n designState: FilerobotDesignState,\r\n ) => void\r\n onClose?: () => void\r\n onBeforeSave?: (imageData: FilerobotImageState) => boolean | undefined\r\n annotationsCommon?: Record<string, unknown>\r\n Rotate?: Record<string, unknown>\r\n Crop?: Record<string, unknown>\r\n tabsIds?: unknown[]\r\n defaultTabId?: unknown\r\n defaultToolId?: unknown\r\n [key: string]: unknown\r\n}\r\n\r\n/**\r\n * Inline image editor that overlays on top of the uploader container,\r\n * giving an \"edit in place\" experience similar to Uppy.\r\n *\r\n * Unlike ImageEditorModal, this does NOT use a portal or fixed positioning.\r\n * It renders as an absolutely positioned overlay inside the uploader's\r\n * <section>, covering the file list and other UI underneath.\r\n */\r\nexport default memo(function ImageEditorInline(props: Props) {\r\n const { file, onClose, onSave } = props\r\n const { imageEditor: editorConfig } = useUploaderOptions()\r\n const { isDark: dark } = useUploaderTheme()\r\n\r\n const containerRef = useRef<HTMLDivElement>(null)\r\n\r\n // Lazy-loaded editor component + TABS/TOOLS constants\r\n const [EditorComponent, setEditorComponent] =\r\n useState<ComponentType<FilerobotEditorProps> | null>(null)\r\n const [editorConstants, setEditorConstants] = useState<{\r\n TABS: Record<string, unknown>\r\n TOOLS: Record<string, unknown>\r\n } | null>(null)\r\n const [loadError, setLoadError] = useState<string | null>(null)\r\n\r\n // StyleSheetManager from styled-components to filter custom props\r\n const [StyleSheetMgr, setStyleSheetMgr] = useState<ComponentType<{\r\n shouldForwardProp?: (prop: string) => boolean\r\n children: React.ReactNode\r\n }> | null>(null)\r\n\r\n // Dynamically import react-filerobot-image-editor (browser only)\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n let cancelled = false\r\n void (async () => {\r\n try {\r\n const [mod, scMod] = await Promise.all([\r\n import('react-filerobot-image-editor'),\r\n import('styled-components').catch(() => null),\r\n ])\r\n if (cancelled) return\r\n setEditorComponent(\r\n () => mod.default as ComponentType<FilerobotEditorProps>,\r\n )\r\n setEditorConstants({\r\n TABS: (mod as Record<string, unknown>).TABS as Record<\r\n string,\r\n unknown\r\n >,\r\n TOOLS: (mod as Record<string, unknown>).TOOLS as Record<\r\n string,\r\n unknown\r\n >,\r\n })\r\n if (scMod?.StyleSheetManager) {\r\n setStyleSheetMgr(\r\n () =>\r\n scMod.StyleSheetManager as ComponentType<{\r\n shouldForwardProp?: (prop: string) => boolean\r\n children: React.ReactNode\r\n }>,\r\n )\r\n }\r\n } catch {\r\n // upup-catch: dynamic import failure (editor dep not installed) is surfaced to the user via setLoadError\r\n if (cancelled) return\r\n setLoadError(\r\n 'Image editor failed to load. Make sure \"react-filerobot-image-editor\" is installed.',\r\n )\r\n }\r\n })()\r\n\r\n return () => {\r\n cancelled = true\r\n }\r\n }, [])\r\n\r\n // Close on ESC\r\n const handleKeyDown = useCallback(\r\n (e: React.KeyboardEvent) => {\r\n if (e.key === 'Escape') {\r\n e.stopPropagation()\r\n onClose()\r\n }\r\n },\r\n [onClose],\r\n )\r\n\r\n // Filerobot onSave handler\r\n const handleEditorSave = useCallback(\r\n (imageData: FilerobotImageState) => {\r\n if (!imageData.imageBase64) return\r\n const dataURL = imageData.imageBase64.startsWith('data:')\r\n ? imageData.imageBase64\r\n : `data:${imageData.mimeType || file.type};base64,${\r\n imageData.imageBase64\r\n }`\r\n onSave(dataURL, imageData.mimeType)\r\n },\r\n [file.type, onSave],\r\n )\r\n\r\n // Filter styled-components custom props to avoid React 19 warnings\r\n const shouldForwardProp = useCallback(\r\n (prop: string) => !FILEROBOT_CUSTOM_PROPS.has(prop),\r\n [],\r\n )\r\n\r\n // Build Filerobot tabs from config\r\n const resolvedTabs = editorConstants?.TABS\r\n ? editorConfig.tabs?.map(\r\n tab => editorConstants.TABS[tab.toUpperCase()] ?? tab,\r\n )\r\n : undefined\r\n\r\n const filerobotTheme = useMemo(() => getFilerobotTheme(dark), [dark])\r\n const editorCssOverrides = useMemo(\r\n () => getImageEditorCssOverrides(dark),\r\n [dark],\r\n )\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n role=\"region\"\r\n aria-label={`Editing image: ${file.name}`}\r\n tabIndex={-1}\r\n className={cn(\r\n 'upup-absolute upup-inset-0 upup-z-[9999] upup-flex upup-flex-col upup-overflow-hidden',\r\n dark ? 'upup-bg-[#232323]' : 'upup-bg-white',\r\n )}\r\n onKeyDown={handleKeyDown}\r\n data-upup-slot=\"image-editor\"\r\n data-upup-theme={dark ? 'dark' : 'light'}\r\n >\r\n {/* Theme fallback overrides for hardcoded library values */}\r\n {editorCssOverrides && (\r\n <style\r\n dangerouslySetInnerHTML={{ __html: editorCssOverrides }}\r\n />\r\n )}\r\n\r\n {/* Filerobot provides its own top bar with save / close */}\r\n <div className=\"upup-relative upup-flex-1 upup-overflow-hidden\">\r\n {loadError && (\r\n <div className=\"upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8\">\r\n <p\r\n className={cn(\r\n 'upup-text-center upup-text-sm',\r\n dark\r\n ? 'upup-text-red-400'\r\n : 'upup-text-red-600',\r\n )}\r\n >\r\n {loadError}\r\n </p>\r\n </div>\r\n )}\r\n\r\n {!EditorComponent && !loadError && (\r\n <div className=\"upup-flex upup-h-full upup-items-center upup-justify-center\">\r\n <div\r\n className={cn(\r\n 'upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent',\r\n dark\r\n ? 'upup-border-[#38bdf8]'\r\n : 'upup-border-[#0ea5e9]',\r\n )}\r\n />\r\n </div>\r\n )}\r\n\r\n {EditorComponent && !loadError && (\r\n <EditorWrapper\r\n StyleSheetMgr={StyleSheetMgr}\r\n shouldForwardProp={shouldForwardProp}\r\n >\r\n <EditorComponent\r\n source={file.url ?? ''}\r\n onSave={handleEditorSave}\r\n onClose={onClose}\r\n savingPixelRatio={4}\r\n previewPixelRatio={4}\r\n theme={filerobotTheme}\r\n defaultTabId={\r\n editorConstants?.TABS\r\n ? editorConstants.TABS.ADJUST\r\n : undefined\r\n }\r\n {...(resolvedTabs !== undefined\r\n ? { tabsIds: resolvedTabs }\r\n : {})}\r\n onBeforeSave={() => false}\r\n />\r\n </EditorWrapper>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n})\r\n\r\n/**\r\n * Custom props that filerobot-image-editor's styled-components leak to the DOM.\r\n */\r\nconst FILEROBOT_CUSTOM_PROPS = new Set([\r\n 'active',\r\n 'noMargin',\r\n 'showBackButton',\r\n 'isPhoneScreen',\r\n 'showTabsDrawer',\r\n 'hasChildren',\r\n 'isAccordion',\r\n])\r\n\r\n/**\r\n * Wraps children with styled-components' StyleSheetManager (when available)\r\n * to prevent custom props from leaking to the DOM in React 19+.\r\n */\r\nfunction EditorWrapper({\r\n children,\r\n StyleSheetMgr,\r\n shouldForwardProp,\r\n}: {\r\n children: React.ReactNode\r\n StyleSheetMgr: ComponentType<{\r\n shouldForwardProp?: (prop: string) => boolean\r\n children: React.ReactNode\r\n }> | null\r\n shouldForwardProp: (prop: string) => boolean\r\n}) {\r\n if (StyleSheetMgr) {\r\n return (\r\n <StyleSheetMgr shouldForwardProp={shouldForwardProp}>\r\n {children}\r\n </StyleSheetMgr>\r\n )\r\n }\r\n return <>{children}</>\r\n}\r\n"],"mappings":"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","names":["_a"]}
@@ -0,0 +1,236 @@
1
+ import {
2
+ getFilerobotTheme,
3
+ getImageEditorCssOverrides
4
+ } from "./chunk-N7TWHP5Z.js";
5
+ import {
6
+ useUploaderOptions,
7
+ useUploaderTheme
8
+ } from "./chunk-LCMDDPUD.js";
9
+
10
+ // src/components/ImageEditorModal.tsx
11
+ import {
12
+ memo,
13
+ useCallback,
14
+ useEffect,
15
+ useMemo,
16
+ useRef,
17
+ useState
18
+ } from "react";
19
+ import { createPortal } from "react-dom";
20
+ import { cn } from "@useupup/core/internal";
21
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
22
+ var ImageEditorModal_default = memo(function ImageEditorModal(props) {
23
+ var _a, _b;
24
+ const { file, onClose, onSave } = props;
25
+ const { imageEditor: editorConfig } = useUploaderOptions();
26
+ const { isDark: dark } = useUploaderTheme();
27
+ const overlayRef = useRef(null);
28
+ const previousFocusRef = useRef(null);
29
+ const [EditorComponent, setEditorComponent] = useState(null);
30
+ const [editorConstants, setEditorConstants] = useState(null);
31
+ const [loadError, setLoadError] = useState(null);
32
+ const [StyleSheetMgr, setStyleSheetMgr] = useState(null);
33
+ useEffect(() => {
34
+ if (typeof window === "undefined") return;
35
+ let cancelled = false;
36
+ void (async () => {
37
+ try {
38
+ const [mod, scMod] = await Promise.all([
39
+ import("react-filerobot-image-editor"),
40
+ import("styled-components").catch(() => null)
41
+ ]);
42
+ if (cancelled) return;
43
+ setEditorComponent(
44
+ () => mod.default
45
+ );
46
+ setEditorConstants({
47
+ TABS: mod.TABS,
48
+ TOOLS: mod.TOOLS
49
+ });
50
+ if (scMod == null ? void 0 : scMod.StyleSheetManager) {
51
+ setStyleSheetMgr(
52
+ () => scMod.StyleSheetManager
53
+ );
54
+ }
55
+ } catch {
56
+ if (cancelled) return;
57
+ setLoadError(
58
+ 'Image editor failed to load. Make sure "react-filerobot-image-editor" is installed.'
59
+ );
60
+ }
61
+ })();
62
+ return () => {
63
+ cancelled = true;
64
+ };
65
+ }, []);
66
+ useEffect(() => {
67
+ previousFocusRef.current = document.activeElement;
68
+ return () => {
69
+ if (previousFocusRef.current instanceof HTMLElement) {
70
+ previousFocusRef.current.focus();
71
+ }
72
+ };
73
+ }, []);
74
+ useEffect(() => {
75
+ var _a2;
76
+ (_a2 = overlayRef.current) == null ? void 0 : _a2.focus();
77
+ }, []);
78
+ const handleKeyDown = useCallback(
79
+ (e) => {
80
+ var _a2;
81
+ if (e.key === "Escape") {
82
+ e.stopPropagation();
83
+ onClose();
84
+ }
85
+ if (e.key === "Tab") {
86
+ const focusable = (_a2 = overlayRef.current) == null ? void 0 : _a2.querySelectorAll(
87
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
88
+ );
89
+ if (!focusable || focusable.length === 0) return;
90
+ const first = focusable[0];
91
+ const last = focusable[focusable.length - 1];
92
+ if (!first || !last) return;
93
+ if (e.shiftKey) {
94
+ if (document.activeElement === first) {
95
+ e.preventDefault();
96
+ last.focus();
97
+ }
98
+ } else {
99
+ if (document.activeElement === last) {
100
+ e.preventDefault();
101
+ first.focus();
102
+ }
103
+ }
104
+ }
105
+ },
106
+ [onClose]
107
+ );
108
+ const handleContentClick = useCallback((e) => {
109
+ e.stopPropagation();
110
+ }, []);
111
+ const handleEditorSave = useCallback(
112
+ (imageData) => {
113
+ if (!imageData.imageBase64) return;
114
+ const dataURL = imageData.imageBase64.startsWith("data:") ? imageData.imageBase64 : `data:${imageData.mimeType || file.type};base64,${imageData.imageBase64}`;
115
+ onSave(dataURL, imageData.mimeType);
116
+ },
117
+ [file.type, onSave]
118
+ );
119
+ const shouldForwardProp = useCallback(
120
+ (prop) => !FILEROBOT_CUSTOM_PROPS.has(prop),
121
+ []
122
+ );
123
+ const resolvedTabs = (editorConstants == null ? void 0 : editorConstants.TABS) ? (_a = editorConfig.tabs) == null ? void 0 : _a.map(
124
+ (tab) => {
125
+ var _a2;
126
+ return (_a2 = editorConstants.TABS[tab.toUpperCase()]) != null ? _a2 : tab;
127
+ }
128
+ ) : void 0;
129
+ const filerobotTheme = useMemo(() => getFilerobotTheme(dark), [dark]);
130
+ const editorCssOverrides = useMemo(
131
+ () => getImageEditorCssOverrides(dark),
132
+ [dark]
133
+ );
134
+ return createPortal(
135
+ /* @__PURE__ */ jsx("div", { className: "upup-scope", "data-upup-slot": "image-editor", children: /* @__PURE__ */ jsx(
136
+ "div",
137
+ {
138
+ ref: overlayRef,
139
+ role: "dialog",
140
+ "aria-modal": "true",
141
+ "aria-label": `Edit image: ${file.name}`,
142
+ tabIndex: -1,
143
+ className: "upup-fixed upup-inset-0 upup-z-[2147483647] upup-flex upup-items-center upup-justify-center upup-bg-black/60 upup-outline-none",
144
+ onClick: onClose,
145
+ onKeyDown: handleKeyDown,
146
+ children: /* @__PURE__ */ jsxs(
147
+ "div",
148
+ {
149
+ className: cn(
150
+ "upup-relative upup-flex upup-h-[90vh] upup-w-[90vw] upup-max-w-5xl upup-flex-col upup-overflow-hidden upup-rounded-xl upup-shadow-2xl upup-ring-1",
151
+ dark ? "upup-bg-[#232323] upup-ring-white/[0.08]" : "upup-bg-white upup-ring-black/10"
152
+ ),
153
+ "data-upup-theme": dark ? "dark" : "light",
154
+ onClick: handleContentClick,
155
+ children: [
156
+ editorCssOverrides && /* @__PURE__ */ jsx(
157
+ "style",
158
+ {
159
+ dangerouslySetInnerHTML: {
160
+ __html: editorCssOverrides
161
+ }
162
+ }
163
+ ),
164
+ /* @__PURE__ */ jsxs("div", { className: "upup-relative upup-flex-1 upup-overflow-hidden", children: [
165
+ loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8", children: /* @__PURE__ */ jsx(
166
+ "p",
167
+ {
168
+ className: cn(
169
+ "upup-text-center upup-text-sm",
170
+ dark ? "upup-text-red-400" : "upup-text-red-600"
171
+ ),
172
+ children: loadError
173
+ }
174
+ ) }),
175
+ !EditorComponent && !loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center", children: /* @__PURE__ */ jsx(
176
+ "div",
177
+ {
178
+ className: cn(
179
+ "upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent",
180
+ dark ? "upup-border-[#38bdf8]" : "upup-border-[#0ea5e9]"
181
+ )
182
+ }
183
+ ) }),
184
+ EditorComponent && !loadError && /* @__PURE__ */ jsx(
185
+ EditorWrapper,
186
+ {
187
+ StyleSheetMgr,
188
+ shouldForwardProp,
189
+ children: /* @__PURE__ */ jsx(
190
+ EditorComponent,
191
+ {
192
+ source: (_b = file.url) != null ? _b : "",
193
+ onSave: handleEditorSave,
194
+ onClose,
195
+ savingPixelRatio: 4,
196
+ previewPixelRatio: 4,
197
+ theme: filerobotTheme,
198
+ defaultTabId: (editorConstants == null ? void 0 : editorConstants.TABS) ? editorConstants.TABS.ADJUST : void 0,
199
+ ...resolvedTabs !== void 0 ? { tabsIds: resolvedTabs } : {},
200
+ onBeforeSave: () => false
201
+ }
202
+ )
203
+ }
204
+ )
205
+ ] })
206
+ ]
207
+ }
208
+ )
209
+ }
210
+ ) }),
211
+ document.body
212
+ );
213
+ });
214
+ var FILEROBOT_CUSTOM_PROPS = /* @__PURE__ */ new Set([
215
+ "active",
216
+ "noMargin",
217
+ "showBackButton",
218
+ "isPhoneScreen",
219
+ "showTabsDrawer",
220
+ "hasChildren",
221
+ "isAccordion"
222
+ ]);
223
+ function EditorWrapper({
224
+ children,
225
+ StyleSheetMgr,
226
+ shouldForwardProp
227
+ }) {
228
+ if (StyleSheetMgr) {
229
+ return /* @__PURE__ */ jsx(StyleSheetMgr, { shouldForwardProp, children });
230
+ }
231
+ return /* @__PURE__ */ jsx(Fragment, { children });
232
+ }
233
+ export {
234
+ ImageEditorModal_default as default
235
+ };
236
+ //# sourceMappingURL=ImageEditorModal-CWKMDVPY.js.map