@xqmsg/ui-core 0.16.6 → 0.16.8

package/dist/theme/components/form.d.ts

@@ -6,11 +6,9 @@ declare const _default: {
             color: string;
         };
         helperText: {
-            position: string;
-            color: string;
             mt: number;
             ml: number;
-            bottom: number;
+            color: string;
             fontSize: string;
         };
     };

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

@@ -1029,10 +1029,6 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       debouncedSearchValue = _useState9[0],
       setDebouncedSearchValue = _useState9[1];
 
-  console.log({
-    searchValue: searchValue,
-    debouncedSearchValue: debouncedSearchValue
-  });
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
     if (window.innerHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
@@ -1046,12 +1042,12 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }); // gets latest watched form value (common delimited) from RHF state and creates a list
 
   React.useEffect(function () {
-    if (watchedValue !== undefined && !watchedValue.length) {
+    if (watchedValue !== undefined && !watchedValue.length && !isInit) {
       setLocalValues([]);
       setIsInit(true);
     }
 
-    if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
+    if (watchedValue !== undefined && watchedValue != null && watchedValue.length && !isInit) {
       if (shouldSideScroll) {
         var _scrollRef$current;
 
@@ -1351,7 +1347,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, [latestTokenElement, watchedValue]);
 
   var onHandleKeyDown = function onHandleKeyDown(e) {
-    if ((e.key === ' ' || e.key === 'Enter' || e.key === ',' || e.key === 'Tab') && localValue.length) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
       if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
         setLocalValue(lastestFormValueToArray[tokenIndex]);
 
@@ -1455,7 +1451,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
 
   react.useOutsideClick({
     ref: inputWrapperRef,
-    handler: onBlur
+    handler: function handler() {
+      onBlur();
+      console.log('hi');
+    }
   });
   return /*#__PURE__*/React__default.createElement(react.Box, {
     position: "relative"
@@ -1468,6 +1467,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     alignItems: "center",
     justifyContent: "space-between",
     onClick: function onClick() {
+      if (isFocussed && tokenIndex !== null) {
+        setTokenIndex(null);
+      }
+
       if (!disabled) {
         var _inputRef$current;
 
@@ -1502,7 +1505,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       border: tokenIndex === index ? "1px solid " + colors.border.focus : 'none',
       borderRadius: "full",
       onClick: function onClick() {
-        return isFocussed && setTokenIndex(index);
+        return setTokenIndex(index);
       },
       width: "100%",
       id: name + "_token_" + index
@@ -1541,7 +1544,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       return setIsFocussed(true);
     },
     onBlur: function onBlur() {
-      return setIsFocussed(false);
+      setIsFocussed(false);
+      return setTokenIndex(null);
     }
   }))));
 });
@@ -1581,8 +1585,7 @@ var Label$1 = function Label(_ref) {
       isRequired = _ref.isRequired,
       label = _ref.label;
   return /*#__PURE__*/React__default.createElement(react.FormLabel, {
-    display: "flex",
-    alignItems: "center"
+    display: "flex"
   }, label, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
     ml: 1,
     color: colors.label.error
@@ -2459,11 +2462,9 @@ function baseStyleRequiredIndicator() {
 
 function baseStyleHelperText() {
   return {
-    position: 'absolute',
-    color: colors.label.secondary.light,
     mt: 1,
     ml: 1,
-    bottom: 0,
+    color: colors.label.secondary.light,
     fontSize: '13px'
   };
 }