@xqmsg/ui-core 0.16.1 → 0.16.2

package/dist/ui-core.esm.js

@@ -1,8 +1,8 @@
 import React__default, { useMemo, useCallback, useRef, useEffect, useState, memo, forwardRef, createElement } from 'react';
-import { Button as Button$2, Image, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Icon as Icon$1, Spinner, Checkbox, Input as Input$2, InputGroup, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
+import { Button as Button$2, Image, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Icon as Icon$1, Spinner, Checkbox, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Tooltip, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { debounce, truncate } from 'lodash-es';
-import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
+import { QuestionOutlineIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
 import { HiOutlineRefresh } from 'react-icons/hi';
 import { ChakraProvider } from '@chakra-ui/provider';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
@@ -454,7 +454,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["type", "isRequired"];
+var _excluded = ["type", "isRequired", "rightElement", "leftElement"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -463,13 +463,16 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
   var _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'text' : _ref2$type,
       isRequired = _ref2.isRequired,
+      rightElement = _ref2.rightElement,
+      leftElement = _ref2.leftElement,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/React__default.createElement(Input$2, Object.assign({
-    ref: _ref,
+  return /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && leftElement, /*#__PURE__*/React__default.createElement(Input$2, Object.assign({
     type: type,
     isRequired: isRequired
-  }, props));
+  }, props, {
+    ref: _ref
+  })), rightElement && rightElement);
 });
 
 /**
@@ -1404,10 +1407,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         onRemoveTag(index);
       }
     }));
-  }) : /*#__PURE__*/React__default.createElement(Text$2, {
+  }) : null, !lastestFormValueToArray.length && !isFocussed ? /*#__PURE__*/React__default.createElement(Text$2, {
     color: colors.label.secondary.light,
     fontSize: "13px"
-  }, placeholder)), /*#__PURE__*/React__default.createElement(Flex, {
+  }, placeholder) : null), /*#__PURE__*/React__default.createElement(Flex, {
     flex: 1,
     minWidth: isFocussed ? '20%' : 0
   }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -1467,12 +1470,22 @@ var StackedSwitch = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
  */
 
 var Label$1 = function Label(_ref) {
-  var isRequired = _ref.isRequired,
+  var tooltipText = _ref.tooltipText,
+      isRequired = _ref.isRequired,
       label = _ref.label;
-  return /*#__PURE__*/React__default.createElement(FormLabel$1, null, label, isRequired && /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(FormLabel$1, {
+    display: "flex",
+    alignItems: "center"
+  }, label, isRequired && /*#__PURE__*/React__default.createElement(Box, {
     ml: 1,
     color: colors.label.error
-  }, "*"));
+  }, "*"), !!tooltipText && /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: tooltipText,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(QuestionOutlineIcon, {
+    boxSize: "13px",
+    ml: "8px"
+  })));
 };
 
 /**
@@ -1489,6 +1502,7 @@ function Input(_ref) {
       name = _ref.name,
       helperText = _ref.helperText,
       options = _ref.options,
+      tooltipText = _ref.tooltipText,
       isInvalid = _ref.isInvalid,
       errorText = _ref.errorText,
       isRequired = _ref.isRequired,
@@ -1496,6 +1510,8 @@ function Input(_ref) {
       defaultValue = _ref.defaultValue,
       control = _ref.control,
       disabled = _ref.disabled,
+      rightElement = _ref.rightElement,
+      leftElement = _ref.leftElement,
       onChange = _ref.onChange,
       setValue = _ref.setValue,
       setError = _ref.setError,
@@ -1516,6 +1532,8 @@ function Input(_ref) {
           onChange: onChange,
           onBlur: onBlur,
           ref: ref,
+          rightElement: rightElement,
+          leftElement: leftElement,
           disabled: disabled,
           value: value
         });
@@ -1558,6 +1576,7 @@ function Input(_ref) {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
+          placeholder: placeholder,
           maxLength: maxLength,
           isInvalid: isInvalid,
           onChange: onChange,
@@ -1613,6 +1632,7 @@ function Input(_ref) {
           ref: ref,
           disabled: disabled,
           value: value,
+          placeholder: placeholder,
           setValue: setValue,
           setError: setError,
           clearErrors: clearErrors,
@@ -1659,6 +1679,7 @@ function Input(_ref) {
         position: "relative",
         py: label || helperText || isInvalid ? 6 : 0
       }, label && /*#__PURE__*/React__default.createElement(Label$1, {
+        tooltipText: tooltipText,
         label: label,
         isRequired: isRequired
       }), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React__default.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText));
