@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/ChipsSelect/ChipsSelect.css

@@ -2,7 +2,6 @@
   position: relative;
 }
 
-.ChipsSelect__fetching,
 .ChipsSelect__empty {
   padding: 12px 0;
 }
@@ -12,33 +11,8 @@
   color: var(--text_secondary);
 }
 
-.ChipsSelect__options {
-  position: absolute;
-  width: 100%;
-  max-height: 160px;
-  background-color: var(--modal_card_background);
-  box-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 0 2px rgba(0, 0, 0, .03);
-  border: solid 1px var(--field_border);
-  border-top: 0;
-  border-radius: 0 0 8px 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-  z-index: 4;
-}
-
-.ChipsSelect__options .CustomScrollView__box {
-  max-height: 160px;
-}
-
-.ChipsSelect__options--popupDirectionTop {
-  bottom: 100%;
-  border-radius: 8px 8px 0 0;
-  border-top: unset;
-  border-bottom: 0;
-  box-shadow: 0 -2px 2px rgba(0, 0, 0, .06), 0 0 2px rgba(0, 0, 0, .03);
-}
-
-.ChipsSelect__open:not(.ChipsSelect__open--popupDirectionTop) .FormField__border {
+.ChipsSelect__open:not(.ChipsSelect__open--popupDirectionTop)
+  .FormField__border {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,25 +1,44 @@
-import * as React from 'react';
-import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
-import { classNames } from '../../lib/classNames';
-import Spinner from '../Spinner/Spinner';
-import CustomScrollView from '../CustomScrollView/CustomScrollView';
-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 './ChipsSelect.css';
-
-export interface ChipsSelectProps<Option extends ChipsInputOption> extends ChipsInputProps<Option>, AdaptivityProps {
-  popupDirection?: 'top' | 'bottom';
+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<ChipsInputOption>, 'getOptionLabel'>['getOptionLabel']) => boolean);
+  filterFn?:
+    | false
+    | ((
+        value?: string,
+        option?: Option,
+        getOptionLabel?: Pick<
+          ChipsInputProps<ChipsInputOption>,
+          "getOptionLabel"
+        >["getOptionLabel"]
+      ) => boolean);
   /**
    * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)
    */
@@ -44,37 +63,81 @@ export interface ChipsSelectProps<Option extends ChipsInputOption> extends Chips
   /**
    * Событие срабатывающее перед onChange
    */
-  onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;
+  onChangeStart?: (
+    e: React.MouseEvent | React.KeyboardEvent,
+    option: Option
+  ) => void;
   /**
    * Закрытие выпадающиего списка после выбора элемента
    */
   closeAfterSelect?: boolean;
 }
 
-type focusActionType = 'next' | 'prev';
+type focusActionType = "next" | "prev";
 
-const FOCUS_ACTION_NEXT: focusActionType = 'next';
-const FOCUS_ACTION_PREV: focusActionType = 'prev';
+const FOCUS_ACTION_NEXT: focusActionType = "next";
+const FOCUS_ACTION_PREV: focusActionType = "prev";
 
