@ssa-ui-kit/core 1.0.2 → 1.0.4

package/src/components/Typeahead/components/TypeaheadOption.tsx

@@ -0,0 +1,12 @@
+import Icon from '@components/Icon';
+import * as S from '../styles';
+import { TypeaheadItemProps } from '../types';
+
+export const TypeaheadOption = ({ children, ...rest }: TypeaheadItemProps) => (
+  <S.TypeaheadOption {...rest}>
+    {children}{' '}
+    {rest.isActive && (
+      <Icon name="check" size={10} css={{ marginLeft: 'auto' }} />
+    )}
+  </S.TypeaheadOption>
+);

package/src/components/Typeahead/components/TypeaheadOptions.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NoOptions } from './NoOptions';
+import { TypeaheadItemsListProps } from '../types';
+import { useTypeaheadContext } from '../Typeahead.context';
+import * as S from '../styles';
+
+export const TypeaheadOptions = ({
+  noItemsMessage = 'No matches found',
+  children,
+}: TypeaheadItemsListProps) => {
+  const context = useTypeaheadContext();
+  let options = context.options || [];
+
+  if (React.Children.toArray(children).filter(Boolean).length === 0) {
+    options = [
+      <NoOptions key={'no-items'} aria-selected={false}>
+        {noItemsMessage}
+      </NoOptions>,
+    ];
+  }
+
+  return (
+    <S.TypeaheadOptionsBase role="listbox">{options}</S.TypeaheadOptionsBase>
+  );
+};

package/src/components/Typeahead/components/TypeaheadTrigger.tsx

@@ -0,0 +1,26 @@
+import { MultipleTrigger } from './MultipleTrigger';
+import { SingleTrigger } from './SingleTrigger';
+import { useTypeaheadContext } from '../Typeahead.context';
+import * as S from '../styles';
+
+export const TypeaheadTrigger = () => {
+  const context = useTypeaheadContext();
+  return (
+    <S.TypeaheadTrigger
+      as="div"
+      role="combobox"
+      ref={context.triggerRef}
+      className={context.className}
+      isOpen={context.isOpen}
+      isDisabled={context.isDisabled}
+      status={context.status}
+      aria-labelledby={`typeahead-label-${context.typeaheadId}`}
+      aria-controls={`typeahead-popup-${context.typeaheadId}`}
+      startIcon={context.startIcon}
+      startIconClassName={context.startIconClassName}
+      endIcon={context.endIcon}
+      endIconClassName={context.endIconClassName}>
+      {context.isMultiple ? <MultipleTrigger /> : <SingleTrigger />}
+    </S.TypeaheadTrigger>
+  );
+};

package/src/components/Typeahead/components/index.ts

@@ -0,0 +1,7 @@
+export * from './MultipleTrigger';
+export * from './SingleTrigger';
+export * from './TypeaheadTrigger';
+export * from './TypeaheadItem';
+export * from './TypeaheadOptions';
+export * from './TypeaheadOption';
+export * from './NoOptions';

package/src/components/Typeahead/index.ts

@@ -0,0 +1,5 @@
+export * from './Typeahead';
+export * from './components/TypeaheadOptions';
+export * from './components/TypeaheadOption';
+export * from './components/TypeaheadItem';
+export * from './utils';

package/src/components/Typeahead/styles.ts

