@xqmsg/ui-core 0.14.1 → 0.14.2

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

@@ -4,6 +4,8 @@ import { InputFieldProps } from '../InputTypes';
 import {
   Control,
   FieldValues,
+  UseFormClearErrors,
+  UseFormSetError,
   UseFormSetValue,
   useWatch,
 } from 'react-hook-form';
@@ -12,7 +14,11 @@ import Token from '../components/token';
 
 export interface StackedPilledInputProps extends InputFieldProps {
   setValue: UseFormSetValue<FieldValues>;
+  setError: UseFormSetError<FieldValues>;
+  clearErrors: UseFormClearErrors<FieldValues>;
   control: Control<FieldValues, any>;
+  // Number of allowed options
+  maxLength?: number;
 }
 
 /**
@@ -21,94 +27,87 @@ export interface StackedPilledInputProps extends InputFieldProps {
 const StackedPilledInput = React.forwardRef<
   HTMLInputElement,
   StackedPilledInputProps
->(({ name, setValue, control, placeholder, disabled }, _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([]);
-    }
-
-    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 (
-        e.key === 'Enter' &&
-        !localValue.trim().length &&
-        tokenIndex !== null
-      ) {
-        setLocalValue(lastestFormValueToArray[tokenIndex]);
+>(
+  (
+    {
+      name,
+      setValue,
+      control,
+      placeholder,
+      disabled,
+      maxLength,
+      setError,
+      clearErrors,
+    },
+    _ref
+  ) => {
+    const watchedValue = useWatch({ control, name: name as string });
+    const [lastestFormValueToArray, setLatestFormValueToArray] = useState<
+      string[]
+    >([]);
 
-        const filteredUniqueValues = Array.from(
-          new Set(
-            lastestFormValueToArray.filter(
-              value => value !== lastestFormValueToArray[tokenIndex]
-            )
-          )
-        );
+    const inputRef = useRef<HTMLInputElement>(null);
+    const inputWrapperRef = useRef(null);
 
-        setValue(
-          name as string,
-          filteredUniqueValues.toString().replace(/\s/g, ''),
-          {
-            shouldValidate: true,
-            shouldDirty: true,
-          }
-        );
+    const [tokenIndex, setTokenIndex] = useState<number | null>(null);
+    const [isFocussed, setIsFocussed] = useState(false);
+
+    const [localValue, setLocalValue] = useState('');
 
-        return setTokenIndex(null);
+    // gets latest watched form value (common delimited) from RHF state and creates a list
+    useEffect(() => {
+      if (watchedValue !== undefined && !watchedValue.length) {
+        setLatestFormValueToArray([]);
       }
 
-      const filteredUniqueValues = Array.from(
-        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
-      );
+      if (watchedValue !== undefined && watchedValue?.length) {
+        setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+      }
+    }, [watchedValue]);
 
-      setLocalValue('');
+    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`,
+          });
+        }
 
-      return setValue(
-        name as string,
-        filteredUniqueValues.toString().replace(/\s/g, ''),
-        {
-          shouldValidate: true,
-          shouldDirty: true,
+        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);
         }
-      );
-    }
-
-    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]
-            )
-          )
+          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
         );
 
-        setValue(
+        setLocalValue('');
+
+        return setValue(
           name as string,
           filteredUniqueValues.toString().replace(/\s/g, ''),
           {
@@ -116,54 +115,69 @@ const StackedPilledInput = React.forwardRef<
             shouldDirty: true,
           }
         );
-
-        return setTokenIndex(null);
       }
 
-      if (e.key === 'ArrowLeft') {
-        if (tokenIndex === 0) return;
-
-        if (!tokenIndex) {
-          return setTokenIndex(lastestFormValueToArray.length - 1);
-        }
+      if (!localValue.trim().length && lastestFormValueToArray.length) {
+        if (e.key === 'Backspace' && tokenIndex !== null) {
+          setLocalValue(
+            lastestFormValueToArray[tokenIndex].substring(
+              0,
+              lastestFormValueToArray[tokenIndex].length
+            )
+          );
 
-        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
-      }
+          const filteredUniqueValues = Array.from(
+            new Set(
+              [...lastestFormValueToArray].filter(
+                value => value !== lastestFormValueToArray[tokenIndex]
+              )
+            )
+          );
 
-      if (e.key === 'ArrowRight') {
-        if (tokenIndex === null) return;
+          setValue(
+            name as string,
+            filteredUniqueValues.toString().replace(/\s/g, ''),
+            {
+              shouldValidate: true,
+              shouldDirty: true,
+            }
+          );
 
-        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
-    );
+        if (e.key === 'ArrowLeft') {
+          if (tokenIndex === 0) return;
+
+          if (!tokenIndex) {
+            return setTokenIndex(lastestFormValueToArray.length - 1);
+          }
 
-    setLatestFormValueToArray(filteredUniqueValues);
+          return setTokenIndex(
+            prevTokenIndex => (prevTokenIndex as number) - 1
+          );
+        }
+
+        if (e.key === 'ArrowRight') {
+          if (tokenIndex === null) return;
 
-    setValue(
-      name as string,
-      filteredUniqueValues.toString().replace(/\s/g, ''),
-      {
-        shouldValidate: true,
-        shouldDirty: true,
+          if (tokenIndex === lastestFormValueToArray.length - 1) {
+            return setTokenIndex(null);
+          }
+          return setTokenIndex(
+            prevTokenIndex => (prevTokenIndex as number) + 1
+          );
+        }
       }
-    );
-  };
+    };
 
-  const onBlur = () => {
-    if (localValue.trim()) {
-      const filteredUniqueValues = Array.from(
-        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+    const onRemoveTag = (index: number) => {
+      const filteredUniqueValues = lastestFormValueToArray.filter(
+        (_, i) => i !== index
       );
 
+      setLatestFormValueToArray(filteredUniqueValues);
+
       setValue(
         name as string,
         filteredUniqueValues.toString().replace(/\s/g, ''),
@@ -172,92 +186,118 @@ const StackedPilledInput = React.forwardRef<
           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();
+    };
+
+    const onBlur = () => {
+      clearErrors(name);
+
+      if (localValue.trim()) {
+        if (
+          maxLength &&
+          watchedValue.length + localValue.trim().length > maxLength
+        )
+          return setLocalValue('');
+
+        const filteredUniqueValues = Array.from(
+          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+        );
+
+        setValue(
+          name as string,
+          filteredUniqueValues.toString().replace(/\s/g, ''),
+          {
+            shouldValidate: true,
+            shouldDirty: true,
           }
-        }}
-        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-        cursor={disabled ? 'not-allowed' : 'pointer'}
-        ref={inputWrapperRef}
-      >
+        );
+        setLocalValue('');
+      }
+      setIsFocussed(false);
+    };
+
+    useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+
+    return (
+      <Box position="relative">
         <Flex
-          height="28px"
+          fontSize="13px"
+          border={isFocussed ? '2px solid' : '1px solid'}
+          borderColor={isFocussed ? colors.border.focus : colors.border.default}
+          py="5px"
+          pl="8px"
+          borderRadius="4px"
           alignItems="center"
-          // width="fit-content"
-          // maxW="70%"
-          overflowX="auto"
-          style={{
-            scrollbarWidth: 'none' /* Firefox */,
+          justifyContent="space-between"
+          onClick={() => {
+            if (!disabled) {
+              inputRef.current?.focus();
+            }
           }}
