@ctlyst.id/internal-ui 5.6.5 → 5.6.7

package/dist/index.mjs

@@ -341,9 +341,27 @@ 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 = (props) => {
-  const { title, children, parents, className, disableHome, spacing: spacing2 = 2, backButton, homeButton, hideTitle } = props;
+var BreadCrumb = ({
+  title,
+  children,
+  parents,
+  className,
+  disableHome,
+  spacing: spacing2 = 2,
+  backButton,
+  homeButton,
+  hideTitle,
+  as
+}) => {
+  const [hasPreviousPage, setHasPreviousPage] = useState(false);
+  useEffect(() => {
+    if (window === void 0) return;
+    if (window.history.length > 1) {
+      setHasPreviousPage(true);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     Box4,
     {
@@ -367,7 +385,8 @@ var BreadCrumb = (props) => {
                   minW: "9",
                   bg: "white",
                   variant: "ghost",
-                  "aria-label": "Edit",
+                  "aria-label": "Back",
+                  isDisabled: !hasPreviousPage,
                   icon: /* @__PURE__ */ jsx14(ChevronLeft, { size: 5 }),
                   onClick: backButton
                 }
@@ -385,33 +404,19 @@ var BreadCrumb = (props) => {
               pr: "4",
               spacing: spacing2,
               children: [
-                /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx14(BreadcrumbItem, { children: disableHome ? /* @__PURE__ */ jsx14(BreadcrumbLink, { cursor: "default", children: /* @__PURE__ */ jsx14(Box4, { boxSize: "3.5", children: /* @__PURE__ */ jsx14(Home, { size: 3.5, color: "neutral.600" }) }) }) : /* @__PURE__ */ jsx14(BreadcrumbLink, { "data-test-id": "", as, href: "/", onClick: homeButton, children: /* @__PURE__ */ jsx14(Box4, { boxSize: "3.5", children: /* @__PURE__ */ jsx14(Home, { size: 3.5, color: "primary.500" }) }) }) }),
+                parents == null ? void 0 : parents.map((parent) => /* @__PURE__ */ jsx14(BreadcrumbItem, { children: parent.disable || !parent.link ? /* @__PURE__ */ jsx14(BreadcrumbLink, { cursor: "default", children: /* @__PURE__ */ jsx14(Text, { color: "neutral.600", textStyle: "text.sm", children: parent.name }) }) : /* @__PURE__ */ jsx14(
                   BreadcrumbLink,
                   {
                     "data-test-id": "",
-                    alignItems: "center",
-                    href: homeButton || disableHome ? void 0 : "/",
-                    style: { ...disableHome && { cursor: "default" } },
-                    onClick: homeButton,
-                    children: /* @__PURE__ */ jsx14(Box4, { boxSize: "3.5", children: /* @__PURE__ */ jsx14(Home, { size: 3.5, color: "primary.500" }) })
-                  }
-                ) }),
-                parents == null ? void 0 : parents.map((val) => /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(
-                  BreadcrumbLink,
-                  {
-                    "data-test-id": "",
-                    href: !val.disable && val.link ? val.link : void 0,
-                    onClick: val.onClick,
-                    style: {
-                      ...val.disable && {
-                        cursor: "default"
-                      }
-                    },
+                    as,
+                    href: parent.link,
+                    onClick: parent.onClick,
                     _hover: { textDecoration: "none" },
-                    children: /* @__PURE__ */ jsx14(Text, { color: val.disable ? "neutral.600" : "primary.500", textStyle: "text.sm", children: val.name })
+                    children: /* @__PURE__ */ jsx14(Text, { color: "primary.500", textStyle: "text.sm", children: parent.name })
                   }
-                ) }, val.name)),
-                /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(BreadcrumbLink, { _hover: { textDecor: "none", cursor: "default" }, children: /* @__PURE__ */ jsx14(Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
+                ) }, parent.name)),
+                /* @__PURE__ */ jsx14(BreadcrumbItem, { isCurrentPage: true, children: /* @__PURE__ */ jsx14(BreadcrumbLink, { cursor: "default", children: /* @__PURE__ */ jsx14(Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
               ]
             }
           )
@@ -425,7 +430,7 @@ BreadCrumb.defaultProps = {
   children: void 0,
   parents: void 0,
   className: void 0,
-  disableHome: void 0,
+  disableHome: false,
   spacing: 2,
   backButton: void 0,
   hideTitle: false
@@ -682,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,
@@ -717,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]);
@@ -846,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 }),
@@ -968,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
@@ -1127,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",
@@ -1212,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 {
@@ -1239,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,
@@ -1257,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 = () => {
@@ -1278,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;
@@ -1511,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
@@ -2901,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");
@@ -3064,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,
     {
@@ -3123,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;
@@ -3140,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,
@@ -4241,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 = ({
@@ -4251,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(
@@ -4303,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 });
 });
@@ -5584,36 +5589,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);
@@ -5621,7 +5626,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;
@@ -5734,7 +5739,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;
@@ -5997,7 +6002,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
@@ -6116,10 +6121,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]);
@@ -6237,7 +6242,7 @@ var Uploader = ({
     onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
     acceptedFiles.pop();
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (value) {
       if (typeof value === "string") {
         setFilePreview(value);
@@ -8090,7 +8095,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({
@@ -8102,7 +8107,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);
     });