@@ -0,0 +1,193 @@
+import { css } from '@emotion/css';
+import styled from '@emotion/styled';
+import Wrapper from '@components/Wrapper';
+import Button from '@components/Button';
+import { PopoverTrigger } from '@components/Popover';
+import { useTypeahead } from './useTypeahead';
+import { TypeaheadItemProps } from './types';
+
+export const TypeaheadOptionsBase = styled.ul`
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background: #fff;
+  border-radius: 8px;
+  filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+  backdrop-filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+`;
+
+export const TypeaheadOption = styled.li<TypeaheadItemProps>`
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  gap: 8px;
+  padding: 12px;
+  height: 40px;
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.blueRoyal12 : 'none'};
+  &:hover {
+    background: rgba(72, 125, 225, 0.06);
+  }
+`;
+
+export const TypeaheadInput = css`
+  &.typeahead-input {
+    border: none;
+    border-radius: 0;
+    height: 32px;
+    cursor: pointer;
+    padding: 0;
+    background: transparent;
+    text-indent: 8px;
+    &:active,
+    &:focus {
+      min-width: 100%;
+    }
+  }
+`;
+
+export const TypeaheadInputPlaceholder = css`
+  position: absolute;
+  top: 0;
+  left: -4px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: rgba(0, 0, 0, 0.54);
+  &:disabled:hover {
+    cursor: default;
+  }
+`;
+
+export const TypeaheadInputWrapper = css`
+  height: 32px;
+  z-index: 5;
+  background: transparent;
+  margin-left: -8px;
+  &:active,
+  &:focus {
+    min-width: 100%;
+  }
+`;
+
+export const TypeaheadItem = styled.div<{ isDisabled?: boolean }>`
+  display: flex;
+  gap: 6px;
+  background: ${({ theme, isDisabled }) =>
+    isDisabled
+      ? theme.colors.greySelectedMenuItem
+      : theme.colors.greyLighter40};
+  border-radius: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.grey};
+  color: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.colors.grey : theme.colors.greyDarker};
+  font-weight: 500;
+  font-size: 14px;
+  height: 32px;
+  align-items: center;
+  padding: 6px;
+  user-select: none;
+`;
+
+export const TypeaheadItemLabel = styled.div<{ isDisabled?: boolean }>`
+  color: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.colors.grey : theme.colors.greyDarker};
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  cursor: default;
+`;
+
+export const TypeaheadItemCross = styled(Button)`
+  background: none;
+  padding: 0;
+  padding-right: 5;
+  &:active,
+  &:focus,
+  &:hover {
+    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
+    background: none;
+    box-shadow: none;
+  }
+  &:disabled {
+    background: none;
+  }
+`;
+
+export const TypeaheadInputsGroupWrapper = styled(Wrapper)<{
+  isOpen: boolean;
+}>`
+  position: relative;
+  flex: 1 1 0%;
+  min-width: ${({ isOpen }) => (isOpen ? '50px' : 'auto')};
+  flex-direction: column !important;
+`;
+
+export const TypeaheadTrigger = styled(PopoverTrigger)<{
+  isOpen: boolean;
+  status: ReturnType<typeof useTypeahead>['status'];
+}>`
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid
+    ${({ status, theme }) =>
+      status === 'basic'
+        ? theme.colors.grey
+        : status === 'error'
+        ? theme.colors.red
+        : theme.colors.greenLighter};
+  min-height: 44px;
+  height: auto;
+  background: #fff;
+  gap: 8px;
+  padding: 5px 28px 5px 8px;
+  width: 300px;
+  flex-wrap: wrap;
+  border-color: ${({ isOpen, theme, status }) =>
+    isOpen &&
+    (status === 'error'
+      ? theme.colors.red
+      : status === 'success'
+      ? theme.colors.greenLighter
+      : theme.colors.blueRoyal)};
+  background: ${({ isDisabled, theme }) =>
+    isDisabled ? theme.colors.greyLighter : theme.colors.white};
+  &:active,
+  &:focus,
+  &:hover {
+    background: ${({ isDisabled, theme }) =>
+      isDisabled ? theme.colors.greyLighter : theme.colors.white};
+    box-shadow: none;
+  }
+  &:hover {
+    border-color: ${({ isDisabled, theme, status }) =>
+      isDisabled
+        ? theme.colors.grey
+        : status === 'error'
+        ? theme.colors.red
+        : status === 'success'
+        ? theme.colors.greenLighter
+        : theme.colors.greyDarker80};
+    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
+  }
+  &:focus,
+  &:active {
+    border-color: ${({ theme, status }) =>
+      status === 'error'
+        ? theme.colors.red
+        : status === 'success'
+        ? theme.colors.greenLighter
+        : theme.colors.blueRoyal};
+    ${({ isDisabled, theme }) =>
+      isDisabled && {
+        borderColor: theme.colors.grey,
+      }}
+  }
+`;

