@vkontakte/vkui 4.24.0 → 4.25.0

package/src/components/AppRoot/ScrollContext.ts

@@ -13,15 +13,15 @@ export const ScrollContext = React.createContext<ScrollContextInterface>({
 });
 
 export const globalScrollController = (
-  window: Window,
-  document: HTMLDocument
+  window: Window | undefined,
+  document: HTMLDocument | undefined
 ) => ({
-  getScroll: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
+  getScroll: () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
   scrollTo: (x = 0, y = 0) => {
     // Some iOS versions do not normalize scroll — do it manually.
-    window.scrollTo(
-      x ? clamp(x, 0, document.body.scrollWidth - window.innerWidth) : 0,
-      y ? clamp(y, 0, document.body.scrollHeight - window.innerHeight) : 0
+    window!.scrollTo(
+      x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
+      y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
     );
   },
 });
@@ -30,13 +30,13 @@ export const elementScrollController = (
   elRef: React.RefObject<HTMLElement>
 ) => ({
   getScroll: () => ({
-    x: elRef.current.scrollLeft,
-    y: elRef.current.scrollTop,
+    x: elRef.current?.scrollLeft ?? 0,
+    y: elRef.current?.scrollTop ?? 0,
   }),
   scrollTo: (x = 0, y = 0) => {
     const el = elRef.current;
     // Some iOS versions do not normalize scroll — do it manually.
-    el.scrollTo(
+    el?.scrollTo(
       x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
       y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
     );

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { AppearanceProviderContext } from "./AppearanceProviderContext";
+import { getScheme } from "../../helpers/getScheme";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+
+export interface AppearanceProviderProps {
+  appearance?: AppearanceType;
+}
+
+export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
+  children,
+  appearance = "light",
+}) => {
+  const platform = usePlatform();
+
+  const appearanceContext = React.useMemo(
+    () => ({
+      scheme: getScheme({
+        platform,
+        appearance,
+      }),
+      appearance,
+    }),
+    [appearance, platform]
+  );
+
+  return (
+    <AppearanceProviderContext.Provider value={appearanceContext}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            className: classNames(
+              child.props.className,
+              `vkui${appearanceContext.scheme}`
+            ),
+          });
+        }
+        return child;
+      })}
+    </AppearanceProviderContext.Provider>
+  );
+};

package/src/components/AppearanceProvider/AppearanceProviderContext.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { Scheme } from "../../helpers/scheme";
+
+export interface AppearanceProviderContextProps {
+  scheme: Scheme | "inherit" | undefined;
+  appearance: AppearanceType;
+}
+
+export const AppearanceProviderContext = React.createContext<
+  AppearanceProviderContextProps | undefined
+>(undefined);

package/src/components/Avatar/Avatar.tsx

@@ -27,6 +27,9 @@ export interface AvatarProps
   overlayAction?: "hover" | "always";
 }
 
