@ctlyst.id/internal-ui 5.7.4 → 5.7.6

package/dist/index.mjs

@@ -4852,7 +4852,7 @@ var themeSelect = (theme5) => {
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
 function DropdownIndicator(props) {
   return /* @__PURE__ */ jsx55(componentRS.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx55(Icon7.ChevronDown, { size: 4, color: "neutral.400" }) });
 }
@@ -4866,6 +4866,12 @@ function MultiValue(props) {
 function MultiValueRemove(props) {
   return /* @__PURE__ */ jsx55(componentRS.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx55(Flex11, { align: "center", justify: "center", children: /* @__PURE__ */ jsx55(Icon7.Close, { size: 2.5, color: "inherit" }) }) });
 }
+function LoadingMessage(props) {
+  return /* @__PURE__ */ jsxs24(Flex11, { justify: "center", align: "center", flexDir: "column", gap: 4, py: 10, children: [
+    /* @__PURE__ */ jsx55(loader_default, { size: "lg", color: "primary" }),
+    /* @__PURE__ */ jsx55(Center2, { textStyle: "text.sm", fontWeight: "semibold", color: "black.high", children: "Memuat data ..." })
+  ] });
+}
 function NoOptionsMessage(props) {
   return /* @__PURE__ */ jsx55(Center2, { textStyle: "text.xs", py: "1.5", color: "black.medium", children: (props == null ? void 0 : props.options.length) === 0 ? "Opsi tidak tersedia" : "Hasil tidak ditemukan" });
 }
