@xqmsg/ui-core 0.15.1 → 0.15.3

package/dist/hooks/useOnOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useOnClickOutside(ref: RefObject<any>, handler: () => void): void;

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

@@ -531,7 +531,7 @@ var Dropdown = function Dropdown(_ref) {
         fontSize: "13px",
         px: "8px",
         py: "4px",
-        width: "fit-content",
+        width: "100%",
         color: colors.label.primary.light,
         _hover: {
           color: colors.label.primary.dark,
@@ -576,6 +576,32 @@ var useDidMountEffect = function useDidMountEffect(func, deps) {
   }, deps);
 };
 
+function useOnClickOutside(ref, handler) {
+  React.useEffect(function () {
+    var listener = function listener(event) {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, // Add ref and handler to effect dependencies
+  // It's worth noting that because passed in handler is a new ...
+  // ... function on every render that will cause this effect ...
+  // ... callback/cleanup to run every render. It's not a big deal ...
+  // ... but to optimize you can wrap handler in useCallback before ...
+  // ... passing it into this hook.
+  [ref, handler]);
+}
+
 var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
@@ -628,11 +654,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       return option.value === value;
     })) == null ? void 0 : _options$find2.label) != null ? _options$find$label2 : '');
   }, [value]);
-  react.useOutsideClick({
-    ref: dropdownRef,
-    handler: function handler() {
-      return setIsFocussed(false);
-    }
+  useOnClickOutside(dropdownRef, function () {
+    return setIsFocussed(false);
   });
 
   var handleOnSelectItem = function handleOnSelectItem(option) {
@@ -812,11 +835,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setPosition('bottom');
     }
   }, [boundingClientRect]);
-  react.useOutsideClick({
-    ref: dropdownRef,
-    handler: function handler() {
-      return setIsFocussed(false);
-    }
+  useOnClickOutside(dropdownRef, function () {
+    return setIsFocussed(false);
   }); // gets latest watched form value (common delimited) from RHF state and creates a list
 
   React.useEffect(function () {
@@ -1024,14 +1044,11 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       isFocussed = _useState3[0],
       setIsFocussed = _useState3[1];
 
-  var _useState4 = React.useState(false),
-      shouldSideScroll = _useState4[0],
-      setShouldSideScroll = _useState4[1];
-
-  var _useState5 = React.useState(''),
-      localValue = _useState5[0],
-      setLocalValue = _useState5[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
+  var _useState4 = React.useState(''),
+      localValue = _useState4[0],
+      setLocalValue = _useState4[1];
 
+  var latestTokenElement = document.getElementById(name + "_token_" + (lastestFormValueToArray.length - 1)); // gets latest watched form value (common delimited) from RHF state and creates a list
 
   React.useEffect(function () {
     if (watchedValue !== undefined && !watchedValue.length) {
@@ -1039,23 +1056,19 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     }
 
     if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
-      if (shouldSideScroll) {
-        var _scrollRef$current;
+      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
 
-        scrollRef.current.scrollTo({
-          left: (_scrollRef$current = scrollRef.current) == null ? void 0 : _scrollRef$current.scrollWidth,
+      if (latestTokenElement) {
+        latestTokenElement.scrollIntoView({
+          block: 'end',
+          inline: 'center',
           behavior: 'smooth'
         });
-        setShouldSideScroll(false);
       }
-
-      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
     }
-  }, [watchedValue, shouldSideScroll]);
+  }, [latestTokenElement, watchedValue]);
 
   var onHandleKeyDown = function onHandleKeyDown(e) {
-    setShouldSideScroll(true);
-
     if (e.key === ' ' || e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
       if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
         setLocalValue(lastestFormValueToArray[tokenIndex]);
@@ -1073,11 +1086,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
 
       var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
       setLocalValue('');
-      setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
+      return setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
         shouldValidate: true,
         shouldDirty: true
       });
-      return setIsFocussed(false);
     }
 
     if (!localValue.trim().length && lastestFormValueToArray.length) {
@@ -1102,9 +1114,15 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
           return setTokenIndex(lastestFormValueToArray.length - 1);
         }
 
-        return setTokenIndex(function (prevTokenIndex) {
+        setTokenIndex(function (prevTokenIndex) {
           return prevTokenIndex - 1;
         });
+        var tokenElement = document.getElementById(name + "_token_" + tokenIndex);
+        if (!tokenElement || !scrollRef.current) return;
+        return scrollRef.current.scrollBy({
+          left: -1 * tokenElement.getBoundingClientRect().width,
+          behavior: 'smooth'
+        });
       }
 
       if (e.key === 'ArrowRight') {
@@ -1114,9 +1132,17 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
           return setTokenIndex(null);
         }
 
-        return setTokenIndex(function (prevTokenIndex) {
+        setTokenIndex(function (prevTokenIndex) {
           return prevTokenIndex + 1;
         });
+
+        var _tokenElement = document.getElementById(name + "_token_" + tokenIndex);
+
+        if (!_tokenElement || !scrollRef.current) return;
+        return scrollRef.current.scrollBy({
+          left: _tokenElement.getBoundingClientRect().width,
+          behavior: 'smooth'
+        });
       }
     }
   };
@@ -1135,7 +1161,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   var onBlur = function onBlur() {
     clearErrors(name);
 
-    if (localValue.trim()) {
+    if (localValue.trim().length) {
       var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
       setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
         shouldValidate: true,
@@ -1157,7 +1183,6 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     fontSize: "13px",
     border: isFocussed ? '2px solid' : '1px solid',
     borderColor: isFocussed ? colors.border.focus : colors.border["default"],
-    py: "5px",
     pl: "8px",
     borderRadius: "4px",
     alignItems: "center",
@@ -1174,11 +1199,11 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     ref: inputWrapperRef,
     h: "26px"
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
-    h: "18px",
+    h: "100%",
     alignItems: "center",
-    // width="fit-content"
-    // maxW="80%"
     overflowX: "scroll",
+    overflowY: "hidden",
+    maxWidth: isFocussed ? '80%' : '100%',
     style: {
       scrollbarWidth: 'none'
       /* Firefox */
@@ -1197,9 +1222,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       border: tokenIndex === index ? "1px solid " + colors.border.focus : 'none',
       borderRadius: "full",
       onClick: function onClick() {
-        return setTokenIndex(index);
+        return isFocussed && setTokenIndex(index);
       },
-      width: "100%"
+      width: "100%",
+      id: name + "_token_" + index
     }, /*#__PURE__*/React__default.createElement(Token, {
       label: label,
       onDelete: function onDelete(e) {
@@ -1212,12 +1238,14 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     color: colors.label.secondary.light,
     fontSize: "13px"
   }, placeholder)), /*#__PURE__*/React__default.createElement(react.Flex, {
-    flex: 1
+    flex: 1,
+    minWidth: isFocussed ? '20%' : 0
   }, /*#__PURE__*/React__default.createElement(react.Input, {
     onKeyDown: onHandleKeyDown,
     type: "text",
     padding: 0,
-    width: "100%",
+    alignContent: "flex-start",
+    "float": "right",
     border: "none",
     height: "auto",
     color: tokenIndex !== null ? 'transparent' : colors.label.primary,
@@ -1226,7 +1254,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     },
     value: localValue,
     onChange: function onChange(e) {
-      return tokenIndex === null && setLocalValue(e.target.value);
+      return tokenIndex === null && setLocalValue(e.target.value.trim().replace(',', '').length ? e.target.value : '');
     },
     ref: inputRef,
     onFocus: function onFocus() {