@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/Select/Select.tsx

@@ -1,406 +0,0 @@
-import { vars } from '@orfium/tokens';
-import MultiTextFieldBase from 'components/MultiTextFieldBase/MultiTextFieldBase';
-import ProgressIndicator from 'components/ProgressIndicator';
-import { PositionInScreen } from 'components/utils/PositionInScreen';
-import useKeyboard from 'hooks/useKeyboardEvents';
-import { debounce, differenceBy, head } from 'lodash-es';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import isEqual from 'react-fast-compare';
-import type { ChangeEvent } from 'utils/common';
-import { generateTestDataId, generateUniqueID } from 'utils/helpers';
-import useCombinedRefs from '../../hooks/useCombinedRefs';
-import Box from '../Box';
-import Icon from '../Icon';
-import TextField from '../TextField';
-import handleSearch from '../utils/handleSearch';
-import SelectMenu from './components/SelectMenu/SelectMenu';
-import { SELECT_ALL_OPTION } from './constants';
-import { selectWrapper, suffixContainer } from './Select.style';
-import type { SelectOption, SelectProps } from './types';
-
-export const emptyValue: SelectOption = { label: '', value: '' };
-
-/** @TODO: Refactor component to reduce Cognitive Complexity */
-
-const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
-  const {
-    selectedOption,
-    isMulti,
-    options,
-    size = 'normal',
-    isAsync = false,
-    isLoading = false,
-    asyncSearch = () => {},
-    status = { type: 'normal' },
-    minCharactersToSearch = 0,
-    hasHighlightSearch = false,
-    isSearchable = true,
-    isVirtualized = false,
-    isDisabled,
-    dataTestId,
-    onChange,
-    isCreatable = false,
-    hasSelectAllOption = false,
-    ...restInputProps
-  } = props;
-
-  const listRef = useRef<HTMLUListElement | null>(null);
-  const { keyboardProps } = useKeyboard({
-    events: {
-      keydown: {
-        onArrowDown: () => {
-          setIsOpen(true);
-          // set on diff thread to wait to open
-          setTimeout(() => {
-            const options = listRef.current?.querySelectorAll('[role="option"]');
-            if (options && options?.length > 0) {
-              const firstOption = head(options);
-              if (firstOption instanceof HTMLElement && typeof firstOption.focus === 'function') {
-                firstOption.focus();
-              }
-            }
-          }, 0);
-        },
-        onEscape: () => {
-          combinedRefs?.current?.blur();
-          setIsOpen(false);
-
-          handleIconClick();
-        },
-        onEnter: (e) => {
-          const text = (e.target as HTMLInputElement).value;
-          if (text.length > 0) {
-            setTimeout(() => {
-              const firstChild = listRef.current?.firstChild;
-              if (firstChild instanceof HTMLElement && typeof firstChild.click === 'function') {
-                firstChild.click();
-              }
-            }, 0);
-          }
-        },
-        onBackspace: () => {
-          debouncedOnChange('');
-          setIsOpen(true);
-
-          /** When the textField's value equals the selectedOption's label we should clear the field*/
-          if (!isMulti) {
-            if (selectedOption && onChange && 'label' in selectedOption) {
-              if (selectedOption.label === textFieldValue) {
-                onChange(undefined);
-                setSearchValue('');
-                asyncSearch('');
-              }
-            }
-          }
-        },
-        onAlphaNumerical: () => {
-          if (isSearchable) {
-            setIsOpen(true);
-          }
-        },
-      },
-    },
-  });
-
-  const { keyboardProps: menuKeyboardProps } = useKeyboard({
-    events: {
-      keydown: {
-        onEscape: () => {
-          setIsOpen(false);
-          combinedRefs.current?.focus();
-        },
-      },
-    },
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const combinedRefs = useCombinedRefs(inputRef, ref);
-
-  const [searchValue, setSearchValue] = useState('');
-
-  const textFieldValue = useMemo(() => {
-    if (Array.isArray(selectedOption)) return searchValue;
-
-    if (!selectedOption) {
-      return searchValue;
-    }
-
-    return searchValue || selectedOption?.label;
-  }, [searchValue, selectedOption]);
-
-  const handleOptionClick = (option: SelectOption) => {
-    if (!isMulti) {
-      setIsOpen(false);
-    }
-
-    if (isSearchable) {
-      setSearchValue('');
-    }
-
-    if (isMulti === true) {
-      if (onChange && selectedOption) {
-        if (isEqual(option, SELECT_ALL_OPTION)) {
-          onChange(options.filter((o) => !o.isDisabled));
-        } else if (option.isCreated) {
-          const newOption: SelectOption = {
-            value: option.value,
-            label: option.value.toString(),
-            isCreated: true,
-          };
-
-          onChange([...selectedOption, newOption]);
-        } else {
-          onChange([...selectedOption, option]);
-        }
-      }
-    } else {
-      if (onChange) {
-        if (option.isCreated) {
-          const newOption: SelectOption = {
-            value: option.value,
-            label: option.value.toString(),
-            isCreated: true,
-          };
-          // @ts-ignore because TS doesnt recognize both (single-select) and (multi-select) option that we set
-          onChange(newOption);
-        } else {
-          // @ts-ignore
-          onChange(option);
-        }
-      }
-    }
-
-    combinedRefs.current?.focus();
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedOnChange = useCallback(
-    debounce((term) => {
-      asyncSearch(term);
-    }, 400),
-    []
-  );
-
-  const handleOnInput = React.useCallback(
-    (event: ChangeEvent) => {
-      /**
-       * For Multiselect: [for now] when we select an option the SelectMenu closes but the user
-       * can still type on the input field (so they must be able to see the SelectMenu)
-       */
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-
-      handleSearch({
-        event,
-        isSearchable,
-        isAsync,
-        setSearchValue,
-        onChange: debouncedOnChange,
-        minCharactersToSearch,
-      });
-    },
-    [debouncedOnChange, isAsync, isOpen, isSearchable, minCharactersToSearch]
-  );
-
-  const filteredOptions = useMemo(() => {
-    const optionsToBeFiltered =
-      isMulti && Array.isArray(selectedOption)
-        ? differenceBy(options, selectedOption, 'value')
-        : options;
-    const finalOptions: SelectOption[] = [];
-
-    if (isAsync) {
-      finalOptions.push(...optionsToBeFiltered);
-    } else {
-      finalOptions.push(
-        ...optionsToBeFiltered
-          .filter(
-            (option) =>
-              !searchValue ||
-              option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-              !!option.options?.find((option) =>
-                option.label.toLowerCase().includes(searchValue.toLowerCase())
-              )
-          )
-          .map((option) => {
-            return option.label.toLowerCase().includes(searchValue.toLowerCase())
-              ? option
-              : {
-                  ...option,
-                  options: option.options?.filter((option) =>
-                    option.label.toLowerCase().includes(searchValue.toLowerCase())
-                  ),
-                };
-          })
-      );
-    }
-
-    if (isCreatable) {
-      /** Check if the searchValue has an exact result (so no need for "Create..." option) */
-      const hasDistinctResult = finalOptions
-        .map((item) => item.label.toLowerCase())
-        .includes(searchValue.toLowerCase());
-
-      if (!hasDistinctResult && searchValue.length > 0) {
-        finalOptions.push({
-          value: searchValue,
-          label: `Create "${searchValue}"`,
-          isCreated: true,
-        });
-      }
-    }
-
-    return finalOptions;
-  }, [isMulti, options, selectedOption, isAsync, isCreatable, searchValue]);
-
-  const suffixNameSelector = useMemo(() => {
-    if (isSearchable && !Array.isArray(selectedOption)) {
-      return searchValue || selectedOption?.value ? 'close' : 'search';
-    }
-
-    return 'triangleDown';
-  }, [selectedOption, isSearchable, searchValue]);
-
-  const handleIconClick = React.useCallback(() => {
-    if (!isSearchable) {
-      setIsOpen(!isOpen);
-    }
-    if (isSearchable && !Array.isArray(selectedOption) && (searchValue || selectedOption?.value)) {
-      setSearchValue('');
-      if (onChange) {
-        if (isMulti) {
-          onChange([]);
-        } else {
-          onChange(undefined);
-        }
-      }
-      asyncSearch('');
-    }
-  }, [isSearchable, isOpen, selectedOption, searchValue, onChange, asyncSearch, isMulti]);
-
-  const suffixRender = useMemo(
-    () => (
-      <div css={suffixContainer(isOpen, isSearchable)}>
-        {isLoading ? (
-          <Box py="2" display="flex" alignItems="center">
-            <ProgressIndicator type="circular" dataTestPrefixId="select" />
-          </Box>
-        ) : (
-          <Icon
-            size={vars.sizing[size === 'compact' ? '4' : '5']}
-            name={suffixNameSelector}
-            color={vars.color.text.default.secondary}
-            onClick={handleIconClick}
-            hasHover={false}
-            dataTestId="select-right-icon"
-          />
-        )}
-      </div>
-    ),
-    [isOpen, isSearchable, isLoading, size, suffixNameSelector, handleIconClick]
-  );
-
-  const handleClick = () => {
-    if (!isOpen) {
-      combinedRefs?.current?.focus();
-    } else if (!isSearchable) {
-      combinedRefs?.current?.blur();
-    }
-  };
-
-  /**
-   * Boolean flag for the case where we have no options but create functionality - so
-   * we can hide the Select All option in that case
-   */
-  const hasNoOptionsAndIsCreatable =
-    isCreatable && filteredOptions.length === 1 && filteredOptions[0].isCreated;
-
-  const selectUniqueId = useRef(generateUniqueID('select_')).current;
-
-  return (
-    <div
-      {...(!(isDisabled || status.type === 'read-only') && { onClick: handleClick })}
-      css={selectWrapper()}
-      {...menuKeyboardProps}
-    >
-      <PositionInScreen
-        id={selectUniqueId}
-        isVisible={isOpen}
-        setIsVisible={setIsOpen}
-        hasWrapperWidth
-        isNonModal={isMulti || isSearchable}
-        offsetY={8}
-        parent={
-          isMulti ? (
-            <MultiTextFieldBase
-              selectedOptions={selectedOption as SelectOption[]}
-              onInput={handleOnInput}
-              onOptionDelete={(option) => {
-                const items = Array.isArray(selectedOption)
-                  ? selectedOption.filter((o) =>
-                      typeof option !== 'string' && option
-                        ? o.value !== option.value
-                        : o.value !== option
-                    )
-                  : [];
-
-                if (onChange) onChange(items);
-              }}
-              onClearAllOptions={() => onChange && onChange([])}
-              isLoading={isLoading}
-              isDisabled={isDisabled}
-              readOnly={!isSearchable}
-              dataTestId={generateTestDataId('select-input', dataTestId)}
-              {...restInputProps}
-              status={status}
-              value={textFieldValue}
-              ref={combinedRefs}
-              autoComplete="off"
-              {...keyboardProps}
-              onClick={() => setIsOpen(true)}
-              role="combobox"
-              aria-expanded={isOpen}
-              aria-controls={selectUniqueId}
-            />
-          ) : (
-            <TextField
-              suffix={suffixRender}
-              {...keyboardProps}
-              onInput={handleOnInput}
-              isReadOnly={!isSearchable}
-              isDisabled={isDisabled}
-              dataTestId={generateTestDataId('select-input', dataTestId)}
-              {...restInputProps}
-              onClick={() => setIsOpen(true)}
-              status={status}
-              value={textFieldValue}
-              size={size}
-              ref={combinedRefs}
-              autoComplete="off"
-              role="combobox"
-              aria-expanded={isOpen}
-              aria-controls={selectUniqueId}
-            />
-          )
-        }
-      >
-        <SelectMenu
-          ref={listRef}
-          filteredOptions={filteredOptions}
-          handleOptionClick={handleOptionClick}
-          selectedOption={isMulti === true || !selectedOption ? emptyValue : selectedOption}
-          status={status}
-          isLoading={isLoading}
-          isVirtualized={isVirtualized}
-          size={size}
-          hasSelectAllOption={isMulti && hasSelectAllOption && !hasNoOptionsAndIsCreatable}
-        />
-      </PositionInScreen>
-    </div>
-  );
-});
-
-Select.displayName = 'Select';
-export default React.memo(Select, isEqual);

package/src/components/Select/StatefulSelect.tsx

@@ -1,36 +0,0 @@
-import React, { forwardRef, useCallback, useState } from 'react';
-import isEqual from 'react-fast-compare';
-
-import Select, { emptyValue } from './Select';
-import type { SelectOption, SelectProps } from './types';
-
-const StatefulSelect = forwardRef<HTMLInputElement, SelectProps>(
-  ({ isMulti, selectedOption, onChange = () => {}, ...rest }, ref) => {
-    const [inputValue, setInputValue] = useState<SelectOption | SelectOption[]>(
-      isMulti ? selectedOption || [] : selectedOption || emptyValue
-    );
-
-    const callback = useCallback(
-      (option: any) => {
-        setInputValue(option);
-        onChange(option);
-      },
-      [onChange]
-    );
-
-    return (
-      // @ts-ignore
-      <Select
-        {...rest}
-        selectedOption={inputValue}
-        isMulti={isMulti}
-        onChange={callback}
-        ref={ref}
-      />
-    );
-  }
-);
-
-StatefulSelect.displayName = 'StatefulSelect';
-
-export default React.memo(StatefulSelect, isEqual);

package/src/components/Select/components/SelectMenu/SelectMenu.style.tsx

@@ -1,66 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-import type { TextFieldProps } from 'components/TextField/TextField';
-import type { Theme } from 'theme';
-import { generateStylesFromTokens } from '~/components/Typography';
-import { flexCenter } from '~/theme/functions';
-import type { SelectMenuProps } from './SelectMenu';
-
-const LIST_ITEM_TOKENS = {
-  height: vars.sizing['13'],
-  heightCompact: vars.sizing['10'],
-};
-
-export const optionStyle = (): SerializedStyles => {
-  return css`
-    & > div,
-    ul {
-      border: none;
-      border-radius: 0;
-    }
-
-    cursor: default;
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow-x: hidden;
-
-    &:hover {
-      background-color: ${vars.color.background.default};
-    }
-  `;
-};
-
-export const menuStyle = ({
-  isVirtualized,
-  sx,
-}: SelectMenuProps & Omit<TextFieldProps, 'ref' | 'label'>): SerializedStyles => css`
-  z-index: 500;
-  position: absolute;
-  overflow-y: ${isVirtualized ? 'hidden' : 'auto'};
-  border: ${rem(1)} solid ${vars.color['border-color'].decorative.default};
-  border-radius: ${vars.spacing['3']};
-  box-shadow: ${vars['box-shadow']['2']};
-  min-width: 100%;
-  max-width: ${rem(620)};
-  max-height: inherit;
-  ${sx};
-`;
-
-export const innerMenuStyle = ({ height }: { height: number }) => css`
-  max-height: ${rem(height)};
-`;
-
-export const emptyAndLoadingStyle = () => (theme: Theme) => {
-  return css`
-    color: ${vars.color.text.default.secondary};
-    height: ${LIST_ITEM_TOKENS.height};
-    padding: 0 ${vars.spacing['5']};
-    background: ${vars.color.background.default};
-
-    ${flexCenter};
-
-    ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
-  `;
-};

package/src/components/Select/components/SelectMenu/SelectMenu.tsx

@@ -1,119 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import type { ListSelection } from 'components/List';
-import List, { ListItem, ListItemText, ListSection } from 'components/List';
-import { LIST_ITEM_HEIGHT, MAX_NON_VIRTUALIZED_ITEMS_SELECT } from 'components/List/utils';
-import { SELECT_ALL_OPTION } from 'components/Select/constants';
-import type { TextInputBaseProps } from 'components/TextInputBase';
-import useCombinedRefs from 'hooks/useCombinedRefs';
-import { flatMap, head, uniqueId } from 'lodash-es';
-import { forwardRef, useCallback, useEffect, useRef } from 'react';
-import type { ComponentSizes } from 'utils/types';
-import type { SelectOption } from '../../types';
-import { emptyAndLoadingStyle, innerMenuStyle, menuStyle, optionStyle } from './SelectMenu.style';
-
-export type SelectMenuProps = {
-  filteredOptions: SelectOption[];
-  handleOptionClick: (option: SelectOption) => void;
-  selectedOption: SelectOption;
-  isLoading?: boolean;
-  isVirtualized?: boolean;
-  hasSelectAllOption?: boolean;
-  size?: ComponentSizes;
-  sx?: CSSObject;
-} & Pick<TextInputBaseProps, 'status'>;
-
-const SelectMenu = forwardRef<HTMLUListElement, SelectMenuProps>((props, ref) => {
-  const {
-    filteredOptions,
-    handleOptionClick,
-    selectedOption,
-    isLoading,
-    isVirtualized,
-    size = 'normal',
-    hasSelectAllOption = false,
-  } = props;
-  const myRef = useRef<HTMLUListElement>(null);
-  const combinedRefs = useCombinedRefs(myRef, ref);
-  const listHeight = MAX_NON_VIRTUALIZED_ITEMS_SELECT * LIST_ITEM_HEIGHT[size]; // 40 is the height of compact list item and we want to show 5 on render
-
-  const executeScroll = () =>
-    myRef.current?.scrollIntoView &&
-    myRef.current?.scrollIntoView({ block: 'nearest', inline: 'start' });
-
-  const onSelectionChange = useCallback(
-    (keys: ListSelection) => {
-      const keyFound = String(head(Array.from(keys)));
-      if (keyFound === SELECT_ALL_OPTION.value) {
-        handleOptionClick(SELECT_ALL_OPTION);
-      } else {
-        const optionFound = flatMap(filteredOptions, (o) => o.options || o).find(
-          (o) => String(o.value) === keyFound
-        );
-        optionFound && handleOptionClick(optionFound);
-      }
-    },
-    [filteredOptions, handleOptionClick]
-  );
-
-  useEffect(() => {
-    executeScroll();
-  }, [selectedOption]);
-
-  const renderOptions = () =>
-    filteredOptions.length > 0 ? (
-      <div css={optionStyle}>
-        <List
-          label={uniqueId('menu_list')}
-          ref={combinedRefs}
-          height={listHeight}
-          isVirtualized={isVirtualized && filteredOptions.length > MAX_NON_VIRTUALIZED_ITEMS_SELECT}
-          onSelectionChange={onSelectionChange}
-          selectedKeys={[selectedOption.value]}
-          disabledKeys={filteredOptions.filter((o) => o.isDisabled).map((o) => o.value)}
-        >
-          {hasSelectAllOption ? (
-            <ListItem
-              rowSize={size}
-              key={SELECT_ALL_OPTION.value}
-              textValue={SELECT_ALL_OPTION.label}
-            >
-              <ListItemText>{SELECT_ALL_OPTION.label}</ListItemText>
-            </ListItem>
-          ) : null}
-          {filteredOptions.map((option) => {
-            if (option.options && option.options?.length > 0) {
-              return (
-                <ListSection key={option.value} title={option.value}>
-                  {option.options.map((o) => (
-                    <ListItem rowSize={size} key={o.value} textValue={o.label}>
-                      <ListItemText description={o.helperText}>{o.label}</ListItemText>
-                    </ListItem>
-                  ))}
-                </ListSection>
-              );
-            }
-
-            return (
-              <ListItem rowSize={size} key={option.value} textValue={option.label}>
-                <ListItemText description={option.helperText}>{option.label}</ListItemText>
-              </ListItem>
-            );
-          })}
-        </List>
-      </div>
-    ) : (
-      <div css={emptyAndLoadingStyle}>No options</div>
-    );
-
-  return (
-    <div css={menuStyle({ ...props })} tabIndex={-1}>
-      <div css={innerMenuStyle({ height: listHeight })}>
-        {isLoading ? <div css={emptyAndLoadingStyle}>Loading...</div> : renderOptions()}
-      </div>
-    </div>
-  );
-});
-
-SelectMenu.displayName = 'SelectMenu';
-
-export default SelectMenu;

package/src/components/Select/components/SelectMenu/index.ts

@@ -1,2 +0,0 @@
-export { default } from './SelectMenu';
-export * from './SelectMenu';

package/src/components/Select/constants.ts

@@ -1,58 +0,0 @@
-import type { SelectOption } from './types';
-
-export const SELECT_ALL_OPTION: SelectOption = {
-  value: 'select_all',
-  label: 'Select All',
-} as const;
-
-/** Stories */
-
-export const options = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'citrus2', label: 'Citrus2' },
-  { value: 'citrus3', label: 'Citrus3' },
-  { value: 'citrus4', label: 'Citrus4' },
-  { value: 'vanilla', label: 'Vanilla', isDisabled: true },
-];
-
-export const optionsWithHelperInDisabled = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'citrus', label: 'Citrus' },
-  { value: 'why_Disabled', label: 'Why Disabled?', helperText: 'this is why!', isDisabled: true },
-];
-
-export const groupOptions = [
-  {
-    value: 'Sweet',
-    label: 'Sweets',
-    options: [
-      { value: '1', label: 'Chocolate' },
-      { value: '2', label: 'Option 2' },
-    ],
-  },
-  {
-    value: 'Sour',
-    label: 'Sour',
-    options: [{ value: '3', label: 'Option 3' }],
-  },
-  { value: '4', label: 'Option 4' },
-  {
-    value: 'group5',
-    label: 'Group 5',
-    options: [
-      { value: '5', label: 'Option 7' },
-      { value: '6', label: 'Option 8' },
-    ],
-  },
-  {
-    value: 'group6',
-    label: 'Group 6',
-    options: [{ value: '7', label: 'Option 9' }],
-  },
-];
-
-export const defaultValue = options[0];

package/src/components/Select/index.ts

@@ -1,4 +0,0 @@
-export { default } from './Select';
-export { default as StatefulSelect } from './StatefulSelect';
-export * from './Select';
-export * from './types';