package/src/components/Typeahead/types.ts

@@ -0,0 +1,77 @@
+import { CommonProps } from '@global-types/emotion';
+import {
+  FieldError,
+  FieldValues,
+  UseFormReturn,
+  UseFormSetValue,
+} from 'react-hook-form';
+
+export type TypeaheadValue = string | number;
+
+export type TypeaheadOptionProps = Record<string, TypeaheadValue>;
+
+export interface TypeaheadProps {
+  initialSelectedItems?: Array<TypeaheadValue>;
+  isMultiple?: boolean;
+  isDisabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  optionsClassName?: string;
+  isOpen?: boolean;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  startIconClassName?: string;
+  endIconClassName?: string;
+  name?: string;
+  label?: string;
+  helperText?: string;
+  errors?: FieldError;
+  success?: boolean;
+  validationSchema?: Record<string, unknown>;
+  placeholder?: string | null;
+  setValue?: UseFormSetValue<FieldValues>;
+  register?: UseFormReturn['register'];
+  onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
+  renderOption?: (data: {
+    value: string | number;
+    input: string;
+    label: string;
+  }) => React.ReactNode;
+}
+
+export type UseTypeaheadProps = Pick<
+  TypeaheadProps,
+  | 'initialSelectedItems'
+  | 'isDisabled'
+  | 'children'
+  | 'isMultiple'
+  | 'onChange'
+  | 'renderOption'
+  | 'isOpen'
+  | 'className'
+  | 'startIcon'
+  | 'endIcon'
+  | 'startIconClassName'
+  | 'endIconClassName'
+  | 'name'
+  | 'register'
+  | 'setValue'
+  | 'validationSchema'
+  | 'errors'
+  | 'success'
+  | 'placeholder'
+>;
+
+export interface TypeaheadItemsListProps extends CommonProps {
+  children?: React.ReactNode;
+  noItemsMessage?: string;
+}
+
+export interface TypeaheadItemProps extends CommonProps {
+  isActive?: boolean;
+  isDisabled?: boolean;
+  value?: string | number;
+  label?: string | number;
+  children?: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}

package/src/components/Typeahead/useTypeahead.tsx

