@ctlyst.id/internal-ui 3.4.6 → 3.5.1

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;
       }
@@ -2751,17 +2746,29 @@ var Datepicker = ({
   const hasMultipleMonthShow = ((_b = props == null ? void 0 : props.monthsShown) != null ? _b : 1) < 2;
   const component = /* @__PURE__ */ jsxs10(Fragment2, { children: [
     /* @__PURE__ */ jsx27(styles_default, { showHeader: !hasMultipleMonthShow }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx27(field_default, { label, isRequired, isError, children: /* @__PURE__ */ jsx27(
       ReactDatePicker,
       {
         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,
           {
-            label,
-            isRequired,
             autoComplete: "off",
             isError,
             addOnRight: /* @__PURE__ */ jsxs10(InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
@@ -2796,7 +2803,7 @@ var Datepicker = ({
         ...getTimeProps(),
         ...props
       }
-    )
+    ) })
   ] });
   if (props.inline) {
     return component;
@@ -5638,7 +5645,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 +5674,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 +5742,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 +5759,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,11 +5782,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,
-    noDrag: isDisabled
+    noDrag: isDisabled,
+    validator
   });
   const renderHelperText = () => {
     if (Array.isArray(helperText)) {
@@ -5873,13 +5932,10 @@ var Uploader = ({
         ]
       }
     ),
-    /* @__PURE__ */ createElement(
+    /* @__PURE__ */ jsx66(
       "input",
       {
         ...getInputProps(),
-        key: Math.random(),
-        ref: inputRef,
-        accept: "image/*",
         "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
       }
     ),
@@ -5890,10 +5946,7 @@ var Uploader = ({
         type: "button",
         size: "sm",
         variant: "outline",
-        onClick: () => {
-          var _a;
-          (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
-        },
+        onClick: open,
         children: "Ubah Foto"
       }
     ) }),
@@ -5903,6 +5956,36 @@ var Uploader = ({
 };
 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,
@@ -7599,7 +7682,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({
@@ -7610,7 +7693,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);
@@ -7760,6 +7843,7 @@ export {
   DrawerProps,
   DropdownIndicator,
   empty_state_default as EmptyState,
+  error_code_default as ErrorCode,
   Fade,
   FadeProps,
   field_default as Field,
@@ -7983,12 +8067,15 @@ export {
   WrapProps,
   XMSLogo,
   createExtendTheme,
+  defaultOnHandleRejections,
+  dimensionValidator,
   extendTheme,
   forwardRef13 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
   id,
   isCellDisabled,
+  isRatioEqual,
   selectStyles,
   theme4 as theme,
   themeSelect,