@xqmsg/ui-core 0.14.0 → 0.14.2

package/dist/ui-core.esm.js

@@ -1,7 +1,8 @@
-import React__default, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import React__default, { useMemo, useCallback, useRef, useEffect, useState, memo, forwardRef, createElement } from 'react';
 import { Image, Alert as Alert$1, AlertDescription, Box, Flex, Button as Button$2, Text as Text$2, Icon as Icon$1, Spinner, InputGroup, Checkbox, Input as Input$2, RadioGroup, Radio, useOutsideClick, InputRightElement, Textarea as Textarea$1, Switch as Switch$1, FormLabel as FormLabel$1, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, TableContainer, Table as Table$2, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme, ChakraProvider } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
-import { CloseIcon as CloseIcon$1, HamburgerIcon } from '@chakra-ui/icons';
+import { truncate } from 'lodash-es';
+import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
 import { HiOutlineRefresh } from 'react-icons/hi';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
 import { defineStyle } from '@chakra-ui/system';
@@ -503,7 +504,8 @@ var Dropdown = function Dropdown(_ref) {
         color: colors.label.secondary.light,
         fontSize: "13px",
         fontWeight: "bold",
-        px: "8px"
+        px: "8px",
+        bg: "inherit"
       }, idx > 0 && /*#__PURE__*/React__default.createElement(Box, {
         my: "3px",
         borderTop: "2px solid",
@@ -523,14 +525,18 @@ var Dropdown = function Dropdown(_ref) {
           color: colors.label.primary.dark,
           bg: colors.fill.action,
           borderRadius: '4px'
-        }
+        },
+        bg: "inherit"
       }, option.label));
     });
   }, [onSelectItem, options]);
   return /*#__PURE__*/React__default.createElement(Box, {
     bg: colors.fill.light.quaternary,
-    backdropFilter: "blur(64px)",
+    backdropFilter: "auto",
+    backdropBlur: "64px",
     borderRadius: "4px",
+    border: "0.25px solid",
+    borderColor: colors.fill.light.tertiary,
     mt: "3px",
     maxH: "320px",
     overflowY: "auto",
@@ -538,11 +544,18 @@ var Dropdown = function Dropdown(_ref) {
     py: "4px",
     position: "absolute",
     width: "100%",
-    zIndex: "100"
+    zIndex: 100
   }, DropdownContent);
 };
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "defaultValue"];
+var useDidMountEffect = function useDidMountEffect(func, deps) {
+  var didMount = useRef(false);
+  useEffect(function () {
+    if (didMount.current) func();else didMount.current = true; // eslint-disable-next-line
+  }, deps);
+};
+
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -555,7 +568,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       name = _ref2.name,
       setValue = _ref2.setValue,
       handleOnChange = _ref2.handleOnChange,
-      defaultValue = _ref2.defaultValue,
+      value = _ref2.value,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
   var dropdownRef = useRef(null);
@@ -565,11 +578,18 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       setIsFocussed = _useState[1];
 
   var _useState2 = useState((_options$find$label = (_options$find = options.find(function (option) {
-    return option.value === defaultValue;
+    return option.value === value;
   })) == null ? void 0 : _options$find.label) != null ? _options$find$label : ''),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
+  useDidMountEffect(function () {
+    var _options$find$label2, _options$find2;
+
+    setSelectedOption((_options$find$label2 = (_options$find2 = options.find(function (option) {
+      return option.value === value;
+    })) == null ? void 0 : _options$find2.label) != null ? _options$find$label2 : '');
+  }, [value]);
   useOutsideClick({
     ref: dropdownRef,
     handler: function handler() {
@@ -631,7 +651,24 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
   }, props));
 });
 