@@ -2542,214 +2563,9 @@ var Link = {
   variants: variants$5
 };
 
-var parts$4 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
-var baseStyleOverlay = {
-  bg: 'blackAlpha.600',
-  zIndex: 'modal'
-};
-
-function baseStyleDialogContainer(props) {
-  var scrollBehavior = props.scrollBehavior;
-  return {
-    display: 'flex',
-    zIndex: 'modal',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
-    WebkitOverflowScrolling: 'touch'
-  };
-}
-
-function baseStyleDialog(props) {
-  var isCentered = props.isCentered,
-      scrollBehavior = props.scrollBehavior;
-  return {
-    borderRadius: 'lg',
-    bg: mode('white', 'gray.700')(props),
-    color: 'inherit',
-    mt: isCentered ? {
-      base: 8,
-      md: 'auto'
-    } : '3.75rem',
-    mb: isCentered ? {
-      base: 20,
-      md: 'auto'
-    } : '3.75rem',
-    mx: 4,
-    zIndex: 'modal',
-    maxH: scrollBehavior === 'inside' ? 'calc(100vh - 7.5rem)' : undefined,
-    boxShadow: mode('xl', 'dark-lg')(props)
-  };
-}
-
-var baseStyleHeader = {
-  px: 6,
-  py: 4,
-  minHeight: 20,
-  fontSize: 'xl',
-  display: 'flex',
-  alignItems: 'center',
-  fontWeight: 'bold',
-  bg: 'primary.900',
-  color: 'white',
-  userSelect: 'none'
-};
-var baseStyleCloseButton = {
-  position: 'absolute',
-  top: 2,
-  right: 3
-};
-
-function baseStyleBody(props) {
-  var scrollBehavior = props.scrollBehavior;
-  return {
-    px: [6, null, 20],
-    py: 10,
-    flex: 1,
-    overflow: scrollBehavior === 'inside' ? 'auto' : undefined
-  };
-}
-
-var baseStyleFooter = {
-  px: [6, null, 20],
-  pt: 5,
-  pb: 16
-};
-
-var baseStyle$9 = function baseStyle(props) {
-  return {
-    overlay: baseStyleOverlay,
-    dialogContainer: baseStyleDialogContainer(props),
-    dialog: baseStyleDialog(props),
-    header: baseStyleHeader,
-    closeButton: baseStyleCloseButton,
-    body: baseStyleBody(props),
-    footer: baseStyleFooter
-  };
-};
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
-
-
-function getSize(value) {
-  var commonBodyFooterStyles = {
-    xs: {
-      px: 8,
-      pb: 8
-    },
-    sm: {
-      px: 8,
-      pb: 8
-    },
-    md: {
-      px: 8,
-      pb: 8
-    },
-    lg: {
-      px: 10,
-      pb: 10
-    },
-    xl: {
-      px: 12,
-      pb: 10
-    }
-  };
-  var bodyStyles = {
-    xs: {
-      py: 6
-    },
-    sm: {
-      py: 6
-    },
-    md: {
-      py: 6
-    },
-    lg: {
-      py: 8
-    },
-    xl: {
-      py: 8
-    }
-  };
-  var footerStyles = {
-    xs: {
-      pb: 8
-    },
-    sm: {
-      pb: 8
-    },
-    md: {
-      pb: 8
-    },
-    lg: {
-      pb: 10
-    },
-    xl: {
-      pb: 10
-    }
-  };
-
-  if (value === 'full') {
-    return {
-      content: {
-        maxW: '100vw',
-        h: '100vh'
-      }
-    };
-  }
-
-  return {
-    content: {
-      maxW: value
-    },
-    body: _extends({}, commonBodyFooterStyles[value], bodyStyles[value]),
-    footer: _extends({}, commonBodyFooterStyles[value], footerStyles[value])
-  };
-}
-
-var sizes = {
-  xs: /*#__PURE__*/getSize('xs'),
-  sm: /*#__PURE__*/getSize('sm'),
-  md: /*#__PURE__*/getSize('md'),
-  lg: /*#__PURE__*/getSize('lg'),
-  xl: /*#__PURE__*/getSize('xl'),
-  '2xl': /*#__PURE__*/getSize('2xl'),
-  '3xl': /*#__PURE__*/getSize('3xl'),
-  '4xl': /*#__PURE__*/getSize('4xl'),
-  '5xl': /*#__PURE__*/getSize('5xl'),
-  '6xl': /*#__PURE__*/getSize('6xl'),
-  full: /*#__PURE__*/getSize('full')
-};
-
-var warningVariant = function warningVariant() {
-  return {
-    header: {
-      bg: 'warning.300',
-      color: 'black'
-    }
-  };
-};
-
-var variants$6 = {
-  warning: warningVariant
-};
-var defaultProps$5 = {
-  size: 'lg',
-  isCentered: true
-};
-var Modal = {
-  parts: parts$4,
-  baseStyle: baseStyle$9,
-  sizes: sizes,
-  variants: variants$6,
-  defaultProps: defaultProps$5
-};
-
-var defaultProps$6 = Input$1.defaultProps,
-    variants$7 = Input$1.variants;
-var parts$5 = ['field', 'icon'];
+var defaultProps$5 = Input$1.defaultProps,
+    variants$6 = Input$1.variants;
+var parts$4 = ['field', 'icon'];
 
 function baseStyleField() {
   return _extends({}, Input$1.baseStyle.field, {
@@ -2770,7 +2586,7 @@ var baseStyleInput = {
   }
 };
 
-var baseStyle$a = function baseStyle() {
+var baseStyle$9 = function baseStyle() {
   return {
     field: baseStyleField(),
     icon: baseStyleInput
@@ -2778,13 +2594,13 @@ var baseStyle$a = function baseStyle() {
 };
 
 var Select = {
-  parts: parts$5,
-  baseStyle: baseStyle$a,
-  variants: variants$7,
-  defaultProps: defaultProps$6
+  parts: parts$4,
+  baseStyle: baseStyle$9,
+  variants: variants$6,
+  defaultProps: defaultProps$5
 };
 
-var parts$6 = ['track', 'thumb'];
+var parts$5 = ['track', 'thumb'];
 
 function baseStyleTrack(props) {
   var c = props.colorScheme,
@@ -2817,14 +2633,14 @@ var baseStyleThumb = {
   transform: 'translateX(0)'
 };
 
-var baseStyle$b = function baseStyle(props) {
+var baseStyle$a = function baseStyle(props) {
   return {
     track: baseStyleTrack(props),
     thumb: baseStyleThumb
   };
 };
 
-var sizes$1 = {
+var sizes = {
   sm: {
     track: {
       w: '1.375rem',
@@ -2865,19 +2681,19 @@ var sizes$1 = {
     }
   }
 };
-var defaultProps$7 = {
+var defaultProps$6 = {
   size: 'md',
   colorScheme: 'blue'
 };
 var Switch = {
-  parts: parts$6,
-  baseStyle: baseStyle$b,
-  sizes: sizes$1,
-  defaultProps: defaultProps$7
+  parts: parts$5,
+  baseStyle: baseStyle$a,
+  sizes: sizes,
+  defaultProps: defaultProps$6
 };
 
-var parts$7 = ['th', 'td', 'tr', 'body', 'thead'];
-var baseStyle$c = {
+var parts$6 = ['th', 'td', 'tr', 'body', 'thead'];
+var baseStyle$b = {
   thead: {
     bg: colors.label.primary.dark
   },
@@ -2913,11 +2729,11 @@ var baseStyle$c = {
   }
 };
 var Table$1 = {
-  parts: parts$7,
-  baseStyle: baseStyle$c
+  parts: parts$6,
+  baseStyle: baseStyle$b
 };
 
-var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$7 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 
 function baseStyleRoot(props) {
   var orientation = props.orientation;
@@ -2957,7 +2773,7 @@ var baseStyleTabpanel = {
   p: 4
 };
 
-var baseStyle$d = function baseStyle(props) {
+var baseStyle$c = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -2966,7 +2782,7 @@ var baseStyle$d = function baseStyle(props) {
   };
 };
 
-var sizes$2 = {
+var sizes$1 = {
   sm: {
     tab: {
       py: '0.25rem',
@@ -3136,7 +2952,7 @@ var variantSimple = {
     }
   }
 };
-var variants$8 = {
+var variants$7 = {
   line: variantLine,
   enclosed: variantEnclosed,
   'enclosed-colored': variantEnclosedColored,
@@ -3145,20 +2961,20 @@ var variants$8 = {
   unstyled: variantUnstyled,
   simple: variantSimple
 };
-var defaultProps$8 = {
+var defaultProps$7 = {
   size: 'md',
   variant: 'line',
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$8,
-  baseStyle: baseStyle$d,
-  sizes: sizes$2,
-  variants: variants$8,
-  defaultProps: defaultProps$8
+  parts: parts$7,
+  baseStyle: baseStyle$c,
+  sizes: sizes$1,
+  variants: variants$7,
+  defaultProps: defaultProps$7
 };
 
-var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+var baseStyle$d = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   fontSize: '13px',
   display: 'block',
   paddingY: '8px',
@@ -3167,16 +2983,16 @@ var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   lineHeight: 'short'
 });
 
-var defaultProps$9 = {
+var defaultProps$8 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
-  defaultProps: defaultProps$9
+  baseStyle: baseStyle$d,
+  defaultProps: defaultProps$8
 };
 
-var defaultProps$a = Text$2.defaultProps;
-var baseStyle$f = {
+var defaultProps$9 = Text$2.defaultProps;
+var baseStyle$e = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
@@ -3185,7 +3001,7 @@ var baseStyle$f = {
 };
 
 function variantHeader() {
-  return _extends({}, baseStyle$f, {
+  return _extends({}, baseStyle$e, {
     fontWeight: typography.fontWeights.bold,
     fontSize: typography.fontSizes['3xl'],
     lineHeight: typography.lineHeights[8],
@@ -3194,7 +3010,7 @@ function variantHeader() {
 }
 
 function variantSubheader() {
-  return _extends({}, baseStyle$f, {
+  return _extends({}, baseStyle$e, {
     fontWeight: typography.fontWeights.semibold,
     fontSize: typography.fontSizes['lg'],
     lineHeight: typography.lineHeights[5],
@@ -3203,19 +3019,19 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$f;
+  return baseStyle$e;
 }
 
-var variants$9 = {
+var variants$8 = {
   header: variantHeader,
   subheader: variantSubheader,
   paragraph: variantParagraph
 };
 var Text$1 = {
-  baseStyle: baseStyle$f,
-  variants: variants$9,
-  defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
-    variant: variants$9.paragraph
+  baseStyle: baseStyle$e,
+  variants: variants$8,
+  defaultProps: /*#__PURE__*/_extends({}, defaultProps$9, {
+    variant: variants$8.paragraph
   })
 };
 
@@ -3255,7 +3071,6 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link,
-    Modal: Modal,
     Select: Select,
     Switch: Switch,
     Table: Table$1,