@@ -0,0 +1,321 @@
+import React, {
+  BaseSyntheticEvent,
+  MouseEventHandler,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import { propOr } from '@ssa-ui-kit/utils';
+import { TypeaheadOptionProps, UseTypeaheadProps } from './types';
+
+export const useTypeahead = ({
+  name = 'typeahead-input',
+  isOpen: isInitOpen,
+  initialSelectedItems,
+  isDisabled,
+  isMultiple,
+  children,
+  className,
+  startIcon,
+  endIcon,
+  startIconClassName,
+  endIconClassName,
+  validationSchema,
+  errors,
+  success,
+  placeholder,
+  register,
+  setValue,
+  onChange,
+  renderOption,
+}: UseTypeaheadProps) => {
+  const inputName = `${name}-text`;
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+  const [selected, setSelected] = useState<Array<string | number>>(
+    initialSelectedItems || [],
+  );
+  const [optionsWithKey, setOptionsWithKey] = useState<
+    Record<number | string, Record<string, string | number>>
+  >({});
+  const [items, setItems] = useState<Array<React.ReactElement> | undefined>();
+  const [inputValue, setInputValue] = useState<string>('');
+  const [status, setStatus] = useState<'basic' | 'success' | 'error'>('basic');
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const typeaheadId = useId();
+  const triggerRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement>(null);
+  const [firstSuggestion, setFirstSuggestion] = useState('');
+
+  useEffect(() => {
+    if (!register) {
+      console.warn('Typeahead component must be used within a Form component');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isMultiple) {
+      setValue?.(name, selected);
+      setInputValue('');
+      setFirstSuggestion('');
+    } else {
+      setValue?.(name, selected.length ? selected[0] : undefined);
+    }
+  }, [selected]);
+
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isDisabled]);
+
+  useEffect(() => {
+    const status = success ? 'success' : errors ? 'error' : 'basic';
+    setStatus(status);
+  }, [errors, success]);
+
+  useEffect(() => {
+    const keyedOptions: Record<
+      number | string,
+      Record<string, string | number>
+    > = {};
+    const childItems = (
+      React.Children.toArray(children).filter(Boolean) as React.ReactElement[]
+    ).map((child, index) => {
+      keyedOptions[child.props.value] = {
+        ...child.props,
+      };
+
+      return React.cloneElement(child, {
+        index,
+        ...child.props,
+      });
+    });
+    setOptionsWithKey(keyedOptions);
+    setItems(childItems);
+  }, [initialSelectedItems, children]);
+
+  useEffect(() => {
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+    const filteredOptions = [...childrenArray] as React.ReactElement[];
+    const childItems = filteredOptions.map((child, index) => {
+      const { id, value, label, isDisabled } = child.props;
+      const isActive = selected.includes(child.props.value);
+      return React.cloneElement(child, {
+        index,
+        ...child.props,
+        isActive,
+        isDisabled,
+        id,
+        'aria-selected': isActive,
+        'aria-labelledby': `typeahead-label-${name}`,
+        role: 'option',
+        onClick: (event: BaseSyntheticEvent) => {
+          event.preventDefault();
+          if (!isDisabled) {
+            handleChange(child.props.value);
+          }
+        },
+        children: renderOption
+          ? renderOption({ value: id || value, input: inputValue || '', label })
+          : child.props.children || child.props.label || child.props.value,
+      });
+    });
+    setItems(childItems);
+  }, [inputValue, optionsWithKey, selected]);
+
+  useEffect(() => {
+    if (!isMultiple && Object.keys(optionsWithKey).length) {
+      const foundItem = Object.values(optionsWithKey).find(
+        (item) => item.label === inputValue,
+      );
+      if (!foundItem && selected.length) {
+        setSelected([]);
+      }
+      if (foundItem && !selected.includes(foundItem?.value)) {
+        setSelected([foundItem?.value]);
+      }
+    }
+  }, [optionsWithKey, inputValue]);
+
+  useEffect(() => {
+    if (!isMultiple && selected.length && Object.keys(optionsWithKey).length) {
+      const currentOption = optionsWithKey[selected[0]];
+      const optionText =
+        currentOption &&
+        (currentOption.children || currentOption.label || currentOption.value);
+      setInputValue(`${optionText}`);
+    }
+  }, [selected, optionsWithKey]);
+
+  useEffect(() => {
+    if (inputValue) {
+      const newFirstSuggestion = Object.values(optionsWithKey)?.find((item) => {
+        const label = propOr<TypeaheadOptionProps, string>('', 'label')(item);
+        return label.toLowerCase().startsWith(inputValue.toLowerCase());
+      });
+      const firstSuggestionLabel = propOr<TypeaheadOptionProps, string>(
+        '',
+        'label',
+      )(newFirstSuggestion as unknown as TypeaheadOptionProps);
+      const humanSuggestionLabel = inputValue.concat(
+        firstSuggestionLabel.slice(inputValue.length),
+      );
+      setFirstSuggestion(humanSuggestionLabel);
+    } else {
+      setFirstSuggestion('');
+      if (isMultiple) {
+        setInputValue('');
+      }
+    }
+  }, [inputValue, items, selected]);
+
+  const handleOpenChange = (open: boolean) => {
+    if (!isDisabled) {
+      setIsOpen(open);
+    }
+  };
+
+  const handleChange = (changingValue?: string | number) => {
+    if (isDisabled || changingValue === undefined) {
+      return;
+    }
+    const isNewSelected = true;
+    const isChangingItemSelected = selected.includes(changingValue);
+    if (isMultiple) {
+      setSelected((currentSelected) =>
+        isChangingItemSelected
+          ? currentSelected.filter((current) => current !== changingValue)
+          : [...currentSelected, changingValue],
+      );
+      setInputValue('');
+    } else {
+      if (selected[0] === changingValue) {
+        setSelected([]);
+        setInputValue('');
+      } else {
+        setSelected([changingValue]);
+      }
+    }
+    setIsOpen(false);
+    setFirstSuggestion('');
+    inputRef.current?.focus();
+    onChange && onChange(changingValue, isNewSelected);
+  };
+
+  const handleClearAll = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (isDisabled) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    setSelected([]);
+    setInputValue('');
+    setIsOpen(false);
+    setFirstSuggestion('');
+    inputRef.current?.focus();
+  };
+
+  const handleInputClick: React.MouseEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    if (!isDisabled) {
+      inputRef.current?.focus();
+      setIsOpen(true);
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  const handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    if (['Tab', 'Space'].includes(event.code) && !firstSuggestion) {
+      setIsOpen(true);
+      inputRef.current?.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    if (['Tab', 'Enter'].includes(event.code) && firstSuggestion) {
+      const foundItem = Object.values(optionsWithKey).find(
+        (item) =>
+          `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase(),
+      );
+      handleChange(foundItem?.value);
+      if (foundItem) {
+        setInputValue(`${foundItem?.label}`);
+      }
+      event.preventDefault();
+      return false;
+    }
+    if (
+      isMultiple &&
+      event.code === 'Backspace' &&
+      selected.length > 0 &&
+      !firstSuggestion
+    ) {
+      handleChange(selected[selected.length - 1]);
+      event.preventDefault();
+      return false;
+    }
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    setInputValue(event.target.value);
+  };
+
+  const handleSelectedClick: React.MouseEventHandler<HTMLDivElement> = (
+    event,
+  ) => {
+    event.stopPropagation();
+  };
+
+  const handleRemoveSelectedClick =
+    (selectedItem: number | string): MouseEventHandler<HTMLButtonElement> =>
+    (event) => {
+      event.stopPropagation();
+      handleChange(selectedItem);
+    };
+
+  return {
+    isOpen,
+    isDisabled,
+    optionsWithKey,
+    selectedItems: selected,
+    inputRef,
+    firstSuggestion,
+    isMultiple,
+    typeaheadId,
+    triggerRef,
+    className,
+    startIcon,
+    endIcon,
+    startIconClassName,
+    endIconClassName,
+    name,
+    inputName,
+    inputValue,
+    validationSchema,
+    status,
+    placeholder,
+    options: items,
+    register,
+    setValue,
+    handleChange,
+    handleClearAll,
+    handleOpenChange,
+    handleInputChange,
+    handleInputClick,
+    handleInputKeyDown,
+    handleSelectedClick,
+    handleRemoveSelectedClick,
+  };
+};
+
+export type UseTypeaheadResult = ReturnType<typeof useTypeahead>;

package/src/components/Typeahead/utils.tsx

@@ -0,0 +1,22 @@
+export const highlightInputMatch = (
+  item: string | undefined,
+  keyword: string,
+) => {
+  if (!item || !keyword) return item;
+  const lowerCasedInputValue = keyword.toLowerCase();
+  const hitIndex = item
+    .toString()
+    .toLocaleLowerCase()
+    .indexOf(lowerCasedInputValue);
+  if (hitIndex === -1) return item;
+  const before = item.slice(0, hitIndex);
+  const match = item.slice(hitIndex, hitIndex + keyword.length);
+  const after = item.slice(hitIndex + keyword.length);
+  return (
+    <span>
+      {before}
+      <b>{match}</b>
+      {after}
+    </span>
+  );
+};

package/src/components/index.ts

@@ -100,3 +100,5 @@ export * from './PieChart';
 export * from './CollapsibleNavBar';
 export * from './Filters';
 export * from './TableFilters';
+export * from './Typeahead';
+export * from './ImageItem';