@xqmsg/ui-core 0.14.4 → 0.15.0

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

@@ -17,8 +17,6 @@ export interface StackedPilledInputProps extends InputFieldProps {
   setError: UseFormSetError<FieldValues>;
   clearErrors: UseFormClearErrors<FieldValues>;
   control: Control<FieldValues, any>;
-  // Number of allowed options
-  maxLength?: number;
 }
 
 /**
@@ -27,87 +25,65 @@ export interface StackedPilledInputProps extends InputFieldProps {
 const StackedPilledInput = React.forwardRef<
   HTMLInputElement,
   StackedPilledInputProps
->(
-  (
-    {
-      name,
-      setValue,
-      control,
-      placeholder,
-      disabled,
-      maxLength,
-      setError,
-      clearErrors,
-    },
-    _ref
-  ) => {
-    const watchedValue = useWatch({ control, name: name as string });
-    const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
-      string[]
-    >([]);
-
-    const inputRef = useRef<HTMLInputElement>(null);
-    const inputWrapperRef = useRef(null);
-
-    const [tokenIndex, setTokenIndex] = useState<number | null>(null);
-    const [isFocussed, setIsFocussed] = useState(false);
-
-    const [localValue, setLocalValue] = useState('');
-
-    // gets latest watched form value (common delimited) from RHF state and creates a list
-    useEffect(() => {
-      if (watchedValue !== undefined && !watchedValue.length) {
-        setLatestFormValueToArray([]);
+>(({ name, setValue, control, placeholder, disabled, clearErrors }, _ref) => {
+  const watchedValue = useWatch({ control, name: name as string });
+  const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
+    string[]
+  >([]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputWrapperRef = useRef(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const [tokenIndex, setTokenIndex] = useState<number | null>(null);
+  const [isFocussed, setIsFocussed] = useState(false);
+  const [shouldSideScroll, setShouldSideScroll] = useState(false);
+  const [localValue, setLocalValue] = useState('');
+
+  // gets latest watched form value (common delimited) from RHF state and creates a list
+  useEffect(() => {
+    if (watchedValue !== undefined && !watchedValue.length) {
+      setLatestFormValueToArray([]);
+    }
+
+    if (watchedValue !== undefined && watchedValue?.length) {
+      if (shouldSideScroll) {
+        (scrollRef.current as HTMLDivElement).scrollTo({
+          left: scrollRef.current?.scrollWidth,
+          behavior: 'smooth',
+        });
+        setShouldSideScroll(false);
       }
 
-      if (watchedValue !== undefined && watchedValue?.length) {
-        setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
-      }
-    }, [watchedValue]);
-
-    const onHandleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
-        if (maxLength && lastestFormValueToArray.length >= maxLength) {
-          return setError(name as string, {
-            type: 'maxLength',
-            message: `Exceeded maximum of ${maxLength} options`,
-          });
-        }
-
-        if (
-          e.key === 'Enter' &&
-          !localValue.trim().length &&
-          tokenIndex !== null
-        ) {
-          setLocalValue(lastestFormValueToArray[tokenIndex]);
-
-          const filteredUniqueValues = Array.from(
-            new Set(
-              lastestFormValueToArray.filter(
-                value => value !== lastestFormValueToArray[tokenIndex]
-              )
-            )
-          );
-
-          setValue(
-            name as string,
-            filteredUniqueValues.toString().replace(/\s/g, ''),
-            {
-              shouldValidate: true,
-              shouldDirty: true,
-            }
-          );
-
-          return setTokenIndex(null);
-        }
+      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+    }
+  }, [watchedValue, shouldSideScroll]);
+
+  const onHandleKeyDown = (e: React.KeyboardEvent) => {
+    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]);
 
         const filteredUniqueValues = Array.from(
-          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+          new Set(
+            lastestFormValueToArray.filter(
+              value => value !== lastestFormValueToArray[tokenIndex]
+            )
+          )
         );
 
-        setLocalValue('');
-
-        return setValue(
+        setValue(
           name as string,
           filteredUniqueValues.toString().replace(/\s/g, ''),
           {
@@ -115,68 +91,15 @@ const StackedPilledInput = React.forwardRef<
             shouldDirty: true,
           }
         );
-      }
-
-      if (!localValue.trim().length && lastestFormValueToArray.length) {
-        if (e.key === 'Backspace' && tokenIndex !== null) {
-          setLocalValue(
-            lastestFormValueToArray[tokenIndex].substring(
-              0,
-              lastestFormValueToArray[tokenIndex].length
-            )
-          );
-
-          const filteredUniqueValues = Array.from(
-            new Set(
-              [...lastestFormValueToArray].filter(
-                value => value !== lastestFormValueToArray[tokenIndex]
-              )
-            )
-          );
 
-          setValue(
-            name as string,
-            filteredUniqueValues.toString().replace(/\s/g, ''),
-            {
-              shouldValidate: true,
-              shouldDirty: true,
-            }
-          );
-
-          return setTokenIndex(null);
-        }
-
-        if (e.key === 'ArrowLeft') {
-          if (tokenIndex === 0) return;
-
-          if (!tokenIndex) {
-            return setTokenIndex(lastestFormValueToArray.length - 1);
-          }
-
-          return setTokenIndex(
-            prevTokenIndex => (prevTokenIndex as number) - 1
-          );
-        }
-
-        if (e.key === 'ArrowRight') {
-          if (tokenIndex === null) return;
-
-          if (tokenIndex === lastestFormValueToArray.length - 1) {
-            return setTokenIndex(null);
-          }
-          return setTokenIndex(
-            prevTokenIndex => (prevTokenIndex as number) + 1
-          );
-        }
+        return setTokenIndex(null);
       }
-    };
 
-    const onRemoveTag = (index: number) => {
-      const filteredUniqueValues = lastestFormValueToArray.filter(
-        (_, i) => i !== index
+      const filteredUniqueValues = Array.from(
+        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
       );
 
-      setLatestFormValueToArray(filteredUniqueValues);
+      setLocalValue('');
 
       setValue(
         name as string,
@@ -186,20 +109,25 @@ const StackedPilledInput = React.forwardRef<
           shouldDirty: true,
         }
       );
-    };
 
-    const onBlur = () => {
-      clearErrors(name);
+      return setIsFocussed(false);
+    }
 
-      if (localValue.trim()) {
-        if (
-          maxLength &&
-          watchedValue.length + localValue.trim().length > maxLength
-        )
-          return setLocalValue('');
+    if (!localValue.trim().length && lastestFormValueToArray.length) {
+      if (e.key === 'Backspace' && tokenIndex !== null) {
+        setLocalValue(
+          lastestFormValueToArray[tokenIndex].substring(
+            0,
+            lastestFormValueToArray[tokenIndex].length
+          )
+        );
 
         const filteredUniqueValues = Array.from(
-          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+          new Set(
+            [...lastestFormValueToArray].filter(
+              value => value !== lastestFormValueToArray[tokenIndex]
+            )
+          )
         );
 
         setValue(
@@ -210,94 +138,158 @@ const StackedPilledInput = React.forwardRef<
             shouldDirty: true,
           }
         );
-        setLocalValue('');
+
+        return setTokenIndex(null);
       }
-      setIsFocussed(false);
-    };
 
-    useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+      if (e.key === 'ArrowLeft') {
+        if (tokenIndex === 0) return;
 
-    return (
-      <Box position="relative">
+        if (!tokenIndex) {
+          return setTokenIndex(lastestFormValueToArray.length - 1);
+        }
+
+        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
+      }
+
+      if (e.key === 'ArrowRight') {
+        if (tokenIndex === null) return;
+
+        if (tokenIndex === lastestFormValueToArray.length - 1) {
+          return setTokenIndex(null);
+        }
+        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) + 1);
+      }
+    }
+  };
+
+  const onRemoveTag = (index: number) => {
+    const filteredUniqueValues = lastestFormValueToArray.filter(
+      (_, i) => i !== index
+    );
+
+    setLatestFormValueToArray(filteredUniqueValues);
+
+    setValue(
+      name as string,
+      filteredUniqueValues.toString().replace(/\s/g, ''),
+      {
+        shouldValidate: true,
+        shouldDirty: true,
+      }
+    );
+  };
+
+  const onBlur = () => {
+    clearErrors(name);
+
+    if (localValue.trim()) {
+      const filteredUniqueValues = Array.from(
+        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+      );
+
+      setValue(
+        name as string,
+        filteredUniqueValues.toString().replace(/\s/g, ''),
+        {
+          shouldValidate: true,
+          shouldDirty: true,
+        }
+      );
+      setLocalValue('');
+    }
+    setIsFocussed(false);
+  };
+
+  useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+
+  return (
+    <Box position="relative">
+      <Flex
+        fontSize="13px"
+        border={isFocussed ? '2px solid' : '1px solid'}
+        borderColor={isFocussed ? colors.border.focus : colors.border.default}
+        py="5px"
+        pl="8px"
+        borderRadius="4px"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={() => {
+          if (!disabled) {
+            inputRef.current?.focus();
+          }
+        }}
+        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        ref={inputWrapperRef}
+        h="26px"
+      >
         <Flex
-          fontSize="13px"
-          border={isFocussed ? '2px solid' : '1px solid'}
-          borderColor={isFocussed ? colors.border.focus : colors.border.default}
-          py="5px"
-          pl="8px"
-          borderRadius="4px"
+          h="18px"
           alignItems="center"
-          justifyContent="space-between"
-          onClick={() => {
-            if (!disabled) {
-              inputRef.current?.focus();
-            }
+          // width="fit-content"
+          // maxW="80%"
+          overflowX="scroll"
+          style={{
+            scrollbarWidth: 'none' /* Firefox */,
+            msOverflowStyle: 'none',
           }}