-var CloseIcon = "data:image/svg+xml,%3Csvg%20width%3D%2256%22%20height%3D%2256%22%20viewBox%3D%220%200%2056%2056%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M27.9995%2056C43.4635%2056%2055.9995%2043.464%2055.9995%2028C55.9995%2012.536%2043.4635%200%2027.9995%200C12.5355%200%20-0.000488281%2012.536%20-0.000488281%2028C-0.000488281%2043.464%2012.5355%2056%2027.9995%2056ZM21.9807%2018.2688C20.9555%2017.2437%2019.2935%2017.2437%2018.2684%2018.2688C17.2432%2019.294%2017.2432%2020.956%2018.2684%2021.9812L24.2872%2028L18.2684%2034.0188C17.2432%2035.044%2017.2432%2036.706%2018.2684%2037.7312C19.2935%2038.7563%2020.9555%2038.7563%2021.9807%2037.7312L27.9995%2031.7123L34.0184%2037.7312C35.0435%2038.7563%2036.7055%2038.7563%2037.7307%2037.7312C38.7558%2036.706%2038.7558%2035.044%2037.7307%2034.0188L31.7118%2028L37.7307%2021.9812C38.7558%2020.956%2038.7558%2019.294%2037.7307%2018.2688C36.7055%2017.2437%2035.0435%2017.2437%2034.0184%2018.2688L27.9995%2024.2877L21.9807%2018.2688Z%22%20fill%3D%22%233C3C43%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E";
+var _path;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var SvgClose = function SvgClose(props, ref) {
+  return /*#__PURE__*/createElement("svg", _extends$1({
+    viewBox: "0 0 56 56",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28 56c15.464 0 28-12.536 28-28S43.463 0 28 0 0 12.536 0 28s12.536 28 28 28Zm-6.02-37.731a2.625 2.625 0 0 0-3.712 3.712L24.288 28l-6.02 6.019a2.625 2.625 0 1 0 3.713 3.712l6.018-6.019 6.02 6.02a2.625 2.625 0 0 0 3.712-3.713L31.71 28l6.02-6.019a2.625 2.625 0 0 0-3.713-3.712L28 24.288l-6.02-6.02Z",
+    fill: "#3C3C43",
+    fillOpacity: 0.6
+  })));
+};
+var ForwardRef = /*#__PURE__*/forwardRef(SvgClose);
+var Memo = /*#__PURE__*/memo(ForwardRef);
 
 var Token = function Token(_ref) {
   var label = _ref.label,
@@ -641,17 +678,23 @@ var Token = function Token(_ref) {
     borderRadius: "full",
     backgroundColor: "#7676801F",
     alignItems: "center",
-    // width="100%"
+    width: "fit-content",
+    w: "auto",
+    h: "auto",
     pl: "8px",
     pr: "4px",
-    py: "2px"
+    py: "2px",
+    position: "relative"
   }, /*#__PURE__*/React__default.createElement(Text$2, {
     color: colors.label.primary.light,
-    fontSize: "13px"
-  }, label), /*#__PURE__*/React__default.createElement(Image, {
-    pl: "4px",
-    boxSize: "16px",
-    src: CloseIcon,
+    fontSize: "13px",
+    pr: "4px"
+  }, truncate(label.trim(), {
+    length: 15,
+    omission: '...'
+  })), /*#__PURE__*/React__default.createElement(Memo, {
+    width: "13px",
+    height: "13px",
     onClick: onDelete,
     cursor: "pointer"
   }));
@@ -667,7 +710,9 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       control = _ref2.control,
       name = _ref2.name,
       placeholder = _ref2.placeholder,
