@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/ChipsSelect/ChipsSelect.css

@@ -1,23 +0,0 @@
-.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

@@ -1,453 +0,0 @@
-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 ChipsSelect = <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 level="1" weight="regular" 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>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ChipsSelect, { sizeY: true });

package/src/components/ChipsSelect/Readme.md

@@ -1,115 +0,0 @@
-Множественный выбор и добавление значений. Поддерживаются любые модели данных с помощью пропсов `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

@@ -1,72 +0,0 @@
-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,
-  };
-};