-          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          ref={inputWrapperRef}
+          sx={{
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+          }}
+          ref={scrollRef}
         >
-          <Flex
-            height="28px"
-            alignItems="center"
-            width="fit-content"
-            maxW="80%"
-            overflowX="auto"
-            style={{
-              scrollbarWidth: 'none' /* Firefox */,
-            }}
-          >
-            {lastestFormValueToArray.length ? (
-              lastestFormValueToArray.map((label, index) => (
-                <Box
-                  mr="4px"
-                  border={
-                    tokenIndex === index
-                      ? `2px solid ${colors.border.focus}`
-                      : 'none'
-                  }
-                  borderRadius="full"
-                  onClick={() => setTokenIndex(index)}
-                  width="100%"
-                >
-                  <Token
-                    label={label}
-                    onDelete={(e: any) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      onRemoveTag(index);
-                    }}
-                  />
-                </Box>
-              ))
-            ) : (
-              <Text color={colors.label.secondary.light} fontSize="13px">
-                {placeholder}
-              </Text>
-            )}
-          </Flex>
-          <Flex flex={1}>
-            <Input
-              onKeyDown={onHandleKeyDown}
-              type="text"
-              padding={0}
-              width="100%"
-              border="none"
-              height="26px"
-              color={tokenIndex !== null ? 'transparent' : colors.label.primary}
-              _focus={{ boxShadow: 'none !important' }}
-              value={localValue}
-              onChange={e =>
-                tokenIndex === null && setLocalValue(e.target.value)
-              }
-              ref={inputRef}
-              onFocus={() => setIsFocussed(true)}
-            />
-          </Flex>
+          {lastestFormValueToArray.length ? (
+            lastestFormValueToArray.map((label, index) => (
+              <Box
+                mr="4px"
+                border={
+                  tokenIndex === index
+                    ? `1px solid ${colors.border.focus}`
+                    : 'none'
+                }
+                borderRadius="full"
+                onClick={() => setTokenIndex(index)}
+                width="100%"
+              >
+                <Token
+                  label={label}
+                  onDelete={(e: any) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    onRemoveTag(index);
+                  }}
+                />
+              </Box>
+            ))
+          ) : (
+            <Text color={colors.label.secondary.light} fontSize="13px">
+              {placeholder}
+            </Text>
+          )}
         </Flex>
