@xqmsg/ui-core 0.14.0 → 0.14.2

package/dist/components/input/StackedMultiSelect/index.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import { FieldOptions, ReactSelectFieldProps } from '../InputTypes';
-import { Control, FieldValues, UseFormSetValue } from 'react-hook-form';
+import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
     options: FieldOptions;
     setValue: UseFormSetValue<FieldValues>;
+    setError: UseFormSetError<FieldValues>;
+    clearErrors: UseFormClearErrors<FieldValues>;
     control: Control<FieldValues, any>;
+    maxLength?: number;
 }
 /**
  * A functional React component utilized to render the `StackedMultiSelect` component.

package/dist/components/input/StackedPilledInput/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { InputFieldProps } from '../InputTypes';
-import { Control, FieldValues, UseFormSetValue } from 'react-hook-form';
+import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
 export interface StackedPilledInputProps extends InputFieldProps {
     setValue: UseFormSetValue<FieldValues>;
+    setError: UseFormSetError<FieldValues>;
+    clearErrors: UseFormClearErrors<FieldValues>;
     control: Control<FieldValues, any>;
+    maxLength?: number;
 }
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.

package/dist/components/input/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FieldOptions, ValidationProps, InputType } from './InputTypes';
-import { Control, FieldValues, UseFormSetValue } from 'react-hook-form';
+import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
 export interface InputProps<T extends FieldValues> extends ValidationProps {
     inputType: InputType;
     name: string;
@@ -16,9 +16,11 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
     onChange?: (value?: string) => void;
     disabled?: boolean;
     setValue: UseFormSetValue<T>;
+    setError: UseFormSetError<T>;
+    clearErrors: UseFormClearErrors<T>;
 }
 /**
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement
  * to render the correct input based on the `inputType`.
  */
-export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, isInvalid, errorText, isRequired, maxLength, defaultValue, control, disabled, onChange, setValue, }: InputProps<T>): JSX.Element;
+export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, isInvalid, errorText, isRequired, maxLength, defaultValue, control, disabled, onChange, setValue, setError, clearErrors, }: InputProps<T>): JSX.Element;

package/dist/ui-core.cjs.development.js

@@ -8,6 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var react = require('@chakra-ui/react');
 var reactHookForm = require('react-hook-form');
+var lodash = require('lodash');
 var icons = require('@chakra-ui/icons');
 var hi = require('react-icons/hi');
 var themeTools = require('@chakra-ui/theme-tools');
@@ -510,7 +511,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(react.Box, {
         my: "3px",
         borderTop: "2px solid",
@@ -530,14 +532,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(react.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",
@@ -545,11 +551,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 = React.useRef(false);
+  React.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.
  */
@@ -562,7 +575,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 = React.useRef(null);
@@ -572,11 +585,18 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       setIsFocussed = _useState[1];
 
   var _useState2 = React.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]);
   react.useOutsideClick({
     ref: dropdownRef,
     handler: function handler() {
@@ -638,7 +658,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__*/React.createElement("svg", _extends$1({
+    viewBox: "0 0 56 56",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path || (_path = /*#__PURE__*/React.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__*/React.forwardRef(SvgClose);
+var Memo = /*#__PURE__*/React.memo(ForwardRef);
 
 var Token = function Token(_ref) {
   var label = _ref.label,
@@ -648,17 +685,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(react.Text, {
     color: colors.label.primary.light,
-    fontSize: "13px"
-  }, label), /*#__PURE__*/React__default.createElement(react.Image, {
-    pl: "4px",
-    boxSize: "16px",
-    src: CloseIcon,
+    fontSize: "13px",
+    pr: "4px"
+  }, lodash.truncate(label.trim(), {
+    length: 15,
+    omission: '...'
+  })), /*#__PURE__*/React__default.createElement(Memo, {
+    width: "13px",
+    height: "13px",
     onClick: onDelete,
     cursor: "pointer"
   }));
@@ -674,7 +717,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 = reactHookForm.useWatch({
     control: control,
     name: name
@@ -696,6 +741,12 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   react.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
@@ -705,16 +756,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;
@@ -775,7 +834,14 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     cursor: disabled ? 'not-allowed' : 'pointer'
   }, /*#__PURE__*/React__default.createElement(react.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(react.Box, {
       mr: "4px"
@@ -813,7 +879,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 = reactHookForm.useWatch({
     control: control,
     name: name
@@ -851,6 +920,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]);
 
@@ -926,7 +1002,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,
@@ -966,8 +1045,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     height: "28px",
     alignItems: "center",
-    // width="fit-content"
-    // maxW="70%"
+    width: "fit-content",
+    maxW: "80%",
     overflowX: "auto",
     style: {
       scrollbarWidth: 'none'
@@ -982,7 +1061,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,
@@ -1074,8 +1152,11 @@ function Input(_ref) {
       control = _ref.control,
       disabled = _ref.disabled,
       onChange = _ref.onChange,
-      setValue = _ref.setValue;
-  var selectedInputField = React.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, {
@@ -1169,7 +1250,10 @@ function Input(_ref) {
           value: value,
           setValue: setValue,
           control: control,
-          placeholder: placeholder
+          setError: setError,
+          clearErrors: clearErrors,
+          placeholder: placeholder,
+          maxLength: maxLength
         });
 
       case 'pilled-text':
@@ -1185,7 +1269,10 @@ function Input(_ref) {
           disabled: disabled,
           value: value,
           setValue: setValue,
-          control: control
+          setError: setError,
+          clearErrors: clearErrors,
+          control: control,
+          maxLength: maxLength
         });
 
       case 'switch':
@@ -1203,7 +1290,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(reactHookForm.Controller, {
     control: control,
     name: name,
@@ -1276,7 +1364,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
     });
   }));
 }