@@ -4888,6 +4894,7 @@ function Select2({
         MultiValue,
         MultiValueRemove,
         NoOptionsMessage,
+        LoadingMessage,
         ...virtualized ? {
           MenuList: renderMenuListVirtualized
         } : {},
@@ -4984,7 +4991,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 import { Checkbox as Checkbox2, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
 import { useColorMode as useColorMode6 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
-import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -5031,7 +5038,7 @@ var InputOption = ({
     onClick: isDisabled ? void 0 : innerProps.onClick,
     style
   };
-  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs25(Fragment8, { children: [
     /* @__PURE__ */ jsx59(
       ComponentRS.Option,
       {
@@ -5043,7 +5050,7 @@ var InputOption = ({
         getStyles,
         innerProps: props,
         ...rest,
-        children: /* @__PURE__ */ jsxs24(
+        children: /* @__PURE__ */ jsxs25(
           Flex12,
           {
             alignItems: "center",
@@ -5176,7 +5183,7 @@ Sidebar.displayName = "Sidebar";
 import { Box as Box27, Flex as Flex14, Text as Text15 } from "@chakra-ui/react";
 import { ArrowRight } from "@ctlyst.id/internal-icon";
 import { AnimatePresence, motion as motion2 } from "framer-motion";
-import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
   return /* @__PURE__ */ jsx61(
     Box27,
@@ -5188,7 +5195,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
       _hover: {
         color: "primary.500"
       },
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         Flex14,
         {
           "data-test-id": "nLkz69YipW818FioeAxVI",
@@ -5254,7 +5261,7 @@ import {
 } from "@chakra-ui/react";
 import * as Icon8 from "@ctlyst.id/internal-icon";
 import { motion as motion3 } from "framer-motion";
-import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
   return /* @__PURE__ */ jsx62(
     Box28,
@@ -5269,20 +5276,20 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
           const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
           const noChild = !item.children.length;
           const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
-          return /* @__PURE__ */ jsxs26(Fragment9, { children: [
+          return /* @__PURE__ */ jsxs27(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;
-              return /* @__PURE__ */ jsxs26(Fragment9, { children: [
+              return /* @__PURE__ */ jsxs27(Fragment9, { children: [
                 /* @__PURE__ */ jsx62(PopoverTrigger6, { children: /* @__PURE__ */ jsx62(
                   AccordionButton2,
                   {
                     "data-test-id": `CTA_button-accordion-${item.title}`,
                     p: "0",
                     h: "fit-content",
-                    children: /* @__PURE__ */ jsxs26(
+                    children: /* @__PURE__ */ jsxs27(
                       NavItem,
                       {
                         as: motion3.div,
@@ -5297,7 +5304,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                         ...itemStyles,
                         children: [
                           mappingIcon2 && /* @__PURE__ */ jsx62(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                          !isCollapse && /* @__PURE__ */ jsxs26(
+                          !isCollapse && /* @__PURE__ */ jsxs27(
                             Box28,
                             {
                               display: "flex",
@@ -5334,8 +5341,8 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                   },
                   item.id
                 ) }, item.id),
-                isOpenOptions && /* @__PURE__ */ jsx62(Portal4, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs26(PopoverContent6, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
-                  /* @__PURE__ */ jsx62(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs26(Box28, { display: "flex", alignItems: "center", children: [
+                isOpenOptions && /* @__PURE__ */ jsx62(Portal4, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs27(PopoverContent6, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
+                  /* @__PURE__ */ jsx62(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs27(Box28, { display: "flex", alignItems: "center", children: [
                     mappingIcon2.get(item.icon || ""),
                     /* @__PURE__ */ jsx62(Box28, { as: "span", ml: "2", children: item.title })
                   ] }) }),
@@ -5359,7 +5366,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                       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(
+                ] }) : isCollapse && /* @__PURE__ */ jsx62(PopoverContent6, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx62(PopoverBody4, { py: "1", px: "0", children: /* @__PURE__ */ jsxs27(
                   NavItem,
                   {
                     "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
@@ -5424,7 +5431,7 @@ import { chakra as chakra6, Flex as Flex15, forwardRef as forwardRef11, omitThem
 import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
 import { Check as Check2, Close as Close5 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo3 } from "react";
-import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
 var Switch = forwardRef11(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -5467,7 +5474,7 @@ var Switch = forwardRef11(function Switch2(props, ref) {
     };
     return iconSize[value];
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     chakra6.label,
     {
       ...getRootProps(),
@@ -5477,8 +5484,8 @@ var Switch = forwardRef11(function Switch2(props, ref) {
       __css: containerStyles,
       children: [
         /* @__PURE__ */ jsx63("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ jsxs27(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ jsxs27(Flex15, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+        /* @__PURE__ */ jsxs28(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ jsxs28(Flex15, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
             /* @__PURE__ */ jsx63(Check2, { color: "white", size: getIconSize(props.size) }),
             /* @__PURE__ */ jsx63(Close5, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
@@ -5530,7 +5537,7 @@ import {
 
 // src/components/tabs/components/tab.tsx
 import { Button as Button6, Flex as Flex16, forwardRef as forwardRef12, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx64, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
 var Tab = forwardRef12((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
@@ -5562,7 +5569,7 @@ var Tab = forwardRef12((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ jsxs28(Flex16, { alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs29(Flex16, { alignItems: "center", children: [
         (_a = props.leftAddon) == null ? void 0 : _a.call(props, { isSelected }),
         tabProps.children,
         (_b = props.rightAddon) == null ? void 0 : _b.call(props, { isSelected })
@@ -5692,7 +5699,7 @@ var useTimescape = (options = {}) => {
 };
 
 // src/components/time-input/components/index.tsx
-import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
 var timeDigitFormat = (number) => {
   if (number.toString().length === 1) {
     return `0${number}`;
@@ -5813,7 +5820,7 @@ var TimeInput2 = forwardRef13(
             _focusWithin: {
               borderColor: focusColor
             },
-            children: /* @__PURE__ */ jsxs29(
+            children: /* @__PURE__ */ jsxs30(
               InputGroup4,
               {
                 borderRadius: "sm",
@@ -5823,11 +5830,11 @@ var TimeInput2 = forwardRef13(
                 gap: 3,
                 "data-test-id": `CT_Component_TimeInput${name ? `_${name}` : ""}`,
                 children: [
-                  /* @__PURE__ */ jsxs29(Flex17, { gap: "1px", width: "100%", alignItems: "center", pl: 2, children: [
+                  /* @__PURE__ */ jsxs30(Flex17, { gap: "1px", width: "100%", alignItems: "center", pl: 2, children: [
                     /* @__PURE__ */ jsx65(InputTimeArea, { "data-test-id": "start-time", ...hoursProps }),
                     /* @__PURE__ */ jsx65("span", { children: ":" }),
                     /* @__PURE__ */ jsx65(InputTimeArea, { "data-test-id": "end-time", ...getInputProps("minutes") }),
-                    seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+                    seconds && /* @__PURE__ */ jsxs30(Fragment10, { children: [
                       /* @__PURE__ */ jsx65("span", { children: ":" }),
                       /* @__PURE__ */ jsx65(InputTimeArea, { ...getInputProps("seconds") })
                     ] }),
@@ -5889,7 +5896,7 @@ var Styles2 = () => {
 var styles_default2 = Styles2;
 
 // src/components/toast/components/toast.tsx
-import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs31 } from "react/jsx-runtime";
 var CustomCloseButton = (props) => {
   const { closeToast } = props;
   return /* @__PURE__ */ jsx67(Box30, { p: 2, mb: 1, alignItems: "center", display: "flex", "data-test-id": "", cursor: "pointer", onClick: () => closeToast(), children: /* @__PURE__ */ jsx67(Close6, { size: 4, color: "white" }) });
@@ -5924,10 +5931,10 @@ var useToast = () => {
     "success.500"
   ]);
   const content = (icon, message, link) => {
-    return /* @__PURE__ */ jsxs30(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs31(Fragment11, { children: [
       /* @__PURE__ */ jsx67(styles_default2, {}),
-      /* @__PURE__ */ jsxs30(Flex18, { justifyContent: "space-between", alignItems: "center", gap: 4, mb: 1, flex: 1, children: [
-        /* @__PURE__ */ jsxs30(Flex18, { alignItems: "center", children: [
+      /* @__PURE__ */ jsxs31(Flex18, { justifyContent: "space-between", alignItems: "center", gap: 4, mb: 1, flex: 1, children: [
+        /* @__PURE__ */ jsxs31(Flex18, { alignItems: "center", children: [
           icon && /* @__PURE__ */ jsx67(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
           /* @__PURE__ */ jsx67(chakra7.span, { noOfLines: 2, children: message })
         ] }),
@@ -6113,7 +6120,7 @@ var defaultOnHandleRejections = (fileRejection, config2, handleRejection) => {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs32 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -6294,15 +6301,15 @@ var Uploader = ({
   const color = isDisabled ? "neutral.500" : "primary.500";
   const containerHeight = !isSmall ? "160px" : "120px";
   const cursorType = filePreview ? "initial" : "pointer";
-  return /* @__PURE__ */ jsxs31(FormControl4, { isRequired, children: [
+  return /* @__PURE__ */ jsxs32(FormControl4, { isRequired, children: [
     label && typeof label === "string" ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ jsxs31(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx68(Fragment12, {}), fontSize: "text.sm", children: [
+      /* @__PURE__ */ jsxs32(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx68(Fragment12, {}), fontSize: "text.sm", children: [
         isRequired && /* @__PURE__ */ jsx68(RequiredIndicator2, { mr: 1, ml: 0 }),
         label
       ] })
     ) : label,
-    /* @__PURE__ */ jsxs31(
+    /* @__PURE__ */ jsxs32(
       Flex19,
       {
         minH: containerHeight,
@@ -6356,9 +6363,9 @@ var Uploader = ({
               ) : /* @__PURE__ */ jsx68(Text18, { noOfLines: 3, mx: 2, textAlign: "center", children: filePreview })
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsx68(Fragment12, { children: isDragActive ? /* @__PURE__ */ jsx68(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+          !filePreview && /* @__PURE__ */ jsx68(Fragment12, { children: isDragActive ? /* @__PURE__ */ jsx68(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs32(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
             size2 === "sm" && /* @__PURE__ */ jsx68(Plus, { size: 6, color }),
-            /* @__PURE__ */ jsxs31(Box31, { children: [
+            /* @__PURE__ */ jsxs32(Box31, { children: [
               !filePreview && /* @__PURE__ */ jsx68(
                 Heading2,
                 {
@@ -8125,7 +8132,7 @@ import { useMemo as useMemo5 } from "react";
 import axios from "axios";
 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";
+import { jsx as jsx69, jsxs as jsxs33 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -8144,7 +8151,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
     });
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo4(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ jsxs32(ProviderContext.Provider, { value: provider, children: [
+  return /* @__PURE__ */ jsxs33(ProviderContext.Provider, { value: provider, children: [
     /* @__PURE__ */ jsx69(ToastContainer2, {}),
     children
   ] });
@@ -8342,6 +8349,7 @@ export {
   ListItemProps,
   ListProps,
   loader_default as Loader,
+  LoadingMessage,
   Logo,
   navigation_default as MainMenu,
   Modal2 as Modal,