@ctlyst.id/internal-ui 1.0.4-canary.2 → 1.0.4-canary.4

package/dist/internal-ui.esm.js

@@ -1,7 +1,7 @@
-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, theme as theme$1, 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, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, extendTheme } 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, theme as theme$1, 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, createIcon, Icon, Portal, Link, forwardRef as forwardRef$1, Button as Button$1, VisuallyHidden, Select as Select$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 { FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiShoppingBag, FiShoppingCart, FiRepeat, FiBox, FiLayers, FiDollarSign, FiUsers, FiRotateCcw, FiSettings, FiLayout, FiGift, FiChevronDown } from 'react-icons/fi';
 import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon } from '@chakra-ui/icons';
 import { css, Global } from '@emotion/react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
@@ -1202,6 +1202,8 @@ const DatePickerMonth = ({
   onChange,
   min,
   max,
+  widthEmpty,
+  widthFilled,
   ...props
 }) => {
   const [date, setDate] = React__default.useState(null);
@@ -1214,14 +1216,11 @@ const DatePickerMonth = ({
           display: none;
           -webkit-appearance: none;
         }
-        input[value=''] {
-          width: 58px;
-        }
       `
   }, /*#__PURE__*/React__default.createElement(Input$1, {
     "data-test-id": props['data-test-id'],
     type: "date",
-    width: date ? '51px' : '58px',
+    width: date ? widthFilled : widthEmpty,
     onChange: e => {
       onChange(e.target.value);
       setDate(e.target.value);
@@ -1246,7 +1245,9 @@ const DatePickerMonth = ({
   }));
 };
 DatePickerMonth.defaultProps = {
-  'data-test-id': ''
+  'data-test-id': '',
+  widthEmpty: '58px',
+  widthFilled: '51px'
 };
 
 const transparent = 'transparent';
@@ -1656,7 +1657,9 @@ const MultiDatePickerMonth = ({
   onChange,
   isError = false,
   min = '2020-01-01',
-  max = '2020-12-31'
+  max = '2020-12-31',
+  widthEmpty,
+  widthFilled
 }) => {
   const [date, setDate] = React__default.useState([null, null]);
   return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
@@ -1668,7 +1671,9 @@ const MultiDatePickerMonth = ({
       setDate([val, date[1]]);
     },
     min: min,
-    max: max
+    max: max,
+    widthEmpty: widthEmpty,
+    widthFilled: widthFilled
   }), /*#__PURE__*/React__default.createElement(Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
     "data-test-id": "CT_DatePickerMonth_EndDate",
     onChange: val => {
@@ -1676,13 +1681,17 @@ const MultiDatePickerMonth = ({
       setDate([date[0], val]);
     },
     min: min,
-    max: max
+    max: max,
+    widthEmpty: widthEmpty,
+    widthFilled: widthFilled
   }));
 };
 MultiDatePickerMonth.defaultProps = {
   min: '2020-01-01',
   max: '2020-12-31',
-  isError: false
+  isError: false,
+  widthEmpty: '58px',
+  widthFilled: '51px'
 };
 
 /* eslint-disable no-nested-ternary */
@@ -2001,6 +2010,28 @@ const ModalHeader = /*#__PURE__*/forwardRef(({
   }, rest), children);
 });
 
+const CustomerIcon = /*#__PURE__*/createIcon({
+  displayName: 'CustomerIcon',
+  viewBox: '0 0 16 16',
+  path: [/*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "inherit",
+    d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",
+    clipRule: "inherit"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "inherit",
+    d: "M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",
+    clipRule: "inherit"
+  })]
+});
+
+/* eslint-disable import/prefer-default-export */
+const mappingIcon = /*#__PURE__*/new Map([['Order', FiShoppingBag], ['Fulfillment', FiShoppingCart], ['Transfer Stock', FiRepeat], ['Stock', FiBox], ['Product Database', FiLayers], ['Purchasing', FiDollarSign], ['Reseller', FiUsers], ['Retur', FiRotateCcw], ['Other', FiSettings], ['Content', FiLayout], ['Voucher', FiGift], ['Customer', CustomerIcon]]);
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const Navigation = ({
   navigations,
@@ -2040,7 +2071,7 @@ const Navigation = ({
       color: isActive ? 'white' : 'inherit',
       p: 2
     }, /*#__PURE__*/createElement(Icon, {
-      as: navigation.icon,
+      as: mappingIcon.get(navigation.title),
       mr: 2
     }), /*#__PURE__*/createElement(Text, {
       whiteSpace: "nowrap",
@@ -2060,8 +2091,7 @@ const Navigation = ({
     }, navigation.children.map(({
       title,
       navHost,
-      navLink,
-      icon
+      navLink
     }) => {
       const link = navHost ? `${navHost}${navLink}` : navLink;
       const isLocalLink = host === navHost;
@@ -2098,7 +2128,7 @@ const Navigation = ({
         px: 6,
         py: 4
       }, /*#__PURE__*/createElement(Icon, {
-        as: icon,
+        as: mappingIcon.get(navigation.title),
         mr: 3
       }), /*#__PURE__*/createElement(Text, {
         fontSize: "text.sm"