-      disabled = _ref2.disabled;
+      disabled = _ref2.disabled,
+      maxLength = _ref2.maxLength,
+      setError = _ref2.setError;
   var watchedValue = useWatch({
     control: control,
     name: name
@@ -689,6 +734,12 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   useOutsideClick({
     ref: dropdownRef,
     handler: function handler() {
+      if (maxLength && localValues.length > maxLength) {
+        setError(name, {
+          message: "Exceeded maximum of " + maxLength + " options"
+        });
+      }
+
       return setIsFocussed(false);
     }
   }); // gets latest watched form value (common delimited) from RHF state and creates a list
@@ -698,16 +749,24 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setLocalValues([]);
     }
 
-    if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
+    if (maxLength && watchedValue !== undefined && watchedValue.length <= maxLength && watchedValue != null && watchedValue.length) {
       setLocalValues(watchedValue.split(',').filter(Boolean).map(function (value) {
         return options.find(function (option) {
           return option.value === value;
         });
       }));
     }
-  }, [options, watchedValue]);
+  }, [maxLength, options, watchedValue]);
 
   var handleChange = function handleChange(option) {
+    console.log(localValues.length, maxLength);
+
+    if (maxLength && localValues.length > maxLength) {
+      return setError(name, {
+        message: "Exceeded maximum of " + maxLength + " options"
+      });
+    }
+
     var newValue = [].concat(localValues, [option]).map(function (_ref3) {
       var value = _ref3.value;
       return value;
@@ -768,7 +827,14 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     cursor: disabled ? 'not-allowed' : 'pointer'
   }, /*#__PURE__*/React__default.createElement(Flex, {
     height: "28px",
-    alignItems: "center"
+    alignItems: "center",
+    overflowX: "auto",
+    maxWidth: "90%",
+    style: {
+      scrollbarWidth: 'none'
+      /* Firefox */
+
+    }
   }, localValues.length ? localValues.map(function (option) {
     return /*#__PURE__*/React__default.createElement(Box, {
       mr: "4px"
@@ -806,7 +872,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setValue = _ref2.setValue,
       control = _ref2.control,
       placeholder = _ref2.placeholder,
-      disabled = _ref2.disabled;
+      disabled = _ref2.disabled,
+      maxLength = _ref2.maxLength,
+      setError = _ref2.setError,
+      clearErrors = _ref2.clearErrors;
   var watchedValue = useWatch({
     control: control,
     name: name
@@ -844,6 +913,13 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
 
   var onHandleKeyDown = function onHandleKeyDown(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
+      if (maxLength && lastestFormValueToArray.length >= maxLength) {
+        return setError(name, {
+          type: 'maxLength',
+          message: "Exceeded maximum of " + maxLength + " options"
+        });
+      }
+
       if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
         setLocalValue(lastestFormValueToArray[tokenIndex]);
 
@@ -919,7 +995,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   };
 
   var onBlur = function onBlur() {
+    clearErrors(name);
+
     if (localValue.trim()) {
+      if (maxLength && watchedValue.length + localValue.trim().length > maxLength) return setLocalValue('');
       var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
       setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
         shouldValidate: true,
@@ -959,8 +1038,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, /*#__PURE__*/React__default.createElement(Flex, {
     height: "28px",
     alignItems: "center",
-    // width="fit-content"
-    // maxW="70%"
+    width: "fit-content",
+    maxW: "80%",
     overflowX: "auto",
     style: {
       scrollbarWidth: 'none'
@@ -975,7 +1054,6 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       onClick: function onClick() {
         return setTokenIndex(index);
       },
-      // width="fit-content"
       width: "100%"
     }, /*#__PURE__*/React__default.createElement(Token, {
       label: label,
@@ -1067,8 +1145,11 @@ function Input(_ref) {
       control = _ref.control,
       disabled = _ref.disabled,
       onChange = _ref.onChange,
-      setValue = _ref.setValue;
-  var selectedInputField = useCallback(function (onChange, onBlur, ref, value) {
+      setValue = _ref.setValue,
+      setError = _ref.setError,
+      clearErrors = _ref.clearErrors;
+
+  var selectedInputField = function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
         return /*#__PURE__*/React__default.createElement(StackedInput, {
@@ -1162,7 +1243,10 @@ function Input(_ref) {
           value: value,
           setValue: setValue,
           control: control,
-          placeholder: placeholder
+          setError: setError,
+          clearErrors: clearErrors,
+          placeholder: placeholder,
+          maxLength: maxLength
         });
 
       case 'pilled-text':
@@ -1178,7 +1262,10 @@ function Input(_ref) {
           disabled: disabled,
           value: value,
           setValue: setValue,
-          control: control
+          setError: setError,
+          clearErrors: clearErrors,
+          control: control,
+          maxLength: maxLength
         });
 
       case 'switch':
@@ -1196,7 +1283,8 @@ function Input(_ref) {
       default:
         return null;
     }
-  }, [ariaLabel, className, control, defaultValue, disabled, inputType, isInvalid, isRequired, maxLength, name, options, placeholder, setValue]);
+  };
+
   return /*#__PURE__*/React__default.createElement(Controller, {
     control: control,
     name: name,
@@ -1269,7 +1357,9 @@ function FormSection(_ref) {
       maxLength: maxLength,
       isInvalid: !!form.formState.errors[name],
       defaultValue: defaultValue,
-      setValue: form.setValue
+      setValue: form.setValue,
+      setError: form.setError,
+      clearErrors: form.clearErrors
     });
   }));
 }
@@ -1345,7 +1435,7 @@ var Layout = function Layout(_ref) {
     onClick: function onClick() {
       return setShow(!show);
     },
-    icon: show ? /*#__PURE__*/React__default.createElement(CloseIcon$1, null) : /*#__PURE__*/React__default.createElement(HamburgerIcon, null),
+    icon: show ? /*#__PURE__*/React__default.createElement(CloseIcon, null) : /*#__PURE__*/React__default.createElement(HamburgerIcon, null),
     _focus: {
       boxShadow: 'none'
     }