antd-img-crop 4.25.0 → 4.27.0

package/dist/antd-img-crop.cjs.js

@@ -20,9 +20,14 @@ const ASPECT_STEP = 0.01;
 
 const EasyCrop = react.forwardRef((props, ref) => {
     const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
+    const [crop, setCrop] = react.useState({ x: 0, y: 0 });
     const [zoom, setZoom] = react.useState(ZOOM_INITIAL);
     const [rotation, setRotation] = react.useState(ROTATION_INITIAL);
     const [aspect, setAspect] = react.useState(propAspect);
+    const cropPixelsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0 });
+    const onCropComplete = react.useCallback((_, croppedAreaPixels) => {
+        cropPixelsRef.current = croppedAreaPixels;
+    }, []);
     const prevPropAspect = react.useRef(propAspect);
     if (prevPropAspect.current !== propAspect) {
         prevPropAspect.current = propAspect;
@@ -36,11 +41,6 @@ const EasyCrop = react.forwardRef((props, ref) => {
         setRotation(ROTATION_INITIAL);
         setAspect(propAspect);
     };
-    const [crop, onCropChange] = react.useState({ x: 0, y: 0 });
-    const cropPixelsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0 });
-    const onCropComplete = react.useCallback((_, croppedAreaPixels) => {
-        cropPixelsRef.current = croppedAreaPixels;
-    }, []);
     react.useImperativeHandle(ref, () => ({
         rotation,
         cropPixelsRef,
@@ -49,46 +49,22 @@ const EasyCrop = react.forwardRef((props, ref) => {
     const wrapperClass = '[display:flex] [align-items:center] [width:60%] [margin-inline:auto]';
     const buttonClass = '[display:flex] [align-items:center] [justify-content:center] [height:32px] [width:32px] [background:transparent] [border:0] [font-family:inherit] [font-size:18px] [cursor:pointer] disabled:[opacity:20%] disabled:[cursor:default]';
     const sliderClass = '[flex:1]';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, 
-                //
-                zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, 
-                //
-                cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, cropShape: cropShape, showGrid: showGrid, onCropChange: setCrop, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
                     containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
                     mediaClassName: `${PREFIX}-media`,
                 } })), zoomSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom + ZOOM_STEP).toFixed(1)), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsxRuntime.jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxRuntime.jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect - ASPECT_STEP).toFixed(2)), disabled: aspect - ASPECT_STEP < minAspect, children: "\u2195" }), jsxRuntime.jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsxRuntime.jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsxRuntime.jsx(AntButton, { className: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
 });
 var EasyCrop$1 = react.memo(EasyCrop);
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.disabled\\:\\[cursor\\:default\\]{&:disabled{cursor:default}}.disabled\\:\\[opacity\\:20\\%\\]{&:disabled{opacity:20%}}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]{&~section:first-of-type{margin-top:16px}}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]{&~section:last-of-type{margin-bottom:16px}}";
-styleInject(css_248z,{"insertAt":"top"});
+var css_248z = "/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.disabled\\:\\[cursor\\:default\\]{&:disabled{cursor:default}}.disabled\\:\\[opacity\\:20\\%\\]{&:disabled{opacity:20%}}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]{&~section:first-of-type{margin-top:16px}}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]{&~section:last-of-type{margin-bottom:16px}}";
+    (function() {
+      if (typeof document === 'undefined') return;
+      const style = document.createElement('style');
+      const meta = document.querySelector('meta[name="csp-nonce"]');
+      if (meta && meta.content) style.setAttribute('nonce', meta.content);
+      style.textContent = css_248z;
+      document.head.appendChild(style);
+    })();
 
 const ImgCrop = react.forwardRef((props, cropperRef) => {
     const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, minAspect = 0.5, maxAspect = 2, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
@@ -148,6 +124,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
     /**
      * upload
      */
+    const [modalOpen, setModalOpen] = react.useState(false);
     const [modalImage, setModalImage] = react.useState('');
     const onCancel = react.useRef(undefined);
     const onOk = react.useRef(undefined);
@@ -194,13 +171,17 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
                 const reader = new FileReader();
                 reader.addEventListener('load', () => {
                     if (typeof reader.result === 'string') {
-                        setModalImage(reader.result); // open modal
+                        setModalOpen(true);
+                        setTimeout(() => {
+                            setModalImage(reader.result);
+                        }, 10);
                     }
                 });
                 reader.readAsDataURL(processedFile);
                 // on modal cancel
                 onCancel.current = () => {
                     var _a, _b;
+                    setModalOpen(false);
                     setModalImage('');
                     easyCropRef.current.onReset();
                     let hasResolveCalled = false;
@@ -214,6 +195,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
                 };
                 // on modal confirm
                 onOk.current = (event) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    setModalOpen(false);
                     setModalImage('');
                     easyCropRef.current.onReset();
                     const canvas = getCropCanvas(event.target);
@@ -263,7 +245,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
     const isCN = lang === 'zh-CN';
     const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
     const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getNewUpload(children), modalImage && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: true, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true, children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getNewUpload(children), jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: modalOpen, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnHidden: true, children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) }))] }));
 });
 
 module.exports = ImgCrop;

