chili-ui 0.0.1

package/leda/components/MultiSelect/constants.ts

@@ -0,0 +1,9 @@
+export const selectAllSuggestion = {
+  text: 'Select all',
+};
+
+export enum SelectedState {
+  Nothing,
+  Some,
+  All,
+}

package/leda/components/MultiSelect/handlers.ts

@@ -0,0 +1,266 @@
+import type * as React from 'react';
+import { isFunction, isNil } from 'lodash';
+import type {
+  BlurData,
+  ClearData,
+  FocusData,
+  KeyDownData,
+  MouseDownData,
+  MultiSelectProps,
+  SelectData,
+  Value,
+} from './types';
+import type { CustomEventHandler, SetState, SomeObject } from '../../commonTypes';
+import type { SuggestionTarget } from '../../src/SuggestionList/types';
+import { filterData, getShouldUniteTags } from './helpers';
+import { selectAllSuggestion } from './constants';
+
+export const createFocusHandler = (props: MultiSelectProps, extraData: FocusData): React.FocusEventHandler<HTMLInputElement> => (ev) => {
+  const { onFocus, name } = props;
+
+  const { value, setFocused } = extraData;
+
+  if (isFunction(onFocus)) {
+    const customEvent = {
+      ...ev,
+      component: {
+        name,
+        value,
+      },
+    };
+
+    onFocus(customEvent);
+  }
+
+  setFocused(true);
+};
+
+export const createBlurHandler = (props: MultiSelectProps, extraData: BlurData): React.FocusEventHandler<HTMLInputElement> => (ev) => {
+  const { onBlur, name } = props;
+
+  const {
+    setFocused, value, validateCurrent, setFilterValue,
+  } = extraData;
+
+  const isValid = validateCurrent();
+
+  if (isFunction(onBlur)) {
+    const customEvent = {
+      ...ev,
+      component: {
+        value,
+        name,
+        isValid,
+      },
+    };
+
+    onBlur(customEvent);
+  }
+
+  setFocused(false);
+
+  setFilterValue('');
+};
+
+export const createSelectHandler = (props: MultiSelectProps, extraData: SelectData): CustomEventHandler<React.MouseEvent<HTMLElement | SVGElement> & SuggestionTarget> => (ev) => {
+  const {
+    data, onChange, name, value: valueProp, isDisabled, maxSelected,
+  } = props;
+
+  if (isDisabled) return;
+
+  const {
+    setValue, value, setFilterValue,
+  } = extraData;
+
+  const shouldRemoveValue = (value as (string | number | SomeObject)[]).includes(ev.target.value);
+
+  const isSelectAllClicked = ev.target.value === selectAllSuggestion;
+
+  const newValue = (() => {
+    if (isSelectAllClicked) {
+      // todo investigate if throwing an error is better
+      if (data === undefined) return [];
+      if (data?.length === value.length) return [];
+      return [...data];
+    }
+
+    if (shouldRemoveValue) {
+      return (value as (string | number | SomeObject)[]).filter((item) => (item !== ev.target.value));
+    }
+
+    return [...value, ev.target.value];
+  })() as (string[] | number[] | SomeObject[]);
+
+  const selectedValue = (() => {
+    if (isSelectAllClicked) return undefined; // todo: return correct selected value
+    return shouldRemoveValue ? undefined : ev.target.value;
+  })();
+
+  const deselectedValues = (() => {
+    if (isSelectAllClicked) {
+      return value.length === data?.length ? data : [];
+    }
+    return shouldRemoveValue ? [ev.target.value] as string[] | number[] | SomeObject[] : undefined;
+  })();
+
+  if (!isNil(maxSelected) && newValue.length === maxSelected) {
+    setFilterValue('');
+  }
+
+  if (valueProp === undefined) setValue(newValue);
+
+  if (isFunction(onChange)) {
+    const customEvent = {
+      ...ev,
+      component: {
+        value: newValue,
+        name,
+        selectedValue,
+        deselectedValues,
+      },
+    };
+
+    onChange(customEvent);
+  }
+};
+
+export const createClearHandler = (props: MultiSelectProps, extraData: ClearData): React.MouseEventHandler<SVGElement> => (ev) => {
+  const {
+    onChange, name, value: valueProp, isDisabled,
+  } = props;
+
+  if (isDisabled) return;
+
+  const { setValue, value } = extraData;
+
+  if (valueProp === undefined) setValue([]);
+
+  if (isFunction(onChange)) {
+    const customEvent = {
+      ...ev,
+      component: {
+        value: [] as string[] | number[] | SomeObject[],
+        name,
+        deselectedValues: value,
+      },
+    };
+
+    onChange(customEvent);
+  }
+};
+
+export const createMouseDownHandler = (props: MultiSelectProps, extraData: MouseDownData): React.MouseEventHandler<HTMLElement> => (ev) => {
+  ev.preventDefault();
+
+  const { inputRef: { current: input } } = extraData;
+
+  if (input) input.focus();
+};
+
+export const createKeyDownHandler = (props: MultiSelectProps, extraData: KeyDownData): React.KeyboardEventHandler<HTMLInputElement> => (ev) => {
+  const {
+    data, textField, filterRule, compareObjectsBy, maxTags,
+  } = props;
+
+  const {
+    filterValue, highlightedSuggestion, setHighlightedSuggestion, handleSelect, value,
+  } = extraData;
+
+  if (!data) return;
+
+  const filteredData = filterData({
+    data,
+    filterValue,
+    textField,
+    filterRule,
+    value,
+    compareObjectsBy,
+  }) || [];
+
+  const highlightedItem = (filteredData as (string | number | SomeObject)[]).find((item) => item === highlightedSuggestion);
+
+  const currentIndex = (filteredData as (string | number | SomeObject)[]).indexOf(highlightedItem || '');
+
+  if (ev.key === 'ArrowDown' || ev.key === 'Down') {
+    // prevent page scroll
+    ev.preventDefault();
+    // new index, suggestion list is cyclic
+    const nextIndex = (currentIndex + 1) % filteredData.length;
+
+    const newHighlightedSuggestion = filteredData[nextIndex];
+
+    setHighlightedSuggestion(newHighlightedSuggestion);
+
+    return;
+  }
+
+  if (ev.key === 'ArrowUp' || ev.key === 'Up') {
+    // prevent page scroll
+    ev.preventDefault();
+    // new index, suggestion list is cyclic
+    const nextIndex = (() => {
+      if (currentIndex <= 0) return filteredData.length - 1;
+
+      return currentIndex - 1;
+    })();
+
+    const newHighlightedSuggestion = filteredData[nextIndex];
+
+    setHighlightedSuggestion(newHighlightedSuggestion);
+
+    return;
+  }
+
+  if (ev.key === 'Enter') {
+    if (!highlightedSuggestion) return;
+
+    setHighlightedSuggestion(null);
+
+    handleSelect({
+      ...ev,
+      target: {
+        ...ev.target,
+        value: highlightedSuggestion,
+      },
+    } as unknown as React.MouseEvent<HTMLElement> & SuggestionTarget);
+
+    return;
+  }
+
+  if (ev.key === 'Backspace' && !filterValue && value.length !== 0) {
+    const shouldUniteTags = getShouldUniteTags({ maxTags, value });
+    if (shouldUniteTags) return;
+
+    handleSelect({
+      ...ev,
+      target: {
+        ...ev.target,
+        value: value[value.length - 1],
+      },
+    } as unknown as React.MouseEvent<HTMLElement> & SuggestionTarget);
+  }
+};
+
+export const createResetHandler = ({
+  props,
+  setValue,
+  value,
+}: {
+  props: MultiSelectProps,
+  setValue: SetState<Value[]>,
+  value: Value[],
+}) => () => {
+  setValue(value);
+  if (isFunction(props.onChange)) {
+    const customEvent = {
+      component: {
+        name: props.name,
+        value,
+        deselectedValues: undefined,
+        selectedValue: undefined,
+      },
+    };
+    props.onChange(customEvent);
+  }
+};

