@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/ChipsSelect/ChipsSelect.css

@@ -0,0 +1,23 @@
+.ChipsSelect {
+  position: relative;
+}
+
+.ChipsSelect__empty {
+  padding: 12px 0;
+}
+
+.ChipsSelect__empty {
+  text-align: center;
+  color: var(--text_secondary);
+}
+
+.ChipsSelect__open:not(.ChipsSelect__open--popupDirectionTop)
+  .FormField__border {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ChipsSelect__open.ChipsSelect__open--popupDirectionTop .FormField__border {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -0,0 +1,452 @@
+import * as React from "react";
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
+import { classNames } from "../../lib/classNames";
+import ChipsInput, {
+  ChipsInputOption,
+  ChipsInputProps,
+  ChipsInputValue,
+  RenderChip,
+  chipsInputDefaultProps,
+} from "../ChipsInput/ChipsInput";
+import CustomSelectOption, {
+  CustomSelectOptionProps,
+} from "../CustomSelectOption/CustomSelectOption";
+import { useChipsSelect } from "./useChipsSelect";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { noop } from "../../lib/utils";
+import { useDOM } from "../../lib/dom";
+import { Caption } from "../Typography/Caption/Caption";
+import { prefixClass } from "../../lib/prefixClass";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { defaultFilterFn } from "../../lib/select";
+import { Placement } from "../Popper/Popper";
+import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
+import "./ChipsSelect.css";
+
+export interface ChipsSelectProps<Option extends ChipsInputOption>
+  extends ChipsInputProps<Option>,
+    AdaptivityProps {
+  popupDirection?: "top" | "bottom";
+  options?: Option[];
+  filterFn?:
+    | false
+    | ((
+        value?: string,
+        option?: Option,
+        getOptionLabel?: Pick<
+          ChipsInputProps<Option>,
+          "getOptionLabel"
+        >["getOptionLabel"]
+      ) => boolean);
+  /**
+   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)
+   */
+  creatable?: boolean;
+  /**
+   * Отрисовка лоадера вместо списка опций в выпадающем списке
+   */
+  fetching?: boolean;
+  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
+  /**
+   * Показывать или скрывать уже выбранные опции
+   */
+  showSelected?: boolean;
+  /**
+   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)
+   */
+  creatableText?: string;
+  /**
+   * Текст который показывается если список опций пуст
+   */
+  emptyText?: string;
+  /**
+   * Событие срабатывающее перед onChange
+   */
+  onChangeStart?: (
+    e: React.MouseEvent | React.KeyboardEvent,
+    option: Option
+  ) => void;
+  /**
+   * Закрытие выпадающиего списка после выбора элемента
+   */
+  closeAfterSelect?: boolean;
+}
+
+type focusActionType = "next" | "prev";
+
+const FOCUS_ACTION_NEXT: focusActionType = "next";
+const FOCUS_ACTION_PREV: focusActionType = "prev";
+
+const chipsSelectDefaultProps: ChipsSelectProps<any> = {
+  ...chipsInputDefaultProps,
+  emptyText: "Ничего не найдено",
+  creatableText: "Создать значение",
+  onChangeStart: noop,
+  creatable: false,
+  fetching: false,
+  showSelected: true,
+  closeAfterSelect: true,
+  options: [],
+  filterFn: defaultFilterFn,
+  renderOption({ option, ...restProps }) {
+    return <CustomSelectOption {...restProps} />;
+  },
+};
+
+const ChipsSelectComponent = <Option extends ChipsInputOption>(
+  props: ChipsSelectProps<Option>
+) => {
+  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };
+  const {
+    style,
+    onFocus,
+    onKeyDown,
+    className,
+    fetching,
+    renderOption,
+    emptyText,
+    getRef,
+    getRootRef,
+    disabled,
+    placeholder,
+    tabIndex,
+    getOptionValue,
+    getOptionLabel,
+    showSelected,
+    getNewOptionData,
+    renderChip,
+    popupDirection,
+    creatable,
+    filterFn,
+    inputValue,
+    creatableText,
+    sizeY,
+    closeAfterSelect,
+    onChangeStart,
+    after,
+    options,
+    ...restProps
+  } = propsWithDefault;
+
+  const { document } = useDOM();
+
+  const [popperPlacement, setPopperPlacement] = React.useState<
+    Placement | undefined
+  >(undefined);
+
+  const scrollBoxRef = React.useRef<HTMLDivElement>(null);
+  const rootRef = useExternRef(getRef);
+  const {
+    fieldValue,
+    selectedOptions = [],
+    opened,
+    setOpened,
+    addOptionFromInput,
+    filteredOptions,
+    addOption,
+    handleInputChange,
+    clearInput,
+    focusedOption,
+    setFocusedOption,
+    focusedOptionIndex,
+    setFocusedOptionIndex,
+  } = useChipsSelect(propsWithDefault);
+
+  const showCreatable = Boolean(
+    creatable && creatableText && !filteredOptions.length && fieldValue
+  );
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    setOpened(true);
+    setFocusedOptionIndex(0);
+    onFocus!(e);
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    const { current: rootNode } = rootRef;
+    if (
+      rootNode &&
+      e.target !== rootNode &&
+      !rootNode.contains(e.target as Node)
+    ) {
+      setOpened(false);
+    }
+  };
+
+  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;
+
+  const scrollToElement = (index: number, center = false) => {
+    const dropdown = scrollBoxRef.current;
+    const item = chipsSelectOptions[index];
+
+    if (!item || !dropdown) {
+      return;
+    }
+
+    const dropdownHeight = dropdown.offsetHeight;
+    const scrollTop = dropdown.scrollTop;
+    const itemTop = item.offsetTop;
+    const itemHeight = item.offsetHeight;
+
+    if (center) {
+      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;
+    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {
+      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;
+    } else if (itemTop < scrollTop) {
+      dropdown.scrollTop = itemTop;
+    }
+  };
+
+  const focusOptionByIndex = (index: number, oldIndex: number) => {
+    const { length } = filteredOptions;
+
+    if (index < 0) {
+      index = length - 1;
+    } else if (index >= length) {
+      index = 0;
+    }
+
+    if (index === oldIndex) {
+      return;
+    }
+
+    scrollToElement(index);
+    setFocusedOptionIndex(index);
+  };
+
+  const focusOption = (nextIndex: number | null, type: focusActionType) => {
+    let index = typeof nextIndex !== "number" ? -1 : nextIndex;
+
+    if (type === FOCUS_ACTION_NEXT) {
+      index = index + 1;
+    } else if (type === FOCUS_ACTION_PREV) {
+      index = index - 1;
+    }
+
+    if (focusedOptionIndex != null) {
+      focusOptionByIndex(index, focusedOptionIndex);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    onKeyDown!(e);
+
+    if (e.key === "ArrowUp" && !e.defaultPrevented) {
+      e.preventDefault();
+
+      if (!opened) {
+        setOpened(true);
+        setFocusedOptionIndex(0);
+      } else {
+        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);
+      }
+    }
+
+    if (e.key === "ArrowDown" && !e.defaultPrevented) {
+      e.preventDefault();
+
+      if (!opened) {
+        setOpened(true);
+        setFocusedOptionIndex(0);
+      } else {
+        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);
+      }
+    }
+
+    if (
+      e.key === "Enter" &&
+      !e.defaultPrevented &&
+      opened &&
+      focusedOptionIndex != null
+    ) {
+      const option = filteredOptions[focusedOptionIndex];
+
+      if (option) {
+        onChangeStart!(e, option);
+
+        if (!e.defaultPrevented) {
+          addOption(option);
+          setFocusedOptionIndex(null);
+          clearInput();
+          closeAfterSelect && setOpened(false);
+          e.preventDefault();
+        }
+      } else if (!creatable) {
+        e.preventDefault();
+      }
+    }
+
+    if (["Escape", "Tab"].includes(e.key) && !e.defaultPrevented && opened) {
+      setOpened(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {
+      setFocusedOption(filteredOptions[focusedOptionIndex]);
+    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {
+      setFocusedOption(null);
+    }
+  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);
+
+  React.useEffect(() => {
+    const index = focusedOption
+      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)
+      : -1;
+
+    if (
+      index === -1 &&
+      !!filteredOptions.length &&
+      !showCreatable &&
+      closeAfterSelect
+    ) {
+      setFocusedOption(filteredOptions[0]);
+    }
+  }, [
+    filteredOptions,
+    focusedOption,
+    showCreatable,
+    closeAfterSelect,
+    setFocusedOption,
+  ]);
+
+  useGlobalEventListener(document, "click", handleClickOutside);
+
+  const renderChipWrapper = (
+    renderChipProps: RenderChip<Option> | undefined
+  ) => {
+    if (renderChipProps === undefined) {
+      return null;
+    }
+    const onRemoveWrapper = (
+      e: React.MouseEvent | undefined,
+      value: ChipsInputValue | undefined
+    ) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+
+      renderChipProps.onRemove?.(e, value);
+    };
+
+    return renderChip!({
+      ...renderChipProps,
+      onRemove: onRemoveWrapper,
+    });
+  };
+
+  const isPopperDirectionTop = popperPlacement?.includes("top");
+
+  const onPlacementChange = React.useCallback(
+    (placement?: Placement) => {
+      setPopperPlacement(placement);
+    },
+    [setPopperPlacement]
+  );
+
+  const onDropdownMouseLeave = React.useCallback(() => {
+    setFocusedOptionIndex(null);
+  }, [setFocusedOptionIndex]);
+
+  return (
+    <div
+      vkuiClass={classNames("ChipsSelect", `ChipsSelect--sizeY-${sizeY}`)}
+      ref={rootRef}
+      style={style}
+      className={className}
+    >
+      <ChipsInput
+        {...restProps}
+        tabIndex={tabIndex}
+        value={selectedOptions}
+        inputValue={fieldValue}
+        getNewOptionData={getNewOptionData}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        renderChip={renderChipWrapper}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        vkuiClass={classNames({
+          ["ChipsSelect__open"]: opened,
+          ["ChipsSelect__open--popupDirectionTop"]: isPopperDirectionTop,
+        })}
+        getRef={getRef}
+        disabled={disabled}
+        onInputChange={handleInputChange}
+        after={<DropdownIcon />}
+      />
+      {opened && (
+        <CustomSelectDropdown
+          targetRef={rootRef}
+          placement={popupDirection}
+          scrollBoxRef={scrollBoxRef}
+          onPlacementChange={onPlacementChange}
+          onMouseLeave={onDropdownMouseLeave}
+          fetching={fetching}
+          vkuiClass="ChipsSelect__options"
+        >
+          {showCreatable && (
+            <CustomSelectOption
+              hovered={focusedOptionIndex === 0}
+              onMouseDown={addOptionFromInput}
+              onMouseEnter={() => setFocusedOptionIndex(0)}
+            >
+              {creatableText}
+            </CustomSelectOption>
+          )}
+          {!filteredOptions?.length && !showCreatable && emptyText ? (
+            <Caption vkuiClass="ChipsSelect__empty">{emptyText}</Caption>
+          ) : (
+            filteredOptions.map((option: Option, index: number) => {
+              const label = getOptionLabel!(option);
+              const hovered =
+                focusedOption &&
+                getOptionValue!(option) === getOptionValue!(focusedOption);
+              const selected = selectedOptions.find(
+                (selectedOption: Option) => {
+                  return (
+                    getOptionValue!(selectedOption) === getOptionValue!(option)
+                  );
+                }
+              );
+              const value = getOptionValue!(option);
+
+              return (
+                <React.Fragment key={`${typeof value}-${value}`}>
+                  {renderOption!({
+                    className: prefixClass("ChipsSelect__option"),
+                    option,
+                    hovered: Boolean(hovered),
+                    children: label,
+                    selected: !!selected,
+                    getRootRef: (e) => {
+                      if (e) {
+                        return (chipsSelectOptions[index] = e);
+                      }
+                      return undefined;
+                    },
+                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
+                      onChangeStart?.(e, option);
+
+                      if (!e.defaultPrevented) {
+                        closeAfterSelect && setOpened(false);
+                        addOption(option);
+                        clearInput();
+                      }
+                    },
+                    onMouseEnter: () => setFocusedOptionIndex(index),
+                  })}
+                </React.Fragment>
+              );
+            })
+          )}
+        </CustomSelectDropdown>
+      )}
+    </div>
+  );
+};
+
+export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
+  sizeY: true,
+});

