@xqmsg/ui-core 0.16.0 → 0.16.1

package/package.json

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

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

@@ -5,7 +5,6 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
-import { Box } from '@chakra-ui/react';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',

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

@@ -1,5 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  KeyboardEventHandler,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Box, Flex, Text, Image, Input } from '@chakra-ui/react';
+import { debounce } from 'lodash';
 import {
   FieldOption,
   FieldOptions,
@@ -44,7 +51,13 @@ const StackedMultiSelect = React.forwardRef<
   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('');
+
+  console.log({ searchValue, debouncedSearchValue });
 
   const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
@@ -122,27 +135,105 @@ const StackedMultiSelect = React.forwardRef<
     );
   };
 
-  return (
-    <Box
-      ref={dropdownRef}
-      position="relative"
-      onKeyDown={e => {
-        if (isFocussed) {
-          if (e.key === 'Tab') {
-            return setIsFocussed(false);
-          }
+  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;
 
-          const idx = options.findIndex(
-            option => option.label[0].toLocaleLowerCase() === e.key
-          );
-
-          dropdownMenuRef.current?.scrollTo({
-            top: idx * 27,
-            behavior: 'smooth',
-          });
-        }
-      }}
-    >
+        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"
@@ -218,6 +309,7 @@ const StackedMultiSelect = React.forwardRef<
           onSelectItem={option => handleChange(option)}
           options={localOptions}
           position={position}
+          optionIndex={optionIndex}
         />
       )}
     </Box>

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

@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  KeyboardEventHandler,
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Box,
   Image,
@@ -14,6 +20,7 @@ import SubtractIcon from './assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
 import useDidMountEffect from '../../../hooks/useDidMountEffect';
 import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
+import { debounce } from 'lodash';
 
 export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
@@ -46,7 +53,10 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     const [selectedOption, setSelectedOption] = useState(
       options.find(option => option.value === value)?.label ?? ''
     );
+    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;
 
@@ -81,6 +91,109 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       setIsFocussed(false);
     };
 
+    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 =
+            options[optionIndex - 1] &&
+            options[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 < options.length
+        ) {
+          const incrementValue =
+            options[optionIndex + 1] &&
+            options[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 = options.find((_, idx) => optionIndex === idx);
+          if (!option) return;
+
+          if (handleOnChange) {
+            handleOnChange(option.value);
+          }
+
+          setSelectedOption(option?.label);
+          setValue(name as string, option.value, {
+            shouldDirty: true,
+            shouldValidate: true,
+          });
+
+          return setIsFocussed(false);
+        }
+
+        if (e.key === 'Tab') {
+          return setIsFocussed(false);
+        }
+      }
+    };
+
+    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">
         <InputGroup>
@@ -96,23 +209,8 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             value={selectedOption}
             disabled={disabled}
             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',
-                });
-              }
-            }}
+            onChange={e => update(debouncedSearchValue.concat(e.target.value))}
+            onKeyDown={handleOnKeyDown}
           />
           <InputRightElement
             cursor={disabled ? 'not-allowed' : 'pointer'}
@@ -127,6 +225,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             dropdownRef={dropdownMenuRef}
             onSelectItem={option => handleOnSelectItem(option)}
             options={options}
+            optionIndex={optionIndex}
           />
         )}
       </Box>

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

@@ -8,6 +8,7 @@ export interface DropdownProps {
   options: FieldOptions;
   dropdownRef: RefObject<HTMLDivElement>;
   position: 'top' | 'bottom';
+  optionIndex?: number | null;
 }
 
 /**
@@ -18,6 +19,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   options,
   dropdownRef,
   position,
+  optionIndex,
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
@@ -55,22 +57,27 @@ export const Dropdown: React.FC<DropdownProps> = ({
             px="8px"
             py="4px"
             width="100%"
-            color={colors.label.primary.light}
+            color={
+              optionIndex === idx
+                ? colors.label.primary.dark
+                : colors.label.primary.light
+            }
             _hover={{
               color: colors.label.primary.dark,
               bg: colors.fill.action,
               borderRadius: '4px',
               width: '100%',
             }}
-            bg="inherit"
+            bg={optionIndex === idx ? colors.fill.action : 'inherit'}
             whiteSpace="nowrap"
+            id={option.value}
           >
             {option.label}
           </Box>
         )}
       </>
     ));
-  }, [onSelectItem, options]);
+  }, [onSelectItem, optionIndex, options]);
 
   return (
     <Flex