+          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+          cursor={disabled ? 'not-allowed' : 'pointer'}
+          ref={inputWrapperRef}
         >
-          {lastestFormValueToArray.length ? (
-            lastestFormValueToArray.map((label, index) => (
-              <Box
-                mr="4px"
-                border={
-                  tokenIndex === index
-                    ? `2px solid ${colors.border.focus}`
-                    : 'none'
-                }
-                borderRadius="full"
-                onClick={() => setTokenIndex(index)}
-                // width="fit-content"
-                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
+            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>
         </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>
-      </Flex>
-    </Box>
-  );
-});
+      </Box>
+    );
+  }
+);
 
 export default StackedPilledInput;

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

@@ -26,6 +26,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
               fontSize="13px"
               fontWeight="bold"
               px="8px"
+              bg="inherit"
             >
               {idx > 0 && (
                 <Box
@@ -52,6 +53,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
               bg: colors.fill.action,
               borderRadius: '4px',
             }}
+            bg="inherit"
           >
             {option.label}
           </Box>
@@ -63,8 +65,11 @@ export const Dropdown: React.FC<DropdownProps> = ({
   return (
     <Box
       bg={colors.fill.light.quaternary}
-      backdropFilter="blur(64px)"
+      backdropFilter="auto"
+      backdropBlur="64px"
       borderRadius="4px"
+      border="0.25px solid"
+      borderColor={colors.fill.light.tertiary}
       mt="3px"
       maxH="320px"
       overflowY="auto"
@@ -72,7 +77,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
       py="4px"
       position="absolute"
       width="100%"
-      zIndex="100"
+      zIndex={100}
     >
       {DropdownContent}
     </Box>

package/src/components/input/components/token/assets/svg/close.svg

@@ -1,3 +1,3 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg  viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M27.9995 56C43.4635 56 55.9995 43.464 55.9995 28C55.9995 12.536 43.4635 0 27.9995 0C12.5355 0 -0.000488281 12.536 -0.000488281 28C-0.000488281 43.464 12.5355 56 27.9995 56ZM21.9807 18.2688C20.9555 17.2437 19.2935 17.2437 18.2684 18.2688C17.2432 19.294 17.2432 20.956 18.2684 21.9812L24.2872 28L18.2684 34.0188C17.2432 35.044 17.2432 36.706 18.2684 37.7312C19.2935 38.7563 20.9555 38.7563 21.9807 37.7312L27.9995 31.7123L34.0184 37.7312C35.0435 38.7563 36.7055 38.7563 37.7307 37.7312C38.7558 36.706 38.7558 35.044 37.7307 34.0188L31.7118 28L37.7307 21.9812C38.7558 20.956 38.7558 19.294 37.7307 18.2688C36.7055 17.2437 35.0435 17.2437 34.0184 18.2688L27.9995 24.2877L21.9807 18.2688Z" fill="#3C3C43" fill-opacity="0.6"/>
 </svg>

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

@@ -1,7 +1,8 @@
-import { Flex, Image, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
+import { truncate } from 'lodash';
 import React from 'react';
 import colors from '../../../../../src/theme/foundations/colors';
-import CloseIcon from './assets/svg/close.svg';
+import { ReactComponent as CloseIcon } from './assets/svg/close.svg';
 
 export interface TokenProps {
   label: any;
@@ -15,18 +16,23 @@ const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
       borderRadius="full"
       backgroundColor="#7676801F"
       alignItems="center"
-      // width="100%"
+      width="fit-content"
+      w="auto"
+      h="auto"
       pl="8px"
       pr="4px"
       py="2px"
+      position="relative"
     >
-      <Text color={colors.label.primary.light} fontSize="13px">
-        {label}
+      <Text color={colors.label.primary.light} fontSize="13px" pr="4px">
+        {truncate(label.trim(), {
+          length: 15,
+          omission: '...',
+        })}
       </Text>
-      <Image
-        pl="4px"
-        boxSize="16px"
-        src={CloseIcon}
+      <CloseIcon
+        width="13px"
+        height="13px"
         onClick={onDelete}
         cursor="pointer"
       />

package/src/components/input/index.tsx

@@ -17,6 +17,8 @@ import {
   Path,
   PathValue,
   RefCallBack,
+  UseFormClearErrors,
+  UseFormSetError,
   UseFormSetValue,
 } from 'react-hook-form';
 import StackedMultiSelect from './StackedMultiSelect';
@@ -39,6 +41,8 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   onChange?: (value?: string) => void;
   disabled?: boolean;
   setValue: UseFormSetValue<T>;
+  setError: UseFormSetError<T>;
+  clearErrors: UseFormClearErrors<T>;
 }
 
 /**
@@ -63,6 +67,8 @@ export function Input<T extends FieldValues>({
   disabled,
   onChange,
   setValue,
+  setError,
+  clearErrors,
 }: InputProps<T>) {
   const selectedInputField = (
     onChange: () => void,
@@ -169,7 +175,10 @@ export function Input<T extends FieldValues>({
             value={value}
             setValue={setValue as UseFormSetValue<FieldValues>}
             control={control as Control<FieldValues, any>}
+            setError={setError as UseFormSetError<FieldValues>}
+            clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
             placeholder={placeholder}
+            maxLength={maxLength}
           />
         );
       case 'pilled-text':
@@ -186,7 +195,10 @@ export function Input<T extends FieldValues>({
             disabled={disabled}
             value={value}
             setValue={setValue as UseFormSetValue<FieldValues>}
+            setError={setError as UseFormSetError<FieldValues>}
+            clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
             control={control as Control<FieldValues, any>}
+            maxLength={maxLength}
           />
         );
       case 'switch':