@ctlyst.id/internal-ui 1.0.2-canary.4 → 1.0.2

package/dist/internal-ui.esm.js

@@ -1,5 +1,5 @@
-import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, InputLeftAddon, InputLeftElement, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, Icon, Portal, Link, forwardRef as forwardRef$1, Button as Button$1, VisuallyHidden, Select as Select$1, theme as theme$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, extendTheme } from '@chakra-ui/react';
-export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Modal, ModalBody, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles } from '@chakra-ui/react';
+import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, InputLeftAddon, InputLeftElement, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, Icon, Portal, Link, forwardRef as forwardRef$1, Button as Button$1, VisuallyHidden, Select as Select$1, theme as theme$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, extendTheme } from '@chakra-ui/react';
+export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles } from '@chakra-ui/react';
 import React__default, { createElement, useRef, useEffect, useState, useMemo, Fragment, forwardRef, useCallback, createContext, useContext } from 'react';
 import { FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiChevronDown } from 'react-icons/fi';
 import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon } from '@chakra-ui/icons';
@@ -10,8 +10,8 @@ import ReactDatePicker from 'react-datepicker';
 import { useColorMode } from '@chakra-ui/system';
 import ReactSelect from 'react-select';
 import { AsyncPaginate } from 'react-select-async-paginate';
-import ReactSelectCreatable from 'react-select/creatable';
 import ReactSelectAsyncCreatable from 'react-select/async-creatable';
+import ReactSelectCreatable from 'react-select/creatable';
 import { useDropzone } from 'react-dropzone';
 import { mode, getColor } from '@chakra-ui/theme-tools';
 import { checkboxAnatomy, inputAnatomy, radioAnatomy, switchAnatomy, popoverAnatomy } from '@chakra-ui/anatomy';
