@xqmsg/ui-core 0.15.0 → 0.15.2

package/package.json

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

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

@@ -99,74 +99,50 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   return (
     <Form formHandler={formHandler}>
-      <Box overflowY={'auto'} height="100%" width="100px" overflow="visible">
-        <Input
-          {...args}
-          inputType="multi-select"
-          setValue={form.setValue}
-          setError={form.setError}
-          clearErrors={form.clearErrors}
-          isInvalid={!!form.formState.errors['prop5']?.message}
-          errorText={form.formState.errors['prop5']?.message}
-          name="prop5"
-        />
-        <Input
-          {...args}
-          inputType="text"
-          name="prop3"
-          onChange={e => form.setValue('prop3', e.target.value)}
-        />
-        <Input
-          {...args}
-          inputType="textarea"
-          name="prop2"
-          onChange={e => form.setValue('prop2', e.target.value)}
-        />
-        <Input
-          {...args}
-          name="prop"
-          inputType="pilled-text"
-          setValue={form.setValue}
-          setError={form.setError}
-          clearErrors={form.clearErrors}
-          isInvalid={!!form.formState.errors['prop']?.message}
-          errorText={form.formState.errors['prop']?.message}
-        />
-        <Input
-          {...args}
-          inputType="select"
-          setValue={form.setValue}
-          name="prop4"
-        />
-        <Input
-          {...args}
-          name="prop6"
-          inputType="switch"
-          setValue={form.setValue}
-        />
-        <Input
-          {...args}
-          name="prop6"
-          inputType="checkbox"
-          setValue={form.setValue}
-        />{' '}
-        <Input
-          {...args}
-          inputType="multi-select"
-          setValue={form.setValue}
-          setError={form.setError}
-          clearErrors={form.clearErrors}
-          isInvalid={!!form.formState.errors['prop5']?.message}
-          errorText={form.formState.errors['prop5']?.message}
-          name="prop5"
-        />
-        <Input
-          {...args}
-          inputType="select"
-          setValue={form.setValue}
-          name="prop4"
-        />
-      </Box>
+      <Input
+        {...args}
+        inputType="multi-select"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop5']?.message}
+        errorText={form.formState.errors['prop5']?.message}
+        name="prop5"
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+      />
+      <Input
+        {...args}
+        inputType="textarea"
+        name="prop2"
+        onChange={e => form.setValue('prop2', e.target.value)}
+      />
+      <Input
+        {...args}
+        name="prop"
+        inputType="pilled-text"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
+      />
+      <Input
+        {...args}
+        inputType="select"
+        setValue={form.setValue}
+        name="prop4"
+      />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="switch"
+        setValue={form.setValue}
+      />
     </Form>
   );
 };

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

@@ -52,15 +52,15 @@ const StackedMultiSelect = React.forwardRef<
   const [shouldSideScroll, setShouldSideScroll] = useState(false);
   const [position, setPosition] = useState<'top' | 'bottom'>('top');
 
