@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/input/StackedRadio/StackedRadioGroup.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { Flex, InputGroup, Radio, RadioGroup } from '@chakra-ui/react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
-
-export interface StackedRadioGroupProps extends SelectFieldProps {
-  flexDirection?: 'row' | 'column';
-
-  options: FieldOptions;
-}
-
-/**
- * A functional React component utilized to render the `StackedRadio` component.
- */
-const StackedRadioGroup = React.forwardRef<
-  HTMLInputElement,
-  StackedRadioGroupProps
->(({ id, flexDirection = 'row', options }, _ref) => {
-  return (
-    <InputGroup>
-      <RadioGroup name={id}>
-        {options.map(option => (
-          <Flex
-            mr="30px"
-            alignItems="center"
-            key={option.value}
-            flexDirection={flexDirection}
-          >
-            <Radio ref={_ref} value={option.value}>
-              {option.label}
-            </Radio>
-          </Flex>
-        ))}
-      </RadioGroup>
-    </InputGroup>
-  );
-});
-
-export default StackedRadioGroup;
+import React from 'react';
+import { Flex, InputGroup, Radio, RadioGroup } from '@chakra-ui/react';
+import { FieldOptions, SelectFieldProps } from '../InputTypes';
+
+export interface StackedRadioGroupProps extends SelectFieldProps {
+  flexDirection?: 'row' | 'column';
+
+  options: FieldOptions;
+}
+
+/**
+ * A functional React component utilized to render the `StackedRadio` component.
+ */
+const StackedRadioGroup = React.forwardRef<
+  HTMLInputElement,
+  StackedRadioGroupProps
+>(({ id, flexDirection = 'row', options }, _ref) => {
+  return (
+    <InputGroup>
+      <RadioGroup name={id}>
+        {options.map(option => (
+          <Flex
+            mr="30px"
+            alignItems="center"
+            key={option.value}
+            flexDirection={flexDirection}
+          >
+            <Radio ref={_ref} value={option.value}>
+              {option.label}
+            </Radio>
+          </Flex>
+        ))}
+      </RadioGroup>
+    </InputGroup>
+  );
+});
+
+export default StackedRadioGroup;

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

@@ -1,232 +1,232 @@
-import React, {
-  KeyboardEventHandler,
-  useEffect,
-  useRef,
-  useMemo,
-  useState,
-} from 'react';
-import { Box, 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 { Dropdown } from '../components/dropdown';
-import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
-import { Dropdown as DropdownIcon } from '../../icons/dropdown';
-import { debounce } from 'lodash';
-
-export interface StackedSelectProps extends StackedInputProps {
-  options: FieldOptions;
-  fullOptions?: 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,
-      fullOptions,
-      ...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]);
-
-    useEffect(() => {
-      setSelectedOption(
-        (fullOptions || options).find(option => option.value === value)
-          ?.label ?? ''
-      );
-    }, [fullOptions, 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)}
-          >
-            <DropdownIcon boxSize="16px" disabled={disabled} />
-          </InputRightElement>
-        </InputGroup>
-        {isFocussed && (
-          <Dropdown
-            position={position}
-            dropdownRef={dropdownMenuRef}
-            onSelectItem={option => handleOnSelectItem(option)}
-            options={options}
-            optionIndex={optionIndex}
-          />
-        )}
-      </Box>
-    );
-  }
-);
-
-export default StackedSelect;
+import React, {
+  KeyboardEventHandler,
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+} from 'react';
+import { Box, 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 { Dropdown } from '../components/dropdown';
+import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
+import { Dropdown as DropdownIcon } from '../../icons/dropdown';
+import { debounce } from 'lodash';
+
+export interface StackedSelectProps extends StackedInputProps {
+  options: FieldOptions;
+  fullOptions?: 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,
+      fullOptions,
+      ...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]);
+
+    useEffect(() => {
+      setSelectedOption(
+        (fullOptions || options).find(option => option.value === value)
+          ?.label ?? ''
+      );
+    }, [fullOptions, 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)}
+          >
+            <DropdownIcon boxSize="16px" disabled={disabled} />
+          </InputRightElement>
+        </InputGroup>
+        {isFocussed && (
+          <Dropdown
+            position={position}
+            dropdownRef={dropdownMenuRef}
+            onSelectItem={handleOnSelectItem}
+            options={options}
+            optionIndex={optionIndex}
+          />
+        )}
+      </Box>
+    );
+  }
+);
+
+export default StackedSelect;

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

@@ -1,33 +1,33 @@
-import React from 'react';
-import { Switch, SwitchProps } from '@chakra-ui/react';
-import colors from '../../../theme/foundations/colors';
-
-export interface StackedSwitchProps extends SwitchProps {}
-
-/**
- * A functional React component utilized to render the `StackedSwitch` component.
- */
-const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
-  ({ isRequired, onChange, value }, _ref) => {
-    if (value === null) return null;
-
-    return (
-      <Switch
-        h="21px"
-        _focus={{
-          border: '2px solid',
-          borderColor: colors.border.focus,
-        }}
-        ref={_ref}
-        isRequired={isRequired}
-        value={String(value)}
-        defaultChecked={Boolean(value)}
-        onChange={e => {
-          if (onChange) return onChange(e.target.checked as any);
-        }}
-      />
-    );
-  }
-);
-
-export default StackedSwitch;
+import React from 'react';
+import { Switch, SwitchProps } from '@chakra-ui/react';
+import colors from '../../../theme/foundations/colors';
+
+export interface StackedSwitchProps extends SwitchProps {}
+
+/**
+ * A functional React component utilized to render the `StackedSwitch` component.
+ */
+const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
+  ({ isRequired, onChange, value }, _ref) => {
+    if (value === null) return null;
+
+    return (
+      <Switch
+        h="21px"
+        _focus={{
+          border: '2px solid',
+          borderColor: colors.border.focus,
+        }}
+        ref={_ref}
+        isRequired={isRequired}
+        value={String(value)}
+        defaultChecked={Boolean(value)}
+        onChange={e => {
+          if (onChange) return onChange(e.target.checked as any);
+        }}
+      />
+    );
+  }
+);
+
+export default StackedSwitch;