@@ -225,9 +225,7 @@ const DataTable = ({
       textTransform: "capitalize",
       userSelect: "none",
       align: "center",
-      justifyContent: "space-between",
-      onClick: header.column.getToggleSortingHandler(),
-      cursor: header.column.getCanSort() ? 'pointer' : 'default'
+      justifyContent: "space-between"
     }, /*#__PURE__*/createElement(Text, {
       fontSize: "text.sm",
       fontWeight: 400,
@@ -236,7 +234,9 @@ const DataTable = ({
     }, flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/createElement(Box, {
       as: "span",
       pl: "2",
-      "data-test-id": `CT_Container_SortingIcon_${header.id}`
+      cursor: header.column.getCanSort() ? 'pointer' : 'default',
+      "data-test-id": `CT_Container_SortingIcon_${header.id}`,
+      onClick: header.column.getToggleSortingHandler()
     }, (_ref = header.column.getCanSort() && {
       asc: /*#__PURE__*/createElement(ChevronUpIcon, null),
       desc: /*#__PURE__*/createElement(ChevronDownIcon, null)
@@ -279,7 +279,7 @@ const Styles = () => {
   const {
     colorMode
   } = useColorMode();
-  return React.createElement(Global, {
+  return /*#__PURE__*/React__default.createElement(Global, {
     styles: `
       @charset "UTF-8";
       .react-datepicker__year-read-view--down-arrow,
@@ -1202,19 +1202,19 @@ const Field = props => {
     isRequired,
     children
   } = props;
-  return React.createElement(FormControl, {
+  return /*#__PURE__*/React__default.createElement(FormControl, {
     isInvalid: isError
-  }, label && (typeof label === 'string' ? React.createElement(FormLabel$1, {
+  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
     fontSize: "field.sm",
     requiredIndicator: undefined
-  }, isRequired && React.createElement(Box, {
+  }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
     as: "span",
     color: "red.500",
     ml: 0,
     mr: 1
-  }, "*"), label) : label), children, !isError ? helperText && React.createElement(FormHelperText, {
+  }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
     fontSize: "field.sm"
-  }, helperText) : typeof error === 'string' ? React.createElement(FormErrorMessage, {
+  }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
     textStyle: "field.sm",
     fontSize: "field.sm",
     mt: 1,
@@ -1283,11 +1283,11 @@ TextareaField.defaultProps = {
   elementRight: undefined
 };
 
-const XMSLogo = () => React.createElement(Image, {
+const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
   height: 8,
   src: useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
 });
-const VoilaLogo = () => React.createElement(Image, {
+const VoilaLogo = () => /*#__PURE__*/React__default.createElement(Image, {
   src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
   filter: useColorModeValue('none', 'invert(1)'),
   maxW: 24
@@ -1376,6 +1376,7 @@ const SwitchMode = () => {
     toggleColorMode
   } = useColorMode$1();
   return /*#__PURE__*/createElement(Box, {
+    "data-test-id": "rhYuTDCiWkFqr96upiEEh",
     mx: 5,
     onClick: toggleColorMode,
     cursor: "pointer"
@@ -1464,8 +1465,18 @@ Header.defaultProps = {
   onOpenModalRelease: undefined
 };
 
+const ModalBody = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React__default.createElement(ModalBody$1, Object.assign({
+    ref: ref,
+    background: useColorModeValue('white', 'mirage.900')
+  }, rest), children);
+});
+
 const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
-  return React.createElement(ModalCloseButton$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
     ref: ref,
     top: 4,
     right: 4,
@@ -1478,7 +1489,7 @@ const ModalFooter = /*#__PURE__*/forwardRef(({
   children,
   ...rest
 }, ref) => {
-  return React.createElement(ModalFooter$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(ModalFooter$1, Object.assign({
     ref: ref,
     background: useColorModeValue('neutral.200', 'mirage.900'),
     borderBottomRadius: "md"
@@ -1489,7 +1500,7 @@ const ModalHeader = /*#__PURE__*/forwardRef(({
   children,
   ...rest
 }, ref) => {
-  return React.createElement(ModalHeader$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
     ref: ref,
     background: useColorModeValue('neutral.200', 'mirage.900'),
     borderTopRadius: 'md',
@@ -1618,7 +1629,7 @@ const PaginationButton = /*#__PURE__*/forwardRef$1(({
   const btnColor = useColorModeValue('black.high', 'primary.300');
   const btnNotActiveBg = useColorModeValue('secondary.50', 'primary.500');
   const btnNotActiveColor = useColorModeValue('primary.500', 'white');
-  return React.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
     "data-test-id": "Pagination-Button",
     ref: ref,
     className: className,
@@ -2312,7 +2323,7 @@ function Select({
   const {
     colorMode
   } = useColorMode();
-  return React.createElement(ReactSelect, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2328,7 +2339,7 @@ function SelectAsync({
   const {
     colorMode
   } = useColorMode();
-  return React.createElement(AsyncPaginate, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2337,14 +2348,14 @@ function SelectAsync({
   }));
 }
 
-function SelectCreatable({
+function SelectAsyncCreatable({
   styles,
   ...rest
 }) {
   const {
     colorMode
   } = useColorMode();
-  return React.createElement(ReactSelectCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2353,14 +2364,14 @@ function SelectCreatable({
   }));
 }
 
-function SelectAsyncCreatable({
+function SelectCreatable({
   styles,
   ...rest
 }) {
   const {
     colorMode
   } = useColorMode();
-  return React.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2397,13 +2408,13 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   })));
 });
 
-const TabList = /*#__PURE__*/forwardRef$1((props, ref) => React.createElement(TabList$1, {
+const TabList = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabList$1, {
   borderBottom: "1px solid",
   borderColor: useColorModeValue('gray.200', 'bright-gray.800'),
   ref: ref
 }, props.children));
 
-const TabPanel = /*#__PURE__*/forwardRef$1((props, ref) => React.createElement(TabPanel$1, {
+const TabPanel = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
   px: 0,
   ref: ref
 }, props.children));
@@ -2998,11 +3009,11 @@ const Provider = ({
   const provider = useMemo(() => ({
     instance: instanceRef.current
   }), []);
-  return React.createElement(ProviderContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
     value: provider
   }, children);
 };
 Provider.displayName = 'Provider';
 
-export { BreadCrumb, DataTable, Datepicker, Field, Header, InputField, Navigation as MainMenu, ModalCloseButton, ModalFooter, ModalHeader, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
+export { BreadCrumb, DataTable, Datepicker, Field, Header, InputField, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map