@ctlyst.id/internal-ui 3.4.5 → 3.5.0

package/dist/index.mjs

@@ -1289,6 +1289,7 @@ var data_table_default = DataTable;
 import { FormControl as FormControl3, FormErrorMessage as FormErrorMessage3, FormHelperText as FormHelperText3, IconButton as IconButton4 } from "@chakra-ui/react";
 import { cx as cx8 } from "@chakra-ui/shared-utils";
 import { Calendar, Close as Close3 } from "@ctlyst.id/internal-icon";
+import { offset } from "@floating-ui/react";
 import ReactDatePicker from "react-datepicker";
 
 // ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs
@@ -1941,16 +1942,10 @@ var Styles = ({ showHeader }) => {
       .react-datepicker-popper {
         z-index: 1;
       }
-      .react-datepicker-popper[data-placement^=bottom] {
-        padding-top: 10px;
-      }
       .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
         left: auto;
         right: 50px;
       }
-      .react-datepicker-popper[data-placement^=top] {
-        padding-bottom: 10px;
-      }
       .react-datepicker-popper[data-placement^=right] {
         padding-left: 8px;
       }
@@ -2757,6 +2752,20 @@ var Datepicker = ({
         id: id2,
         name,
         selected,
+        popperModifiers: [
+          offset(4),
+          {
+            name: "placement",
+            fn: (state) => {
+              const { placement, y } = state;
+              return {
+                ...state,
+                y: placement.startsWith("bottom") ? y - 10 : y + 10
+                // condition for auto placement
+              };
+            }
+          }
+        ],
         customInput: /* @__PURE__ */ jsx27(
           input_field_default,
           {
@@ -5638,7 +5647,7 @@ import {
   UnorderedList as UnorderedList2
 } from "@chakra-ui/react";
 import { Close as X, Plus } from "@ctlyst.id/internal-icon";
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState5 } from "react";
 import { useDropzone } from "react-dropzone";
 
 // src/components/uploader/constants.ts
@@ -5667,9 +5676,48 @@ var concatList = (list) => {
 };
 var formatValidationMessage = (extension) => `Foto harus dalam format ${concatList(extension.map((ext) => `.${ext}`))}.`;
 
+// src/components/uploader/utils/error-code.ts
+var ErrorCode = /* @__PURE__ */ ((ErrorCode2) => {
+  ErrorCode2["FileInvalidType"] = "file-invalid-type";
+  ErrorCode2["FileTooLarge"] = "file-too-large";
+  ErrorCode2["FileTooSmall"] = "file-too-small";
+  ErrorCode2["TooManyFiles"] = "too-many-files";
+  ErrorCode2["FileInvalidDimension"] = "file-invalid-dimension";
+  return ErrorCode2;
+})(ErrorCode || {});
+var error_code_default = ErrorCode;
+
+// src/components/uploader/utils/handler.ts
+var defaultOnHandleRejections = (fileRejection, config2, handleRejection) => {
+  var _a, _b, _c, _d;
+  const { file, errors: errors3 } = fileRejection[0];
+  switch (errors3[0].code) {
+    case error_code_default.FileInvalidType: {
+      const fileFormat = file.name.split(".").pop();
+      if (!(config2 == null ? void 0 : config2.acceptFormat)) return;
+      if (!((_a = config2 == null ? void 0 : config2.acceptFormat) == null ? void 0 : _a.validate.includes(fileFormat))) {
+        handleRejection(
+          (_d = (_b = config2.acceptFormat) == null ? void 0 : _b.message) != null ? _d : formatValidationMessage((_c = config2.acceptFormat) == null ? void 0 : _c.validate),
+          file,
+          null
+        );
+      }
+      break;
+    }
+    case error_code_default.FileTooLarge: {
+      if (config2.maxFileSize) {
+        handleRejection(config2.maxFileSize.message, file, null);
+      }
+      break;
+    }
+    default:
+      handleRejection(errors3[0].message, file, null);
+      break;
+  }
+};
+
 // src/components/uploader/components/uploader.tsx
 import { Fragment as Fragment12, jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
-import { createElement } from "react";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -5696,9 +5744,9 @@ var Uploader = ({
   errorText,
   isShowReupload = true,
   size: size2 = "lg",
+  validatorExt,
   ...props
 }) => {
-  const inputRef = useRef3(null);
   const [filePreview, setFilePreview] = useState5();
   const toast2 = useToast();
   const handleRejection = useCallback2(
@@ -5713,33 +5761,21 @@ var Uploader = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onHandleRejections]
   );
-  const onDrop = useCallback2(
+  const onDropAccepted = useCallback2(
     (files) => {
-      var _a;
       const file = files[0];
-      const fileFormat = file.name.split(".").pop();
-      if (!(acceptFormat == null ? void 0 : acceptFormat.validate.includes(fileFormat))) {
-        return handleRejection((_a = acceptFormat.message) != null ? _a : formatValidationMessage(acceptFormat.validate), file, null);
-      }
       const imageUrl = URL.createObjectURL(file);
       const img = new Image();
       img.src = imageUrl;
       img.onload = () => {
-        var _a2;
         const imgWidth = img.width;
         const imgheight = img.height;
         if (customValidation && customValidation(file, img) !== null) {
           return handleRejection(customValidation(file, img), file, img);
         }
-        if (!acceptFormat.validate.includes(fileFormat)) {
-          return handleRejection((_a2 = acceptFormat.message) != null ? _a2 : formatValidationMessage(acceptFormat.validate), file, img);
-        }
         if (dimension && (imgWidth !== dimension.validate[0] || imgheight !== dimension.validate[1])) {
           return handleRejection(dimension.message, file, img);
         }
-        if (maxFileSize && file.size > maxFileSize.validate) {
-          return handleRejection(maxFileSize.message, file, null);
-        }
         onHandleUploadFile == null ? void 0 : onHandleUploadFile(file, img);
         setFilePreview(URL.createObjectURL(file));
         return null;
@@ -5748,12 +5784,36 @@ var Uploader = ({
     },
     [acceptFormat, customValidation, dimension, handleRejection, maxFileSize, onHandleUploadFile]
   );
-  const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({
-    onDrop,
+  const onDropRejected = useCallback2((fileRejections) => {
+    defaultOnHandleRejections(fileRejections, { acceptFormat, maxFileSize }, handleRejection);
+  }, []);
+  const validator = useCallback2(
+    (file) => {
+      if (validatorExt) {
+        const result = [];
+        validatorExt.forEach((validatorFn) => {
+          const error = validatorFn(file);
+          if (Array.isArray(error)) {
+            result.push(...error);
+          } else if (error) result.push(error);
+        });
+        return result;
+      }
+      return null;
+    },
+    [validatorExt]
+  );
+  const { getRootProps, getInputProps, isDragActive, acceptedFiles, open } = useDropzone({
+    onDropAccepted,
+    onDropRejected,
+    accept: {
+      "image/*": [...acceptFormat.validate]
+    },
     maxFiles: 1,
+    maxSize: maxFileSize == null ? void 0 : maxFileSize.validate,
     noClick: isDisabled,
-    disabled: !!filePreview,
-    noDrag: isDisabled
+    noDrag: isDisabled,
+    validator
   });
   const renderHelperText = () => {
     if (Array.isArray(helperText)) {
@@ -5855,66 +5915,79 @@ var Uploader = ({
               )
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsxs31(Fragment12, { children: [
-            /* @__PURE__ */ jsx66(
-              "input",
-              {
-                "data-test-id": `CT_component_base-image-uploader_input-file${testId ? `_${testId}` : ""}`,
-                ...getInputProps()
-              }
-            ),
-            isDragActive ? /* @__PURE__ */ jsx66(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
-              size2 === "sm" && /* @__PURE__ */ jsx66(Plus, { size: 6, color }),
-              /* @__PURE__ */ jsxs31(Box30, { children: [
-                !filePreview && /* @__PURE__ */ jsx66(
-                  Heading2,
-                  {
-                    fontWeight: "400",
-                    fontSize: size2 === "sm" ? "text.md" : "text.xl",
-                    mb: size2 === "sm" ? "0" : "2",
-                    textAlign: "center",
-                    children: uploadFileText && size2 === "lg" ? uploadFileText : "Upload"
-                  }
-                ),
-                size2 === "lg" && /* @__PURE__ */ jsx66(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
-              ] })
+          !filePreview && /* @__PURE__ */ jsx66(Fragment12, { children: isDragActive ? /* @__PURE__ */ jsx66(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+            size2 === "sm" && /* @__PURE__ */ jsx66(Plus, { size: 6, color }),
+            /* @__PURE__ */ jsxs31(Box30, { children: [
+              !filePreview && /* @__PURE__ */ jsx66(
+                Heading2,
+                {
+                  fontWeight: "400",
+                  fontSize: size2 === "sm" ? "text.md" : "text.xl",
+                  mb: size2 === "sm" ? "0" : "2",
+                  textAlign: "center",
+                  children: uploadFileText && size2 === "lg" ? uploadFileText : "Upload"
+                }
+              ),
+              size2 === "lg" && /* @__PURE__ */ jsx66(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
             ] })
-          ] })
+          ] }) })
         ]
       }
     ),
-    filePreview && !isSmall && /* @__PURE__ */ jsxs31(Flex19, { align: "center", justify: "center", my: 2, children: [
-      /* @__PURE__ */ createElement(
-        "input",
-        {
-          ...getInputProps(),
-          key: Math.random(),
-          ref: inputRef,
-          accept: "image/*",
-          "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
-        }
-      ),
-      isShowReupload && /* @__PURE__ */ jsx66(
-        Button7,
-        {
-          "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
-          type: "button",
-          size: "sm",
-          variant: "outline",
-          onClick: () => {
-            var _a;
-            (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
-          },
-          children: "Ubah Foto"
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx66(
+      "input",
+      {
+        ...getInputProps(),
+        "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
+      }
+    ),
+    filePreview && !isSmall && /* @__PURE__ */ jsx66(Flex19, { align: "center", justify: "center", my: 2, children: isShowReupload && /* @__PURE__ */ jsx66(
+      Button7,
+      {
+        "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
+        type: "button",
+        size: "sm",
+        variant: "outline",
+        onClick: open,
+        children: "Ubah Foto"
+      }
+    ) }),
     renderErrorText(errorText),
     renderHelperText()
   ] });
 };
 var uploader_default = Uploader;
 
+// src/components/uploader/utils/is-ratio-equal.ts
+var isRatioEqual = (base, img) => {
+  const baseRatio = (base.width / base.height).toFixed(2);
+  const imgRatio = (img.width / img.height).toFixed(2);
+  return baseRatio === imgRatio;
+};
+
+// src/components/uploader/components/validator.ts
+var dimensionValidator = (dimension, message) => {
+  return (file) => {
+    const imageUrl = URL.createObjectURL(file);
+    const img = new Image();
+    img.src = imageUrl;
+    img.onload = () => {
+    };
+    const isRatioValid = isRatioEqual(
+      { width: dimension[0], height: dimension[1] },
+      { width: img.width, height: img.height }
+    );
+    console.log("log", isRatioValid);
+    if (isRatioValid) {
+      return null;
+    }
+    return {
+      code: error_code_default.FileInvalidDimension,
+      message: message != null ? message : "File has invalid dimension"
+    };
+  };
+};
+
 // src/components/index.ts
 import {
   Avatar as Avatar2,
@@ -7611,7 +7684,7 @@ import { useMemo as useMemo5 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef3 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
 import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
@@ -7622,7 +7695,7 @@ var useInternalUI = () => {
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = useRef4(axios.create(config2));
+  const instanceRef = useRef3(axios.create(config2));
   useEffect5(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
@@ -7772,6 +7845,7 @@ export {
   DrawerProps,
   DropdownIndicator,
   empty_state_default as EmptyState,
+  error_code_default as ErrorCode,
   Fade,
   FadeProps,
   field_default as Field,
@@ -7995,12 +8069,15 @@ export {
   WrapProps,
   XMSLogo,
   createExtendTheme,
+  defaultOnHandleRejections,
+  dimensionValidator,
   extendTheme,
   forwardRef13 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
   id,
   isCellDisabled,
+  isRatioEqual,
   selectStyles,
   theme4 as theme,
   themeSelect,