@ctlyst.id/internal-ui 2.1.3 → 2.1.5

package/dist/internal-ui.esm.js

@@ -2,7 +2,7 @@ import { cx, dataAttr } from '@chakra-ui/shared-utils';
 import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
 import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
 import { createContext } from '@chakra-ui/react-context';
-import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
+import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, ChevronDown, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
 import { cx as cx$1 } from '@chakra-ui/utils';
 import { forwardRef as forwardRef$1, useStyleConfig, Box, Button as Button$2, Badge as Badge$2, useToken, theme as theme$1, Text, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, useColorModeValue, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, VisuallyHidden, Select as Select$1, Radio as Radio$1, RadioGroup, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, TabList as TabList$1, TabPanel as TabPanel$1, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
 export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Box, ButtonGroup, Center, ChakraProvider, Table as ChakraTable, CloseButton, Code, Collapse, ColorModeScript, Container, Divider, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, Icon, IconButton, Image, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Link, List, ListIcon, ListItem, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RequiredIndicator, ScaleFade, SimpleGrid, Skeleton, Spacer, Stack, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, Tbody, Td, Text, Th, Thead, Tooltip, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, forwardRef, useBoolean, useColorMode, useColorModeValue, useDisclosure, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useToken } from '@chakra-ui/react';
@@ -765,7 +765,7 @@ const getWrapperStyle = props => {
   const style = {
     border: '1px solid',
     borderColor: outlineColor,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     transition: 'all 0.15s',
     boxShadow: 'none',
     _focusWithin: {
@@ -1863,7 +1863,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     __css: wrapperStyle
   }, /*#__PURE__*/React__default.createElement(InputGroup, {
     size: size,
-    borderRadius: "md",
+    borderRadius: "sm",
     backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
     cursor: isDisabled ? 'not-allowed' : 'default'
   }, addOnLeft, /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
@@ -2218,7 +2218,7 @@ const ModalFooter = /*#__PURE__*/forwardRef$2(({
   return /*#__PURE__*/React__default.createElement(ModalFooter$1, Object.assign({
     ref: ref,
     background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderBottomRadius: "md"
+    borderBottomRadius: "sm"
   }, rest), children);
 });
 
@@ -2229,7 +2229,7 @@ const ModalHeader = /*#__PURE__*/forwardRef$2(({
   return /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
     ref: ref,
     background: useColorModeValue('neutral.200', 'mirage.900'),
-    borderTopRadius: "md",
+    borderTopRadius: "sm",
     textStyle: "text-lg"
   }, rest), children);
 });
@@ -2373,6 +2373,101 @@ Navigation.defaultProps = {
   host: undefined
 };
 
+const NavigationBar = ({
+  navigations,
+  isFetched,
+  pathname,
+  asPath,
+  mappingIcon,
+  ...props
+}) => {
+  const urlMenu = subMenu => {
+    if (window.location.hostname === 'localhost') {
+      return subMenu.navLink;
+    }
+    return subMenu.navHost + subMenu.navLink;
+  };
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    hidden: isFetched && navigations === undefined,
+    backgroundRepeat: "repeat-x",
+    "data-test-id": "CT_component_navigation_cms"
+  }, props), /*#__PURE__*/React__default.createElement(Flex, {
+    bg: "white",
+    w: "full",
+    rounded: 'md',
+    flexWrap: "wrap",
+    alignItems: "center",
+    shadow: "raised",
+    gap: 1,
+    px: 4,
+    py: 2
+  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(item => {
+    var _childMenu$;
+    const childMenu = item.children.filter(subMenu => asPath === null || asPath === void 0 ? void 0 : asPath.includes(subMenu.navLink));
+    const isActive = pathname === null || pathname === void 0 ? void 0 : pathname.startsWith((_childMenu$ = childMenu[0]) === null || _childMenu$ === void 0 ? void 0 : _childMenu$.navLink);
+    const activeBg = isActive ? 'primary.500' : undefined;
+    return /*#__PURE__*/React__default.createElement(Popover$1, {
+      isLazy: true,
+      key: item.id,
+      trigger: "hover",
+      placement: "bottom-start",
+      openDelay: 100,
+      closeDelay: 100
+    }, ({
+      isOpen,
+      onClose
+    }) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PopoverTrigger, null, /*#__PURE__*/React__default.createElement(Button$2, {
+      h: 7.5,
+      p: 2,
+      size: "sm",
+      variant: "ghost",
+      "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? '-active' : ''}`,
+      _hover: {
+        backgroundColor: !isActive ? 'neutral.400' : activeBg
+      },
+      backgroundColor: isOpen && !isActive ? 'neutral.400' : activeBg,
+      color: isActive ? 'primary.50' : 'black.high',
+      leftIcon: mappingIcon.get(item.title),
+      rightIcon: /*#__PURE__*/React__default.createElement(ChevronDown, {
+        size: 4,
+        color: "inherit"
+      })
+    }, item.title)), item.children && /*#__PURE__*/React__default.createElement(PopoverContent, {
+      border: "none",
+      shadow: "raised",
+      py: 1,
+      width: 240
+    }, item.children.map(subMenu => /*#__PURE__*/React__default.createElement(Link, {
+      key: subMenu.id,
+      href: urlMenu(subMenu),
+      display: "flex",
+      alignItems: "center",
+      transition: "padding 0.35s ease 0s",
+      _hover: {
+        pl: 6
+      },
+      _first: {
+        borderTopRadius: 'md'
+      },
+      _last: {
+        borderBottomRadius: 'md'
+      },
+      py: 3,
+      px: 4,
+      color: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.800' : 'black.high',
+      onClick: onClose,
+      background: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.50' : 'transparent',
+      "data-test-id": `CT_component_navigation_link-${item.id}`
+    }, mappingIcon.get(item.title), /*#__PURE__*/React__default.createElement(Text, {
+      textStyle: "text-sm",
+      ml: 3
+    }, subMenu.title))))));
+  })));
+};
+NavigationBar.defaultProps = {
+  navigations: undefined
+};
+
 const PaginationButton = /*#__PURE__*/forwardRef$1(({
   className,
   style,
@@ -3311,7 +3406,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     bg: $bg.reference,
     px: '4',
     py: '2',
-    borderRadius: 'md'
+    borderRadius: 'sm'
   },
   title: {
     fontWeight: 'regular',
@@ -3475,7 +3570,7 @@ const Button$1 = /*#__PURE__*/defineStyleConfig({
     fontWeight: 'normal',
     px: 4,
     py: 2.5,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     _disabled: {
       opacity: 1,
       bg: 'neutral.300',
@@ -3738,7 +3833,7 @@ const CardStyle = /*#__PURE__*/defineStyleConfig({
   baseStyle: props => {
     return {
       shadow: props.withShadow ? 'raised' : 'none',
-      borderRadius: props.isRounded ? 'lg' : 'none'
+      borderRadius: props.isRounded ? 'sm' : 'none'
     };
   }
 });
@@ -3953,17 +4048,17 @@ const size = {
   lg: /*#__PURE__*/defineStyle$1({
     fontSize: 'text.lg',
     h: 12,
-    borderRadius: 'md'
+    borderRadius: 'sm'
   }),
   md: /*#__PURE__*/defineStyle$1({
     fontSize: 'text.md',
     h: 10,
-    borderRadius: 'md'
+    borderRadius: 'sm'
   }),
   sm: /*#__PURE__*/defineStyle$1({
     fontSize: 'text.sm',
     h: 9,
-    borderRadius: 'md'
+    borderRadius: 'sm'
   })
 };
 const sizes = {
@@ -4024,6 +4119,7 @@ const Input = /*#__PURE__*/defineMultiStyleConfig$2({
   }
 });
 
+/* eslint-disable prefer-destructuring */
 const rotate = /*#__PURE__*/keyframes({
   '0%': {
     transform: 'rotate(0deg)'
@@ -4033,10 +4129,23 @@ const rotate = /*#__PURE__*/keyframes({
   }
 });
 const getLoaderColor = color => {
-  if (color === 'primary') return '--chakra-colors-primary-600';
-  if (color === 'danger') return '--chakra-colors-danger-500';
-  if (color === 'warning') return '--chakra-colors-warning-700';
-  return '--chakra-colors-white-high';
+  const colorValue = color.split('.');
+  let backgroundColor;
+  switch (colorValue.length) {
+    case 1:
+      backgroundColor = colorValue[0];
+      break;
+    case 2:
+      backgroundColor = `var(--chakra-colors-${colorValue[0]}-${colorValue[1]})`;
+      break;
+    default:
+      backgroundColor = 'var(--chakra-colors-white-high)';
+      break;
+  }
+  if (color === 'primary') return 'var(--chakra-colors-primary-600)';
+  if (color === 'danger') return 'var(--chakra-colors-danger-500)';
+  if (color === 'warning') return 'var(--chakra-colors-warning-700)';
+  return backgroundColor;
 };
 const LoaderStyle = /*#__PURE__*/defineStyleConfig({
   baseStyle: props => {
@@ -4047,7 +4156,7 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
       justifyContent: 'center',
       alignItems: 'center',
       animation: `${rotate} 1s linear infinite`,
-      background: `conic-gradient(from 180deg at 50% 50%, var(${colors}) 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',
@@ -4535,7 +4644,7 @@ const outline$1 = /*#__PURE__*/defineStyle(props => {
     borderColor,
     fontSize: 'text.sm',
     padding: 2,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     borderWidth: '1px',
     outline: 'none',
     _disabled: {
@@ -4706,5 +4815,5 @@ function useFetcher() {
   };
 }
 
-export { Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, DataTable, DatePickerMonth, Datepicker, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TabList, TabPanel, TextareaField, Uploader, getTheme, theme, useAlertStyles, useFetcher, useInternalUI };
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, DataTable, DatePickerMonth, Datepicker, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, NavigationBar, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TabList, TabPanel, TextareaField, Uploader, getTheme, theme, useAlertStyles, useFetcher, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map