@xqmsg/ui-core 0.15.1 → 0.15.2

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

@@ -1024,14 +1024,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 +1036,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 +1066,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 +1094,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 +1112,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 +1141,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 +1163,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 +1179,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 +1202,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 +1218,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 +1234,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() {