@xqmsg/ui-core 0.23.2 → 0.24.0

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

@@ -1,349 +1,349 @@
-import React, {
-  KeyboardEventHandler,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Box, Flex, Text, Input } from '@chakra-ui/react';
-import { debounce } from 'lodash';
-import {
-  FieldOption,
-  FieldOptions,
-  ReactSelectFieldProps,
-} from '../InputTypes';
-import colors from '../../../theme/foundations/colors';
-import {
-  Control,
-  FieldValues,
-  UseFormClearErrors,
-  UseFormSetError,
-  UseFormSetValue,
-  useWatch,
-} from 'react-hook-form';
-import { Dropdown as DropdownIcon } from '../../icons/dropdown';
-import { Dropdown } from '../components/dropdown';
-import Token from '../components/token';
-import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
-
-export interface StackedMultiSelectProps extends ReactSelectFieldProps {
-  options: FieldOptions;
-  setValue: UseFormSetValue<FieldValues>;
-  setError: UseFormSetError<FieldValues>;
-  clearErrors: UseFormClearErrors<FieldValues>;
-  control: Control<FieldValues, any>;
-}
-
-/**
- * A functional React component utilized to render the `StackedMultiSelect` component.
- */
-const StackedMultiSelect = React.forwardRef<
-  HTMLInputElement,
-  StackedMultiSelectProps
->(({ options, setValue, control, name, placeholder, disabled }, _ref) => {
-  const watchedValue = useWatch({ control, name: name as string });
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const dropdownMenuRef = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const [isInit, setIsInit] = useState(false);
-  const [localValues, setLocalValues] = useState<FieldOptions>([]);
-  const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
-  const [isFocussed, setIsFocussed] = useState(false);
-  const [shouldSideScroll, setShouldSideScroll] = useState(false);
-  const [optionIndex, setOptionIndex] = useState<number | null>(null);
-
-  const [position, setPosition] = useState<'top' | 'bottom'>('top');
-  const [searchValue, setSearchValue] = useState('');
-  const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
-
-  const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
-
-  useEffect(() => {
-    if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
-      setPosition('top');
-    } else {
-      setPosition('bottom');
-    }
-  }, [boundingClientRect]);
-
-  useOnClickOutside(dropdownRef, () => setIsFocussed(false));
-
-  // gets latest watched form value (common delimited) from RHF state and creates a list
-  useEffect(() => {
-    if (watchedValue !== undefined && !watchedValue.length && !isInit) {
-      setLocalValues([]);
-      setIsInit(true);
-    }
-
-    if (watchedValue !== undefined && watchedValue?.length && !isInit) {
-      if (shouldSideScroll) {
-        (scrollRef.current as HTMLDivElement).scrollTo({
-          left: scrollRef.current?.scrollWidth,
-          behavior: 'smooth',
-        });
-        setShouldSideScroll(false);
-      }
-
-      if (isInit) return;
-
-      setLocalValues(
-        watchedValue
-          .split(',')
-          .filter(Boolean)
-          .map((value: string) =>
-            options.find(option => option.value === value)
-          )
-      );
-      // Filter out options that are already selected
-      setLocalOptions(prevLocalOptions =>
-        prevLocalOptions.filter(
-          localOption =>
-            !watchedValue
-              .split(',')
-              .filter(Boolean)
-              .map((value: string) =>
-                options.find(option => option.value === value)
-              )
-              .includes(localOption)
-        )
-      );
-
-      setIsInit(true);
-    }
-  }, [
-    isInit,
-    localOptions,
-    localValues,
-    options,
-    shouldSideScroll,
-    watchedValue,
-  ]);
-
-  const handleChange = (option: FieldOption) => {
-    setShouldSideScroll(true);
-    const newValue = [...localValues, option]
-      .map(({ value }) => value)
-      .join(',');
-
-    setValue(name as string, newValue, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-
-    setLocalOptions(prevLocalOptions =>
-      prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
-    );
-
-    setLocalValues(prevLocalValues => [...prevLocalValues, option]);
-  };
-
-  const handleDelete = (option: FieldOption) => {
-    const newValue = localValues
-      .filter(localValue => localValue !== option)
-      .map(({ value }) => value)
-      .join(',');
-
-    setValue(name as string, newValue, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-
-    setLocalOptions(prevLocalOptions =>
-      [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
-    );
-
-    setLocalValues(prevLocalValues =>
-      prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
-    );
-  };
-
-  const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
-    const initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
-
-    if (
-      !isFocussed &&
-      (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
-    ) {
-      setIsFocussed(true);
-      return setOptionIndex(initialOptionIndex);
-    }
-
-    if (isFocussed) {
-      if (
-        optionIndex === null &&
-        (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
-      ) {
-        return setOptionIndex(initialOptionIndex);
-      }
-
-      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
-        const incrementValue =
-          localOptions[optionIndex - 1] &&
-          localOptions[optionIndex - 1].value === 'section_header'
-            ? 2
-            : 1;
-        setOptionIndex(optionIndex - incrementValue);
-
-        return dropdownMenuRef.current?.scrollTo({
-          top: optionIndex * 24,
-          behavior: 'smooth',
-        });
-      }
-
-      if (
-        e.key === 'ArrowDown' &&
-        optionIndex !== null &&
-        optionIndex < localOptions.length
-      ) {
-        const incrementValue =
-          localOptions[optionIndex + 1] &&
-          localOptions[optionIndex + 1].value === 'section_header'
-            ? 2
-            : 1;
-        setOptionIndex(optionIndex + incrementValue);
-
-        return dropdownMenuRef.current?.scrollTo({
-          top: optionIndex * 24,
-          behavior: 'smooth',
-        });
-      }
-
-      if (e.key === 'Enter' && optionIndex !== null) {
-        const option = localOptions.find((_, idx) => optionIndex === idx);
-        if (!option) return;
-
-        handleChange(option);
-
-        return setIsFocussed(false);
-      }
-
-      if (e.key === 'Tab') {
-        return setIsFocussed(false);
-      }
-
-      return update(debouncedSearchValue.concat(e.key));
-    }
-  };
-
-  useEffect(() => {
-    if (searchValue.length) {
-      const idx = options.findIndex(
-        option =>
-          option.label.substring(0, searchValue.length).toLowerCase() ===
-          searchValue.toLowerCase()
-      );
-
-      dropdownMenuRef.current?.scrollTo({
-        top: idx * 24,
-        behavior: 'smooth',
-      });
-
-      setSearchValue('');
-      setDebouncedSearchValue('');
-    }
-  }, [options, searchValue]);
-
-  const updateSearchValue = useMemo(() => {
-    return debounce(val => {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-
-  const update = (value: string) => {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
-  };
-
-  return (
-    <Box ref={dropdownRef} position="relative" onKeyDown={handleOnKeyDown}>
-      <Flex
-        fontSize="13px"
-        h="26px"
-        border={isFocussed ? '2px solid' : '.5px solid'}
-        borderColor={isFocussed ? colors.border.focus : colors.border.default}
-        py="5px"
-        pl="8px"
-        borderRadius="4px"
-        alignItems="center"
-        justifyContent="space-between"
-        onClick={() => {
-          if (!disabled) {
-            if (isFocussed) {
-              return setIsFocussed(false);
-            }
-
-            inputRef.current?.focus();
-            setIsFocussed(true);
-          }
-        }}
-        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-        cursor={disabled ? 'not-allowed' : 'pointer'}
-      >
-        <Flex
-          alignItems="center"
-          h="inherit"
-          width="90%"
-          overflowX="scroll"
-          style={{
-            scrollbarWidth: 'none' /* Firefox */,
-            msOverflowStyle: 'none',
-          }}
-          sx={{
-            '::-webkit-scrollbar': {
-              display: 'none',
-            },
-          }}
-          ref={scrollRef}
-        >
-          {localValues.length ? (
-            localValues.map((option, idx) => (
-              <Box
-                key={idx}
-                mr="4px"
-                width="fit-content"
-                h="16px"
-                borderRadius="full"
-              >
-                <Token
-                  label={option.label}
-                  onDelete={() => handleDelete(option)}
-                />
-              </Box>
-            ))
-          ) : (
-            <Text color={colors.label.secondary.light} fontSize="13px">
-              {placeholder}
-            </Text>
-          )}
-        </Flex>
-        <Input
-          padding={0}
-          border="none"
-          height="0"
-          width="0"
-          autoComplete="off"
-          type="text"
-          ref={inputRef}
-          tabIndex={-1}
-          _focus={{ boxShadow: 'none !important' }}
-        />
-        <Flex mr="4px" justifyContent="center" alignItems="center">
-          <DropdownIcon boxSize="16px" disabled={disabled} />
-        </Flex>
-      </Flex>
-      {isFocussed && (
-        <Dropdown
-          dropdownRef={dropdownMenuRef}
-          onSelectItem={option => handleChange(option)}
-          options={localOptions}
-          position={position}
-          optionIndex={optionIndex}
-        />
-      )}
-    </Box>
-  );
-});
-
-export default StackedMultiSelect;
+import React, {
+  KeyboardEventHandler,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Box, Flex, Text, Input } from '@chakra-ui/react';
+import { debounce } from 'lodash';
+import {
+  FieldOption,
+  FieldOptions,
+  ReactSelectFieldProps,
+} from '../InputTypes';
+import colors from '../../../theme/foundations/colors';
+import {
+  Control,
+  FieldValues,
+  UseFormClearErrors,
+  UseFormSetError,
+  UseFormSetValue,
+  useWatch,
+} from 'react-hook-form';
+import { Dropdown as DropdownIcon } from '../../icons/dropdown';
+import { Dropdown } from '../components/dropdown';
+import Token from '../components/token';
+import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
+
+export interface StackedMultiSelectProps extends ReactSelectFieldProps {
+  options: FieldOptions;
+  setValue: UseFormSetValue<FieldValues>;
+  setError: UseFormSetError<FieldValues>;
+  clearErrors: UseFormClearErrors<FieldValues>;
+  control: Control<FieldValues, any>;
+}
+
+/**
+ * A functional React component utilized to render the `StackedMultiSelect` component.
+ */
+const StackedMultiSelect = React.forwardRef<
+  HTMLInputElement,
+  StackedMultiSelectProps
+>(({ options, setValue, control, name, placeholder, disabled }, _ref) => {
+  const watchedValue = useWatch({ control, name: name as string });
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownMenuRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isInit, setIsInit] = useState(false);
+  const [localValues, setLocalValues] = useState<FieldOptions>([]);
+  const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
+  const [isFocussed, setIsFocussed] = useState(false);
+  const [shouldSideScroll, setShouldSideScroll] = useState(false);
+  const [optionIndex, setOptionIndex] = useState<number | null>(null);
+
+  const [position, setPosition] = useState<'top' | 'bottom'>('top');
+  const [searchValue, setSearchValue] = useState('');
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
+
+  const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+
+  useEffect(() => {
+    if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
+      setPosition('top');
+    } else {
+      setPosition('bottom');
+    }
+  }, [boundingClientRect]);
+
+  useOnClickOutside(dropdownRef, () => setIsFocussed(false));
+
+  // gets latest watched form value (common delimited) from RHF state and creates a list
+  useEffect(() => {
+    if (watchedValue !== undefined && !watchedValue.length && !isInit) {
+      setLocalValues([]);
+      setIsInit(true);
+    }
+
+    if (watchedValue !== undefined && watchedValue?.length && !isInit) {
+      if (shouldSideScroll) {
+        (scrollRef.current as HTMLDivElement).scrollTo({
+          left: scrollRef.current?.scrollWidth,
+          behavior: 'smooth',
+        });
+        setShouldSideScroll(false);
+      }
+
+      if (isInit) return;
+
+      setLocalValues(
+        watchedValue
+          .split(',')
+          .filter(Boolean)
+          .map((value: string) =>
+            options.find(option => option.value === value)
+          )
+      );
+      // Filter out options that are already selected
+      setLocalOptions(prevLocalOptions =>
+        prevLocalOptions.filter(
+          localOption =>
+            !watchedValue
+              .split(',')
+              .filter(Boolean)
+              .map((value: string) =>
+                options.find(option => option.value === value)
+              )
+              .includes(localOption)
+        )
+      );
+
+      setIsInit(true);
+    }
+  }, [
+    isInit,
+    localOptions,
+    localValues,
+    options,
+    shouldSideScroll,
+    watchedValue,
+  ]);
+
+  const handleChange = (option: FieldOption) => {
+    setShouldSideScroll(true);
+    const newValue = [...localValues, option]
+      .map(({ value }) => value)
+      .join(',');
+
+    setValue(name as string, newValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    setLocalOptions(prevLocalOptions =>
+      prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
+    );
+
+    setLocalValues(prevLocalValues => [...prevLocalValues, option]);
+  };
+
+  const handleDelete = (option: FieldOption) => {
+    const newValue = localValues
+      .filter(localValue => localValue !== option)
+      .map(({ value }) => value)
+      .join(',');
+
+    setValue(name as string, newValue, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    setLocalOptions(prevLocalOptions =>
+      [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
+    );
+
+    setLocalValues(prevLocalValues =>
+      prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
+    );
+  };
+
+  const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
+    const initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+
+    if (
+      !isFocussed &&
+      (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
+    ) {
+      setIsFocussed(true);
+      return setOptionIndex(initialOptionIndex);
+    }
+
+    if (isFocussed) {
+      if (
+        optionIndex === null &&
+        (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
+      ) {
+        return setOptionIndex(initialOptionIndex);
+      }
+
+      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
+        const incrementValue =
+          localOptions[optionIndex - 1] &&
+          localOptions[optionIndex - 1].value === 'section_header'
+            ? 2
+            : 1;
+        setOptionIndex(optionIndex - incrementValue);
+
+        return dropdownMenuRef.current?.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth',
+        });
+      }
+
+      if (
+        e.key === 'ArrowDown' &&
+        optionIndex !== null &&
+        optionIndex < localOptions.length
+      ) {
+        const incrementValue =
+          localOptions[optionIndex + 1] &&
+          localOptions[optionIndex + 1].value === 'section_header'
+            ? 2
+            : 1;
+        setOptionIndex(optionIndex + incrementValue);
+
+        return dropdownMenuRef.current?.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth',
+        });
+      }
+
+      if (e.key === 'Enter' && optionIndex !== null) {
+        const option = localOptions.find((_, idx) => optionIndex === idx);
+        if (!option) return;
+
+        handleChange(option);
+
+        return setIsFocussed(false);
+      }
+
+      if (e.key === 'Tab') {
+        return setIsFocussed(false);
+      }
+
+      return update(debouncedSearchValue.concat(e.key));
+    }
+  };
+
+  useEffect(() => {
+    if (searchValue.length) {
+      const idx = options.findIndex(
+        option =>
+          option.label.substring(0, searchValue.length).toLowerCase() ===
+          searchValue.toLowerCase()
+      );
+
+      dropdownMenuRef.current?.scrollTo({
+        top: idx * 24,
+        behavior: 'smooth',
+      });
+
+      setSearchValue('');
+      setDebouncedSearchValue('');
+    }
+  }, [options, searchValue]);
+
+  const updateSearchValue = useMemo(() => {
+    return debounce(val => {
+      setSearchValue(val);
+    }, 1000);
+  }, []);
+
+  const update = (value: string) => {
+    updateSearchValue(value);
+    setDebouncedSearchValue(value);
+  };
+
+  return (
+    <Box ref={dropdownRef} position="relative" onKeyDown={handleOnKeyDown}>
+      <Flex
+        fontSize="13px"
+        h="26px"
+        border={isFocussed ? '2px solid' : '.5px solid'}
+        borderColor={isFocussed ? colors.border.focus : colors.border.default}
+        py="5px"
+        pl="8px"
+        borderRadius="4px"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={() => {
+          if (!disabled) {
+            if (isFocussed) {
+              return setIsFocussed(false);
+            }
+
+            inputRef.current?.focus();
+            setIsFocussed(true);
+          }
+        }}
+        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+      >
+        <Flex
+          alignItems="center"
+          h="inherit"
+          width="90%"
+          overflowX="scroll"
+          style={{
+            scrollbarWidth: 'none' /* Firefox */,
+            msOverflowStyle: 'none',
+          }}
+          sx={{
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+          }}
+          ref={scrollRef}
+        >
+          {localValues.length ? (
+            localValues.map((option, idx) => (
+              <Box
+                key={idx}
+                mr="4px"
+                width="fit-content"
+                h="16px"
+                borderRadius="full"
+              >
+                <Token
+                  label={option.label}
+                  onDelete={() => handleDelete(option)}
+                />
+              </Box>
+            ))
+          ) : (
+            <Text color={colors.label.secondary.light} fontSize="13px">
+              {placeholder}
+            </Text>
+          )}
+        </Flex>
+        <Input
+          padding={0}
+          border="none"
+          height="0"
+          width="0"
+          autoComplete="off"
+          type="text"
+          ref={inputRef}
+          tabIndex={-1}
+          _focus={{ boxShadow: 'none !important' }}
+        />
+        <Flex mr="4px" justifyContent="center" alignItems="center">
+          <DropdownIcon boxSize="16px" disabled={disabled} />
+        </Flex>
+      </Flex>
+      {isFocussed && (
+        <Dropdown
+          dropdownRef={dropdownMenuRef}
+          onSelectItem={option => handleChange(option)}
+          options={localOptions}
+          position={position}
+          optionIndex={optionIndex}
+        />
+      )}
+    </Box>
+  );
+});
+
+export default StackedMultiSelect;