package/src/components/ChipsSelect/Readme.md

@@ -0,0 +1,115 @@
+Множественный выбор и добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`.
+
+Изменить визуальное оформление значений можно с помощью `renderChip` и `renderOption`.
+
+Поле ввода принимает все валидные для `<input>` значения.
+
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const colors = [
+  { value: "red", label: "Красный" },
+  { value: "blue", label: "Синий" },
+  { value: "navarin", label: "Наваринского пламени с дымом" },
+];
+const groups = [
+  { value: "download", label: "Скачать все и вся!", icon: <Icon12Download /> },
+  {
+    value: "1",
+    label: "Arctic Monkeys",
+    src: getAvatarUrl("audio_arctic_monkeys"),
+  },
+  { value: "2", label: "Звери", src: getAvatarUrl("audio_leto_zveri") },
+  { value: "4", label: "FACE", src: getAvatarUrl("audio_face") },
+  {
+    value: "3",
+    label: "Depeche Mode",
+    src: getAvatarUrl("audio_depeche_mode"),
+  },
+  { value: "5", label: "Linkin Park", src: getAvatarUrl("audio_linkin_park") },
+];
+
+const Example = () => {
+  const [selectedGroups, setSelectedGroups] = React.useState([]);
+  const [selectedColors, setSelectedColors] = React.useState(
+    colors.slice(0, 2)
+  );
+  const [selectedColorsCopy, setSelectedColorsCopy] = React.useState([]);
+
+  const groupsChipsProps = {
+    value: selectedGroups,
+    onChange: setSelectedGroups,
+    options: groups,
+    placeholder: "Не выбраны",
+    emptyText: "Совсем ничего не найдено",
+  };
+
+  const colorsChipsProps = {
+    value: selectedColors,
+    onChange: setSelectedColors,
+    options: colors,
+    placeholder: "Не выбраны",
+    creatable: true,
+  };
+
+  const colorsCopyChipsProps = {
+    value: selectedColorsCopy,
+    onChange: setSelectedColorsCopy,
+    options: colors,
+    placeholder: "Не выбраны",
+    creatable: true,
+    creatableText: "",
+  };
+
+  return (
+    <Group separator="hide">
+      <FormItem top="Выберите группы">
+        <ChipsSelect
+          {...groupsChipsProps}
+          showSelected={false}
+          closeAfterSelect={false}
+          onChangeStart={(e, option) => {
+            if (option.value === "download") {
+              e.preventDefault();
+              alert("download!");
+            }
+          }}
+          renderChip={({ value, label, option: { src, icon }, ...rest }) => (
+            <Chip
+              value={value}
+              before={<Avatar size={20} src={src} />}
+              {...rest}
+            >
+              {label}
+            </Chip>
+          )}
+          renderOption={({ option: { src, value, icon }, ...otherProps }) => {
+            return (
+              <CustomSelectOption
+                before={
+                  icon ? (
+                    <Avatar size={20}>{icon}</Avatar>
+                  ) : (
+                    <Avatar size={20} src={src} />
+                  )
+                }
+                {...otherProps}
+              />
+            );
+          }}
+        />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета">
+        <ChipsSelect {...colorsChipsProps} />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
+        <ChipsSelect {...colorsCopyChipsProps} />
+      </FormItem>
+    </Group>
+  );
+};
+
+<Example />;
+```

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { ChipsInputOption } from "../ChipsInput/ChipsInput";
+import { useChipsInput } from "../ChipsInput/useChipsInput";
+import { ChipsSelectProps } from "./ChipsSelect";
+
+export const useChipsSelect = <Option extends ChipsInputOption>(
+  props: Partial<ChipsSelectProps<Option>>
+) => {
+  const { options, filterFn, getOptionLabel, getOptionValue } = props;
+
+  const [opened, setOpened] = React.useState(false);
+  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<
+    number | null
+  >(0);
+  const [focusedOption, setFocusedOption] = React.useState<Option | null>(null);
+
+  const { fieldValue, selectedOptions, ...chipsInputState } =
+    useChipsInput(props);
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement> | undefined
+  ) => {
+    if (!e) {
+      return;
+    }
+    chipsInputState.handleInputChange(e);
+
+    if (!opened) {
+      setOpened(true);
+      setFocusedOptionIndex(0);
+    }
+  };
+
+  let filteredOptions = React.useMemo(() => {
+    return filterFn
+      ? options!.filter((option) =>
+          filterFn(fieldValue, option, getOptionLabel)
+        )
+      : (options as Option[]);
+  }, [options, filterFn, fieldValue, getOptionLabel]);
+
+  filteredOptions = React.useMemo(() => {
+    if (!filteredOptions.length) {
+      return filteredOptions;
+    }
+
+    const filteredSet = new Set(filteredOptions);
+    const selected = selectedOptions.map((item) => getOptionValue!(item));
+
+    for (const item of filteredSet) {
+      if (selected.includes(getOptionValue!(item))) {
+        filteredSet.delete(item);
+      }
+    }
+
+    return [...filteredSet];
+  }, [filteredOptions, selectedOptions, getOptionValue]);
+
+  return {
+    ...chipsInputState,
+    fieldValue,
+    handleInputChange,
+    opened,
+    setOpened,
+    filteredOptions,
+    focusedOptionIndex,
+    setFocusedOptionIndex,
+    focusedOption,
+    setFocusedOption,
+    selectedOptions,
+  };
+};