package/leda/components/MultiSelect/helpers.ts

@@ -0,0 +1,66 @@
+import { difference } from 'lodash';
+import { filterSuggestionByRule, checkIsTheSameObject } from '../../utils';
+import { getText } from '../../src/SuggestionList/helpers';
+import type {
+  FilterDataParams, GetSortedSuggestionsProps, MultiSelectProps, Value,
+} from './types';
+
+export const filterData = ({
+  compareObjectsBy,
+  data,
+  filterRule,
+  filterValue,
+  shouldKeepSuggestions,
+  textField,
+  value: values,
+}: FilterDataParams): MultiSelectProps['data'] => {
+  if (!data) return undefined;
+
+  const suggestions = (() => {
+    if (shouldKeepSuggestions) return data;
+
+    return data
+      // removing all selected values
+      .filter((item) => !values.find((value) => checkIsTheSameObject({ obj1: item, obj2: value, compareObjectsBy })));
+  })();
+
+  // and filtering by filterValue
+  const filteredData = suggestions.filter((item) => filterSuggestionByRule(getText(item, textField), filterValue || '', filterRule));
+
+  if (filteredData.length === 0) return undefined;
+
+  return filteredData;
+};
+
+export const getValue = (valueProp: Value[] | null | undefined, valueState: Value[]): Value[] => {
+  if (valueProp === undefined) return valueState;
+
+  if (valueProp === null) return [];
+
+  return valueProp;
+};
+
+export const getShouldUniteTags = ({ maxTags, value }: { maxTags?: number, value: Value[] }) => maxTags != null && value.length >= maxTags;
+
+export const getSortedSuggestions = ({
+  shouldSelectedGoFirst,
+  selectedSuggestions,
+  filteredData,
+  sortSuggestions,
+}: GetSortedSuggestionsProps) => {
+  const suggestions = filteredData ? filteredData.slice() : [];
+
+  if (shouldSelectedGoFirst && selectedSuggestions) {
+    const notSelectedSuggestions = selectedSuggestions ? difference(suggestions, selectedSuggestions) : suggestions;
+    if (sortSuggestions) {
+      notSelectedSuggestions.sort(sortSuggestions);
+    }
+
+    const sortedSelectedSuggestions = sortSuggestions ? [...selectedSuggestions].sort(sortSuggestions) : selectedSuggestions;
+    return [...sortedSelectedSuggestions, ...notSelectedSuggestions];
+  }
+
+  return sortSuggestions
+    ? suggestions.sort(sortSuggestions)
+    : suggestions;
+};

