@ctlyst.id/internal-ui 5.1.0 → 5.3.0

package/dist/index.mjs

@@ -459,10 +459,40 @@ var card_default = CardCustom;
 // src/components/checkbox/components/checkbox.tsx
 import { Box as Box5, Checkbox, forwardRef as forwardRef7, Text as Text2, useCheckbox } from "@chakra-ui/react";
 import * as Icon from "@ctlyst.id/internal-icon";
+import { useCallback, useEffect, useState } from "react";
+
+// src/utils/throttleFn.ts
+var throttle = (fn, delay) => {
+  if (!delay) return fn;
+  let timeoutId;
+  return (val) => {
+    if (timeoutId) return;
+    fn(val);
+    timeoutId = setTimeout(() => {
+      clearTimeout(timeoutId);
+      timeoutId = void 0;
+    }, delay);
+  };
+};
+
+// src/components/checkbox/components/checkbox.tsx
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 var CheckboxComponent = forwardRef7(
-  ({ isError = false, animated = false, helpText, errorText, boxProps, children, isDisabled, ...rest }, ref) => {
+  ({ isError = false, animated = false, helpText, errorText, boxProps, children, isDisabled, throttleTime, ...rest }, ref) => {
     const { state } = useCheckbox(rest);
+    const [isChecked, setIsChecked] = useState(!!rest.isChecked);
+    useEffect(() => {
+      setIsChecked(!!rest.isChecked);
+    }, [rest.isChecked]);
+    const throttleFn = useCallback(
+      throttle((val) => setIsChecked(val), throttleTime),
+      []
+    );
+    const handleOnChange = useCallback((event) => {
+      if (throttleTime) throttleFn(event.target.checked);
+      else setIsChecked(event.target.checked);
+      if (rest.onChange) rest.onChange(event);
+    }, []);
     const variant = isError ? "errors" : "unstyled";
     const renderIcon2 = () => {
       if (state.isChecked) return /* @__PURE__ */ jsx16(Icon.Check, { size: 3, color: "inherit" });
@@ -470,7 +500,21 @@ var CheckboxComponent = forwardRef7(
       return void 0;
     };
     return /* @__PURE__ */ jsxs2(Box5, { children: [
-      /* @__PURE__ */ jsx16(Box5, { display: "flex", ...boxProps, children: /* @__PURE__ */ jsx16(Checkbox, { variant, ref, ...rest, isDisabled, color: "white", icon: renderIcon2(), children: children && /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+      /* @__PURE__ */ jsx16(Box5, { display: "flex", ...boxProps, children: /* @__PURE__ */ jsx16(
+        Checkbox,
+        {
+          "data-test-id": "Ok3zwJNf_-uY5Pe3mSV4P",
+          variant,
+          ref,
+          ...rest,
+          isChecked,
+          onChange: handleOnChange,
+          isDisabled,
+          color: "white",
+          icon: renderIcon2(),
+          children: children && /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children })
+        }
+      ) }),
       (isError && errorText || helpText) && /* @__PURE__ */ jsx16(Box5, { mt: "1", ml: "6", children: isError ? /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
     ] });
   }
@@ -606,7 +650,7 @@ var chips_default = Chips;
 
 // src/components/counter/components/counter.tsx
 import { Box as Box10, HStack, IconButton as IconButton3, Text as Text3 } from "@chakra-ui/react";
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 import { FiMinus, FiPlus } from "react-icons/fi";
 
 // src/components/form/components/input-addon.tsx
@@ -636,7 +680,7 @@ import { InputRightElement } from "@chakra-ui/react";
 // src/components/form/components/input-field.tsx
 import { Box as Box8, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
 import { Close as Close2, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
-import React2, { useMemo, useState } from "react";
+import React2, { useMemo, useState as useState2 } from "react";
 import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
 var InputField = React2.forwardRef((props, ref) => {
   const {
@@ -671,7 +715,7 @@ var InputField = React2.forwardRef((props, ref) => {
       focusColor: focusColor2
     };
   };
-  const [isShowPassword, setIsShowPassword] = useState(false);
+  const [isShowPassword, setIsShowPassword] = useState2(false);
   const inputType = useMemo(() => {
     return type === "password" && isShowPassword ? "text" : type;
   }, [isShowPassword, type]);
@@ -857,7 +901,7 @@ var Counter = ({
   const increment = () => {
     onChange(value + 1);
   };
-  const handleChangeInput = useCallback(
+  const handleChangeInput = useCallback2(
     (e) => {
       const inputValue = e.target.value;
       const cleanedInputValue = inputValue.replace(/^0+/, "") || "0";
@@ -919,10 +963,11 @@ var counter_default = Counter;
 
 // src/components/data-table/components/data-table.tsx
 import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
-import { Box as Box11, Checkbox as Checkbox2, Flex as Flex2, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
+import { Box as Box11, Flex as Flex2, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
 import { css } from "@emotion/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as React5 from "react";
+import { useCallback as useCallback3 } from "react";
 
 // src/hooks/use-drag-threshold/use-drag-or-click.ts
 import { useRef } from "react";
@@ -1007,23 +1052,23 @@ var isCellDisabled = (row, cellId) => {
   }
   return false;
 };
-var getCommonPinningStyles = (column) => {
+var getCommonPinningStyles = (column, paddingRowX) => {
   const isPinned = column.getIsPinned();
   const isFirstLeftPinnedColumn = isPinned === "left" && column.getIsFirstColumn("left");
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   const isLastRightPinnedColumn = isPinned === "right" && column.getIsLastColumn("right");
   return {
-    left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ? 8 : 0)}px` : void 0,
-    right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? 8 : 0)}px` : void 0,
+    left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ? paddingRowX : 0)}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? paddingRowX : 0)}px` : void 0,
     position: isPinned ? "sticky" : "relative",
     zIndex: isPinned ? 1 : 0,
     ...isFirstLeftPinnedColumn ? {
-      pl: "16px"
-    } : { pl: "8px" },
+      pl: `${paddingRowX + 8}px`
+    } : {},
     ...isLastRightPinnedColumn ? {
-      pr: "16px"
-    } : { pr: "8px" },
+      pr: `${paddingRowX + 8}px`
+    } : {},
     ...isLastLeftPinnedColumn ? {
       py: "16px",
       pr: "8px",
@@ -1080,13 +1125,19 @@ var useDataTable = ({
   const [sorting, setSorting] = React5.useState(sortingState != null ? sortingState : []);
   const dataColumns = React5.useMemo(() => columns, [columns]);
   const action = React5.useRef("");
+  const throttleRowClick = useCallback3(
+    throttle((row) => {
+      row.toggleSelected();
+    }, 250),
+    []
+  );
   const checkboxColumn = React5.useMemo(
     () => [
       {
         id: "select",
         size: 32,
         header: ({ table: table2 }) => /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
-          Checkbox2,
+          checkbox_default,
           {
             "data-test-id": "select-header-data-table",
             ...{
@@ -1112,19 +1163,20 @@ var useDataTable = ({
             }
           }
         ) }),
-        cell: ({ row }) => /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
-          Checkbox2,
-          {
-            "data-test-id": `select-data-table-${row.index}`,
-            ...{
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
+            checkbox_default,
+            {
+              "data-test-id": `select-data-table-${row.index}`,
               isChecked: row.getIsSelected(),
-              isIndeterminate: row.getIsSomeSelected()
+              isIndeterminate: row.getIsSomeSelected(),
+              onChange: () => throttleRowClick(row)
             }
-          }
-        ) })
+          ) });
+        }
       }
     ],
-    [dataSource]
+    []
   );
   const generateColumn = () => {
     if (withSelectedRow) {
@@ -1176,11 +1228,12 @@ var useDataTable = ({
     table,
     action,
     toggleAllRowsSelected,
-    generateColumn
+    generateColumn,
+    throttleRowClick
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e;
   const {
     isLoading,
     styles,
@@ -1192,10 +1245,11 @@ var DataTable = React5.forwardRef((props, ref) => {
     highlightedRow,
     withSelectedRow,
     highlightRowColor,
-    cellLineClamp = 2
+    cellLineClamp = 2,
+    paddingRowX = 8
   } = props;
   const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
-  const { table, action, toggleAllRowsSelected, generateColumn } = useDataTable(props);
+  const { table, action, throttleRowClick, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   const refTable = React5.useRef(null);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
@@ -1239,18 +1293,28 @@ var DataTable = React5.forwardRef((props, ref) => {
     };
   }, []);
   const hasScroll = ((_a = refTable == null ? void 0 : refTable.current) == null ? void 0 : _a.offsetWidth) && ((_b = refTable == null ? void 0 : refTable.current) == null ? void 0 : _b.scrollWidth) && ((_c = refTable == null ? void 0 : refTable.current) == null ? void 0 : _c.offsetWidth) < ((_d = refTable == null ? void 0 : refTable.current) == null ? void 0 : _d.scrollWidth);
+  const getTableHeaderSize = (header, index, totalColumn) => {
+    if (header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right")) {
+      return { width: `${header.getSize() + paddingRowX}px` };
+    }
+    if (index === 0) {
+      return { width: `${header.getSize() + paddingRowX}px`, paddingLeft: `${8 + paddingRowX}` };
+    }
+    if (index === totalColumn - 1) {
+      return { width: `${header.getSize() + paddingRowX}px`, paddingRight: `${8 + paddingRowX}` };
+    }
+    return { width: `${header.getSize()}px` };
+  };
   return /* @__PURE__ */ jsx24(
     Box11,
     {
       overflowX: "auto",
       overflowY: "hidden",
       position: "relative",
-      pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 2,
-      pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 2,
       maxW: "100%",
       w: "full",
       ref: refTable,
-      ...((_g = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _g.length) && hasScroll ? { "data-pin-right": true } : {},
+      ...((_e = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _e.length) && hasScroll ? { "data-pin-right": true } : {},
       ...container,
       children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
         /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
@@ -1288,8 +1352,10 @@ var DataTable = React5.forwardRef((props, ref) => {
                 Th,
                 {
                   colSpan: header.colSpan,
-                  sx: getCommonPinningStyles(header.column),
-                  width: header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right") ? `${header.getSize() + 8}px` : `${header.getSize()}px`,
+                  _first: { paddingLeft: `${paddingRowX + 8}px` },
+                  _last: { paddingRight: `${paddingRowX + 8}px` },
+                  sx: getCommonPinningStyles(header.column, paddingRowX),
+                  ...getTableHeaderSize(header, index, headerGroup.headers.length),
                   ...styles == null ? void 0 : styles.tableColumnHeader,
                   children: /* @__PURE__ */ jsxs8(
                     Flex2,
@@ -1325,7 +1391,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             }) }, headerGroup.id))
           }
         ),
-        /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
+        /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row, index) => {
           const isDisabledRow = disabledRow && disabledRow(row.original);
           const isHighlightedRow = highlightedRow && highlightedRow(row.original);
           return /* @__PURE__ */ jsx24(
@@ -1357,7 +1423,7 @@ var DataTable = React5.forwardRef((props, ref) => {
                 },
                 onClick: () => {
                   action.current = "selectRow";
-                  if (withSelectedRow) row.toggleSelected();
+                  if (withSelectedRow) throttleRowClick(row);
                   if (onRowClick) {
                     if (isDisabledRow) return;
                     onRowClick(row.original);
@@ -1374,8 +1440,10 @@ var DataTable = React5.forwardRef((props, ref) => {
                   {
                     "data-test-id": `CT_Component_TableCell_${cell.id}`,
                     fontSize: "text.sm",
+                    _first: { paddingLeft: `${paddingRowX + 8}px` },
+                    _last: { paddingRight: `${paddingRowX + 8}px` },
                     sx: {
-                      ...getCommonPinningStyles(cell.column)
+                      ...getCommonPinningStyles(cell.column, paddingRowX)
                     },
                     ...styles == null ? void 0 : styles.tableCell,
                     children: /* @__PURE__ */ jsx24(
@@ -1387,14 +1455,22 @@ var DataTable = React5.forwardRef((props, ref) => {
                         align: "center",
                         "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
                         opacity: isDisabled ? 0.5 : 1,
-                        ...cellLineClamp > 0 ? {
-                          noOfLines: cellLineClamp,
-                          sx: {
-                            display: "-webkit-inline-box"
-                          }
-                        } : {},
                         sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
-                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                        children: /* @__PURE__ */ jsx24(
+                          Box11,
+                          {
+                            onMouseUp: (e) => {
+                              e.stopPropagation();
+                            },
+                            ...cellLineClamp > 0 ? {
+                              noOfLines: cellLineClamp,
+                              sx: {
+                                display: "-webkit-inline-box"
+                              }
+                            } : {},
+                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          }
+                        )
                       }
                     )
                   },
@@ -4793,7 +4869,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 }
 
 // src/components/select/components/select-with-checkbox.tsx
-import { Checkbox as Checkbox3, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
+import { Checkbox as Checkbox2, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
 import { useColorMode as useColorMode7 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
 import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -4865,7 +4941,7 @@ var InputOption = ({
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
               (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx57(
-                Checkbox3,
+                Checkbox2,
                 {
                   isChecked: checkedState === CHECKBOX_STATE.CHECKED,
                   isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
@@ -4874,7 +4950,7 @@ var InputOption = ({
                   "data-test-id": "CT_component_select-checkbox_select-all-option"
                 }
               ) : /* @__PURE__ */ jsx57(
-                Checkbox3,
+                Checkbox2,
                 {
                   pointerEvents: "none",
                   isChecked: isSelected,
@@ -5408,36 +5484,36 @@ import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text
 // src/components/time-input/components/index.tsx
 import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup4 } from "@chakra-ui/react";
 import { Clock } from "@ctlyst.id/internal-icon";
-import { useEffect as useEffect3, useImperativeHandle as useImperativeHandle2 } from "react";
+import { useEffect as useEffect4, useImperativeHandle as useImperativeHandle2 } from "react";
 
 // src/components/time-input/components/integration.tsx
 import { $NOW, TimescapeManager } from "@zamiru/timescape";
 import { marry } from "@zamiru/timescape";
 import {
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useLayoutEffect,
   useRef as useRef3,
-  useState as useState4
+  useState as useState5
 } from "react";
 var useTimescape = (options = {}) => {
   var _a;
   const { date, onChangeDate, ...rest } = options;
-  const [manager] = useState4(() => new TimescapeManager(date, rest));
+  const [manager] = useState5(() => new TimescapeManager(date, rest));
   const onChangeDateRef = useRef3(onChangeDate);
   useLayoutEffect(() => {
     onChangeDateRef.current = onChangeDate;
   }, [onChangeDate]);
-  const [optionsState, update] = useState4(() => ({
+  const [optionsState, update] = useState5(() => ({
     date,
     ...rest
   }));
-  useEffect2(() => {
+  useEffect3(() => {
     manager.resync();
     return () => {
       manager.remove();
     };
   }, [manager]);
-  useEffect2(() => {
+  useEffect3(() => {
     return manager.on("changeDate", (nextDate) => {
       var _a2;
       (_a2 = onChangeDateRef.current) == null ? void 0 : _a2.call(onChangeDateRef, nextDate);
@@ -5445,7 +5521,7 @@ var useTimescape = (options = {}) => {
     });
   }, [manager]);
   const timestamp = (_a = optionsState.date) == null ? void 0 : _a.getTime();
-  useEffect2(() => {
+  useEffect3(() => {
     manager.date = timestamp;
     manager.minDate = optionsState.minDate;
     manager.maxDate = optionsState.maxDate;
@@ -5558,7 +5634,7 @@ var TimeInput2 = forwardRef12(
       date,
       ...config2
     });
-    useEffect3(() => {
+    useEffect4(() => {
       var _a, _b, _c, _d, _e, _f;
       timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
       timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
@@ -5817,7 +5893,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, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState6 } from "react";
 import { useDropzone } from "react-dropzone";
 
 // src/components/uploader/constants.ts
@@ -5916,9 +5992,9 @@ var Uploader = ({
   validatorExt,
   ...props
 }) => {
-  const [filePreview, setFilePreview] = useState5();
+  const [filePreview, setFilePreview] = useState6();
   const toast2 = useToast();
-  const handleRejection = useCallback2(
+  const handleRejection = useCallback4(
     (message, file, image) => {
       if (onHandleRejections) {
         onHandleRejections(file, image);
@@ -5928,7 +6004,7 @@ var Uploader = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onHandleRejections]
   );
-  const onDropAccepted = useCallback2(
+  const onDropAccepted = useCallback4(
     (files) => {
       const file = files[0];
       const imageUrl = URL.createObjectURL(file);
@@ -5951,10 +6027,10 @@ var Uploader = ({
     },
     [acceptFormat, customValidation, dimension, handleRejection, maxFileSize, onHandleUploadFile]
   );
-  const onDropRejected = useCallback2((fileRejections) => {
+  const onDropRejected = useCallback4((fileRejections) => {
     defaultOnHandleRejections(fileRejections, { acceptFormat, maxFileSize }, handleRejection);
   }, []);
-  const validator = useCallback2(
+  const validator = useCallback4(
     (file) => {
       const result = [];
       if (validatorExt) {
@@ -6003,7 +6079,7 @@ var Uploader = ({
     onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
     acceptedFiles.pop();
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (value) {
       if (typeof value === "string") {
         setFilePreview(value);
@@ -6853,14 +6929,14 @@ var variants2 = {
   errors,
   unstyled
 };
-var Checkbox4 = defineMultiStyleConfig3({
+var Checkbox3 = defineMultiStyleConfig3({
   baseStyle: baseStyle3,
   variants: variants2,
   defaultProps: {
     variant: "unstyled"
   }
 });
-var checkbox_default2 = Checkbox4;
+var checkbox_default2 = Checkbox3;
 
 // src/config/theme/components/chips.ts
 import { tagAnatomy } from "@chakra-ui/anatomy";
@@ -7848,7 +7924,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 useEffect6, useMemo as useMemo4, useRef as useRef4 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
 import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
@@ -7860,7 +7936,7 @@ var useInternalUI = () => {
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
   const instanceRef = useRef4(axios.create(config2));
-  useEffect5(() => {
+  useEffect6(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
     });