@rolster/react-components 18.22.0 → 18.22.1

package/dist/es/assets/{index-PeMi6MeC.css → index-B9-Brjbd.css}

@@ -2141,7 +2141,7 @@
 .rls-modal__component {
   position: absolute;
   width: auto;
-  max-width: calc(100% - var(--rls-sizing-x8));
+  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
@@ -2609,15 +2609,14 @@
 .rls-image-chooser__modal {
   --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
     var(--rls-sizing-x12) var(--rls-sizing-x12);
-  --pvt-modal-max-width: 240rem;
+  --rlc-modal-max-width: calc(100% - var(--rls-sizing-x16));
   width: 100%;
-  max-width: var(--pvt-modal-max-width);
 }
 @media only screen and (max-width: 420px) {
   .rls-image-chooser__modal {
     --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
       var(--rls-sizing-x8) var(--rls-sizing-x8);
-    --pvt-modal-max-width: 160rem;
+    --rlc-modal-max-width: 160rem;
   }
 } /*# sourceMappingURL=ImageChooser.css.map */
 

package/dist/es/index.js

@@ -3478,7 +3478,7 @@ function RlsImageEditor(props) {
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = useCallback(() => {
         const cropProps = getCropProperties();
-        const width = cropProps.width;
+        const width = props.imgWidth || cropProps.width;
         const height = width * getRatioFactor(props.ratio || '1:1');
         refPicture.current.width = width;
         refPicture.current.height = height;
@@ -3498,7 +3498,13 @@ function RlsImageEditor(props) {
                 };
             }
         }, props.mimeType || 'image/jpeg', 1);
-    }, [props.ratio, props.mimeType, props.onValue, props.formControl]);
+    }, [
+        props.ratio,
+        props.mimeType,
+        props.onValue,
+        props.formControl,
+        props.imgWidth
+    ]);
     const onRestore = useCallback(() => {
         const context = refCanvas.current.getContext('2d');
         if (originalImage.current) {
@@ -3559,7 +3565,7 @@ function RlsImageChooser(props) {
     const onCancel = useCallback(() => {
         setSrcEditor(undefined);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onSelect, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), srcEditor && (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-chooser__modal", visible: true, children: jsxRuntimeExports.jsx(RlsImageEditor, { src: srcEditor, formControl: props.formControl, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: props.disabled, children: labels.actionCancel }) }) })), jsxRuntimeExports.jsx("input", { ref: refInput, type: "file", disabled: props.disabled })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onSelect, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), srcEditor && (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-chooser__modal", visible: true, children: jsxRuntimeExports.jsx(RlsImageEditor, { src: srcEditor, formControl: props.formControl, imgWidth: props.imgWidth, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: props.disabled, children: labels.actionCancel }) }) })), jsxRuntimeExports.jsx("input", { ref: refInput, type: "file", disabled: props.disabled })] }));
 }
 
 const DURATION_ANIMATION = 240;