@xqmsg/ui-core 0.16.6 → 0.16.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.6",
+  "version": "0.16.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/Input.stories.tsx

@@ -5,6 +5,7 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
+import { Flex, Grid, GridItem } from '@chakra-ui/react';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',

package/src/components/input/StackedMultiSelect/index.tsx

@@ -58,8 +58,6 @@ const StackedMultiSelect = React.forwardRef<
   const [searchValue, setSearchValue] = useState('');
   const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
 
-  console.log({ searchValue, debouncedSearchValue });
-
   const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
   useEffect(() => {
@@ -74,12 +72,12 @@ const StackedMultiSelect = React.forwardRef<
 
   // gets latest watched form value (common delimited) from RHF state and creates a list
   useEffect(() => {
-    if (watchedValue !== undefined && !watchedValue.length) {
+    if (watchedValue !== undefined && !watchedValue.length && !isInit) {
       setLocalValues([]);
       setIsInit(true);
     }
 
-    if (watchedValue !== undefined && watchedValue?.length) {
+    if (watchedValue !== undefined && watchedValue?.length && !isInit) {
       if (shouldSideScroll) {
         (scrollRef.current as HTMLDivElement).scrollTo({
           left: scrollRef.current?.scrollWidth,

package/src/components/input/StackedPilledInput/index.tsx

@@ -64,11 +64,10 @@ const StackedPilledInput = React.forwardRef<
 
   const onHandleKeyDown = (e: React.KeyboardEvent) => {
     if (
-      (e.key === ' ' ||
-        e.key === 'Enter' ||
-        e.key === ',' ||
-        e.key === 'Tab') &&
-      localValue.length
+      e.key === ' ' ||
+      e.key === 'Enter' ||
+      e.key === ',' ||
+      e.key === 'Tab'
     ) {
       if (
         e.key === 'Enter' &&
@@ -221,7 +220,13 @@ const StackedPilledInput = React.forwardRef<
     setIsFocussed(false);
   };
 
-  useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+  useOutsideClick({
+    ref: inputWrapperRef,
+    handler: () => {
+      onBlur();
+      console.log('hi');
+    },
+  });
 
   return (
     <Box position="relative">
@@ -234,6 +239,10 @@ const StackedPilledInput = React.forwardRef<
         alignItems="center"
         justifyContent="space-between"
         onClick={() => {
+          if (isFocussed && tokenIndex !== null) {
+            setTokenIndex(null);
+          }
+
           if (!disabled) {
             inputRef.current?.focus();
           }
@@ -270,7 +279,7 @@ const StackedPilledInput = React.forwardRef<
                       : 'none'
                   }
                   borderRadius="full"
-                  onClick={() => isFocussed && setTokenIndex(index)}
+                  onClick={() => setTokenIndex(index)}
                   width="100%"
                   id={`${name}_token_${index}`}
                 >
@@ -313,7 +322,10 @@ const StackedPilledInput = React.forwardRef<
             }
             ref={inputRef}
             onFocus={() => setIsFocussed(true)}
-            onBlur={() => setIsFocussed(false)}
+            onBlur={() => {
+              setIsFocussed(false);
+              return setTokenIndex(null);
+            }}
           />
         </Flex>
       </Flex>

package/src/components/input/components/label/index.tsx

@@ -18,7 +18,7 @@ export const Label: React.FC<LabelProps> = ({
   label,
 }) => {
   return (
-    <FormLabel display="flex" alignItems="center">
+    <FormLabel display="flex">
       {label}
       {isRequired && (
         <Box ml={1} color={colors.label.error}>

package/src/theme/components/form.ts

@@ -11,11 +11,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',
   };
 }