@ctlyst.id/internal-ui 5.6.6 → 5.6.8

package/dist/index.mjs

@@ -341,6 +341,7 @@ var badge_default = Badge;
 // src/components/breadcrumb/components/bread-crumb.tsx
 import { Box as Box4, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, IconButton, Text } from "@chakra-ui/react";
 import { ChevronLeft, ChevronsRight, Home } from "@ctlyst.id/internal-icon";
+import { useEffect, useState } from "react";
 import { Fragment, jsx as jsx14, jsxs } from "react/jsx-runtime";
 var BreadCrumb = ({
   title,
@@ -354,6 +355,13 @@ var BreadCrumb = ({
   hideTitle,
   as
 }) => {
+  const [hasPreviousPage, setHasPreviousPage] = useState(false);
+  useEffect(() => {
+    if (window === void 0) return;
+    if (window.history.length > 1) {
+      setHasPreviousPage(true);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     Box4,
     {
@@ -378,6 +386,7 @@ var BreadCrumb = ({
                   bg: "white",
                   variant: "ghost",
                   "aria-label": "Back",
+                  isDisabled: !hasPreviousPage,
                   icon: /* @__PURE__ */ jsx14(ChevronLeft, { size: 5 }),
                   onClick: backButton
                 }
@@ -678,9 +687,9 @@ 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 React3, { useMemo, useState as useState2 } from "react";
 import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
-var InputField = React2.forwardRef((props, ref) => {
+var InputField = React3.forwardRef((props, ref) => {
   const {
     value,
     type,
@@ -713,7 +722,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]);
@@ -842,9 +851,9 @@ var input_field_default = InputField;
 
 // src/components/form/components/textarea.tsx
 import { Box as Box9, Textarea as ChakraTextarea } from "@chakra-ui/react";
-import React3 from "react";
+import React4 from "react";
 import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextareaField = React3.forwardRef((props, ref) => {
+var TextareaField = React4.forwardRef((props, ref) => {
   const { value, isLoading, ...inputProps } = props;
   return /* @__PURE__ */ jsx22(field_default, { ...inputProps, children: /* @__PURE__ */ jsxs6(Box9, { position: "relative", children: [
     /* @__PURE__ */ jsx22(ChakraTextarea, { ref, value, ...inputProps }),
@@ -964,7 +973,7 @@ import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
 import { Box as Box11, Flex as Flex2, keyframes, 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 * as React6 from "react";
 import { useCallback as useCallback3 } from "react";
 
 // src/hooks/use-drag-threshold/use-drag-or-click.ts
@@ -1123,17 +1132,17 @@ var useDataTable = ({
   onRowSelectionChange,
   columnPinning
 }) => {
-  const [isFirstLoad, setIsFirstLoad] = React5.useState(true);
-  const [sorting, setSorting] = React5.useState(sortingState != null ? sortingState : []);
-  const dataColumns = React5.useMemo(() => columns, [columns]);
-  const action = React5.useRef("");
+  const [isFirstLoad, setIsFirstLoad] = React6.useState(true);
+  const [sorting, setSorting] = React6.useState(sortingState != null ? sortingState : []);
+  const dataColumns = React6.useMemo(() => columns, [columns]);
+  const action = React6.useRef("");
   const throttleRowClick = useCallback3(
     throttle((row) => {
       row.toggleSelected();
     }, 250),
     []
   );
-  const checkboxColumn = React5.useMemo(
+  const checkboxColumn = React6.useMemo(
     () => [
       {
         id: "select",
@@ -1208,22 +1217,22 @@ var useDataTable = ({
   });
   const { getSelectedRowModel, toggleAllRowsSelected } = table;
   const { flatRows } = getSelectedRowModel();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const rowData = flatRows.map((row) => row.original);
     if (onSelectedRow) {
       onSelectedRow(rowData, action.current);
     }
   }, [flatRows]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     action.current = "newData";
     table.setRowSelection(selectedRow != null ? selectedRow : {});
   }, [selectedRow]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (onSort && !isFirstLoad) {
       onSort(sorting);
     }
   }, [sorting]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setIsFirstLoad(false);
   }, []);
   return {
@@ -1235,7 +1244,7 @@ var useDataTable = ({
     selectedRow
   };
 };
-var DataTable = React5.forwardRef((props, ref) => {
+var DataTable = React6.forwardRef((props, ref) => {
   var _a, _b, _c, _d, _e;
   const {
     isLoading,
@@ -1253,8 +1262,8 @@ var DataTable = React5.forwardRef((props, ref) => {
   } = props;
   const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
   const { table, action, throttleRowClick, toggleAllRowsSelected, generateColumn, selectedRow } = useDataTable(props);
-  const refTable = React5.useRef(null);
-  React5.useImperativeHandle(ref, () => ({
+  const refTable = React6.useRef(null);
+  React6.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
   const tableResizeHandler = () => {
@@ -1274,7 +1283,7 @@ var DataTable = React5.forwardRef((props, ref) => {
     };
   };
   let lastPinnedColumn = 0;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     var _a2;
     (_a2 = refTable.current) == null ? void 0 : _a2.addEventListener("scroll", (s) => {
       var _a3, _b2, _c2, _d2;
@@ -1507,9 +1516,9 @@ var DataTable = React5.forwardRef((props, ref) => {
 var data_table_default = DataTable;
 
 // src/components/data-table/hook/use-select-table.ts
-import React6 from "react";
+import React7 from "react";
 var useSelectTable = (intialRowSelection) => {
-  const [rowSelection, onRowSelectionChange] = React6.useState(intialRowSelection != null ? intialRowSelection : {});
+  const [rowSelection, onRowSelectionChange] = React7.useState(intialRowSelection != null ? intialRowSelection : {});
   return {
     rowSelection,
     onRowSelectionChange
@@ -2897,10 +2906,10 @@ var styles_default = Styles;
 
 // src/components/datepicker/components/time-input.tsx
 import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text4 } from "@chakra-ui/react";
-import React7 from "react";
+import React8 from "react";
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var TimeInput = ({ value, onChange, label, rightAddon }) => {
-  const [time, setTime] = React7.useState(value || "00:00");
+  const [time, setTime] = React8.useState(value || "00:00");
   const handleChange = (e) => {
     var _a, _b;
     setTime(((_a = e.target) == null ? void 0 : _a.value) || "00:00");
@@ -3060,10 +3069,10 @@ var datepicker_default = Datepicker;
 // src/components/datepicker/components/datepicker-month/datepicker-month.tsx
 import { Box as Box12, Input as Input2 } from "@chakra-ui/react";
 import { css as css2 } from "@emotion/react";
-import React8 from "react";
+import React9 from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var DatePickerMonth = ({ onChange, min, max, ...props }) => {
-  const [date, setDate] = React8.useState(null);
+  const [date, setDate] = React9.useState(null);
   return /* @__PURE__ */ jsx28(
     Box12,
     {
@@ -3119,7 +3128,7 @@ var datepicker_month_default = DatePickerMonth;
 // src/components/datepicker/components/datepicker-month/multi-datepicker-month.tsx
 import { Box as Box13 } from "@chakra-ui/react";
 import styled from "@emotion/styled";
-import React9 from "react";
+import React10 from "react";
 import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 var MultiDateWrapper = styled(Box13)`
   display: flex;
@@ -3136,7 +3145,7 @@ var MultiDatePickerMonth = ({
   min = "2020-01-01",
   max = "2020-12-31"
 }) => {
-  const [date, setDate] = React9.useState([null, null]);
+  const [date, setDate] = React10.useState([null, null]);
   return /* @__PURE__ */ jsxs11(MultiDateWrapper, { isError, children: [
     /* @__PURE__ */ jsx29(
       datepicker_month_default,
@@ -4237,7 +4246,7 @@ var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
 import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
-import * as React10 from "react";
+import * as React11 from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var PaginationFilter = ({
@@ -4247,7 +4256,7 @@ var PaginationFilter = ({
   onChange,
   ...rest
 }) => {
-  const [value, setValue] = React10.useState(limit);
+  const [value, setValue] = React11.useState(limit);
   return /* @__PURE__ */ jsxs22(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
     /* @__PURE__ */ jsx49(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
     /* @__PURE__ */ jsx49(
@@ -4299,12 +4308,12 @@ import {
 
 // src/components/popover/PopoverContent.tsx
 import { forwardRef as forwardRef10, PopoverArrow as PopoverArrow3, PopoverContent as ChakraPopoverContent } from "@chakra-ui/react";
-import React11 from "react";
+import React12 from "react";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var PopoverContent5 = forwardRef10((props, ref) => {
   const { children, ...rest } = props;
-  const hasArrow = React11.Children.toArray(children).some((child) => {
-    return React11.isValidElement(child) && child.type === PopoverArrow3;
+  const hasArrow = React12.Children.toArray(children).some((child) => {
+    return React12.isValidElement(child) && child.type === PopoverArrow3;
   });
   return /* @__PURE__ */ jsx50(ChakraPopoverContent, { ...!hasArrow ? { mt: -1 } : {}, ...rest, ref, children });
 });
@@ -5249,6 +5258,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
           const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
           return /* @__PURE__ */ jsxs26(Fragment9, { children: [
             /* @__PURE__ */ jsx62(Popover6, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
+              var _a, _b;
               const activeOption = isOpen ? "primary.50" : "white";
               const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
               const activeParent = isActive ? backgroundColor : activeOption;
@@ -5270,6 +5280,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                         "data-test-id": `CTA_nav-item-${item.title}`,
                         onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink, true),
                         position: "relative",
+                        ...(_a = item.itemProps) != null ? _a : {},
                         ...itemStyles,
                         children: [
                           mappingIcon2 && /* @__PURE__ */ jsx62(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
@@ -5315,22 +5326,26 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                     mappingIcon2.get(item.icon || ""),
                     /* @__PURE__ */ jsx62(Box28, { as: "span", ml: "2", children: item.title })
                   ] }) }),
-                  !!item.children.length && /* @__PURE__ */ jsx62(PopoverBody4, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx62(
-                    NavItem,
-                    {
-                      "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
-                      isChild: true,
-                      isActive: active === submenu.navLink,
-                      onClick: () => {
-                        setActive(submenu.navLink);
-                        onClose();
+                  !!item.children.length && /* @__PURE__ */ jsx62(PopoverBody4, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => {
+                    var _a2;
+                    return /* @__PURE__ */ jsx62(
+                      NavItem,
+                      {
+                        "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
+                        isChild: true,
+                        isActive: active === submenu.navLink,
+                        onClick: () => {
+                          setActive(submenu.navLink);
+                          onClose();
+                        },
+                        rounded: "none",
+                        ...(_a2 = submenu.itemProps) != null ? _a2 : {},
+                        ...itemStyles,
+                        children: submenu.title
                       },
-                      rounded: "none",
-                      ...itemStyles,
-                      children: submenu.title
-                    },
-                    submenu.id
-                  )) })
+                      submenu.id
+                    );
+                  }) })
                 ] }) : isCollapse && /* @__PURE__ */ jsx62(PopoverContent6, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx62(PopoverBody4, { py: "1", px: "0", children: /* @__PURE__ */ jsxs26(
                   NavItem,
                   {
@@ -5342,6 +5357,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                       onClose();
                     },
                     rounded: "none",
+                    ...(_b = item.itemProps) != null ? _b : {},
                     ...itemStyles,
                     children: [
                       mappingIcon2 && /* @__PURE__ */ jsx62(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
@@ -5359,19 +5375,23 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                 transition: {
                   enter: { duration: 0.5 }
                 },
-                children: /* @__PURE__ */ jsx62(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx62(
-                  NavItem,
-                  {
-                    mt: "1",
-                    "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
-                    isActive: active === submenu.navLink,
-                    isChild: true,
-                    ...itemStyles,
-                    onClick: () => setActive(submenu.navLink),
-                    children: submenu.title
-                  },
-                  submenu.id
-                )) })
+                children: /* @__PURE__ */ jsx62(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => {
+                  var _a;
+                  return /* @__PURE__ */ jsx62(
+                    NavItem,
+                    {
+                      mt: "1",
+                      "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
+                      isActive: active === submenu.navLink,
+                      isChild: true,
+                      ...(_a = submenu.itemProps) != null ? _a : {},
+                      ...itemStyles,
+                      onClick: () => setActive(submenu.navLink),
+                      children: submenu.title
+                    },
+                    submenu.id
+                  );
+                }) })
               }
             )
           ] });
@@ -5580,36 +5600,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 forwardRef13, 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 useRef4,
-  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 = useRef4(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);
@@ -5617,7 +5637,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;
@@ -5730,7 +5750,7 @@ var TimeInput2 = forwardRef13(
       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;
@@ -5993,7 +6013,7 @@ import {
   UnorderedList as UnorderedList2
 } from "@chakra-ui/react";
 import { Close as X, Plus } from "@ctlyst.id/internal-icon";
-import { useCallback as useCallback4, 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
@@ -6112,10 +6132,10 @@ var Uploader = ({
   customErrorRejection,
   ...props
 }) => {
-  const [filePreview, setFilePreview] = useState5();
-  const [isError, setIsError] = useState5(propIsError);
-  const [errorText, setErrorText] = useState5(propErrorText);
-  useEffect4(() => {
+  const [filePreview, setFilePreview] = useState6();
+  const [isError, setIsError] = useState6(propIsError);
+  const [errorText, setErrorText] = useState6(propErrorText);
+  useEffect5(() => {
     setIsError(propIsError);
     setErrorText(propErrorText);
   }, [propIsError, propErrorText]);
@@ -6233,7 +6253,7 @@ var Uploader = ({
     onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
     acceptedFiles.pop();
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (value) {
       if (typeof value === "string") {
         setFilePreview(value);
@@ -8086,7 +8106,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 useRef5 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
 import { jsx as jsx69, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
@@ -8098,7 +8118,7 @@ var useInternalUI = () => {
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
   const instanceRef = useRef5(axios.create(config2));
-  useEffect5(() => {
+  useEffect6(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
     });