@xqmsg/ui-core 0.23.1-rc.3 → 0.23.1

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

@@ -1,375 +1,386 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Box, Flex, Input, Text, useOutsideClick } from '@chakra-ui/react';
-import { InputFieldProps } from '../InputTypes';
-import {
-  Control,
-  FieldValues,
-  UseFormClearErrors,
-  UseFormSetError,
-  UseFormSetValue,
-  useWatch,
-} from 'react-hook-form';
-import colors from '../../../theme/foundations/colors';
-import Token from '../components/token';
-
-export interface StackedPilledInputProps extends InputFieldProps {
-  setValue: UseFormSetValue<FieldValues>;
-  setError: UseFormSetError<FieldValues>;
-  clearErrors: UseFormClearErrors<FieldValues>;
-  control: Control<FieldValues, any>;
-  separators?: string[];
-  variant?: string;
-  label?: string;
-}
-
-/**
- * A functional React component utilized to render the `StackedPilledInput` component.
- */
-const StackedPilledInput = React.forwardRef<
-  HTMLInputElement,
-  StackedPilledInputProps
->(
-  (
-    {
-      name,
-      setValue,
-      control,
-      placeholder,
-      disabled,
-      separators = ['Enter', ' ', ',', ';', 'Tab'],
-      variant,
-      label,
-    },
-    _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 [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) {
-        setLatestFormValueToArray([]);
-      }
-
-      if (watchedValue !== undefined && watchedValue?.length) {
-        setLatestFormValueToArray(
-          watchedValue.split(';').join(',').split(',').filter(Boolean)
-        );
-
-        if (latestTokenElement) {
-          latestTokenElement.scrollIntoView({
-            block: 'end',
-            inline: 'center',
-            behavior: 'smooth',
-          });
-        }
-      }
-    }, [latestTokenElement, watchedValue]);
-
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (tokenIndex === null) {
-        setLocalValue(
-          e.target.value.trim().replace(',', '').replace(';', '').length
-            ? e.target.value
-            : ''
-        );
-      }
-    };
-
-    const onHandleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-
-      if (separators.includes(e.key)) {
-        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(), {
-            shouldValidate: true,
-            shouldDirty: true,
-          });
-
-          return setTokenIndex(null);
-        }
-
-        const filteredUniqueValues = Array.from(
-          new Set([
-            ...lastestFormValueToArray,
-            ...localValue.trim().split(';').join(',').split(','),
-          ])
-        );
-
-        setLocalValue('');
-
-        return setValue(name as string, filteredUniqueValues.toString(), {
-          shouldValidate: true,
-          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(), {
-            shouldValidate: true,
-            shouldDirty: true,
-          });
-
-          return setTokenIndex(null);
-        }
-
-        if (e.key === 'ArrowLeft') {
-          if (tokenIndex === 0) return;
-
-          if (!tokenIndex) {
-            return setTokenIndex(lastestFormValueToArray.length - 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') {
-          if (tokenIndex === null) return;
-
-          if (tokenIndex === lastestFormValueToArray.length - 1) {
-            return setTokenIndex(null);
-          }
-          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',
-          });
-        }
-      }
-    };
-
-    const onRemoveTag = (index: number) => {
-      const filteredUniqueValues = lastestFormValueToArray.filter(
-        (_, i) => i !== index
-      );
-
-      setLatestFormValueToArray(filteredUniqueValues);
-
-      setValue(name as string, filteredUniqueValues.toString(), {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-    };
-
-    const onBlur = () => {
-      if (localValue.trim().length) {
-        const filteredUniqueValues = Array.from(
-          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
-        );
-
-        setValue(name as string, filteredUniqueValues.toString(), {
-          shouldValidate: true,
-          shouldDirty: true,
-        });
-        setLocalValue('');
-      }
-      setIsFocussed(false);
-    };
-
-    useOutsideClick({
-      ref: inputWrapperRef,
-      handler: () => {
-        onBlur();
-      },
-    });
-    const isMobile = variant === 'mobile';
-
-    return (
-      <Box position="relative">
-        <Flex
-          fontSize={isMobile ? '17px' : '13px'}
-          border={isFocussed ? '2px solid' : '.5px solid'}
-          borderColor={isFocussed ? colors.border.focus : colors.border.default}
-          pl="8px"
-          borderRadius={isMobile ? '0' : '4px'}
-          alignItems="center"
-          justifyContent="space-between"
-          style={
-            isMobile
-              ? {
-                  cursor: 'pointer',
-                  height: '48px',
-                  fontSize: '17px',
-                  lineHeight: '20px',
-                  fontWeight: 400,
-                  padding: '12px 16px 12px 0px',
-                  borderRadius: 0,
-                  border: '0.5px solid rgba(153, 153, 153, 0.1)',
-                  borderLeft: 'none',
-                  borderRight: 'none',
-                }
-              : undefined
-          }
-          onClick={() => {
-            if (isFocussed && tokenIndex !== null) {
-              setTokenIndex(null);
-            }
-
-            if (!disabled) {
-              inputRef.current?.focus();
-            }
-          }}
-          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          ref={inputWrapperRef}
-          h={isMobile ? '48px' : '26px'}
-        >
-          <Flex
-            h="100%"
-            alignItems="center"
-            overflowX="scroll"
-            overflowY="hidden"
-            maxWidth={isFocussed ? '80%' : '100%'}
-            style={{
-              scrollbarWidth: 'none' /* Firefox */,
-              msOverflowStyle: 'none',
-            }}
-            sx={{
-              '::-webkit-scrollbar': {
-                display: 'none',
-              },
-            }}
-            ref={scrollRef}
-            zIndex={100}
-            onKeyDown={onHandleKeyDown}
-          >
-            {lastestFormValueToArray.length
-              ? lastestFormValueToArray.map((label, index) => (
-                  <Box
-                    key={index}
-                    mr="4px"
-                    border={
-                      tokenIndex === index
-                        ? `1px solid ${colors.border.focus}`
-                        : 'none'
-                    }
-                    borderRadius="full"
-                    onClick={() => setTokenIndex(index)}
-                    width="100%"
-                    id={`${name}_token_${index}`}
-                  >
-                    <Token
-                      label={label}
-                      onDelete={(e: any) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        onRemoveTag(index);
-                      }}
-                      isMobile={isMobile}
-                    />
-                  </Box>
-                ))
-              : null}
-            {!lastestFormValueToArray.length && !isFocussed ? (
-              <Text
-                color={colors.label.secondary.light}
-                fontSize={isMobile ? '17px' : '13px'}
-              >
-                {placeholder}
-              </Text>
-            ) : null}
-          </Flex>
-          {!disabled && (
-            <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
-              <Input
-                onKeyDown={onHandleKeyDown}
-                type="text"
-                padding={0}
-                alignContent="flex-start"
-                float="right"
-                border="none"
-                height="auto"
-                color={
-                  tokenIndex !== null ? 'transparent' : colors.label.primary
-                }
-                _focus={{ boxShadow: 'none !important' }}
-                value={localValue}
-                onChange={handleOnChange}
-                ref={inputRef}
-                onFocus={() => setIsFocussed(true)}
-                onBlur={() => {
-                  setIsFocussed(false);
-                  return setTokenIndex(null);
-                }}
-                placeholder={
-                  isMobile && label && lastestFormValueToArray.length === 0
-                    ? (label as string)
-                    : ''
-                }
-                variant={variant}
-                style={isMobile ? { border: 'none' } : undefined}
-              />
-            </Flex>
-          )}
-        </Flex>
-      </Box>
-    );
-  }
-);
-
-export default StackedPilledInput;
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Flex, Input, Text, useOutsideClick } from '@chakra-ui/react';
+import { InputFieldProps } from '../InputTypes';
+import {
+  Control,
+  FieldValues,
+  UseFormClearErrors,
+  UseFormSetError,
+  UseFormSetValue,
+  useWatch,
+} from 'react-hook-form';
+import colors from '../../../theme/foundations/colors';
+import Token from '../components/token';
+
+export interface StackedPilledInputProps extends InputFieldProps {
+  setValue: UseFormSetValue<FieldValues>;
+  setError: UseFormSetError<FieldValues>;
+  clearErrors: UseFormClearErrors<FieldValues>;
+  control: Control<FieldValues, any>;
+  separators?: string[];
+  variant?: string;
+  label?: string;
+}
+
+/**
+ * A functional React component utilized to render the `StackedPilledInput` component.
+ */
+const StackedPilledInput = React.forwardRef<
+  HTMLInputElement,
+  StackedPilledInputProps
+>(
+  (
+    {
+      name,
+      setValue,
+      control,
+      placeholder,
+      disabled,
+      separators = ['Enter', ' ', ',', ';', 'Tab'],
+      variant,
+      label,
+    },
+    _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 [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) {
+        setLatestFormValueToArray([]);
+      }
+
+      if (watchedValue !== undefined && watchedValue?.length) {
+        setLatestFormValueToArray(
+          watchedValue
+            .split(';')
+            .join(',')
+            .split(',')
+            .filter(Boolean)
+        );
+
+        if (latestTokenElement) {
+          latestTokenElement.scrollIntoView({
+            block: 'end',
+            inline: 'center',
+            behavior: 'smooth',
+          });
+        }
+      }
+    }, [latestTokenElement, watchedValue]);
+
+    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (tokenIndex === null) {
+        setLocalValue(
+          e.target.value
+            .trim()
+            .replace(',', '')
+            .replace(';', '').length
+            ? e.target.value
+            : ''
+        );
+      }
+    };
+
+    const onHandleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+
+      if (separators.includes(e.key)) {
+        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(), {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+
+          return setTokenIndex(null);
+        }
+
+        const filteredUniqueValues = Array.from(
+          new Set([
+            ...lastestFormValueToArray,
+            ...localValue
+              .trim()
+              .split(';')
+              .join(',')
+              .split(','),
+          ])
+        );
+
+        setLocalValue('');
+
+        return setValue(name as string, filteredUniqueValues.toString(), {
+          shouldValidate: true,
+          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(), {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+
+          return setTokenIndex(null);
+        }
+
+        if (e.key === 'ArrowLeft') {
+          if (tokenIndex === 0) return;
+
+          if (!tokenIndex) {
+            return setTokenIndex(lastestFormValueToArray.length - 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') {
+          if (tokenIndex === null) return;
+
+          if (tokenIndex === lastestFormValueToArray.length - 1) {
+            return setTokenIndex(null);
+          }
+          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',
+          });
+        }
+      }
+    };
+
+    const onRemoveTag = (index: number) => {
+      const filteredUniqueValues = lastestFormValueToArray.filter(
+        (_, i) => i !== index
+      );
+
+      setLatestFormValueToArray(filteredUniqueValues);
+
+      setValue(name as string, filteredUniqueValues.toString(), {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    };
+
+    const onBlur = () => {
+      if (localValue.trim().length) {
+        const filteredUniqueValues = Array.from(
+          new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+        );
+
+        setValue(name as string, filteredUniqueValues.toString(), {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+        setLocalValue('');
+      }
+      setIsFocussed(false);
+    };
+
+    useOutsideClick({
+      ref: inputWrapperRef,
+      handler: () => {
+        onBlur();
+      },
+    });
+    const isMobile = variant === 'mobile';
+
+    return (
+      <Box position="relative">
+        <Flex
+          fontSize={isMobile ? '17px' : '13px'}
+          border={isFocussed ? '2px solid' : '.5px solid'}
+          borderColor={isFocussed ? colors.border.focus : colors.border.default}
+          pl="8px"
+          borderRadius={isMobile ? '0' : '4px'}
+          alignItems="center"
+          justifyContent="space-between"
+          style={
+            isMobile
+              ? {
+                  cursor: 'pointer',
+                  height: '48px',
+                  fontSize: '17px',
+                  lineHeight: '20px',
+                  fontWeight: 400,
+                  padding: '12px 16px 12px 0px',
+                  borderRadius: 0,
+                  border: '0.5px solid rgba(153, 153, 153, 0.1)',
+                  borderLeft: 'none',
+                  borderRight: 'none',
+                }
+              : undefined
+          }
+          onClick={() => {
+            if (isFocussed && tokenIndex !== null) {
+              setTokenIndex(null);
+            }
+
+            if (!disabled) {
+              inputRef.current?.focus();
+            }
+          }}
+          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+          cursor={disabled ? 'not-allowed' : 'pointer'}
+          ref={inputWrapperRef}
+          h={isMobile ? '48px' : '26px'}
+        >
+          <Flex
+            h="100%"
+            alignItems="center"
+            overflowX="scroll"
+            overflowY="hidden"
+            maxWidth={isFocussed ? '80%' : '100%'}
+            style={{
+              scrollbarWidth: 'none' /* Firefox */,
+              msOverflowStyle: 'none',
+            }}
+            sx={{
+              '::-webkit-scrollbar': {
+                display: 'none',
+              },
+            }}
+            ref={scrollRef}
+            zIndex={100}
+            onKeyDown={onHandleKeyDown}
+          >
+            {lastestFormValueToArray.length
+              ? lastestFormValueToArray.map((label, index) => (
+                  <Box
+                    key={index}
+                    mr="4px"
+                    border={
+                      tokenIndex === index
+                        ? `1px solid ${colors.border.focus}`
+                        : 'none'
+                    }
+                    borderRadius="full"
+                    onClick={() => setTokenIndex(index)}
+                    width="100%"
+                    id={`${name}_token_${index}`}
+                  >
+                    <Token
+                      label={label}
+                      onDelete={(e: any) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onRemoveTag(index);
+                      }}
+                      isMobile={isMobile}
+                    />
+                  </Box>
+                ))
+              : null}
+            {!lastestFormValueToArray.length && !isFocussed ? (
+              <Text
+                color={colors.label.secondary.light}
+                fontSize={isMobile ? '17px' : '13px'}
+              >
+                {placeholder}
+              </Text>
+            ) : null}
+          </Flex>
+          {!disabled && (
+            <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
+              <Input
+                onKeyDown={onHandleKeyDown}
+                type="text"
+                padding={0}
+                alignContent="flex-start"
+                float="right"
+                border="none"
+                height="auto"
+                color={
+                  tokenIndex !== null ? 'transparent' : colors.label.primary
+                }
+                _focus={{ boxShadow: 'none !important' }}
+                value={localValue}
+                onChange={handleOnChange}
+                ref={inputRef}
+                onFocus={() => setIsFocussed(true)}
+                onBlur={() => {
+                  setIsFocussed(false);
+                  return setTokenIndex(null);
+                }}
+                placeholder={
+                  isMobile && label && lastestFormValueToArray.length === 0
+                    ? (label as string)
+                    : ''
+                }
+                variant={variant}
+                style={isMobile ? { border: 'none' } : undefined}
+              />
+            </Flex>
+          )}
+        </Flex>
+      </Box>
+    );
+  }
+);
+
+export default StackedPilledInput;