@xqmsg/ui-core 0.15.4 → 0.16.1

package/package.json

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

package/src/components/banner/Banner.stories.tsx

@@ -31,6 +31,38 @@ const meta: Meta<BannerProps> = {
 export default meta;
 const Template: Story<BannerProps> = args => (
   <>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="positive"
+        message="Positive message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="warning"
+        message="Warning message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="error"
+        message="Error message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="neutral"
+        message="Neutral message."
+      />
+    </Box>
     <Box mb="20px">
       <Banner
         {...args}

package/src/components/banner/index.tsx

@@ -13,6 +13,7 @@ export interface BannerProps {
   message: ReactNode;
   buttonText?: string;
   onClick?: () => void;
+  type?: 'condensed' | 'expanded';
 }
 
 /**
@@ -23,6 +24,7 @@ export const Banner: React.FC<BannerProps> = ({
   message,
   buttonText,
   onClick,
+  type = 'expanded',
 }) => {
   const Icon = useMemo(() => {
     switch (variant) {
@@ -42,19 +44,28 @@ export const Banner: React.FC<BannerProps> = ({
   return (
     <Alert variant={variant}>
       <AlertDescription>
-        <Box pb="8px">{Icon}</Box>
-        {message}
-        {onClick && buttonText && (
-          <Flex pt="8px" justifyContent="flex-end">
-            <Button
-              variant="secondary"
-              onClick={onClick}
-              text={buttonText}
-              width="variable"
-              ariaLabel="banner button"
-            />
-          </Flex>
-        )}
+        <Flex
+          flexDirection={type === 'condensed' ? 'row' : 'column'}
+          alignItems={type === 'condensed' ? 'center' : ''}
+        >
+          <Box pr="8px">{Icon}</Box>
+          <Box pt={type === 'condensed' ? 0 : '8px'}> {message}</Box>
+          {onClick && buttonText && (
+            <Flex
+              ml={type === 'condensed' ? 'auto' : ''}
+              pt={type === 'condensed' ? 0 : '8px'}
+              justifyContent={type === 'condensed' ? 'flex-end' : 'flex-end'}
+            >
+              <Button
+                variant="secondary"
+                onClick={onClick}
+                text={buttonText}
+                width="variable"
+                ariaLabel="banner button"
+              />
+            </Flex>
+          )}
+        </Flex>
       </AlertDescription>
     </Alert>
   );

package/src/components/button/Button.stories.tsx

@@ -37,7 +37,7 @@ const meta: Meta<ButtonProps> = {
 };
 export default meta;
 const Template: Story<ButtonProps> = args => (
-  <Flex flexDir="column" height="200px" justifyContent="space-between">
+  <Flex flexDir="column" height="150px" justifyContent="space-between">
     <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
     <Button
       {...args}

package/src/components/button/spinner/index.tsx

@@ -15,14 +15,13 @@ export const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   onClick,
   type,
   ariaLabel,
-  variant = 'solid',
-
+  variant = 'primary',
   disabled,
   className,
 }) => {
   return (
     <Button
-      spinner={<Spinner size={'md'} />}
+      spinner={<Spinner size={'sm'} />}
       isLoading={isLoading}
       onClick={onClick}
       type={type}

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

@@ -0,0 +1,236 @@
+import React, {
+  KeyboardEventHandler,
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Box,
+  Image,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from '@chakra-ui/react';
+import { FieldOptions } from '../InputTypes';
+import { StackedInputProps } from '../StackedInput/StackedInput';
+import colors from '../../../theme/foundations/colors';
+import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
+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;
+  setValue: UseFormSetValue<FieldValues>;
+  control: Control<FieldValues, any>;
+  handleOnChange: (value?: string) => void;
+}
+
+/**
+ * A functional React component utilized to render the `StackedSelect` component.
+ */
+const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
+  (
+    {
+      isRequired,
+      options,
+      name,
+      setValue,
+      handleOnChange,
+      disabled,
+      value,
+      ...props
+    },
+    _ref
+  ) => {
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const dropdownMenuRef = useRef<HTMLDivElement>(null);
+
+    const [isFocussed, setIsFocussed] = useState(false);
+    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;
+
+    useEffect(() => {
+      const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+
+      if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
+        setPosition('top');
+      } else {
+        setPosition('bottom');
+      }
+    }, [boundingClientRect]);
+
+    useDidMountEffect(() => {
+      setSelectedOption(
+        options.find(option => option.value === value)?.label ?? ''
+      );
+    }, [value]);
+
+    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
+
+    const handleOnSelectItem = (option: {
+      label: string;
+      value: string;
+      sortValue: number;
+    }) => {
+      if (handleOnChange) {
+        handleOnChange(option.value);
+      }
+      setValue(name as string, option.value);
+      setSelectedOption(option.label);
+      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>
+          <Input
+            isRequired={isRequired}
+            {...props}
+            ref={_ref}
+            onClick={() => setIsFocussed(!isFocussed)}
+            cursor="pointer"
+            color="transparent"
+            fontSize="13px"
+            textShadow={`0 0 0 ${colors.label.primary.light}`}
+            value={selectedOption}
+            disabled={disabled}
+            autoComplete="off"
+            onChange={e => update(debouncedSearchValue.concat(e.target.value))}
+            onKeyDown={handleOnKeyDown}
+          />
+          <InputRightElement
+            cursor={disabled ? 'not-allowed' : 'pointer'}
+            onClick={() => !disabled && setIsFocussed(!isFocussed)}
+          >
+            <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+          </InputRightElement>
+        </InputGroup>
+        {isFocussed && (
+          <Dropdown
+            position={position}
+            dropdownRef={dropdownMenuRef}
+            onSelectItem={option => handleOnSelectItem(option)}
+            options={options}
+            optionIndex={optionIndex}
+          />
+        )}
+      </Box>
+    );
+  }
+);
+
+export default StackedSelect;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
 import StackedInput from './StackedInput/StackedInput';
 import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