package/dist/antd-img-crop.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { JSX } from 'react';
-import Cropper, { CropperProps } from 'react-easy-crop';
 import { UploadProps, ModalProps } from 'antd';
+import { CropperProps } from 'react-easy-crop';
 
 type BeforeUpload = Exclude<UploadProps['beforeUpload'], undefined>;
 type BeforeUploadReturnType = ReturnType<BeforeUpload>;
-type ImgCropProps = {
+type ImgCropProps$1 = {
     quality?: number;
     fillColor?: string;
     zoomSlider?: boolean;
@@ -28,12 +28,12 @@ type ImgCropProps = {
     modalCancel?: string;
     onModalOk?: (value: BeforeUploadReturnType) => void;
     onModalCancel?: (resolve: (value: BeforeUploadReturnType) => void) => void;
-    modalProps?: Omit<ModalProps, 'className' | 'title' | 'width' | 'okText' | 'cancelText' | 'onOk' | 'onCancel' | 'open' | 'visible' | 'wrapClassName' | 'maskClosable' | 'destroyOnClose'>;
+    modalProps?: Omit<ModalProps, 'className' | 'title' | 'width' | 'okText' | 'cancelText' | 'onOk' | 'onCancel' | 'open' | 'visible' | 'wrapClassName' | 'maskClosable' | 'destroyOnHidden'>;
     beforeCrop?: BeforeUpload;
     children: JSX.Element;
 };
 
-declare const ImgCrop: react.ForwardRefExoticComponent<ImgCropProps & react.RefAttributes<Cropper>>;
+declare const ImgCrop: react.ForwardRefExoticComponent<Omit<ImgCropProps, "ref"> & react.RefAttributes<CropperRef>>;
 
 export { ImgCrop as default };
-export type { ImgCropProps };
+export type { ImgCropProps$1 as ImgCropProps };

package/dist/antd-img-crop.esm.js

@@ -18,9 +18,14 @@ const ASPECT_STEP = 0.01;
 
 const EasyCrop = forwardRef((props, ref) => {
     const { cropperRef, zoomSlider, rotationSlider, aspectSlider, showReset, resetBtnText, modalImage, aspect: propAspect, minZoom, maxZoom, minAspect, maxAspect, cropShape, showGrid, cropperProps, } = props;
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
     const [zoom, setZoom] = useState(ZOOM_INITIAL);
     const [rotation, setRotation] = useState(ROTATION_INITIAL);
     const [aspect, setAspect] = useState(propAspect);
+    const cropPixelsRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
+    const onCropComplete = useCallback((_, croppedAreaPixels) => {
+        cropPixelsRef.current = croppedAreaPixels;
+    }, []);
     const prevPropAspect = useRef(propAspect);
     if (prevPropAspect.current !== propAspect) {
         prevPropAspect.current = propAspect;
@@ -34,11 +39,6 @@ const EasyCrop = forwardRef((props, ref) => {
         setRotation(ROTATION_INITIAL);
         setAspect(propAspect);
     };
-    const [crop, onCropChange] = useState({ x: 0, y: 0 });
-    const cropPixelsRef = useRef({ width: 0, height: 0, x: 0, y: 0 });
-    const onCropComplete = useCallback((_, croppedAreaPixels) => {
-        cropPixelsRef.current = croppedAreaPixels;
-    }, []);
     useImperativeHandle(ref, () => ({
         rotation,
         cropPixelsRef,
@@ -47,46 +47,22 @@ const EasyCrop = forwardRef((props, ref) => {
     const wrapperClass = '[display:flex] [align-items:center] [width:60%] [margin-inline:auto]';
     const buttonClass = '[display:flex] [align-items:center] [justify-content:center] [height:32px] [width:32px] [background:transparent] [border:0] [font-family:inherit] [font-size:18px] [cursor:pointer] disabled:[opacity:20%] disabled:[cursor:default]';
     const sliderClass = '[flex:1]';
-    return (jsxs(Fragment, { children: [jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, 
-                //
-                zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, 
-                //
-                cropShape: cropShape, showGrid: showGrid, onCropChange: onCropChange, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
+    return (jsxs(Fragment, { children: [jsx(Cropper, Object.assign({}, cropperProps, { ref: cropperRef, image: modalImage, crop: crop, zoom: zoom, rotation: rotation, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, zoomWithScroll: zoomSlider, cropShape: cropShape, showGrid: showGrid, onCropChange: setCrop, onZoomChange: setZoom, onRotationChange: setRotation, onCropComplete: onCropComplete, classes: {
                     containerClassName: `${PREFIX}-container ![position:relative] [width:100%] [height:40vh] [&~section:first-of-type]:[margin-top:16px] [&~section:last-of-type]:[margin-bottom:16px]`,
                     mediaClassName: `${PREFIX}-media`,
                 } })), zoomSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-zoom ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom - ZOOM_STEP).toFixed(1)), disabled: zoom - ZOOM_STEP < minZoom, children: "\uFF0D" }), jsx(AntSlider, { className: sliderClass, min: minZoom, max: maxZoom, step: ZOOM_STEP, value: zoom, onChange: setZoom }), jsx("button", { className: buttonClass, onClick: () => setZoom(+(zoom + ZOOM_STEP).toFixed(1)), disabled: zoom + ZOOM_STEP > maxZoom, children: "\uFF0B" })] })), rotationSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-rotation ${wrapperClass}`, children: [jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation - ROTATION_STEP), disabled: rotation === ROTATION_MIN, children: "\u21BA" }), jsx(AntSlider, { className: sliderClass, min: ROTATION_MIN, max: ROTATION_MAX, step: ROTATION_STEP, value: rotation, onChange: setRotation }), jsx("button", { className: `${buttonClass} [font-size:16px]`, onClick: () => setRotation(rotation + ROTATION_STEP), disabled: rotation === ROTATION_MAX, children: "\u21BB" })] })), aspectSlider && (jsxs("section", { className: `${PREFIX}-control ${PREFIX}-control-aspect ${wrapperClass}`, children: [jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect - ASPECT_STEP).toFixed(2)), disabled: aspect - ASPECT_STEP < minAspect, children: "\u2195" }), jsx(AntSlider, { className: sliderClass, min: minAspect, max: maxAspect, step: ASPECT_STEP, value: aspect, onChange: setAspect }), jsx("button", { className: buttonClass, onClick: () => setAspect(+(aspect + ASPECT_STEP).toFixed(2)), disabled: aspect + ASPECT_STEP > maxAspect, children: "\u2194" })] })), showReset && (zoomSlider || rotationSlider || aspectSlider) && (jsx(AntButton, { className: "[position:absolute] [bottom:20px]", style: isResetActive ? {} : { opacity: 0.3, pointerEvents: 'none' }, onClick: onReset, children: resetBtnText }))] }));
 });
 var EasyCrop$1 = memo(EasyCrop);
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.disabled\\:\\[cursor\\:default\\]{&:disabled{cursor:default}}.disabled\\:\\[opacity\\:20\\%\\]{&:disabled{opacity:20%}}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]{&~section:first-of-type{margin-top:16px}}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]{&~section:last-of-type{margin-bottom:16px}}";
-styleInject(css_248z,{"insertAt":"top"});
+var css_248z = "/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */.visible{visibility:visible}.\\!\\[position\\:relative\\]{position:relative!important}.\\[position\\:absolute\\]{position:absolute}.\\[bottom\\:20px\\]{bottom:20px}.container{width:100%}.\\[margin-inline\\:auto\\]{margin-inline:auto}.\\[display\\:flex\\]{display:flex}.grid{display:grid}.\\[height\\:32px\\]{height:32px}.\\[height\\:40vh\\]{height:40vh}.\\[width\\:32px\\]{width:32px}.\\[width\\:60\\%\\]{width:60%}.\\[width\\:100\\%\\]{width:100%}.\\[flex\\:1\\]{flex:1}.\\[cursor\\:pointer\\]{cursor:pointer}.\\[align-items\\:center\\]{align-items:center}.\\[justify-content\\:center\\]{justify-content:center}.\\[font-family\\:inherit\\]{font-family:inherit}.\\[font-size\\:16px\\]{font-size:16px}.\\[font-size\\:18px\\]{font-size:18px}.\\[background\\:transparent\\]{background:transparent}.\\[border\\:0\\]{border:0}.disabled\\:\\[cursor\\:default\\]{&:disabled{cursor:default}}.disabled\\:\\[opacity\\:20\\%\\]{&:disabled{opacity:20%}}.\\[\\&\\~section\\:first-of-type\\]\\:\\[margin-top\\:16px\\]{&~section:first-of-type{margin-top:16px}}.\\[\\&\\~section\\:last-of-type\\]\\:\\[margin-bottom\\:16px\\]{&~section:last-of-type{margin-bottom:16px}}";
+    (function() {
+      if (typeof document === 'undefined') return;
+      const style = document.createElement('style');
+      const meta = document.querySelector('meta[name="csp-nonce"]');
+      if (meta && meta.content) style.setAttribute('nonce', meta.content);
+      style.textContent = css_248z;
+      document.head.appendChild(style);
+    })();
 
 const ImgCrop = forwardRef((props, cropperRef) => {
     const { quality = 0.4, fillColor = 'white', zoomSlider = true, rotationSlider = false, aspectSlider = false, showReset = false, resetText, aspect = 1, minZoom = 1, maxZoom = 3, minAspect = 0.5, maxAspect = 2, cropShape = 'rect', showGrid = false, cropperProps, modalClassName, modalTitle, modalWidth, modalOk, modalCancel, onModalOk, onModalCancel, modalProps, beforeCrop, children, } = props;
@@ -146,6 +122,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
     /**
      * upload
      */
+    const [modalOpen, setModalOpen] = useState(false);
     const [modalImage, setModalImage] = useState('');
     const onCancel = useRef(undefined);
     const onOk = useRef(undefined);
@@ -192,13 +169,17 @@ const ImgCrop = forwardRef((props, cropperRef) => {
                 const reader = new FileReader();
                 reader.addEventListener('load', () => {
                     if (typeof reader.result === 'string') {
-                        setModalImage(reader.result); // open modal
+                        setModalOpen(true);
+                        setTimeout(() => {
+                            setModalImage(reader.result);
+                        }, 10);
                     }
                 });
                 reader.readAsDataURL(processedFile);
                 // on modal cancel
                 onCancel.current = () => {
                     var _a, _b;
+                    setModalOpen(false);
                     setModalImage('');
                     easyCropRef.current.onReset();
                     let hasResolveCalled = false;
@@ -212,6 +193,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
                 };
                 // on modal confirm
                 onOk.current = (event) => __awaiter(void 0, void 0, void 0, function* () {
+                    setModalOpen(false);
                     setModalImage('');
                     easyCropRef.current.onReset();
                     const canvas = getCropCanvas(event.target);
@@ -261,7 +243,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
     const isCN = lang === 'zh-CN';
     const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
     const resetBtnText = resetText || (isCN ? '重置' : 'Reset');
-    return (jsxs(Fragment, { children: [getNewUpload(children), modalImage && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: true, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true, children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) })))] }));
+    return (jsxs(Fragment, { children: [getNewUpload(children), jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { open: modalOpen, title: title, onCancel: onCancel.current, onOk: onOk.current, wrapClassName: wrapClassName, maskClosable: false, destroyOnHidden: true, children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, resetBtnText: resetBtnText, modalImage: modalImage, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, minAspect: minAspect, maxAspect: maxAspect, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps }) }))] }));
 });
 
 export { ImgCrop as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-img-crop",
-  "version": "4.25.0",
+  "version": "4.27.0",
   "description": "An image cropper for Ant Design Upload",
   "keywords": [
     "react",
@@ -31,42 +31,42 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "react-easy-crop": "^5.4.1",
+    "react-easy-crop": "^5.5.3",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.8",
+    "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.25.1",
+    "@eslint/js": "^9.37.0",
     "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@tailwindcss/postcss": "^4.1.4",
-    "@types/node": "^22.15.3",
-    "@types/react": "19.1.2",
-    "@types/react-dom": "19.1.2",
-    "@typescript-eslint/eslint-plugin": "^8.31.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "antd": "^5.24.9",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@types/node": "^24.7.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "antd": "^5.27.4",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.25.1",
-    "eslint-config-prettier": "^10.1.2",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "rollup": "4.40.1",
-    "rollup-plugin-dts": "^6.2.1",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "rollup": "4.52.4",
+    "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^4.1.4",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.3"
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9"
   }
 }