-const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Option>) => {
+const ChipsSelect = <Option extends ChipsInputOption>(
+  props: ChipsSelectProps<Option>
+) => {
   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
+    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
   } = props;
 
   const { document } = useDOM();
 
+  const [popperPlacement, setPopperPlacement] =
+    React.useState<Placement>(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,
+    fieldValue,
+    selectedOptions,
+    opened,
+    setOpened,
+    addOptionFromInput,
+    filteredOptions,
+    addOption,
+    handleInputChange,
+    clearInput,
+    focusedOption,
+    setFocusedOption,
+    focusedOptionIndex,
+    setFocusedOptionIndex,
   } = useChipsSelect(props);
 
-  const showCreatable = Boolean(creatable && creatableText && !filteredOptions.length && fieldValue);
+  const showCreatable = Boolean(
+    creatable && creatableText && !filteredOptions.length && fieldValue
+  );
 
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setOpened(true);
@@ -84,7 +147,11 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
 
   const handleClickOutside = (e: MouseEvent) => {
     const { current: rootNode } = rootRef;
-    if (rootNode && e.target !== rootNode && !rootNode.contains(e.target as Node)) {
+    if (
+      rootNode &&
+      e.target !== rootNode &&
+      !rootNode.contains(e.target as Node)
+    ) {
       setOpened(false);
     }
   };
@@ -130,8 +197,8 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
     setFocusedOptionIndex(index);
   };
 
-  const focusOption = (nextIndex: number|null, type: focusActionType) => {
-    let index = typeof nextIndex !== 'number' ? -1 : nextIndex;
+  const focusOption = (nextIndex: number | null, type: focusActionType) => {
+    let index = typeof nextIndex !== "number" ? -1 : nextIndex;
 
     if (type === FOCUS_ACTION_NEXT) {
       index = index + 1;
@@ -145,7 +212,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     onKeyDown(e);
 
-    if (e.key === 'ArrowUp' && !e.defaultPrevented) {
+    if (e.key === "ArrowUp" && !e.defaultPrevented) {
       e.preventDefault();
 
       if (!opened) {
@@ -156,7 +223,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
       }
     }
 
-    if (e.key === 'ArrowDown' && !e.defaultPrevented) {
+    if (e.key === "ArrowDown" && !e.defaultPrevented) {
       e.preventDefault();
 
       if (!opened) {
@@ -167,7 +234,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
       }
     }
 
-    if (e.key === 'Enter' && !e.defaultPrevented && opened) {
+    if (e.key === "Enter" && !e.defaultPrevented && opened) {
       const option = filteredOptions[focusedOptionIndex];
 
       if (option) {
@@ -185,7 +252,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
       }
     }
 
-    if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {
+    if (["Escape", "Tab"].includes(e.key) && !e.defaultPrevented && opened) {
       setOpened(false);
     }
   };
@@ -199,14 +266,21 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
   }, [focusedOptionIndex, filteredOptions]);
 
   React.useEffect(() => {
-    const index = focusedOption ? filteredOptions.findIndex(({ value }) => value === focusedOption.value) : -1;
-
-    if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {
+    const index = focusedOption
+      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)
+      : -1;
+
+    if (
+      index === -1 &&
+      !!filteredOptions.length &&
+      !showCreatable &&
+      closeAfterSelect
+    ) {
       setFocusedOption(filteredOptions[0]);
     }
   }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect]);
 
-  useGlobalEventListener(document, 'click', handleClickOutside);
+  useGlobalEventListener(document, "click", handleClickOutside);
 
   const renderChipWrapper = (renderChipProps: RenderChip<Option>) => {
     const { onRemove } = renderChipProps;
@@ -221,9 +295,22 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
     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}`)}
+      vkuiClass={classNames("ChipsSelect", `ChipsSelect--sizeY-${sizeY}`)}
       ref={rootRef}
       style={style}
       className={className}
@@ -241,85 +328,86 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         vkuiClass={classNames({
-          ['ChipsSelect__open']: opened,
-          ['ChipsSelect__open--popupDirectionTop']: popupDirection === 'top',
+          ["ChipsSelect__open"]: opened,
+          ["ChipsSelect__open--popupDirectionTop"]: isPopperDirectionTop,
         })}
         getRef={getRef}
         disabled={disabled}
         onInputChange={handleInputChange}
         after={<DropdownIcon />}
       />
-      {opened &&
-        <div
-          vkuiClass={classNames('ChipsSelect__options', {
-            ['ChipsSelect__options--popupDirectionTop']: popupDirection === 'top',
-          })}
-          onMouseLeave={() => setFocusedOptionIndex(null)}
+      {opened && (
+        <CustomSelectDropdown
+          targetRef={rootRef}
+          placement={popupDirection}
+          scrollBoxRef={scrollBoxRef}
+          onPlacementChange={onPlacementChange}
+          onMouseLeave={onDropdownMouseLeave}
+          fetching={fetching}
+          vkuiClass="ChipsSelect__options"
         >
-          <CustomScrollView boxRef={scrollBoxRef}>
-            {fetching ? (
-              <div vkuiClass="ChipsSelect__fetching">
-                <Spinner size="small" />
-              </div>
-            ) : (
-              <React.Fragment>
-                {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,
-                          children: label,
-                          selected: !!selected,
-                          getRootRef: (e) => chipsSelectOptions[index] = e,
-                          onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
-                            onChangeStart(e, option);
-
-                            if (!e.defaultPrevented) {
-                              closeAfterSelect && setOpened(false);
-                              addOption(option);
-                              clearInput();
-                            }
-                          },
-                          onMouseEnter: () => setFocusedOptionIndex(index),
-                        })}
-                      </React.Fragment>
-                    );
-                  })
+          {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)
+                  );
                 }
-              </React.Fragment>
-            )}
-          </CustomScrollView>
-        </div>
-      }
+              );
+              const value = getOptionValue(option);
+
+              return (
+                <React.Fragment key={`${typeof value}-${value}`}>
+                  {renderOption({
+                    className: prefixClass("ChipsSelect__option"),
+                    option,
+                    hovered,
+                    children: label,
+                    selected: !!selected,
+                    getRootRef: (e) => (chipsSelectOptions[index] = e),
+                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
+                      onChangeStart(e, option);
+
+                      if (!e.defaultPrevented) {
+                        closeAfterSelect && setOpened(false);
+                        addOption(option);
+                        clearInput();
+                      }
+                    },
+                    onMouseEnter: () => setFocusedOptionIndex(index),
+                  })}
+                </React.Fragment>
+              );
+            })
+          )}
+        </CustomSelectDropdown>
+      )}
     </div>
   );
 };
 
 const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   ...chipsInputDefaultProps,
-  emptyText: 'Ничего не найдено',
-  creatableText: 'Создать значение',
+  emptyText: "Ничего не найдено",
+  creatableText: "Создать значение",
   onChangeStart: noop,
   creatable: false,
   fetching: false,
@@ -327,10 +415,11 @@ const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   closeAfterSelect: true,
   options: [],
   filterFn: defaultFilterFn,
-  renderOption({ option, ...restProps }: CustomSelectOptionProps): React.ReactNode {
-    return (
-      <CustomSelectOption {...restProps} />
-    );
+  renderOption({
+    option,
+    ...restProps
+  }: CustomSelectOptionProps): React.ReactNode {
+    return <CustomSelectOption {...restProps} />;
   },
 };
 

package/src/components/ChipsSelect/Readme.md

@@ -4,50 +4,69 @@
 
 Поле ввода принимает все валидные для `<input>` значения.
 
->**Важно**
+> **Важно**
 >
->Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
 ```jsx
-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 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 [selectedColors, setSelectedColors] = React.useState(
+    colors.slice(0, 2)
+  );
   const [selectedColorsCopy, setSelectedColorsCopy] = React.useState([]);
-  
+
   const groupsChipsProps = {
     value: selectedGroups,
     onChange: setSelectedGroups,
     options: groups,
-    placeholder:"Не выбраны",
-    emptyText: 'Совсем ничего не найдено',
+    placeholder: "Не выбраны",
+    emptyText: "Совсем ничего не найдено",
   };
 
   const colorsChipsProps = {
     value: selectedColors,
     onChange: setSelectedColors,
     options: colors,
-    placeholder:"Не выбраны",
+    placeholder: "Не выбраны",
     creatable: true,
   };
 
   const colorsCopyChipsProps = {
-      value: selectedColorsCopy,
-      onChange: setSelectedColorsCopy,
-      options: colors,
-      placeholder:"Не выбраны",
-      creatable: true,
-      creatableText: '',
+    value: selectedColorsCopy,
+    onChange: setSelectedColorsCopy,
+    options: colors,
+    placeholder: "Не выбраны",
+    creatable: true,
+    creatableText: "",
   };
 
   return (
     <View activePanel="profile" id="profile">
       <Panel id="profile">
-        <PanelHeader>
-          Предпочтения
-        </PanelHeader>
+        <PanelHeader>Предпочтения</PanelHeader>
         <Group>
           <FormItem top="Выберите группы">
             <ChipsSelect
@@ -55,12 +74,17 @@ const Example = () => {
               showSelected={false}
               closeAfterSelect={false}
               onChangeStart={(e, option) => {
-                if (option.value === 'download') {
+                if (option.value === "download") {
                   e.preventDefault();
-                  alert('download!');
-                }   
+                  alert("download!");
+                }
               }}
-              renderChip={({ value, label, option: { src, icon }, ...rest }) => (
+              renderChip={({
+                value,
+                label,
+                option: { src, icon },
+                ...rest
+              }) => (
                 <Chip
                   value={value}
                   before={<Avatar size={20} src={src} />}
@@ -69,10 +93,19 @@ const Example = () => {
                   {label}
                 </Chip>
               )}
-              renderOption={({ option: { src, value, icon }, ...otherProps }) => {
+              renderOption={({
+                option: { src, value, icon },
+                ...otherProps
+              }) => {
                 return (
                   <CustomSelectOption
-                    before={icon ? <Avatar size={20}>{icon}</Avatar> : <Avatar size={20} src={src} />}
+                    before={
+                      icon ? (
+                        <Avatar size={20}>{icon}</Avatar>
+                      ) : (
+                        <Avatar size={20} src={src} />
+                      )
+                    }
                     {...otherProps}
                   />
                 );
@@ -80,7 +113,7 @@ const Example = () => {
             />
           </FormItem>
           <FormItem top="Выберите или добавьте цвета">
-            <ChipsSelect {...colorsChipsProps}/>
+            <ChipsSelect {...colorsChipsProps} />
           </FormItem>
           <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
             <ChipsSelect {...colorsCopyChipsProps} />
@@ -89,8 +122,7 @@ const Example = () => {
       </Panel>
     </View>
   );
-}
+};
 
-<Example />
+<Example />;
 ```
-