-  useEffect(() => {
-    const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+  const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
-    if (document.body.clientHeight - (boundingClientRect?.y + 240) >= 0) {
+  useEffect(() => {
+    if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
       setPosition('top');
     } else {
       setPosition('bottom');
     }
-  }, [dropdownRef]);
+  }, [boundingClientRect]);
 
   useOutsideClick({
     ref: dropdownRef,

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

@@ -37,9 +37,12 @@ const StackedPilledInput = React.forwardRef<
 
   const [tokenIndex, setTokenIndex] = useState<number | null>(null);
   const [isFocussed, setIsFocussed] = useState(false);
-  const [shouldSideScroll, setShouldSideScroll] = useState(false);
   const [localValue, setLocalValue] = useState('');
 
+  const latestTokenElement = document.getElementById(
+    `${name}_token_${lastestFormValueToArray.length - 1}`
+  );
+
   // gets latest watched form value (common delimited) from RHF state and creates a list
   useEffect(() => {
     if (watchedValue !== undefined && !watchedValue.length) {
@@ -47,21 +50,19 @@ const StackedPilledInput = React.forwardRef<
     }
 
     if (watchedValue !== undefined && watchedValue?.length) {
-      if (shouldSideScroll) {
-        (scrollRef.current as HTMLDivElement).scrollTo({
-          left: scrollRef.current?.scrollWidth,
+      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+
+      if (latestTokenElement) {
+        latestTokenElement.scrollIntoView({
+          block: 'end',
+          inline: 'center',
           behavior: 'smooth',
         });
-        setShouldSideScroll(false);
       }
-
-      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
     }
-  }, [watchedValue, shouldSideScroll]);
+  }, [latestTokenElement, watchedValue]);
 
   const onHandleKeyDown = (e: React.KeyboardEvent) => {
-    setShouldSideScroll(true);
-
     if (
       e.key === ' ' ||
       e.key === 'Enter' ||
@@ -101,7 +102,7 @@ const StackedPilledInput = React.forwardRef<
 
       setLocalValue('');
 
-      setValue(
+      return setValue(
         name as string,
         filteredUniqueValues.toString().replace(/\s/g, ''),
         {
@@ -109,8 +110,6 @@ const StackedPilledInput = React.forwardRef<
           shouldDirty: true,
         }
       );
-
-      return setIsFocussed(false);
     }
 
     if (!localValue.trim().length && lastestFormValueToArray.length) {
@@ -149,7 +148,18 @@ const StackedPilledInput = React.forwardRef<
           return setTokenIndex(lastestFormValueToArray.length - 1);
         }
 
-        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
+        setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
+
+        const 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') {
@@ -158,7 +168,18 @@ const StackedPilledInput = React.forwardRef<
         if (tokenIndex === lastestFormValueToArray.length - 1) {
           return setTokenIndex(null);
         }
-        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) + 1);
+        setTokenIndex(prevTokenIndex => (prevTokenIndex as number) + 1);
+
+        const tokenElement = document.getElementById(
+          `${name}_token_${tokenIndex}`
+        );
+
+        if (!tokenElement || !scrollRef.current) return;
+
+        return scrollRef.current.scrollBy({
+          left: tokenElement.getBoundingClientRect().width,
+          behavior: 'smooth',
+        });
       }
     }
   };
@@ -183,7 +204,7 @@ const StackedPilledInput = React.forwardRef<
   const onBlur = () => {
     clearErrors(name);
 
-    if (localValue.trim()) {
+    if (localValue.trim().length) {
       const filteredUniqueValues = Array.from(
         new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
       );
@@ -209,7 +230,6 @@ const StackedPilledInput = React.forwardRef<
         fontSize="13px"
         border={isFocussed ? '2px solid' : '1px solid'}
         borderColor={isFocussed ? colors.border.focus : colors.border.default}
-        py="5px"
         pl="8px"
         borderRadius="4px"
         alignItems="center"
@@ -225,11 +245,11 @@ const StackedPilledInput = React.forwardRef<
         h="26px"
       >
         <Flex
-          h="18px"
+          h="100%"
           alignItems="center"
-          // width="fit-content"
-          // maxW="80%"
           overflowX="scroll"
+          overflowY="hidden"
+          maxWidth={isFocussed ? '80%' : '100%'}
           style={{
             scrollbarWidth: 'none' /* Firefox */,
             msOverflowStyle: 'none',
@@ -251,8 +271,9 @@ const StackedPilledInput = React.forwardRef<
                     : 'none'
                 }
                 borderRadius="full"
-                onClick={() => setTokenIndex(index)}
+                onClick={() => isFocussed && setTokenIndex(index)}
                 width="100%"
+                id={`${name}_token_${index}`}
               >
                 <Token
                   label={label}
@@ -270,18 +291,26 @@ const StackedPilledInput = React.forwardRef<
             </Text>
           )}
         </Flex>
-        <Flex flex={1}>
+        <Flex flex={1} minWidth={isFocussed ? '20%' : 0}>
           <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}
             _focus={{ boxShadow: 'none !important' }}
             value={localValue}
-            onChange={e => tokenIndex === null && setLocalValue(e.target.value)}
+            onChange={e =>
+              tokenIndex === null &&
+              setLocalValue(
+                e.target.value.trim().replace(',', '').length
+                  ? e.target.value
+                  : ''
+              )
+            }
             ref={inputRef}
             onFocus={() => setIsFocussed(true)}
             onBlur={() => setIsFocussed(false)}

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -39,15 +39,17 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     );
     const [position, setPosition] = useState<'top' | 'bottom'>('top');
 
+    const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+
     useEffect(() => {
       const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
-      if (document.body.clientHeight - (boundingClientRect?.y + 240) >= 0) {
+      if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
         setPosition('top');
       } else {
         setPosition('bottom');
       }
-    }, [dropdownRef]);
+    }, [boundingClientRect]);
 
     useDidMountEffect(() => {
       setSelectedOption(