@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/Filter/components/FilterMenu/FilterMenu.tsx

@@ -1,78 +0,0 @@
-import type {
-  FilterOption,
-  FilterProps,
-  MultiFilterProps,
-  SingleFilterProps,
-} from 'components/Filter/Filter.types';
-import React from 'react';
-import FilterSearchField from './components/FilterSearchField';
-import Options from './components/Options';
-import { menuStyle } from './FilterMenu.style';
-
-type Props = Pick<
-  FilterProps,
-  | 'isSearchable'
-  | 'isLoading'
-  | 'onClear'
-  | 'onFilterDelete'
-  | 'isVirtualized'
-  | 'hasSelectAllOption'
-  | 'dataTestPrefixId'
-> & {
-  searchValue: string;
-  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  filteredOptions: FilterOption[];
-  handleSelect: (option: FilterOption) => void;
-  listRef?: React.MutableRefObject<HTMLUListElement>;
-} & (SingleFilterProps | MultiFilterProps);
-
-const FilterMenu: React.FCC<Props> = ({
-  isSearchable,
-  isMulti,
-  searchValue,
-  handleChange,
-  onClear,
-  isLoading,
-  filteredOptions,
-  selectedFilter,
-  isVirtualized,
-  hasSelectAllOption,
-  handleSelect,
-  onFilterDelete,
-  dataTestPrefixId,
-  listRef,
-}) => {
-  return (
-    <div css={menuStyle({ isMulti })}>
-      {(isMulti === true || isSearchable) && (
-        // @ts-ignore
-        <FilterSearchField
-          isMulti={isMulti}
-          isSearchable={isSearchable}
-          value={searchValue}
-          onInputChange={handleChange}
-          onClear={onClear}
-          onFilterDelete={onFilterDelete}
-          selectedFilter={selectedFilter}
-          dataTestPrefixId={dataTestPrefixId}
-          isLoading={isLoading}
-        />
-      )}
-      {/**  @ts-ignore */}
-      <Options
-        listRef={listRef}
-        dataTestPrefixId={dataTestPrefixId}
-        items={filteredOptions}
-        isVirtualized={isVirtualized}
-        defaultValue={{ label: '', value: '' }}
-        isSearchable={isSearchable}
-        selectedFilter={selectedFilter}
-        onOptionSelect={handleSelect}
-        hasSelectAllOption={hasSelectAllOption}
-        isMulti={isMulti}
-      />
-    </div>
-  );
-};
-
-export default FilterMenu;

package/src/components/Filter/components/FilterMenu/components/FilterSearchField/FilterSearchField.style.ts

@@ -1,31 +0,0 @@
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-export const textFieldWrapper = () => css`
-  border-bottom: 1px solid ${vars.color['border-color'].decorative.default};
-
-  label {
-    display: none;
-  }
-
-  & > div > div {
-    border-radius: unset;
-  }
-
-  input {
-    border: none;
-
-    top: 0;
-
-    &:focus {
-      outline: none;
-      border: none;
-      box-shadow: none;
-    }
-  }
-`;
-
-export const iconWrapper = () => () => css`
-  display: flex;
-  gap: ${rem(25)};
-`;

package/src/components/Filter/components/FilterMenu/components/FilterSearchField/FilterSearchField.tsx