+export const AVATAR_DEFAULT_SIZE = 48;
+export const AVATAR_DEFAULT_SHADOW = true;
+
 const Avatar: React.FC<AvatarProps> = ({
   alt,
   crossOrigin,
@@ -40,9 +43,9 @@ const Avatar: React.FC<AvatarProps> = ({
   useMap,
   width,
   getRef,
-  size,
-  shadow,
-  mode,
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  mode = "default",
   className,
   children,
   getRootRef,
@@ -50,7 +53,7 @@ const Avatar: React.FC<AvatarProps> = ({
   "aria-label": ariaLabel,
   badge,
   overlayIcon,
-  overlayMode,
+  overlayMode = "light",
   overlayAction: passedOverlayAction,
   onClick,
   ...restProps
@@ -176,14 +179,5 @@ const Avatar: React.FC<AvatarProps> = ({
   );
 };
 
-export const AVATAR_DEFAULT_SIZE = 48;
-export const AVATAR_DEFAULT_SHADOW = true;
-
-Avatar.defaultProps = {
-  size: AVATAR_DEFAULT_SIZE,
-  mode: "default",
-  shadow: AVATAR_DEFAULT_SHADOW,
-  overlayMode: "light",
-};
-
+// eslint-disable-next-line import/no-default-export
 export default Avatar;

package/src/components/Banner/Banner.tsx

@@ -140,7 +140,7 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
         vkuiClass="Banner__in"
         activeMode={platform === IOS ? "opacity" : "background"}
         disabled={asideMode !== "expand"}
-        role={asideMode === "expand" ? "button" : null}
+        role={asideMode === "expand" ? "button" : undefined}
       >
         {mode === "image" && background && (
           <div aria-hidden="true" vkuiClass="Banner__bg">
@@ -216,4 +216,5 @@ Banner.defaultProps = {
   imageTheme: "dark",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Banner;

package/src/components/Button/Button.tsx

@@ -46,7 +46,7 @@ export interface ButtonProps
 
 interface ButtonTypographyProps extends HasComponent {
   size: ButtonProps["size"];
-  platform: Platform;
+  platform: Platform | undefined;
   sizeY: AdaptivityProps["sizeY"];
   children?: ButtonProps["children"];
 }
@@ -171,7 +171,7 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
     <Tappable
       {...restProps}
       Component={restProps.href ? "a" : Component}
-      onClick={loading ? null : onClick}
+      onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
       vkuiClass={classNames(
         getClassName("Button", platform),
@@ -220,6 +220,7 @@ Button.defaultProps = {
   stopPropagation: true,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Button, {
   sizeY: true,
 });

package/src/components/Card/Card.tsx

@@ -34,4 +34,5 @@ Card.defaultProps = {
   mode: "tint",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Card;

package/src/components/CardGrid/CardGrid.tsx

@@ -37,4 +37,5 @@ CardGrid.defaultProps = {
   size: "s",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(CardGrid, { sizeX: true });

package/src/components/CardScroll/CardScroll.tsx

@@ -27,12 +27,17 @@ const CardScroll: React.FC<CardScrollProps> = ({
   const { window } = useDOM();
 
   function getScrollToLeft(offset: number): number {
+    if (!refContainer.current || !gapRef.current) {
+      return offset;
+    }
     const containerWidth = refContainer.current.offsetWidth;
-    const slideIndex = Array.from(refContainer.current.children).findIndex(
+    const slideIndex = (
+      Array.from(refContainer.current.children) as HTMLElement[]
+    ).findIndex(
       (el: HTMLElement) =>
         el.offsetLeft +
           el.offsetWidth +
-          parseInt(window.getComputedStyle(el).marginRight) -
+          parseInt(window!.getComputedStyle(el).marginRight) -
           offset >=
         0
     );
@@ -60,6 +65,10 @@ const CardScroll: React.FC<CardScrollProps> = ({
   }
 
   function getScrollToRight(offset: number): number {
+    if (!refContainer.current || !gapRef.current) {
+      return offset;
+    }
+
     const containerWidth = refContainer.current.offsetWidth;
     const slide = Array.prototype.find.call(
       refContainer.current.children,
@@ -102,4 +111,5 @@ CardScroll.defaultProps = {
   size: "s",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(CardScroll, { sizeX: true });

package/src/components/Cell/Cell.tsx

@@ -115,7 +115,7 @@ export const Cell: React.FC<CellProps> = ({
       return () => toggleDrag(false);
     }
     return undefined;
-  }, [dragging]);
+  }, [dragging, toggleDrag]);
 
   let dragger;
   if (draggable) {

package/src/components/Cell/useDraggable.tsx

@@ -17,22 +17,28 @@ export const useDraggable = ({
   onDragFinish,
 }: Pick<CellProps, "onDragFinish">) => {
   const [dragging, setDragging] = React.useState<boolean>(false);
-  const rootElRef = React.useRef(null);
+  const rootElRef = React.useRef<HTMLElement>(null);
 
-  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);
-  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);
-  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);
+  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);
+  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);
+  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);
   const [dragShift, setDragShift] = React.useState<number>(0);
-  const [dragDirection, setDragDirection] = React.useState<"down" | "up">(
-    undefined
-  );
+  const [dragDirection, setDragDirection] = React.useState<
+    "down" | "up" | undefined
+  >(undefined);
 
   const onDragStart = () => {
     const rootEl = rootElRef.current;
+    if (!rootEl) {
+      return;
+    }
 
     setDragging(true);
 
-    const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];
+    let _siblings: HTMLElement[] = [];
+    if (rootEl.parentElement?.childNodes) {
+      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];
+    }
     const idx = _siblings.indexOf(rootEl);
 
     setDragStartIndex(idx);
@@ -46,60 +52,62 @@ export const useDraggable = ({
 
     const rootEl = rootElRef.current;
 
-    rootEl.style.transform = `translateY(${e.shiftY}px)`;
-    const rootGesture = rootEl.getBoundingClientRect();
+    if (rootEl) {
+      rootEl.style.transform = `translateY(${e.shiftY}px)`;
+      const rootGesture = rootEl.getBoundingClientRect();
 
-    setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-    setDragShift(e.shiftY);
-    setDragEndIndex(dragStartIndex);
+      setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
+      setDragShift(e.shiftY);
+      setDragEndIndex(dragStartIndex);
 
-    siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
-      const siblingGesture = sibling.getBoundingClientRect();
-      const siblingHalfHeight = siblingGesture.height / 2;
+      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
+        const siblingGesture = sibling.getBoundingClientRect();
+        const siblingHalfHeight = siblingGesture.height / 2;
 
-      const rootOverSibling =
-        rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
-      const rootUnderSibling =
-        rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+        const rootOverSibling =
+          rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+        const rootUnderSibling =
+          rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
 
-      if (dragStartIndex < siblingIndex) {
-        if (rootOverSibling) {
-          if (dragDirection === "down") {
-            sibling.style.transform = "translateY(-100%)";
-          }
+        if (dragStartIndex < siblingIndex) {
+          if (rootOverSibling) {
+            if (dragDirection === "down") {
+              sibling.style.transform = "translateY(-100%)";
+            }
 
-          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
-        }
-        if (rootUnderSibling && dragDirection === "up") {
-          sibling.style.transform = "translateY(0)";
-        }
-      } else if (dragStartIndex > siblingIndex) {
-        if (rootUnderSibling) {
-          if (dragDirection === "up") {
-            sibling.style.transform = "translateY(100%)";
+            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
           }
+          if (rootUnderSibling && dragDirection === "up") {
+            sibling.style.transform = "translateY(0)";
+          }
+        } else if (dragStartIndex > siblingIndex) {
+          if (rootUnderSibling) {
+            if (dragDirection === "up") {
+              sibling.style.transform = "translateY(100%)";
+            }
 
-          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
-        }
-        if (rootOverSibling && dragDirection === "down") {
-          sibling.style.transform = "translateY(0)";
+            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
+          }
+          if (rootOverSibling && dragDirection === "down") {
+            sibling.style.transform = "translateY(0)";
+          }
         }
-      }
-    });
+      });
+    }
   };
 
   const onDragEnd = () => {
     const [from, to] = [dragStartIndex, dragEndIndex];
 
     siblings.forEach((sibling: HTMLElement) => {
-      sibling.style.transform = null;
+      sibling.style.transform = "";
     });
 
-    setSiblings(undefined);
-    setDragEndIndex(undefined);
-    setDragStartIndex(undefined);
+    setSiblings([]);
+    setDragEndIndex(0);
+    setDragStartIndex(0);
     setDragDirection(undefined);
-    setDragShift(undefined);
+    setDragShift(0);
 
     setDragging(false);
 

package/src/components/Checkbox/Checkbox.tsx

@@ -103,6 +103,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Checkbox, {
   sizeY: true,
 });

package/src/components/Chip/Chip.tsx

@@ -74,4 +74,5 @@ const Chip: React.FC<ChipProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Chip;

package/src/components/ChipsInput/ChipsInput.tsx

@@ -44,9 +44,40 @@ export interface ChipsInputProps<Option extends ChipsInputOption>
   inputAriaLabel?: string;
 }
 
+export const chipsInputDefaultProps: ChipsInputProps<any> = {
+  type: "text",
+  onChange: noop,
+  onInputChange: noop,
+  onKeyDown: noop,
+  onBlur: noop,
+  onFocus: noop,
+  value: [],
+  inputValue: "",
+  inputAriaLabel: "Введите ваше значение...",
+  getOptionValue: (option) => option.value,
+  getOptionLabel: (option) => option.label,
+  getNewOptionData: (_, label) => ({
+    value: label,
+    label,
+  }),
+  renderChip(props) {
+    if (!props) {
+      return null;
+    }
+
+    const { disabled, value, label, ...rest } = props;
+    return (
+      <Chip value={value} removable={!disabled} {...rest}>
+        {label}
+      </Chip>
+    );
+  },
+};
+
 const ChipsInput = <Option extends ChipsInputOption>(
   props: ChipsInputProps<Option>
 ) => {
+  const propsWithDefault = { ...chipsInputDefaultProps, ...props };
   const {
     style,
     value,
@@ -68,7 +99,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
     after,
     inputAriaLabel,
     ...restProps
-  } = props;
+  } = propsWithDefault;
   const { sizeY } = useAdaptivity();
 
   const [focused, setFocused] = React.useState(false);
@@ -78,7 +109,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
     removeOption,
     selectedOptions,
     handleInputChange,
-  } = useChipsInput(props);
+  } = useChipsInput(propsWithDefault);
   const inputRef = useExternRef(getRef);
 
   const isDisabled = restProps.disabled || restProps.readOnly;
@@ -89,7 +120,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
       return;
     }
 
-    onKeyDown(e);
+    onKeyDown!(e);
 
     if (
       e.key === "Backspace" &&
@@ -97,7 +128,9 @@ const ChipsInput = <Option extends ChipsInputOption>(
       !fieldValue &&
       selectedOptions.length
     ) {
-      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
+      removeOption(
+        getOptionValue!(selectedOptions[selectedOptions.length - 1])
+      );
       e.preventDefault();
     }
 
@@ -111,21 +144,23 @@ const ChipsInput = <Option extends ChipsInputOption>(
     if (focused) {
       setFocused(false);
     }
-    onBlur(e);
+    onBlur!(e);
   };
 
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     if (!focused) {
       setFocused(true);
     }
-    onFocus(e);
+    onFocus!(e);
   };
 
   const handleChipRemove = (
-    _: React.MouseEvent<HTMLInputElement>,
-    value: ChipsInputValue
+    _: React.MouseEvent | undefined,
+    value: ChipsInputValue | undefined
   ) => {
-    removeOption(value);
+    if (value !== undefined) {
+      removeOption(value);
+    }
   };
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -157,17 +192,17 @@ const ChipsInput = <Option extends ChipsInputOption>(
     >
       <div vkuiClass="ChipsInput__container" role="presentation">
         {selectedOptions.map((option: Option) => {
-          const value = getOptionValue(option);
-          const label = getOptionLabel(option);
+          const value = getOptionValue!(option);
+          const label = getOptionLabel!(option);
 
           return (
             <React.Fragment key={`${typeof value}-${value}`}>
-              {renderChip({
+              {renderChip!({
                 option,
                 value,
                 label,
                 onRemove: handleChipRemove,
-                disabled: restProps.disabled,
+                disabled: Boolean(restProps.disabled),
                 className: prefixClass("ChipsInput__chip"),
               })}
             </React.Fragment>
@@ -190,7 +225,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
             onKeyDown={handleKeyDown}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            placeholder={selectedOptions.length ? null : placeholder}
+            placeholder={selectedOptions.length ? undefined : placeholder}
             {...restProps}
           />
         </label>
@@ -199,35 +234,5 @@ const ChipsInput = <Option extends ChipsInputOption>(
   );
 };
 
-export const chipsInputDefaultProps: ChipsInputProps<any> = {
-  type: "text",
-  onChange: noop,
-  onInputChange: noop,
-  onKeyDown: noop,
-  onBlur: noop,
-  onFocus: noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: (option: ChipsInputOption): ChipsInputValue => option.value,
-  getOptionLabel: (option: ChipsInputOption): string => option.label,
-  getNewOptionData: (_: ChipsInputValue, label: string): ChipsInputOption => ({
-    value: label,
-    label,
-  }),
-  renderChip({
-    disabled,
-    value,
-    label,
-    ...rest
-  }: RenderChip<ChipsInputOption>) {
-    return (
-      <Chip value={value} removable={!disabled} {...rest}>
-        {label}
-      </Chip>
-    );
-  },
-};
-ChipsInput.defaultProps = chipsInputDefaultProps;
-
+// eslint-disable-next-line import/no-default-export
 export default ChipsInput;

package/src/components/ChipsInput/useChipsInput.ts

@@ -12,17 +12,17 @@ export const useChipsInput = <Option extends ChipsInputOption>(
     props;
 
   const [fieldValue, setFieldValue] = React.useState(props.inputValue);
-  const [selectedOptions, setSelectedOptions] = React.useState(value);
+  const [selectedOptions, setSelectedOptions] = React.useState(value ?? []);
 
   const clearInput = React.useCallback(() => {
     setFieldValue("");
-    onInputChange({ target: { value: "" } } as any);
+    onInputChange!({ target: { value: "" } } as any);
   }, [onInputChange]);
 
   const handleInputChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setFieldValue(e.target.value);
-      onInputChange(e);
+      onInputChange!(e);
     },
     [onInputChange]
   );
@@ -30,7 +30,8 @@ export const useChipsInput = <Option extends ChipsInputOption>(
   const toggleOption = React.useCallback(
     (newOption: Option, value?: boolean) => {
       const newSelectedOptions = selectedOptions.filter(
-        (option: Option) => getOptionValue(newOption) !== getOptionValue(option)
+        (option: Option) =>
+          getOptionValue!(newOption) !== getOptionValue!(option)
       );
 
       if (value === true) {
@@ -38,7 +39,7 @@ export const useChipsInput = <Option extends ChipsInputOption>(
       }
 
       setSelectedOptions(newSelectedOptions);
-      onChange(newSelectedOptions);
+      onChange!(newSelectedOptions);
     },
     [selectedOptions, getOptionValue, onChange]
   );
@@ -51,22 +52,22 @@ export const useChipsInput = <Option extends ChipsInputOption>(
     const trimmedValue = fieldValue?.trim();
 
     if (trimmedValue) {
-      addOption(getNewOptionData(undefined, trimmedValue));
+      addOption(getNewOptionData!(undefined, trimmedValue));
       clearInput();
     }
   }, [addOption, clearInput, getNewOptionData, fieldValue]);
   const removeOption = React.useCallback(
     (value: ChipsInputValue) => {
-      toggleOption(getNewOptionData(undefined, value as string), false);
+      toggleOption(getNewOptionData!(undefined, value as string), false);
     },
     [toggleOption, getNewOptionData]
   );
 
   React.useEffect(() => {
-    setSelectedOptions(value);
+    setSelectedOptions(value as Option[]);
 
     return () => setSelectedOptions([]);
-  }, [props.value]);
+  }, [props.value, value]);
 
   React.useEffect(() => {
     setFieldValue(props.inputValue);