@xqmsg/ui-core 0.16.0 → 0.16.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.0",
+  "version": "0.16.2",
   "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/StackedInput/StackedInput.tsx

@@ -1,17 +1,28 @@
 import React from 'react';
-import { Input } from '@chakra-ui/react';
+import { Input, InputGroup } from '@chakra-ui/react';
 import { InputFieldProps } from '../InputTypes';
 
 export interface StackedInputProps extends InputFieldProps {
   isRequired?: boolean;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
 }
 
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
 const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
-  ({ type = 'text', isRequired, ...props }, _ref) => {
-    return <Input ref={_ref} type={type} isRequired={isRequired} {...props} />;
+  (
+    { type = 'text', isRequired, rightElement, leftElement, ...props },
+    _ref
+  ) => {
+    return (
+      <InputGroup>
+        {leftElement && leftElement}
+        <Input type={type} isRequired={isRequired} {...props} ref={_ref} />
+        {rightElement && rightElement}
+      </InputGroup>
+    );
   }
 );
 

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/StackedPilledInput/index.tsx

@@ -261,35 +261,36 @@ const StackedPilledInput = React.forwardRef<
           }}
           ref={scrollRef}
         >
-          {lastestFormValueToArray.length ? (
-            lastestFormValueToArray.map((label, index) => (
-              <Box
-                mr="4px"
-                border={
-                  tokenIndex === index
-                    ? `1px solid ${colors.border.focus}`
-                    : 'none'
-                }
-                borderRadius="full"
-                onClick={() => isFocussed && setTokenIndex(index)}
-                width="100%"
-                id={`${name}_token_${index}`}
-              >
-                <Token
-                  label={label}
-                  onDelete={(e: any) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    onRemoveTag(index);
-                  }}
-                />
-              </Box>
-            ))
-          ) : (
+          {lastestFormValueToArray.length
+            ? lastestFormValueToArray.map((label, index) => (
+                <Box
+                  mr="4px"
+                  border={
+                    tokenIndex === index
+                      ? `1px solid ${colors.border.focus}`
+                      : 'none'
+                  }
+                  borderRadius="full"
+                  onClick={() => isFocussed && setTokenIndex(index)}
+                  width="100%"
+                  id={`${name}_token_${index}`}
+                >
+                  <Token
+                    label={label}
+                    onDelete={(e: any) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onRemoveTag(index);
+                    }}
+                  />
+                </Box>
+              ))
+            : null}
+          {!lastestFormValueToArray.length && !isFocussed ? (
             <Text color={colors.label.secondary.light} fontSize="13px">
               {placeholder}
             </Text>
-          )}
+          ) : null}
         </Flex>
         <Flex flex={1} minWidth={isFocussed ? '20%' : 0}>
           <Input

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

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

@@ -1,24 +1,35 @@
 import React from 'react';
-import { Box, FormLabel } from '@chakra-ui/react';
+import { Box, FormLabel, Tooltip } from '@chakra-ui/react';
 import colors from '../../../../../src/theme/foundations/colors';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
 
 export interface LabelProps {
   label: string;
+  tooltipText?: string;
   isRequired?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `Label` component
  */
-export const Label: React.FC<LabelProps> = ({ isRequired, label }) => {
+export const Label: React.FC<LabelProps> = ({
+  tooltipText,
+  isRequired,
+  label,
+}) => {
   return (
-    <FormLabel>
+    <FormLabel display="flex" alignItems="center">
       {label}
       {isRequired && (
         <Box ml={1} color={colors.label.error}>
           *
         </Box>
       )}
+      {!!tooltipText && (
+        <Tooltip label={tooltipText} placement="top">
+          <QuestionOutlineIcon boxSize="13px" ml="8px" />
+        </Tooltip>
+      )}
     </FormLabel>
   );
 };

package/src/components/input/index.tsx

@@ -40,9 +40,12 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   control: Control<T, any>;
   onChange?: (value?: string) => void;
   disabled?: boolean;
+  tooltipText?: string;
   setValue: UseFormSetValue<T>;
   setError: UseFormSetError<T>;
   clearErrors: UseFormClearErrors<T>;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
 }
 
 /**
@@ -58,6 +61,7 @@ export function Input<T extends FieldValues>({
   name,
   helperText,
   options,
+  tooltipText,
   isInvalid,
   errorText,
   isRequired,
@@ -65,6 +69,8 @@ export function Input<T extends FieldValues>({
   defaultValue,
   control,
   disabled,
+  rightElement,
+  leftElement,
   onChange,
   setValue,
   setError,
@@ -91,6 +97,8 @@ export function Input<T extends FieldValues>({
             onChange={onChange}
             onBlur={onBlur}
             ref={ref}
+            rightElement={rightElement}
+            leftElement={leftElement}
             disabled={disabled}
             value={value}
           />
@@ -136,6 +144,7 @@ export function Input<T extends FieldValues>({
             className={`input-${inputType} ${className ?? ''}`}
             name={name}
             id={name}
+            placeholder={placeholder}
             maxLength={maxLength}
             isInvalid={isInvalid}
             onChange={onChange}
@@ -194,6 +203,7 @@ export function Input<T extends FieldValues>({
             ref={ref}
             disabled={disabled}
             value={value}
+            placeholder={placeholder}
             setValue={setValue as UseFormSetValue<FieldValues>}
             setError={setError as UseFormSetError<FieldValues>}
             clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
@@ -234,7 +244,13 @@ export function Input<T extends FieldValues>({
           position="relative"
           py={label || helperText || isInvalid ? 6 : 0}
         >
-          {label && <Label label={label} isRequired={isRequired} />}
+          {label && (
+            <Label
+              tooltipText={tooltipText}
+              label={label}
+              isRequired={isRequired}
+            />
+          )}
           {selectedInputField(
             onChange ? onChange : fieldOnChange,
             onBlur,

package/src/theme/customXQChakraTheme.ts

@@ -12,7 +12,6 @@ import FormError from './components/form-error';
 import FormLabel from './components/form-label';
 import Input from './components/input';
 import Link from './components/link';
-import Modal from './components/modal';
 import Select from './components/select';
 import Switch from './components/switch';
 import Table from './components/table';
@@ -36,7 +35,6 @@ const customXQChakraTheme = extendTheme({
     FormLabel,
     Input,
     Link,
-    Modal,
     Select,
     Switch,
     Table,