@ctlyst.id/internal-ui 2.0.2 → 2.0.4

package/dist/internal-ui.esm.js

@@ -1,5 +1,5 @@
-import { Badge as Badge$2, useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, forwardRef, useStyleConfig, Button as Button$2, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, defineStyle, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Container, Grid, Wrap, 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, useMultiStyleConfig, omitThemingProps, useCheckbox, chakra, 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, 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 { Badge as Badge$2, useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, forwardRef, useStyleConfig, Button as Button$2, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Container, Grid, Wrap, 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, useMultiStyleConfig, omitThemingProps, useCheckbox, chakra, 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, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, 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, forwardRef as forwardRef$1, useRef, useEffect, useState, useMemo, Fragment, useCallback, createContext, useContext } from 'react';
 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';
@@ -223,7 +223,6 @@ CheckboxComponent.defaultProps = {
   errorText: ''
 };
 
-/* eslint-disable no-nested-ternary */
 const Field = props => {
   const {
     label,
@@ -233,7 +232,8 @@ const Field = props => {
     rightHelperText,
     isRequired,
     children,
-    isSuccess
+    isSuccess,
+    boxProps = {}
   } = props;
   const getHelperColor = () => {
     if (isError) return 'danger.500';
@@ -246,9 +246,9 @@ const Field = props => {
   };
   const helperColor = getHelperColor();
   const justifyHelper = getJustifyContentHelper();
-  return /*#__PURE__*/React__default.createElement(FormControl, {
+  return /*#__PURE__*/React__default.createElement(FormControl, Object.assign({
     isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
+  }, boxProps), label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
     mb: 1,
     fontSize: "text.sm",
     requiredIndicator: undefined
@@ -261,19 +261,19 @@ const Field = props => {
     display: "flex",
     width: "full",
     justifyContent: justifyHelper
-  }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
+  }, !isError ? leftHelperText && (typeof leftHelperText === 'string' ? /*#__PURE__*/React__default.createElement(FormHelperText, {
     fontSize: "text.xs",
     color: helperColor,
     mt: 1
-  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
+  }, leftHelperText) : leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(FormErrorMessage, {
     fontSize: "text.xs",
     color: "danger.500",
     mt: 1
-  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(FormHelperText, {
+  }, errorMessage) : errorMessage, rightHelperText && (typeof rightHelperText === 'string' ? /*#__PURE__*/React__default.createElement(FormHelperText, {
     fontSize: "text.xs",
     color: helperColor,
     mt: 1
-  }, rightHelperText)));
+  }, rightHelperText) : rightHelperText)));
 };
 Field.defaultProps = {
   label: '',
@@ -282,7 +282,8 @@ Field.defaultProps = {
   errorMessage: undefined,
   leftHelperText: undefined,
   rightHelperText: undefined,
-  isRequired: false
+  isRequired: false,
+  boxProps: {}
 };
 
 function CheckboxGroupComponent(props) {
@@ -474,6 +475,41 @@ DataTable.defaultProps = {
   sortingState: []
 };
 
+const getProperties = props => {
+  const {
+    isError,
+    isDisabled,
+    isSuccess
+  } = props;
+  let outlineColor = 'neutral.400';
+  let focusColor = 'primary.500';
+  if (isError || isDisabled || isSuccess) {
+    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
+    focusColor = outlineColor;
+  }
+  return {
+    outlineColor,
+    focusColor
+  };
+};
+const getWrapperStyle = props => {
+  const {
+    outlineColor,
+    focusColor
+  } = getProperties(props);
+  const style = {
+    border: '1px solid',
+    borderColor: outlineColor,
+    borderRadius: 'md',
+    transition: 'all 0.15s',
+    boxShadow: 'none',
+    _focusWithin: {
+      borderColor: focusColor
+    }
+  };
+  return defineStyle(style);
+};
+
 const Styles = () => {
   const {
     colorMode
@@ -1345,6 +1381,7 @@ const Datepicker = ({
   var _props$dateFormat;
   const selected = value ? new Date(value) : undefined;
   const dateFormat = ((_props$dateFormat = props.dateFormat) !== null && _props$dateFormat !== void 0 ? _props$dateFormat : withTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+  const wrapperStyle = getWrapperStyle({});
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -1357,9 +1394,9 @@ const Datepicker = ({
     id: id,
     name: name,
     selected: selected,
-    customInput: /*#__PURE__*/React__default.createElement(Input$1, {
+    customInput: /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
       autoComplete: "off"
-    }),
+    }, wrapperStyle)),
     dateFormat: dateFormat,
     showPopperArrow: false,
     calendarClassName: classnames({
@@ -1908,45 +1945,10 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-const getProperties = props => {
-  const {
-    isError,
-    isDisabled,
-    isSuccess
-  } = props;
-  let outlineColor = 'neutral.400';
-  let focusColor = 'primary.500';
-  if (isError || isDisabled || isSuccess) {
-    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
-    focusColor = outlineColor;
-  }
-  return {
-    outlineColor,
-    focusColor
-  };
-};
-const getWrapperStyle = props => {
-  const {
-    outlineColor,
-    focusColor
-  } = getProperties(props);
-  const style = {
-    border: '1px solid',
-    borderColor: outlineColor,
-    borderRadius: 'md',
-    transition: 'all 0.15s',
-    boxShadow: 'none',
-    _focusWithin: {
-      borderColor: focusColor
-    }
-  };
-  return defineStyle(style);
-};
-
 const InputAddonLeft = ({
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(InputLeftAddon, {
     borderLeftRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
@@ -1956,7 +1958,7 @@ const InputAddonLeft = ({
 const InputAddonRight = ({
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(InputRightAddon, {
     borderRightRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
@@ -1970,8 +1972,6 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     type,
     addOnLeft,
     addOnRight,
-    elementLeft,
-    elementRight,
     size,
     isRequired,
     label,
@@ -2015,7 +2015,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     borderRadius: "md",
     backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
     cursor: isDisabled ? 'not-allowed' : 'default'
-  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputAddonLeft, null, addOnLeft), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
+  }, addOnLeft, /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
     ref: ref,
     type: inputType,
     value: value,
@@ -2062,13 +2062,11 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     color: iconColor
   })), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
     size: "sm"
-  })), "(", addOnRight && /*#__PURE__*/React__default.createElement(InputAddonRight, null, addOnRight))));
+  })), addOnRight)));
 });
 InputField.defaultProps = {
   addOnLeft: undefined,
   addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined,
   withClear: undefined,
   isLoading: undefined,
   onClear: undefined
@@ -4296,5 +4294,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { Badge, Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useInternalUI };
+export { Badge, Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map