-      </Box>
-    );
-  }
-);
+        <Flex flex={1}>
+          <Input
+            onKeyDown={onHandleKeyDown}
+            type="text"
+            padding={0}
+            width="100%"
+            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)}
+            ref={inputRef}
+            onFocus={() => setIsFocussed(true)}
+            onBlur={() => setIsFocussed(false)}
+          />
+        </Flex>
+      </Flex>
+    </Box>
+  );
+});
 
 export default StackedPilledInput;

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Box,
   Image,
@@ -30,11 +30,24 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     { isRequired, options, name, setValue, handleOnChange, value, ...props },
     _ref
   ) => {
-    const dropdownRef = useRef(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const dropdownMenuRef = useRef<HTMLDivElement>(null);
+
     const [isFocussed, setIsFocussed] = useState(false);
     const [selectedOption, setSelectedOption] = useState(
       options.find(option => option.value === value)?.label ?? ''
     );
+    const [position, setPosition] = useState<'top' | 'bottom'>('top');
+
+    useEffect(() => {
+      const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+
+      if (document.body.clientHeight - (boundingClientRect?.y + 240) >= 0) {
+        setPosition('top');
+      } else {
+        setPosition('bottom');
+      }
+    }, [dropdownRef]);
 
     useDidMountEffect(() => {
       setSelectedOption(
@@ -71,6 +84,23 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             textShadow={`0 0 0 ${colors.label.primary.light}`}
             value={selectedOption}
             autoComplete="off"
+            onKeyDown={e => {
+              if (isFocussed) {
+                if (e.key === 'Tab') {
+                  return setIsFocussed(false);
+                }
+
+                const idx = options.findIndex(
+                  option => option.label[0].toLocaleLowerCase() === e.key
+                );
+                console.log(idx);
+
+                dropdownMenuRef.current?.scrollTo({
+                  top: idx * 27,
+                  behavior: 'smooth',
+                });
+              }
+            }}
           />
           <InputRightElement
             cursor="pointer"
@@ -81,6 +111,8 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         </InputGroup>
         {isFocussed && (
           <Dropdown
+            position={position}
+            dropdownRef={dropdownMenuRef}
             onSelectItem={option => handleOnSelectItem(option)}
             options={options}
           />

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Switch, SwitchProps } from '@chakra-ui/react';
+import colors from '../../../theme/foundations/colors';
 
 export interface StackedSwitchProps extends SwitchProps {}
 
@@ -8,9 +9,16 @@ export interface StackedSwitchProps extends SwitchProps {}
  */
 const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
   ({ isRequired, onChange, value }, _ref) => {
+    if (value === null) return null;
+
     return (
       <Switch
-        size="lg"
+        h="26px"
+        mx="4px"
+        _focus={{
+          border: '2px solid',
+          borderColor: colors.border.focus,
+        }}
         ref={_ref}
         isRequired={isRequired}
         value={String(value)}

package/src/components/input/StackedTextarea/StackedTextarea.tsx

@@ -11,7 +11,7 @@ const StackedTextarea = React.forwardRef<
   HTMLTextAreaElement,
   StackedTextareaProps
 >(({ ...props }, _ref) => {
-  return <Textarea ref={_ref} {...props} />;
+  return <Textarea ref={_ref} {...props} fontSize="13px" />;
 });
 
 export default StackedTextarea;

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

@@ -1,11 +1,13 @@
-import React, { useMemo } from 'react';
-import { Box } from '@chakra-ui/react';
+import React, { RefObject, useMemo } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
 import { FieldOption, FieldOptions } from '../../InputTypes';
 
 export interface DropdownProps {
   onSelectItem: (option: FieldOption) => void;
   options: FieldOptions;
+  dropdownRef: RefObject<HTMLDivElement>;
+  position: 'top' | 'bottom';
 }
 
 /**
@@ -14,6 +16,8 @@ export interface DropdownProps {
 export const Dropdown: React.FC<DropdownProps> = ({
   onSelectItem,
   options,
+  dropdownRef,
+  position,
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
@@ -24,12 +28,15 @@ export const Dropdown: React.FC<DropdownProps> = ({
             <Box
               color={colors.label.secondary.light}
               fontSize="13px"
+              width="fit-content"
               fontWeight="bold"
               px="8px"
               bg="inherit"
+              whiteSpace="nowrap"
             >
               {idx > 0 && (
                 <Box
+                  width="100%"
                   my="3px"
                   borderTop="2px solid"
                   borderColor={colors.border.default}
@@ -47,13 +54,16 @@ export const Dropdown: React.FC<DropdownProps> = ({
             fontSize="13px"
             px="8px"
             py="4px"
+            width="fit-content"
             color={colors.label.primary.light}
             _hover={{
               color: colors.label.primary.dark,
               bg: colors.fill.action,
               borderRadius: '4px',
+              width: '100%',
             }}
             bg="inherit"
+            whiteSpace="nowrap"
           >
             {option.label}
           </Box>
@@ -63,7 +73,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
   }, [onSelectItem, options]);
 
   return (
-    <Box
+    <Flex
+      flexDirection="column"
+      ref={dropdownRef}
+      scrollMargin="15px"
       bg={colors.fill.light.quaternary}
       backdropFilter="auto"
       backdropBlur="64px"
@@ -71,15 +84,19 @@ export const Dropdown: React.FC<DropdownProps> = ({
       border="0.25px solid"
       borderColor={colors.fill.light.tertiary}
       mt="3px"
-      maxH="320px"
+      maxH="240px"
       overflowY="auto"
       px="8px"
       py="4px"
       position="absolute"
-      width="100%"
+      top={position === 'top' ? 26 : undefined}
+      bottom={position === 'bottom' ? 30 : undefined}
+      width="fit-content"
+      minWidth="100%"
       zIndex={100}
+      tabIndex={-2000}
     >
       {DropdownContent}
-    </Box>
+    </Flex>
   );
 };