@@ -1,106 +0,0 @@
-import { vars } from '@orfium/tokens';
-import type {
-  FilterProps,
-  MultiFilterProps,
-  SingleFilterProps,
-} from 'components/Filter/Filter.types';
-import Icon from 'components/Icon';
-import MultiTextFieldBase from 'components/MultiTextFieldBase';
-import ProgressIndicator from 'components/ProgressIndicator';
-import TextField from 'components/TextField';
-import React, { useMemo } from 'react';
-import { generateTestDataId } from 'utils/helpers';
-import { textFieldWrapper } from './FilterSearchField.style';
-
-export type SearchInputProps = {
-  value: string;
-  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  dataTestId?: string;
-} & Pick<
-  FilterProps,
-  'isSearchable' | 'isLoading' | 'onClear' | 'onFilterDelete' | 'dataTestPrefixId'
-> &
-  (SingleFilterProps | MultiFilterProps);
-
-const FilterSearchField = ({
-  onInputChange,
-  value,
-  dataTestId,
-  isLoading,
-  isMulti,
-  isSearchable,
-  onClear,
-  selectedFilter,
-  onFilterDelete,
-  dataTestPrefixId,
-}: SearchInputProps) => {
-  const suffix = useMemo(
-    () =>
-      isLoading ? (
-        <ProgressIndicator type="circular" dataTestPrefixId="search" />
-      ) : (
-        <Icon
-          /** @TODO replace tokens with search tokens once Search component is revisited */
-          size={vars.sizing['5']}
-          name="search"
-          color={vars.color.text.default.secondary}
-        />
-      ),
-    [isLoading]
-  );
-
-  return (
-    <div css={textFieldWrapper()}>
-      {!isMulti && isSearchable && (
-        <TextField
-          autoFocus
-          dataTestPrefixId={`${dataTestPrefixId}_filter_search`}
-          onChange={onInputChange}
-          data-testid={generateTestDataId('filter-input', dataTestId)}
-          status={{ type: 'normal' }}
-          label="Search"
-          placeholder="Search"
-          value={value}
-          suffix={suffix}
-          sx={{
-            wrapper: {
-              '&, &:focus-within, &:hover': {
-                outline: 'none',
-                border: 'none',
-                boxShadow: 'none',
-                backgroundColor: vars.color.background.default,
-              },
-            },
-          }}
-        />
-      )}
-      {isMulti === true && (
-        <MultiTextFieldBase
-          autoFocus
-          selectedOptions={selectedFilter || []}
-          dataTestPrefixId={`${dataTestPrefixId}_filter_search`}
-          onInput={onInputChange}
-          onOptionDelete={onFilterDelete}
-          onClearAllOptions={onClear}
-          isInteractive={false}
-          value={value}
-          label="Search"
-          placeholder="Search"
-          isResponsive
-          isLoading={isLoading}
-          sx={{
-            textField: { paddingTop: '12px', paddingBottom: '12px', width: '100%', minWidth: '' },
-            wrapper: {
-              boxShadow: 'none',
-              borderRadius: 0,
-              background: vars.color.background.default,
-              minWidth: '',
-            },
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-export default FilterSearchField;

package/src/components/Filter/components/FilterMenu/components/FilterSearchField/index.ts

@@ -1 +0,0 @@
-export { default } from './FilterSearchField';

package/src/components/Filter/components/FilterMenu/components/Options/Options.style.ts

@@ -1,40 +0,0 @@
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-import { FILTER_WIDTH } from 'components/Filter/constants';
-import { generateStylesFromTokens } from 'components/Typography/utils';
-import type { Theme } from 'theme';
-import { flexCenter } from 'theme/functions';
-
-const LIST_ITEM_TOKENS = {
-  height: vars.sizing['13'],
-  heightCompact: vars.sizing['10'],
-};
-
-export const optionsStyles =
-  ({ isMulti }) =>
-  () => css`
-    max-height: ${rem(FILTER_WIDTH.maxHeight)};
-
-    & > div,
-    ul {
-      border: none;
-      border-radius: 0;
-    }
-
-    & > div {
-      max-width: ${rem(FILTER_WIDTH[isMulti ? 'multi' : 'single'].maxWidth)};
-    }
-  `;
-
-export const emptyStyle = () => (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/Filter/components/FilterMenu/components/Options/Options.tsx

@@ -1,94 +0,0 @@
-import { FILTER_OPTIONS_MAX_HEIGHT } from 'components/Filter/constants';
-import type {
-  FilterOption,
-  FilterProps,
-  MultiFilterProps,
-  SingleFilterProps,
-} from 'components/Filter/Filter.types';
-import type { ListSelection } from 'components/List';
-import List, { ListItem, ListItemText } from 'components/List';
-import { MAX_NON_VIRTUALIZED_ITEMS_FILTER } from 'components/List/utils';
-import { SELECT_ALL_OPTION } from 'components/Select/constants';
-import { flatMap, head } from 'lodash-es';
-import React, { useCallback } from 'react';
-import { emptyStyle, optionsStyles } from './Options.style';
-
-export type Props = Pick<
-  FilterProps,
-  | 'items'
-  | 'defaultValue'
-  | 'isSearchable'
-  | 'isVirtualized'
-  | 'hasSelectAllOption'
-  | 'dataTestPrefixId'
-> &
-  (SingleFilterProps | MultiFilterProps) & {
-    onOptionSelect: (option: FilterOption) => void;
-    listRef?: React.MutableRefObject<HTMLUListElement>;
-  };
-
-const Options: React.FCC<Props> = ({
-  items,
-  onOptionSelect,
-  defaultValue,
-  selectedFilter,
-  isVirtualized,
-  hasSelectAllOption,
-  isMulti,
-  dataTestPrefixId,
-  listRef,
-}) => {
-  const isForcedVirtualized = items.length > MAX_NON_VIRTUALIZED_ITEMS_FILTER;
-
-  const height = isForcedVirtualized ? FILTER_OPTIONS_MAX_HEIGHT : undefined;
-
-  const onSelectionChange = useCallback(
-    (keys: ListSelection) => {
-      const keyFound = String(head(Array.from(keys)));
-      if (keyFound === SELECT_ALL_OPTION.value) {
-        onOptionSelect(SELECT_ALL_OPTION);
-      } else {
-        const optionFound = flatMap(items, (o) => o.options || o).find(
-          (o) => String(o.value) === keyFound
-        );
-        if (optionFound) onOptionSelect(optionFound);
-      }
-    },
-    [items, onOptionSelect]
-  );
-
-  return items.length ? (
-    <div css={optionsStyles({ isMulti })}>
-      <List
-        ref={listRef}
-        label="filter-options"
-        selectedKeys={isMulti === false && selectedFilter ? [selectedFilter.value] : []}
-        disabledKeys={items.filter((o) => o.isDisabled).map((o) => o.value)}
-        onSelectionChange={onSelectionChange}
-        isVirtualized={isVirtualized && isForcedVirtualized}
-        height={height}
-        dataTestPrefixId={`${dataTestPrefixId}_filter_list`}
-        aria-label="Available options"
-      >
-        {hasSelectAllOption ? (
-          <ListItem key={SELECT_ALL_OPTION.value} textValue={SELECT_ALL_OPTION.label}>
-            <ListItemText>{SELECT_ALL_OPTION.label}</ListItemText>
-          </ListItem>
-        ) : null}
-        {items
-          .filter((option) => option.value !== defaultValue.value)
-          .map((item) => (
-            <ListItem key={item.value}>
-              <ListItemText>{item.label}</ListItemText>
-            </ListItem>
-          ))}
-      </List>
-    </div>
-  ) : (
-    <div css={emptyStyle()} data-testid={`${dataTestPrefixId}_filter_list_no_options`}>
-      No options
-    </div>
-  );
-};
-
-export default Options;

package/src/components/Filter/components/FilterMenu/components/Options/index.ts

@@ -1 +0,0 @@
-export { default } from './Options';

package/src/components/Filter/components/FilterMenu/index.ts

@@ -1 +0,0 @@
-export { default } from './FilterMenu';

package/src/components/Filter/constants.ts

@@ -1,39 +0,0 @@
-export const options = [
-  { label: 'Ross Geller', value: 'option_1' },
-  { label: 'Monica Geller', value: 'option_2' },
-  { label: 'Chandler Bing', value: 'option_3' },
-  { label: 'Joey Tribbiani', value: 'option_4' },
-  { label: 'Rachel Green', value: 'option_5' },
-  { label: 'Phoebe Buffay', value: 'option_6' },
-  { label: 'Janice Litman-Goralnik', value: 'option_7' },
-  { label: 'Gunther', value: 'option_8' },
-  { label: 'Richard Burke', value: 'option_9' },
-  { label: 'Mike Hannigan', value: 'option_10' },
-  { label: 'Emily Waltham', value: 'option_11' },
-  { label: 'Mr. Heckles', value: 'option_12' },
-  { label: 'Ursula Buffay', value: 'option_13' },
-  { label: 'Estelle Leonard', value: 'option_14' },
-  { label: 'Carol Willick', value: 'option_15' },
-  { label: 'Charles Bing', value: 'option_16' },
-  { label: 'Nora Tyler Bing', value: 'option_17' },
-  { label: 'Gina Tribbiani', value: 'option_18' },
-  { label: 'Frank Buffay Jr.', value: 'option_19' },
-  { label: 'Judy Geller', value: 'option_20' },
-  { label: 'Jack Geller', value: 'option_21' },
-  { label: 'Sandra Green', value: 'option_22' },
-  { label: 'Leonard Green', value: 'option_23' },
-];
-
-export const FILTER_WIDTH = {
-  single: {
-    minWidth: 120,
-    maxWidth: 300,
-  },
-  multi: {
-    minWidth: 140,
-    maxWidth: 440,
-  },
-  maxHeight: 340,
-};
-
-export const FILTER_OPTIONS_MAX_HEIGHT = 253;

package/src/components/Filter/hooks/index.ts

@@ -1 +0,0 @@
-export { default as useFilterWithSelectionUtils } from './useFilterWithSelectionUtils';

package/src/components/Filter/hooks/useFilterWithSelectionUtils.ts

@@ -1,122 +0,0 @@
-import { debounce, differenceBy, isEqual } from 'lodash-es';
-import { useState } from 'react';
-import React from 'react';
-
-import type {
-  FilterOption,
-  FilterProps,
-  MultiFilterProps,
-  SingleFilterProps,
-} from '../Filter.types';
-import { SELECT_ALL_OPTION } from 'components/Select/constants';
-
-const useFilterWithSelectionUtils = ({
-  isMulti,
-  setIsOpen,
-  isSearchable,
-  onChange,
-  selectedFilter,
-  onAsyncSearch,
-  isAsync,
-  minCharactersToSearch,
-  items,
-  onClear,
-}: Pick<
-  FilterProps,
-  'isSearchable' | 'onAsyncSearch' | 'isAsync' | 'minCharactersToSearch' | 'items' | 'onClear'
-> & {
-  setIsOpen: any;
-} & (SingleFilterProps | MultiFilterProps)) => {
-  const [searchValue, setSearchValue] = useState('');
-
-  const filteredOptions: FilterOption[] = React.useMemo(() => {
-    if (!items) return undefined;
-
-    const optionsToBeFiltered: FilterOption[] =
-      isMulti && Array.isArray(selectedFilter)
-        ? differenceBy(items, selectedFilter, 'value')
-        : items;
-
-    if (isAsync) return optionsToBeFiltered;
-
-    return optionsToBeFiltered.filter(
-      (item) => !searchValue || item.label.toLowerCase().includes(searchValue.toLowerCase())
-    );
-  }, [isAsync, items, isMulti, selectedFilter, searchValue]);
-
-  const handleFilterClick = (option: FilterOption) => {
-    if (!isMulti) {
-      setIsOpen(false);
-    }
-
-    if (isSearchable) {
-      setSearchValue('');
-    }
-
-    if (isMulti === true) {
-      if (onChange && selectedFilter) {
-        if (isEqual(option, SELECT_ALL_OPTION)) {
-          onChange([...selectedFilter, ...filteredOptions.filter((o) => !o.isDisabled)]);
-        } else {
-          onChange([...selectedFilter, option]);
-        }
-      }
-    } else {
-      onChange(option);
-    }
-  };
-
-  const debouncedOnChange = React.useCallback(
-    debounce((value: string) => {
-      onAsyncSearch?.(value);
-    }, 400),
-    []
-  );
-
-  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const {
-      target: { value },
-    } = event;
-
-    if (isSearchable) {
-      setSearchValue(value);
-    }
-
-    if (isAsync) {
-      event.persist();
-
-      if (minCharactersToSearch && value.length && value.length < minCharactersToSearch) {
-        return;
-      }
-
-      debouncedOnChange(value.trim());
-    }
-  };
-
-  const handleFilterDelete = (option: FilterOption) => {
-    const items = Array.isArray(selectedFilter)
-      ? selectedFilter.filter((o) => o.value !== option.value)
-      : [];
-
-    if (isMulti === true && onChange) onChange(items);
-  };
-
-  const handleClear = () => {
-    if (onClear) {
-      onClear();
-    }
-
-    setSearchValue('');
-  };
-
-  return {
-    searchValue,
-    handleFilterClick,
-    handleInput,
-    filteredOptions,
-    handleFilterDelete,
-    handleClear,
-  };
-};
-
-export default useFilterWithSelectionUtils;

package/src/components/Filter/index.ts

@@ -1,3 +0,0 @@
-export { default } from './Filter';
-export { default as StatefulFilter } from './StatefulFilter';
-export * from './Filter.types';

package/src/components/Icon/Icon.style.ts

@@ -1,52 +0,0 @@
-import { css } from '@emotion/react';
-import { rem } from '@orfium/tokens';
-
-import type { Theme } from '../../theme';
-import type { IconProps } from './Icon';
-
-export const iconContainerStyles =
-  ({
-    hasHover,
-    isInteractive,
-    size = 20,
-  }: Pick<IconProps, 'hasHover' | 'size'> & { isInteractive?: boolean }) =>
-  (theme: Theme) => {
-    const iconSize = typeof size === 'number' || size.includes('px') ? rem(size) : size;
-
-    return css`
-      width: ${iconSize};
-      height: ${iconSize};
-      display: flex;
-
-      ${isInteractive &&
-      `
-        cursor: pointer;
-      `}
-
-      ${hasHover &&
-      `
-        &:hover, &:focus-visible {
-          transition: all 0.2s;
-          border-radius: 100%;
-          background: ${theme.tokens.state.get('backgroundColor.hover')};
-          box-shadow: 0px 0px 0px 8px ${theme.tokens.state.get('backgroundColor.hover')};
-        }
-      `}
-    `;
-  };
-
-export const iconStyles =
-  ({ color, size = 20 }: Pick<IconProps, 'color' | 'size'>) =>
-  () => {
-    const iconSize = typeof size === 'number' || size.includes('px') ? rem(size) : size;
-
-    return css`
-      width: ${iconSize};
-      height: ${iconSize};
-
-      path,
-      rect {
-        fill: ${color} !important;
-      }
-    `;
-  };

package/src/components/Icon/Icon.tsx

@@ -1,68 +0,0 @@
-import { vars } from '@orfium/tokens';
-import { useSlotProps } from 'components/utils/Slots';
-import useCombinedRefs from 'hooks/useCombinedRefs';
-import * as React from 'react';
-import { useRef } from 'react';
-import type { DivProps } from 'utils/common';
-import type { TestProps } from 'utils/types';
-import iconSelector from './assets/iconSelector';
-import { iconContainerStyles, iconStyles } from './Icon.style';
-import type { AcceptedIconNames } from './Icon.types';
-
-export type IconProps = {
-  /** This property defines witch icon to use */
-  name: AcceptedIconNames;
-  /** Property indicating the color of the icon. Accepts all css:color values */
-  color?: string;
-  /**
-   * Property indicating the size of the icon. If number or string ending in 'px' is imported, it's converted to rem.
-   * Otherwise it's passed directly to the css:width/height. Defaults to 20px (converted to rem)
-   */
-  size?: string | number;
-  /** Whether the icon has a onHover style. Defaults to true if onClick is provided */
-  hasHover?: boolean;
-} & DivProps &
-  TestProps;
-
-/**
- *
- * @deprecated {@link Icon} has been deprecated; use vanilla Icon instead.
- *
- */
-const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {
-  props = useSlotProps(props, 'icon');
-  const {
-    name,
-    color = vars.color.text.default.secondary,
-    size = 20,
-    onClick,
-    dataTestId,
-    hasHover,
-    ...rest
-  } = props;
-  const combinedRef = useCombinedRefs<HTMLDivElement>(ref, useRef(null));
-  const isInteractive = Boolean(onClick);
-  const Icon = iconSelector[name];
-
-  return (
-    <div
-      onClick={onClick}
-      css={iconContainerStyles({ size, hasHover: hasHover ?? isInteractive, isInteractive })}
-      data-testid={dataTestId}
-      ref={combinedRef}
-      tabIndex={isInteractive ? 0 : undefined}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' && onClick) {
-          combinedRef.current.click();
-        }
-      }}
-      {...rest}
-    >
-      <Icon css={iconStyles({ color, size })} />
-    </div>
-  );
-});
-
-Icon.displayName = 'Icon';
-
-export default Icon;