package/leda/components/MultiSelect/index.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import * as React from 'react';
+import { isNil } from 'lodash';
+import type {
+  MultiSelectComponent, MultiSelectProps, Value,
+} from './types';
+import {
+  getClassNames, getIsEmptyAndRequired, useElement, useProps, useTheme,
+} from '../../utils';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { useValidation } from '../Validation';
+import { SuggestionList } from '../../src/SuggestionList';
+import {
+  createBlurHandler,
+  createClearHandler,
+  createFocusHandler,
+  createKeyDownHandler,
+  createMouseDownHandler,
+  createResetHandler,
+  createSelectHandler,
+} from './handlers';
+import { TagsContainer } from './TagsContainer';
+import { Div } from '../Div';
+import { LedaContext } from '../LedaProvider';
+import { Tag } from '../Tags';
+import {
+  filterData, getShouldUniteTags, getSortedSuggestions, getValue,
+} from './helpers';
+import { createCheckBoxesRender } from './renders';
+import { selectAllSuggestion, SelectedState } from './constants';
+import { Icon, IconTypes } from '../..';
+import { useMessages } from '../../utils/useMessages';
+
+export const MultiSelect = React.forwardRef((props: MultiSelectProps, ref: React.Ref<HTMLElement>): React.ReactElement => {
+  const {
+    autoComplete = 'off',
+    canSelectAll,
+    className,
+    compareObjectsBy,
+    data,
+    defaultValue,
+    filterRule,
+    form,
+    groupBy,
+    hasCheckBoxes,
+    hasClearButton,
+    inputRender,
+    invalidMessage,
+    invalidMessageRender,
+    isDisabled,
+    isLoading,
+    isOpen,
+    isRequired,
+    isValid: isValidProp,
+    itemRender,
+    listRender,
+    maxSelected,
+    maxTags,
+    messages,
+    name,
+    noSuggestionsRender,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    requiredMessage,
+    selectAllItemRender,
+    shouldHideInput,
+    shouldKeepSuggestions,
+    shouldSelectedGoFirst,
+    shouldValidateUnmounted,
+    sortSuggestions,
+    tagRender,
+    tagsUnionRender,
+    textField,
+    theme: themeProp,
+    validator,
+    value: valueProp,
+    wrapperRender,
+    ...restProps
+  } = useProps(props);
+
+  React.useEffect(() => {
+    // Warn user about possible misused props
+    if (hasCheckBoxes && !shouldKeepSuggestions) console.warn('Leda MultiSelect: you probably forgot using shouldKeepSuggestions with hasCheckBoxes prop.');
+    if (canSelectAll && !shouldKeepSuggestions) console.warn('Leda MultiSelect: you probably forgot using shouldKeepSuggestions with canSelectAll prop.');
+  }, [canSelectAll, hasCheckBoxes, shouldKeepSuggestions]);
+
+  const [valueState, setValue] = React.useState<Value[]>(defaultValue || []);
+
+  const [filterValue, setFilterValue] = React.useState<string>('');
+
+  const [highlightedSuggestion, setHighlightedSuggestion] = React.useState<Value>(null);
+
+  const value = getValue(valueProp, valueState);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.multiSelect);
+
+  const msg = useMessages({
+    fieldName: COMPONENTS_NAMESPACES.multiSelect,
+    messages,
+  });
+
+  const {
+    validateCurrent, isValid, InvalidMessage,
+  } = useValidation(props, {
+    value: valueState,
+  }, {
+    reset: createResetHandler({
+      props, setValue, value: defaultValue || [],
+    }),
+  });
+
+  const [isFocused, setFocused] = React.useState<boolean>(false);
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  const handleFocus = createFocusHandler(props, {
+    value,
+    setFocused,
+  });
+
+  const handleBlur = createBlurHandler(props, {
+    value,
+    setFocused,
+    validateCurrent,
+    setFilterValue,
+  });
+
+  const handleSelect = createSelectHandler(props, {
+    data,
+    setFilterValue,
+    setFocused,
+    setValue,
+    value,
+  });
+
+  const handleKeyDown = createKeyDownHandler(props, {
+    filterValue,
+    handleSelect,
+    highlightedSuggestion,
+    setFocused,
+    setHighlightedSuggestion,
+    value,
+  });
+
+  const handleClear = createClearHandler(props, {
+    setValue,
+    value,
+  });
+
+  const handleMouseDown = createMouseDownHandler(props, {
+    inputRef,
+  });
+
+  const wrapperClassNames = getClassNames(className, theme.wrapper);
+
+  const inputWrapperClassNames = getClassNames(theme.inputWrapper, {
+    [theme.inputWrapperFocused]: isFocused,
+    [theme.inputWrapperDisabled]: isDisabled,
+    [theme.inputWrapperInvalid]: !isValid,
+    [theme.inputWrapperRequired]: getIsEmptyAndRequired(value, isRequired),
+  });
+
+  const { renders: { [COMPONENTS_NAMESPACES.multiSelect]: multiSelectRenders } } = React.useContext(LedaContext);
+
+  const state = {
+    value: valueState,
+    isFocused,
+    filterValue,
+  };
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender || multiSelectRenders.wrapperRender,
+    props,
+    state,
+  );
+
+  const Input = useElement(
+    'Input',
+    'input' as unknown as React.FC<React.InputHTMLAttributes<HTMLInputElement>>,
+    inputRender || multiSelectRenders.inputRender,
+    props,
+    state,
+  );
+
+  const TagItem = useElement(
+    'TagItem',
+    Tag,
+    tagRender || multiSelectRenders.tagRender,
+    props,
+    state,
+  );
+
+  const TagsUnionElement = useElement(
+    'TagUnion',
+    Div,
+    tagsUnionRender || multiSelectRenders.tagsUnionRender,
+    props,
+    state,
+  );
+
+  const filteredData = filterData({
+    compareObjectsBy,
+    data,
+    filterRule,
+    filterValue,
+    shouldKeepSuggestions,
+    textField,
+    value,
+  });
+
+  const isMaxItemsSelected = !isNil(maxSelected) && value.length === maxSelected;
+
+  const selectedSuggestions = shouldKeepSuggestions ? value : undefined;
+
+  const shouldUniteTags = getShouldUniteTags({ maxTags, value });
+
+  const checkBoxesRender = createCheckBoxesRender({ itemRender, theme });
+
+  const selectAllState = (() => {
+    if (canSelectAll == null) return undefined;
+    if (value.length === data?.length) return SelectedState.All;
+    if (value.length === 0) return SelectedState.Nothing;
+    return SelectedState.Some;
+  })();
+
+  const suggestionListData = (() => {
+    const allSuggestions = getSortedSuggestions({
+      shouldSelectedGoFirst,
+      selectedSuggestions,
+      filteredData,
+      sortSuggestions,
+    });
+
+    if (canSelectAll) {
+      // todo: canSelectAll
+      return [selectAllSuggestion, ...allSuggestions];
+    }
+
+    return allSuggestions;
+  })();
+
+  return (
+    <Wrapper
+      className={wrapperClassNames}
+      ref={ref}
+    >
+      <Div
+        className={inputWrapperClassNames}
+        onMouseDown={handleMouseDown}
+      >
+        {shouldUniteTags && (
+          <>
+            <TagsUnionElement className={theme.tagsUnion}>
+              Выбрано {value.length}
+            </TagsUnionElement>
+            {hasClearButton && (
+              <Icon
+                icon={IconTypes.Icons.X}
+                className={theme.clearIcon}
+                onClick={handleClear}
+              />
+            )}
+          </>
+        )}
+        {!shouldUniteTags && (
+          <TagsContainer
+            hasClearButton={hasClearButton}
+            onClearIconClick={handleClear}
+            onMouseDown={handleMouseDown}
+            onTagClick={handleSelect}
+            placeholder={placeholder}
+            shouldHideInput={shouldHideInput}
+            textField={textField}
+            theme={theme}
+            value={value}
+          >
+            <TagItem />
+          </TagsContainer>
+        )}
+        <Input
+          {...restProps}
+          aria-invalid={!isValid}
+          aria-required={isRequired}
+          autoComplete={autoComplete}
+          className={theme.input}
+          disabled={isDisabled}
+          form={form}
+          name={name}
+          onBlur={handleBlur}
+          onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+            if (shouldHideInput) return;
+            setFilterValue(ev.target.value);
+          }}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          ref={inputRef}
+          style={(isMaxItemsSelected || shouldHideInput)
+            ? {
+              position: 'absolute',
+              opacity: 0,
+              height: 0,
+              width: 0,
+            }
+            : undefined}
+          value={filterValue}
+        />
+      </Div>
+      {!isMaxItemsSelected && (
+        <SuggestionList
+          compareObjectsBy={compareObjectsBy}
+          data={suggestionListData}
+          groupBy={groupBy}
+          highlightedSuggestion={highlightedSuggestion}
+          isLoading={isLoading}
+          isOpen={isNil(isOpen) ? isFocused : isOpen}
+          itemRender={hasCheckBoxes ? checkBoxesRender : itemRender}
+          listRender={listRender}
+          noSuggestionsText={msg.nothingFound}
+          noSuggestionsRender={noSuggestionsRender}
+          onClick={handleSelect}
+          selectAllItemRender={selectAllItemRender}
+          selectAllState={selectAllState}
+          selectedSuggestion={selectedSuggestions}
+          shouldAllowEmpty={false}
+          textField={textField}
+          theme={theme}
+          value={value}
+        />
+      )}
+      {!isFocused && !isDisabled && (
+        <InvalidMessage />
+      )}
+    </Wrapper>
+  );
+}) as MultiSelectComponent;
+
+MultiSelect.displayName = 'MultiSelect';

package/leda/components/MultiSelect/messages.ts

@@ -0,0 +1,5 @@
+import type { MultiSelectMessages } from './types';
+
+export const defaultMultiSelectMessages: MultiSelectMessages = {
+  nothingFound: 'Nothing found',
+};