@scalably/ui 0.11.2 → 0.11.4

package/dist/index.d.cts

@@ -1099,7 +1099,9 @@ interface FileUploadProps {
     imageCropAspect?: number;
     /**
      * Called when an image is cropped.
-     * Provides the cropped Blob (image/jpeg) and a data URL for immediate preview.
+     * Provides the cropped Blob and a data URL for immediate preview.
+     * By default, the cropper preserves the source format when possible
+     * (e.g. PNG stays PNG; JPEG stays JPEG).
      *
      * **Note:** When using custom zone sizing with `className`, update the file's
      * `preview` property with the `dataUrl` to ensure the preview renders at the
@@ -1173,10 +1175,20 @@ interface ImageCropModalProps {
     onClose: () => void;
     /** Image source (File object URL or data URL) */
     imageSrc: string;
+    /**
+     * MIME type of the source image when known (e.g. from an input `File.type`).
+     * Used to preserve the original format on export when possible.
+     */
+    sourceMimeType?: string;
     /** Aspect ratio constraint (width/height), undefined = free */
     aspect?: number;
     /** Called when crop is confirmed with final result */
     onConfirm: (croppedBlob: Blob, dataUrl: string) => void;
+    /**
+     * Optional action to explicitly keep the original image (no crop).
+     * If provided, a "Use original" button will be shown in the footer.
+     */
+    onUseOriginal?: () => void;
     /** Crop shape */
     cropShape?: "rect" | "round";
     /** Show grid overlay */
@@ -1184,6 +1196,7 @@ interface ImageCropModalProps {
     /** Customizable content */
     title?: string;
     cancelButtonText?: string;
+    useOriginalButtonText?: string;
     saveButtonText?: string;
 }
 /**
@@ -1191,7 +1204,7 @@ interface ImageCropModalProps {
  * Manages all crop state and generates the final Blob only when the user clicks "Save".
  */
 declare const ImageCropModal: {
-    ({ isOpen, onClose, imageSrc, aspect, onConfirm, cropShape, showGrid, title, cancelButtonText, saveButtonText, }: ImageCropModalProps): react_jsx_runtime.JSX.Element | null;
+    ({ isOpen, onClose, imageSrc, sourceMimeType, aspect, onConfirm, onUseOriginal, cropShape, showGrid, title, cancelButtonText, useOriginalButtonText, saveButtonText, }: ImageCropModalProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };
 
@@ -1211,8 +1224,8 @@ interface GetCroppedImgOptions {
         vertical: boolean;
     };
     /** Output image format (default: 'image/jpeg') */
-    outputFormat?: "image/jpeg" | "image/png";
-    /** Output quality for JPEG (0-1, default: 0.9) */
+    outputFormat?: "image/jpeg" | "image/png" | "image/webp";
+    /** Output quality for JPEG/WebP (0-1, default: 1). Ignored for PNG. */
     outputQuality?: number;
 }
 /**
@@ -1238,7 +1251,7 @@ interface CroppedImageResult {
  *   pixelCrop: { x: 100, y: 100, width: 300, height: 300 },
  *   rotation: 90,
  *   outputFormat: 'image/jpeg',
- *   outputQuality: 0.9
+ *   outputQuality: 1
  * });
  * if (result) {
  *   // Use result.blob for upload
@@ -2874,6 +2887,12 @@ interface RichTextEditorProps {
      *     user can then confirm insertion with "Save".
      */
     onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * Message shown when `onImageUpload` fails. Use a string for fixed copy, or
+     * a function `(error) => string` to derive text from the rejection reason.
+     * When omitted, the editor uses a default English message.
+     */
+    imageUploadErrorMessage?: string | ((error: unknown) => string);
     /**
      * Controls how users are allowed to provide image sources.
      *
@@ -3059,7 +3078,7 @@ interface RichTextEditorProps {
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
  */
 declare const RichTextEditor: {
-    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, borderContainerClassName, toolbarClassName, contentClassName, editorClassName, labelClassName, messageContainerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, borderContainerClassName, toolbarClassName, contentClassName, editorClassName, labelClassName, messageContainerClassName, onImageUpload, imageUploadErrorMessage, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1099,7 +1099,9 @@ interface FileUploadProps {
     imageCropAspect?: number;
     /**
      * Called when an image is cropped.
-     * Provides the cropped Blob (image/jpeg) and a data URL for immediate preview.
+     * Provides the cropped Blob and a data URL for immediate preview.
+     * By default, the cropper preserves the source format when possible
+     * (e.g. PNG stays PNG; JPEG stays JPEG).
      *
      * **Note:** When using custom zone sizing with `className`, update the file's
      * `preview` property with the `dataUrl` to ensure the preview renders at the
@@ -1173,10 +1175,20 @@ interface ImageCropModalProps {
     onClose: () => void;
     /** Image source (File object URL or data URL) */
     imageSrc: string;
+    /**
+     * MIME type of the source image when known (e.g. from an input `File.type`).
+     * Used to preserve the original format on export when possible.
+     */
+    sourceMimeType?: string;
     /** Aspect ratio constraint (width/height), undefined = free */
     aspect?: number;
     /** Called when crop is confirmed with final result */
     onConfirm: (croppedBlob: Blob, dataUrl: string) => void;
+    /**
+     * Optional action to explicitly keep the original image (no crop).
+     * If provided, a "Use original" button will be shown in the footer.
+     */
+    onUseOriginal?: () => void;
     /** Crop shape */
     cropShape?: "rect" | "round";
     /** Show grid overlay */
@@ -1184,6 +1196,7 @@ interface ImageCropModalProps {
     /** Customizable content */
     title?: string;
     cancelButtonText?: string;
+    useOriginalButtonText?: string;
     saveButtonText?: string;
 }
 /**
@@ -1191,7 +1204,7 @@ interface ImageCropModalProps {
  * Manages all crop state and generates the final Blob only when the user clicks "Save".
  */
 declare const ImageCropModal: {
-    ({ isOpen, onClose, imageSrc, aspect, onConfirm, cropShape, showGrid, title, cancelButtonText, saveButtonText, }: ImageCropModalProps): react_jsx_runtime.JSX.Element | null;
+    ({ isOpen, onClose, imageSrc, sourceMimeType, aspect, onConfirm, onUseOriginal, cropShape, showGrid, title, cancelButtonText, useOriginalButtonText, saveButtonText, }: ImageCropModalProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };
 
@@ -1211,8 +1224,8 @@ interface GetCroppedImgOptions {
         vertical: boolean;
     };
     /** Output image format (default: 'image/jpeg') */
-    outputFormat?: "image/jpeg" | "image/png";
-    /** Output quality for JPEG (0-1, default: 0.9) */
+    outputFormat?: "image/jpeg" | "image/png" | "image/webp";
+    /** Output quality for JPEG/WebP (0-1, default: 1). Ignored for PNG. */
     outputQuality?: number;
 }
 /**
@@ -1238,7 +1251,7 @@ interface CroppedImageResult {
  *   pixelCrop: { x: 100, y: 100, width: 300, height: 300 },
  *   rotation: 90,
  *   outputFormat: 'image/jpeg',
- *   outputQuality: 0.9
+ *   outputQuality: 1
  * });
  * if (result) {
  *   // Use result.blob for upload
@@ -2874,6 +2887,12 @@ interface RichTextEditorProps {
      *     user can then confirm insertion with "Save".
      */
     onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * Message shown when `onImageUpload` fails. Use a string for fixed copy, or
+     * a function `(error) => string` to derive text from the rejection reason.
+     * When omitted, the editor uses a default English message.
+     */
+    imageUploadErrorMessage?: string | ((error: unknown) => string);
     /**
      * Controls how users are allowed to provide image sources.
      *
@@ -3059,7 +3078,7 @@ interface RichTextEditorProps {
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
  */
 declare const RichTextEditor: {
-    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, borderContainerClassName, toolbarClassName, contentClassName, editorClassName, labelClassName, messageContainerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, borderContainerClassName, toolbarClassName, contentClassName, editorClassName, labelClassName, messageContainerClassName, onImageUpload, imageUploadErrorMessage, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };