@ctlyst.id/internal-ui 5.4.9 → 5.4.11

package/dist/index.d.mts

@@ -803,7 +803,7 @@ type UploaderProps = FlexProps & {
     /**
      * callback when validation is not valid
      */
-    onHandleRejections?: (file: File, image: HTMLImageElement | null) => void;
+    onHandleRejections?: (file: File, image: HTMLImageElement | null, type?: string | keyof typeof ErrorCode) => void;
     /**
      * Text for drag active
      * - if `dragActiveText` is undefined. Text will take from default constant.
@@ -894,6 +894,23 @@ type UploaderProps = FlexProps & {
     isShowReupload?: boolean;
     size?: 'sm' | 'lg';
     buttonChangeText?: string;
+    /**
+     * Custom error messages for different error types
+     * Each error type can have a custom message and display type
+     * - message: The error message to display
+     * - type: How to display the error ('toast' for popup notification, 'inline' for inline text)
+     * Example:
+     * {
+     *   'file-invalid-type': { message: 'Invalid file type', type: 'inline' },
+     *   'file-too-large': { message: 'File too large', type: 'toast' }
+     * }
+     */
+    customErrorRejection?: {
+        [key in ErrorCode]?: {
+            message: string;
+            type: 'inline' | 'toast';
+        };
+    };
 };
 
 declare const Uploader: React__default.FC<UploaderProps>;
@@ -933,10 +950,11 @@ declare enum ErrorCode {
     FileTooLarge = "file-too-large",
     FileTooSmall = "file-too-small",
     TooManyFiles = "too-many-files",
-    FileInvalidDimension = "file-invalid-dimension"
+    FileInvalidDimension = "file-invalid-dimension",
+    FileInvalid = "file-invalid"
 }
 
-declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null) => void) => void;
+declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null, type?: string) => void) => void;
 
 interface ImageRes {
     width: number;

package/dist/index.d.ts

@@ -803,7 +803,7 @@ type UploaderProps = FlexProps & {
     /**
      * callback when validation is not valid
      */
-    onHandleRejections?: (file: File, image: HTMLImageElement | null) => void;
+    onHandleRejections?: (file: File, image: HTMLImageElement | null, type?: string | keyof typeof ErrorCode) => void;
     /**
      * Text for drag active
      * - if `dragActiveText` is undefined. Text will take from default constant.
@@ -894,6 +894,23 @@ type UploaderProps = FlexProps & {
     isShowReupload?: boolean;
     size?: 'sm' | 'lg';
     buttonChangeText?: string;
+    /**
+     * Custom error messages for different error types
+     * Each error type can have a custom message and display type
+     * - message: The error message to display
+     * - type: How to display the error ('toast' for popup notification, 'inline' for inline text)
+     * Example:
+     * {
+     *   'file-invalid-type': { message: 'Invalid file type', type: 'inline' },
+     *   'file-too-large': { message: 'File too large', type: 'toast' }
+     * }
+     */
+    customErrorRejection?: {
+        [key in ErrorCode]?: {
+            message: string;
+            type: 'inline' | 'toast';
+        };
+    };
 };
 
 declare const Uploader: React__default.FC<UploaderProps>;
@@ -933,10 +950,11 @@ declare enum ErrorCode {
     FileTooLarge = "file-too-large",
     FileTooSmall = "file-too-small",
     TooManyFiles = "too-many-files",
-    FileInvalidDimension = "file-invalid-dimension"
+    FileInvalidDimension = "file-invalid-dimension",
+    FileInvalid = "file-invalid"
 }
 
-declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null) => void) => void;
+declare const defaultOnHandleRejections: (fileRejection: FileRejection[], config: Pick<UploaderProps, 'acceptFormat' | 'maxFileSize'>, handleRejection: (message: string, file: File, image: HTMLImageElement | null, type?: string) => void) => void;
 
 interface ImageRes {
     width: number;

package/dist/index.js

@@ -6082,6 +6082,7 @@ var ErrorCode = /* @__PURE__ */ ((ErrorCode2) => {
   ErrorCode2["FileTooSmall"] = "file-too-small";
   ErrorCode2["TooManyFiles"] = "too-many-files";
   ErrorCode2["FileInvalidDimension"] = "file-invalid-dimension";
+  ErrorCode2["FileInvalid"] = "file-invalid";
   return ErrorCode2;
 })(ErrorCode || {});
 var error_code_default = ErrorCode;
@@ -6098,19 +6099,24 @@ var defaultOnHandleRejections = (fileRejection, config2, handleRejection) => {
         handleRejection(
           (_d = (_b = config2.acceptFormat) == null ? void 0 : _b.message) != null ? _d : formatValidationMessage((_c = config2.acceptFormat) == null ? void 0 : _c.validate),
           file,
-          null
+          null,
+          error_code_default.FileInvalidType
         );
       }
       break;
     }
     case error_code_default.FileTooLarge: {
       if (config2.maxFileSize) {
-        handleRejection(config2.maxFileSize.message, file, null);
+        handleRejection(config2.maxFileSize.message, file, null, error_code_default.FileTooLarge);
       }
       break;
     }
+    case error_code_default.TooManyFiles: {
+      handleRejection(errors3[0].message, file, null, error_code_default.TooManyFiles);
+      break;
+    }
     default:
-      handleRejection(errors3[0].message, file, null);
+      handleRejection(errors3[0].message, file, null, error_code_default.FileInvalid);
       break;
   }
 };
@@ -6139,29 +6145,47 @@ var Uploader = ({
   value,
   isShowCloseButton = true,
   testId,
-  isError,
-  errorText,
+  isError: propIsError,
+  errorText: propErrorText,
   isShowReupload = true,
   size: size2 = "lg",
   validatorExt,
   buttonChangeText = "Ubah Foto",
+  customErrorRejection,
   ...props
 }) => {
   const [filePreview, setFilePreview] = (0, import_react94.useState)();
+  const [isError, setIsError] = (0, import_react94.useState)(propIsError);
+  const [errorText, setErrorText] = (0, import_react94.useState)(propErrorText);
   const toast2 = useToast();
   const handleRejection = (0, import_react94.useCallback)(
-    (message, file, image) => {
+    (message, file, image, errorCode) => {
       if (onHandleRejections) {
-        onHandleRejections(file, image);
+        onHandleRejections(file, image, errorCode);
+      }
+      if (customErrorRejection == null ? void 0 : customErrorRejection[errorCode]) {
+        const error = customErrorRejection[errorCode];
+        if ((error == null ? void 0 : error.type) === "toast") {
+          return toast2.error(error.message);
+        }
+        if ((error == null ? void 0 : error.type) === "inline") {
+          setIsError(true);
+          setErrorText(error.message);
+          return error.message;
+        }
       }
+      setIsError(true);
+      setErrorText(message);
       return toast2.error(message);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onHandleRejections]
+    [onHandleRejections, customErrorRejection]
   );
   const onDropAccepted = (0, import_react94.useCallback)(
     (files) => {
       const file = files[0];
+      setIsError(propIsError);
+      setErrorText(propErrorText);
       if (acceptFileType && acceptFileType.includes(file.type)) {
         setFilePreview(file.name);
         onHandleUploadFile == null ? void 0 : onHandleUploadFile(file, null);