@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/CustomSelect/CustomSelect.tsx

@@ -22,7 +22,7 @@ import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdo
 import "./CustomSelect.css";
 
 const findIndexAfter = (
-  options: CustomSelectOptionInterface[],
+  options: CustomSelectOptionInterface[] = [],
   startIndex = -1
 ) => {
   if (startIndex >= options.length - 1) {
@@ -32,11 +32,11 @@ const findIndexAfter = (
 };
 
 const findIndexBefore = (
-  options: CustomSelectOptionInterface[],
+  options: CustomSelectOptionInterface[] = [],
   endIndex: number = options.length
 ) => {
   let result = -1;
-  if (endIndex <= 0) {
+  if (options === undefined || endIndex <= 0) {
     return result;
   }
   for (let i = endIndex - 1; i >= 0; i--) {
@@ -143,7 +143,7 @@ class CustomSelect extends React.Component<
   CustomSelectProps,
   CustomSelectState
 > {
-  static defaultProps: CustomSelectProps = {
+  static defaultProps: Partial<CustomSelectProps> = {
     searchable: false,
     renderOption({ option, ...props }): React.ReactNode {
       return <CustomSelectOption {...props} />;
@@ -181,8 +181,8 @@ class CustomSelect extends React.Component<
   }
 
   private keyboardInput: string;
-  private isControlledOutside: boolean;
-  private selectEl: HTMLSelectElement;
+  private isControlledOutside = false;
+  private selectEl: HTMLSelectElement | null = null;
   private readonly scrollBoxRef = React.createRef<HTMLDivElement>();
   private readonly containerRef = React.createRef<HTMLLabelElement>();
 
@@ -193,11 +193,13 @@ class CustomSelect extends React.Component<
   private readonly getSelectedItem = () => {
     const { selectedOptionIndex, options } = this.state;
 
-    if (!options.length) {
+    if (!options?.length) {
       return null;
     }
 
-    return options[selectedOptionIndex];
+    return selectedOptionIndex !== undefined
+      ? options[selectedOptionIndex]
+      : undefined;
   };
 
   get areOptionsShown() {
@@ -215,13 +217,15 @@ class CustomSelect extends React.Component<
   };
 
   findSelectedIndex(
-    options: CustomSelectOptionInterface[],
+    options: CustomSelectOptionInterface[] | undefined,
     value: SelectValue
   ) {
-    return options.findIndex((item) => {
-      value = typeof item.value === "number" ? Number(value) : value;
-      return item.value === value;
-    });
+    return (
+      options?.findIndex((item) => {
+        value = typeof item.value === "number" ? Number(value) : value;
+        return item.value === value;
+      }) ?? -1
+    );
   }
 
   open = () => {
@@ -233,7 +237,10 @@ class CustomSelect extends React.Component<
       () => {
         const { selectedOptionIndex } = this.state;
 
-        if (this.isValidIndex(selectedOptionIndex)) {
+        if (
+          selectedOptionIndex !== undefined &&
+          this.isValidIndex(selectedOptionIndex)
+        ) {
           this.scrollToElement(selectedOptionIndex, true);
         }
       }
@@ -254,13 +261,15 @@ class CustomSelect extends React.Component<
   };
 
   private isValidIndex(index: number) {
-    return index >= 0 && index < this.state.options.length;
+    return index >= 0 && index < (this.state.options?.length ?? 0);
   }
 
   selectFocused = () => {
     const { focusedOptionIndex } = this.state;
 
-    this.select(focusedOptionIndex);
+    if (focusedOptionIndex !== undefined) {
+      this.select(focusedOptionIndex);
+    }
   };
 
   select = (index: number) => {
@@ -268,15 +277,15 @@ class CustomSelect extends React.Component<
       return;
     }
 
-    const item = this.state.options[index];
+    const item = this.state.options?.[index];
 
     this.setState(
       {
-        nativeSelectValue: item.value,
+        nativeSelectValue: item?.value,
       },
       () => {
         const event = new Event("change", { bubbles: true });
-        this.selectEl.dispatchEvent(event);
+        this.selectEl?.dispatchEvent(event);
       }
     );
     this.close();
@@ -288,20 +297,20 @@ class CustomSelect extends React.Component<
 
   onFocus = () => {
     const event = new Event("focus");
-    this.selectEl.dispatchEvent(event);
+    this.selectEl?.dispatchEvent(event);
   };
 
   onBlur = () => {
     this.close();
     const event = new Event("blur");
-    this.selectEl.dispatchEvent(event);
+    this.selectEl?.dispatchEvent(event);
   };
 
   private scrollToElement(index: number, center = false) {
     const dropdown = this.scrollBoxRef.current;
     const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;
 
-    if (!item) {
+    if (!item || !dropdown) {
       return;
     }
 
@@ -319,14 +328,18 @@ class CustomSelect extends React.Component<
     }
   }
 
-  focusOptionByIndex = (index: number, scrollTo = true) => {
-    if (index < 0 || index > this.state.options.length - 1) {
+  focusOptionByIndex = (index: number | undefined, scrollTo = true) => {
+    if (
+      index === undefined ||
+      index < 0 ||
+      index > (this.state.options?.length ?? 0) - 1
+    ) {
       return;
     }
 
-    const option = this.state.options[index];
+    const option = this.state.options?.[index];
 
-    if (option.disabled) {
+    if (option?.disabled) {
       return;
     }
 
@@ -356,7 +369,7 @@ class CustomSelect extends React.Component<
   handleOptionHover: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {
     this.focusOptionByIndex(
       Array.prototype.indexOf.call(
-        e.currentTarget.parentNode.children,
+        e.currentTarget.parentNode?.children,
         e.currentTarget
       ),
       false
@@ -369,10 +382,10 @@ class CustomSelect extends React.Component<
 
   handleOptionClick: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {
     const index = Array.prototype.indexOf.call(
-      e.currentTarget.parentNode.children,
+      e.currentTarget.parentNode?.children,
       e.currentTarget
     );
-    const option = this.state.options[index];
+    const option = this.state.options?.[index];
 
     if (option && !option.disabled) {
       this.selectFocused();
@@ -386,11 +399,11 @@ class CustomSelect extends React.Component<
   onKeyboardInput = (key: string) => {
     const fullInput = this.keyboardInput + key;
 
-    const optionIndex = this.state.options.findIndex((option) => {
+    const optionIndex = this.state.options?.findIndex((option) => {
       return option.label.toLowerCase().includes(fullInput);
     });
 
-    if (optionIndex > -1) {
+    if (optionIndex !== undefined && optionIndex > -1) {
       this.focusOptionByIndex(optionIndex);
     }
 
@@ -408,14 +421,18 @@ class CustomSelect extends React.Component<
   };
 
   onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
-    const value = e.currentTarget.value;
-    if (!this.isControlledOutside) {
-      this.setState({
-        selectedOptionIndex: this.findSelectedIndex(this.state.options, value),
-      });
-    }
-    if (this.props.onChange) {
-      this.props.onChange(e);
+    const newSelectedOptionIndex = this.findSelectedIndex(
+      this.state.options,
+      e.currentTarget.value
+    );
+
+    if (this.state.selectedOptionIndex !== newSelectedOptionIndex) {
+      if (!this.isControlledOutside) {
+        this.setState({
+          selectedOptionIndex: newSelectedOptionIndex,
+        });
+      }
+      this.props.onChange?.(e);
     }
   };
 
@@ -537,13 +554,14 @@ class CustomSelect extends React.Component<
         this.props.value === undefined
           ? this.state.nativeSelectValue
           : this.props.value;
-      const options = this.props.searchable
-        ? this.filter(
-            this.props.options,
-            this.state.inputValue,
-            this.props.filterFn
-          )
-        : this.props.options;
+      const options =
+        this.props.searchable && this.state.inputValue !== undefined
+          ? this.filter(
+              this.props.options,
+              this.state.inputValue,
+              this.props.filterFn
+            )
+          : this.props.options;
       this.setState({
         nativeSelectValue: value,
         selectedOptionIndex: this.findSelectedIndex(options, value),
@@ -560,7 +578,7 @@ class CustomSelect extends React.Component<
 
     return (
       <React.Fragment key={`${option.value}`}>
-        {renderOption({
+        {renderOption!({
           option,
           hovered,
           children: option.label,
@@ -576,7 +594,9 @@ class CustomSelect extends React.Component<
 
   selectRef = (element: HTMLSelectElement) => {
     this.selectEl = element;
-    setRef(element, this.props.getRef);
+    if (this.props.getRef) {
+      setRef(element, this.props.getRef);
+    }
   };
 
   onPlacementChange = (placement?: Placement) => {
@@ -617,7 +637,7 @@ class CustomSelect extends React.Component<
     const label = selected ? selected.label : undefined;
 
     const defaultDropdownContent =
-      stateOptions.length > 0 ? (
+      stateOptions !== undefined && stateOptions.length > 0 ? (
         stateOptions.map(this.renderOption)
       ) : (
         <Caption level="1" weight="regular" vkuiClass="CustomSelect__empty">
@@ -711,6 +731,7 @@ class CustomSelect extends React.Component<
   }
 }
 
+// eslint-disable-next-line import/no-default-export
 export default withPlatform(
   withAdaptivity(CustomSelect, {
     sizeY: true,

package/src/components/CustomSelect/Readme.md

@@ -1,6 +1,6 @@
 Делает из [SelectMimicry](#!/SelectMimicry) селект с выпадающим списком. Используется внутри [Select](#!/Select).
 
-```jsx
+```jsx { "props": { "layout": false, "iframe": false } }
 class Example extends React.Component {
   constructor(props) {
     super(props);

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -8,10 +8,10 @@ import "./CustomSelectDropdown.css";
 
 export interface CustomSelectDropdownProps
   extends React.HTMLAttributes<HTMLElement>,
-    HasRef<HTMLElement> {
+    HasRef<HTMLDivElement> {
   targetRef: React.RefObject<HTMLElement>;
   placement?: Placement;
-  scrollBoxRef?: React.Ref<HTMLDivElement>;
+  scrollBoxRef: React.Ref<HTMLDivElement>;
   fetching?: boolean;
   onPlacementChange?: (placement?: Placement) => void;
 }

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -35,11 +35,11 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   disabled,
   ...restProps
 }: CustomSelectOptionProps) => {
-  const title = typeof children === "string" ? children : null;
+  const title = typeof children === "string" ? children : undefined;
   const { sizeY } = useAdaptivity();
 
   if (!!option && process.env.NODE_ENV === "development") {
-    warn("Свойство option было добавлено по ошибке будет и удалено в 5.0.0");
+    warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
   }
 
   return (
@@ -88,4 +88,5 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default CustomSelectOption;

package/src/components/DatePicker/DatePicker.tsx

@@ -49,9 +49,9 @@ export interface DatePickerProps
 
 // Переводим state к формату гг-мм-дд
 function convertToInputFormat({
-  day,
-  month,
-  year,
+  day = 0,
+  month = 0,
+  year = 0,
 }: Partial<DatePickerDateFormat>) {
   return `${year}-${leadingZero(month)}-${leadingZero(day)}`;
 }
@@ -84,8 +84,8 @@ const DatePickerCustom: React.FC<
   DatePickerProps & Partial<DatePickerDateFormat>
 > = ({
   name,
-  min,
-  max,
+  min = { day: 0, month: 0, year: 0 },
+  max = { day: 31, month: 12, year: 2100 },
   dayPlaceholder,
   monthPlaceholder,
   yearPlaceholder,
@@ -93,15 +93,15 @@ const DatePickerCustom: React.FC<
   defaultValue,
   hasMouse,
   monthNames,
-  day,
-  month,
-  year,
+  day = 0,
+  month = 0,
+  year = 0,
   onDateChange,
   disabled,
   ...restProps
 }) => {
   const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
-    onDateChange({
+    onDateChange?.({
       day,
       month,
       year,
@@ -170,8 +170,8 @@ const DatePickerCustom: React.FC<
 const DatePickerNative: React.FC<
   DatePickerProps & Partial<DatePickerDateFormat>
 > = ({
-  min,
-  max,
+  min = { day: 0, month: 0, year: 0 },
+  max = { day: 31, month: 12, year: 2100 },
   dayPlaceholder,
   monthPlaceholder,
   yearPlaceholder,
@@ -191,7 +191,7 @@ const DatePickerNative: React.FC<
   const onStringChange: React.ChangeEventHandler<HTMLInputElement> =
     React.useCallback(
       (e) => {
-        onDateChange(parseInputDate(e.currentTarget.value));
+        onDateChange?.(parseInputDate(e.currentTarget.value));
       },
       [onDateChange]
     );
@@ -225,18 +225,14 @@ const DatePicker: React.FC<DatePickerProps> = ({
       setValue(update);
       props.onDateChange && props.onDateChange({ ...update });
     },
-    [props.onDateChange]
+    [props]
   );
 
   const Cmp = hasMouse ? DatePickerCustom : DatePickerNative;
   return <Cmp {...props} {...value} onDateChange={onDateChange} />;
 };
 
-DatePicker.defaultProps = {
-  min: { day: 0, month: 0, year: 0 },
-  max: { day: 31, month: 12, year: 2100 },
-};
-
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(DatePicker, {
   hasMouse: true,
 });

package/src/components/Div/Div.tsx

@@ -25,4 +25,5 @@ export const Div: React.FunctionComponent<DivProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Div;

package/src/components/Dropdown/Dropdown.tsx

@@ -1,55 +1,14 @@
 import * as React from "react";
 import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
-import { ClickPopper } from "../ClickPopper/ClickPopper";
+import { ClickPopper, ClickPopperProps } from "../ClickPopper/ClickPopper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import { Placement } from "../Popper/Popper";
 import "./Dropdown.css";
 
-// Приходится избегать экстендов от HoverPopperProps, ClickPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
-// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
-export interface DropdownProps {
-  /**
-   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
-   */
-  placement?: Placement;
-  /**
-   * Отступ по вспомогательной оси
-   */
-  offsetSkidding?: number;
-  /**
-   * Отступ по главной оси
-   */
-  offsetDistance?: number;
-  onPlacementChange?: (data: { placement?: Placement }) => void;
-  /**
-   * Содержимое тултипа
-   */
-  content?: React.ReactNode;
-  /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
-   */
-  shown?: boolean;
-  /**
-   * Вызывается при каждом изменении видимости тултипа
-   */
-  onShownChange?: (shown: boolean) => void;
-  /**
-   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
-   */
-  children?: React.ReactElement;
-
+export interface DropdownProps
+  extends Omit<ClickPopperProps, "arrow" | "arrowClassName">,
+    Omit<HoverPopperProps, "arrow" | "arrowClassName"> {
   action?: "click" | "hover";
-  /**
-   * Актуально только для action="hover"
-   * Количество миллисекунд, после которых произойдет показ дропдауна
-   */
-  showDelay?: HoverPopperProps["showDelay"];
-  /**
-   * Актуально только для action="hover"
-   * Количество миллисекунд, после которых произойдет скрытие дропдауна
-   */
-  hideDelay?: HoverPopperProps["hideDelay"];
 }
 
 export const Dropdown: React.FC<DropdownProps> = ({

package/src/components/Epic/Epic.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import {
-  withAdaptivity,
-  ViewWidth,
-  AdaptivityProps,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import { ScrollSaver } from "./ScrollSaver";
 import { getNavId } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./Epic.css";
 
 export interface EpicProps
@@ -20,7 +20,9 @@ export interface EpicProps
 
 const warn = warnOnce("Epic");
 
-export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
+export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
+  props
+) => {
   const platform = usePlatform();
   const scroll = React.useRef<{ [key: string]: number }>({}).current;
   const { activeStory, tabbar, children, viewWidth, ...restProps } = props;
@@ -33,9 +35,11 @@ export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
     warn("Using Epic without tabbar is not recommended on mobile");
   }
   const story =
-    (React.Children.toArray(children) as React.ReactElement[]).find(
-      (story) => getNavId(story.props, warn) === activeStory
-    ) || null;
+    (React.Children.toArray(children).find(
+      (story) =>
+        React.isValidElement(story) &&
+        getNavId(story.props, warn) === activeStory
+    ) as React.ReactElement | undefined) ?? null;
 
   return (
     <div {...restProps} vkuiClass={getClassName("Epic", platform)}>
@@ -51,6 +55,7 @@ export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Epic, {
   viewWidth: true,
 });

package/src/components/Epic/ScrollSaver.tsx

@@ -3,7 +3,6 @@ import { ScrollContext } from "../AppRoot/ScrollContext";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 
 export interface ScrollSaverProps {
-  children: React.ReactElement;
   initialScroll?: number;
   saveScroll: (scroll: number) => any;
 }
@@ -20,5 +19,5 @@ export const ScrollSaver: React.FC<ScrollSaverProps> = ({
     }
     return () => saveScroll(getScroll().y);
   }, []);
-  return children;
+  return <React.Fragment>{children}</React.Fragment>;
 };

package/src/components/File/File.tsx

@@ -50,7 +50,7 @@ const File: React.FunctionComponent<FileProps> = (props: FileProps) => {
       disabled={restProps.disabled}
       type="button"
       onClick={(e) => {
-        inputRef.current.click();
+        inputRef.current?.click();
         onClick && onClick(e);
       }}
     >
@@ -70,4 +70,5 @@ File.defaultProps = {
   align: "left",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default File;

package/src/components/FixedLayout/FixedLayout.tsx

@@ -38,12 +38,12 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
   ...restProps
 }: FixedLayoutProps) => {
   const platform = usePlatform();
-  const [width, setWidth] = React.useState<string>(null);
+  const [width, setWidth] = React.useState<string | undefined>(undefined);
   const { window } = useDOM();
   const { colRef } = React.useContext(SplitColContext);
   const doResize = () =>
-    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : null);
-  React.useEffect(doResize, []);
+    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : undefined);
+  React.useEffect(doResize, [colRef]);
   useGlobalEventListener(window, "resize", doResize);
 
   return (
@@ -67,4 +67,5 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default FixedLayout;

package/src/components/FocusTrap/FocusTrap.tsx

@@ -37,9 +37,11 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
 
   const { document, window } = useDOM();
 
-  const [focusableNodes, setFocusableNodes] =
-    React.useState<HTMLElement[]>(null);
-  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);
+  const [focusableNodes, setFocusableNodes] = React.useState<
+    HTMLElement[] | null
+  >(null);
+  const [restoreFocusTo, setRestoreFocusTo] =
+    React.useState<HTMLElement | null>(null);
 
   // HANDLE TRAP MOUNT
 
@@ -47,7 +49,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
   const focusOnTrapMount = useTimeout(() => {
     if (
       keyboardInput &&
-      !ref.current?.contains(document.activeElement) &&
+      !ref.current?.contains(document!.activeElement) &&
       focusableNodes?.length
     ) {
       focusableNodes[0].focus();
@@ -69,7 +71,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
       // eslint-disable-next-line no-restricted-properties
       ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),
       (focusableEl: Element) => {
-        const { display, visibility } = window.getComputedStyle(focusableEl);
+        const { display, visibility } = window!.getComputedStyle(focusableEl);
 
         if (display !== "none" && visibility !== "hidden") {
           nodes.push(focusableEl as HTMLElement);
@@ -92,8 +94,8 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
     }
   }, timeout);
   useIsomorphicLayoutEffect(() => {
-    if (restoreFocus && document.activeElement) {
-      setRestoreFocusTo(document.activeElement as HTMLElement);
+    if (restoreFocus && document!.activeElement) {
+      setRestoreFocusTo(document!.activeElement as HTMLElement);
 
       return () => {
         focusOnTrapUnmount.set();
@@ -116,7 +118,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
 
         const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];
 
-        if (node !== document.activeElement) {
+        if (node !== document!.activeElement) {
           node.focus();
         }
 

package/src/components/FormItem/FormItem.tsx

@@ -74,7 +74,11 @@ export const FormItem: React.FC<FormItemProps> = ({
       {removable ? (
         <Removable
           align="start"
-          onRemove={(e) => onRemove(e, rootEl?.current)}
+          onRemove={(e) => {
+            if (rootEl?.current) {
+              onRemove(e, rootEl.current);
+            }
+          }}
           removePlaceholder={removePlaceholder}
         >
           <div vkuiClass="FormItem__removable">{wrappedChildren}</div>