-import StackedSelect from './StackedSelect/StackedSelect';
+import StackedSelect from './StackedSelect';
 import StackedTextarea from './StackedTextarea/StackedTextarea';
 import { FieldOptions, ValidationProps, InputType } from './InputTypes';
 import {

package/src/components/table/empty/index.tsx

@@ -38,7 +38,7 @@ export const EmptyTable: React.FC = () => {
       <Tbody>
         {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
           <Tr>
-            <Td height="23px" opacity={getOpacity(i)}></Td>
+            <Td height="26px" opacity={getOpacity(i)}></Td>
           </Tr>
         ))}
       </Tbody>

package/src/theme/components/button.ts

@@ -6,6 +6,7 @@ const baseStyle = defineStyle({
   fontSize: '13px',
   bg: colors.fill.action,
   color: colors.label.primary.dark,
+  h: '26px',
   border: 'none',
   px: '8px',
   py: '4px',

package/src/theme/components/table.ts

@@ -11,8 +11,12 @@ const baseStyle = {
   },
   tr: {
     fontSize: '13px',
+    h: '26px',
+    lineHeight: 'normal',
     _odd: {
       td: {
+        h: '26px ',
+        lineHeight: 'normal',
         bg: colors.fill.light.tertiary,
         _first: {
           borderTopLeftRadius: 'md',
@@ -27,6 +31,8 @@ const baseStyle = {
   },
   td: {
     padding: '5px 8px !important',
+    lineHeight: 'normal',
+    h: '26px',
   },
 };
 

package/src/theme/components/text.ts

@@ -7,7 +7,7 @@ const baseStyle: Partial<TextProps> = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
-  lineHeight: typography.lineHeights.base,
+  lineHeight: typography.lineHeights.normal,
   letterSpacing: typography.letterSpacings.wide,
 };
 

package/src/theme/styles.ts

@@ -8,6 +8,7 @@ export default {
         base: 'visible',
         lg: 'hidden',
       },
+      lineHeight: 'normal',
     },
     '*, *::before, *::after': {
       borderColor: 'gray.200',