@vkontakte/vkui 4.33.3 → 4.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.33.3",
+  "version": "4.34.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -41,13 +41,13 @@
     "@types/react-dom": "^16.9.14",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^3.11.2",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.0.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
-    "@vkontakte/eslint-config": "2.5.0",
+    "@vkontakte/eslint-config": "3.1.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.12.2",
+    "@vkontakte/vkui-tokens": "4.14.2",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -61,12 +61,12 @@
     "concurrently": "^4.1.2",
     "cross-env": "^7.0.2",
     "css-loader": "^6.5.1",
-    "eslint": "~6.8.0",
-    "eslint-config-prettier": "6.15.0",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "7.2.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest-playwright": "^0.2.1",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-vkui": "file:./eslint-plugin-vkui",
     "expect-playwright": "^0.2.6",
@@ -75,6 +75,7 @@
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.2.0",
     "jest-playwright-preset": "^1.4.1",
+    "jest-preset-stylelint": "^5.0.4",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.5.2",
     "playwright": "1.17.2",
@@ -96,14 +97,15 @@
     "react-dom": "^16.8.6",
     "react-frame-component": "^3.0.0",
     "react-styleguidist": "^11.2.0",
+    "semver": "^7.3.5",
     "shx": "^0.3.2",
     "size-limit": "^5.0.5",
     "source-map-loader": "^3.0.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-value-no-unknown-custom-properties": "^3.0.0",
+    "stylelint-config-standard": "^26.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "3.8",
     "wait-port": "^0.2.9",
     "webpack": "^5.66.0",
@@ -174,8 +176,8 @@
     "styleguide:props": "VKUI_STYLEGUIDE_PROPSPARSER=1 yarn styleguide",
     "styleguide:build": "cross-env NODE_ENV=production styleguidist build --config=styleguide/config.js",
     "dev": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:postcss-dev\"",
-    "dev-cjs": "yarn clear && concurrently \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",
-    "dev-all": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",
+    "dev-cjs": "yarn clear && concurrently \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",
+    "dev-all": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",
     "postcss-bundle": "webpack --config webpack.styles.config.js",
     "postcss-modules": "postcss './src/**/*.css' --base ./src --dir ./dist/cssm",
     "postcss-dev": "concurrently 'yarn:postcss-bundle --watch' 'yarn:postcss-modules --watch'",
@@ -183,8 +185,7 @@
     "babel-dev": "yarn babel-base --out-dir dist/ --watch",
     "babel-cjs-dev": "yarn babel-base --config-file ./babel.cjs.config.js --out-dir dist/cjs/ --watch",
     "tsc-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/ --watch --preserveWatchOutput",
-    "tsc-cjs-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ --watch --preserveWatchOutput",
-    "build:types": "yarn tsc && yarn tsc-cjs && yarn tsc-cssm",
+    "build:types": "yarn tsc && yarn tsc-cssm",
     "build:no-types": "concurrently 'yarn:babel' 'yarn:babel-cssm' 'yarn:babel-cjs' 'yarn:postcss'",
     "build": "yarn build:types && yarn build:no-types",
     "postcss": "cross-env NODE_ENV=production concurrently 'yarn:postcss-bundle' 'yarn:postcss-modules'",

package/src/components/ActionSheet/ActionSheet.tsx

@@ -43,15 +43,16 @@ const warn = warnOnce("ActionSheet");
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */
-export const ActionSheet: React.FC<ActionSheetProps> = ({
+export const ActionSheet = ({
   children,
   className,
   header,
   text,
   style,
   iosCloseItem,
+  popupDirection = "bottom",
   ...restProps
-}) => {
+}: ActionSheetProps) => {
   const platform = usePlatform();
   const [closing, setClosing] = React.useState(false);
   const onClose = () => setClosing(true);
@@ -114,6 +115,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
         closing={closing}
         timeout={timeout}
         {...(restProps as Omit<SharedDropdownProps, "closing">)}
+        popupDirection={popupDirection}
         onClose={onClose}
         className={isDesktop ? className : undefined}
         style={isDesktop ? style : undefined}
@@ -157,7 +159,3 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
     </PopoutWrapper>
   );
 };
-
-ActionSheet.defaultProps = {
-  popupDirection: "bottom",
-};

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -8,14 +8,14 @@ import "./ActionSheet.css";
 
 const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
 
-export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
+export const ActionSheetDropdown = ({
   children,
   closing,
   // these 2 props are only omitted - ActionSheetDesktop compat
   toggleRef,
   popupDirection,
   ...restProps
-}) => {
+}: SharedDropdownProps) => {
   const platform = usePlatform();
   const baseClaseName = getClassName("ActionSheet", platform);
 

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -20,7 +20,7 @@ function getEl(
   return ref && "current" in ref ? ref.current : ref;
 }
 
-export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
+export const ActionSheetDropdownDesktop = ({
   children,
   toggleRef,
   closing,
@@ -29,7 +29,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   className,
   style,
   ...restProps
-}) => {
+}: SharedDropdownProps) => {
   const { document } = useDOM();
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
@@ -63,7 +63,10 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
     });
   }, [bodyClickListener, document]);
 
-  const onClick = React.useCallback((e) => e.stopPropagation(), []);
+  const onClick = React.useCallback(
+    (e: React.MouseEvent<HTMLElement, MouseEvent>) => e.stopPropagation(),
+    []
+  );
 
   const targetRef = React.useMemo(() => {
     if (isRefObject<SharedDropdownProps["toggleRef"], HTMLElement>(toggleRef)) {

package/src/components/ActionSheet/Readme.md

@@ -3,7 +3,7 @@ ActionSheet – имитация [нативного компонента](https
 коллекцию `ActionSheetItem`.
 На больших экранах прокрутка не отключается.
 
-Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
+Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout).
 
 > **Важно**
 >

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -46,7 +46,7 @@ export interface ActionSheetItemProps
   onImmediateClick?: React.MouseEventHandler<HTMLElement>;
 }
 
-const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
+const ActionSheetItemComponent = ({
   children,
   autoclose,
   mode = "default",

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -24,7 +24,9 @@ export const MEDIUM_HEIGHT = 720;
 /**
  * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
  */
-const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
+const AdaptivityProvider = (
+  props: React.PropsWithChildren<AdaptivityProps>
+) => {
   const adaptivityRef = React.useRef<ReturnType<
     typeof calculateAdaptivity
   > | null>(null);

package/src/components/Alert/Alert.tsx

@@ -45,9 +45,10 @@ type ItemClickHandler = (item: AlertActionInterface) => void;
 
 interface AlertTypography {
   id: string;
+  children?: React.ReactNode;
 }
 
-const AlertHeader: React.FC<AlertTypography> = (props) => {
+const AlertHeader = (props: AlertTypography) => {
   const platform = usePlatform();
 
   switch (platform) {
@@ -62,7 +63,7 @@ const AlertHeader: React.FC<AlertTypography> = (props) => {
   }
 };
 
-const AlertText: React.FC<AlertTypography> = (props) => {
+const AlertText = (props: AlertTypography) => {
   const platform = usePlatform();
 
   switch (platform) {
@@ -82,11 +83,11 @@ interface AlertActionProps {
   onItemClick: ItemClickHandler;
 }
 
-const AlertAction: React.FC<AlertActionProps> = ({
+const AlertAction = ({
   action,
   onItemClick,
   ...restProps
-}) => {
+}: AlertActionProps) => {
   const platform = usePlatform();
   const { viewWidth } = useAdaptivity();
   const handleItemClick = React.useCallback(
@@ -139,7 +140,7 @@ const AlertAction: React.FC<AlertActionProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */
-export const Alert: React.FC<AlertProps> = ({
+export const Alert = ({
   actions = [],
   actionsLayout = "horizontal",
   children,
@@ -150,7 +151,7 @@ export const Alert: React.FC<AlertProps> = ({
   onClose,
   dismissLabel = "Закрыть предупреждение",
   ...restProps
-}) => {
+}: AlertProps) => {
   const platform = usePlatform();
   const { viewWidth } = useAdaptivity();
   const { waitTransitionFinish } = useWaitTransitionFinish();

package/src/components/Alert/Readme.md

@@ -1,4 +1,4 @@
-Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
+Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout).
 
 В Алертах особое внимание нужно уделить кнопкам. Всего есть три типа кнопок:
 `cancel`, `destructive` и `default`.

package/src/components/AppRoot/AppRoot.tsx

@@ -20,6 +20,7 @@ import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
 import { useInsets } from "../../hooks/useInsets";
 import { Insets } from "@vkontakte/vk-bridge";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
+import { isRefObject } from "../../lib/isRefObject";
 import "./AppRoot.css";
 
 // Используйте classList, но будьте осторожны
@@ -36,6 +37,13 @@ export interface AppRootProps
   /** Убирает классы без префикса (.Button) */
   noLegacyClasses?: boolean;
   scroll?: "global" | "contain";
+  /** Элемент используемый в качестве root для порталов
+   * При передаче своего элемента необходимо задать ему class="vkui__portal-root" и добавить в DOM
+   */
+  // TODO: v5.0.0 изменить тип на HTMLElement
+  portalRoot?: HTMLDivElement | React.RefObject<HTMLDivElement> | null;
+  /** Disable portal for components */
+  disablePortal?: boolean;
 }
 
 const warn = warnOnce("AppRoot");
@@ -52,6 +60,8 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     hasMouse,
     noLegacyClasses = false,
     scroll = "global",
+    portalRoot: portalRootProp = null,
+    disablePortal,
     ...props
   }) => {
     // normalize mode
@@ -65,14 +75,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     const insets = useInsets();
     const { appearance } = React.useContext(ConfigProviderContext);
 
-    const initialized = React.useRef(false);
-    if (!initialized.current) {
-      if (document && mode === "full") {
-        document.documentElement.classList.add("vkui");
-      }
-      classScopingMode.noConflict = noLegacyClasses;
-      initialized.current = true;
-    }
+    classScopingMode.noConflict = noLegacyClasses;
 
     if (process.env.NODE_ENV === "development") {
       if (scroll !== "global" && mode !== "embedded") {
@@ -88,14 +91,24 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
     // setup portal
     useIsomorphicLayoutEffect(() => {
-      const portal = document!.createElement("div");
-      portal.classList.add("vkui__portal-root");
-      document!.body.appendChild(portal);
+      let portal: HTMLDivElement | null = null;
+      if (portalRootProp) {
+        if (isRefObject(portalRootProp)) {
+          portal = portalRootProp.current;
+        } else {
+          portal = portalRootProp;
+        }
+      }
+      if (!portal) {
+        portal = document!.createElement("div");
+        portal.classList.add("vkui__portal-root");
+        document!.body.appendChild(portal);
+      }
       setPortalRoot(portal);
       return () => {
-        portal.parentElement?.removeChild(portal);
+        portal?.parentElement?.removeChild(portal);
       };
-    }, []);
+    }, [portalRootProp]);
 
     // setup root classes
     useIsomorphicLayoutEffect(() => {
@@ -111,12 +124,21 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
       return () => {
         parent?.classList.remove(...classes);
-        if (mode === "full") {
-          document?.documentElement.classList.remove("vkui");
-        }
       };
     }, []);
 
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "full") {
+        document!.documentElement.classList.add("vkui");
+
+        return () => {
+          document!.documentElement.classList.remove("vkui");
+        };
+      }
+
+      return undefined;
+    }, [document, mode]);
+
     // setup insets
     useIsomorphicLayoutEffect(() => {
       if (mode === "partial" || !rootRef.current?.parentElement) {
@@ -182,10 +204,11 @@ export const AppRoot = withAdaptivity<AppRootProps>(
       <AppRootContext.Provider
         value={{
           appRoot: rootRef,
-          portalRoot: portalRoot,
+          portalRoot,
           embedded: mode === "embedded",
           keyboardInput: isKeyboardInputActive,
           mode,
+          disablePortal,
         }}
       >
         <ScrollController elRef={rootRef}>

package/src/components/AppRoot/AppRootContext.ts

@@ -6,6 +6,7 @@ export interface AppRootContextInterface {
   embedded?: boolean;
   mode?: "partial" | "embedded" | "full";
   keyboardInput?: boolean;
+  disablePortal?: boolean;
 }
 
 export const AppRootContext = React.createContext<AppRootContextInterface>({

package/src/components/AppRoot/AppRootPortal.tsx

@@ -4,14 +4,22 @@ import { AppRootContext } from "./AppRootContext";
 import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
 import { useAppearance } from "../../hooks/useAppearance";
 
-export const AppRootPortal: React.FC<
-  React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>
-> = ({ children, className, forcePortal }) => {
-  const { portalRoot, mode } = React.useContext(AppRootContext);
+export interface AppRootPortalProps {
+  className?: string;
+  forcePortal?: boolean;
+  children?: React.ReactNode;
+}
+
+export const AppRootPortal = ({
+  children,
+  className,
+  forcePortal,
+}: AppRootPortalProps) => {
+  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);
   const appearance = useAppearance();
 
   forcePortal = forcePortal ?? mode !== "full";
-  return portalRoot && forcePortal ? (
+  return !disablePortal && portalRoot && forcePortal ? (
     createPortal(
       <AppearanceProvider appearance={appearance}>
         <div className={className}>{children}</div>

package/src/components/AppRoot/Readme.md

@@ -1,4 +1,4 @@
-Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подключения](#/Modes).
+Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подключения](https://vkcom.github.io/VKUI/#/Modes).
 
 ## Режимы скролла
 

package/src/components/AppRoot/ScrollContext.tsx

@@ -16,11 +16,11 @@ const clearDisableScrollStyle = (node: HTMLElement) => {
 };
 
 export interface ScrollContextInterface {
-  getScroll(): { x: number; y: number };
-  scrollTo(x?: number, y?: number): void;
+  getScroll(this: void): { x: number; y: number };
+  scrollTo(this: void, x?: number, y?: number): void;
   isScrollLock: boolean;
-  enableScrollLock(): void;
-  disableScrollLock(): void;
+  enableScrollLock(this: void): void;
+  disableScrollLock(this: void): void;
   beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;
 }
 
@@ -36,11 +36,10 @@ export const useScroll = () => React.useContext(ScrollContext);
 
 export interface ScrollControllerProps {
   elRef: React.RefObject<HTMLElement>;
+  children?: React.ReactNode;
 }
 
-export const GlobalScrollController: React.FC<ScrollControllerProps> = ({
-  children,
-}) => {
+export const GlobalScrollController = ({ children }: ScrollControllerProps) => {
   const { window, document } = useDOM();
   const [isScrollLock, setScrollLock] = React.useState(false);
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
@@ -120,10 +119,10 @@ export const GlobalScrollController: React.FC<ScrollControllerProps> = ({
   );
 };
 
-export const ElementScrollController: React.FC<ScrollControllerProps> = ({
+export const ElementScrollController = ({
   elRef,
   children,
-}) => {
+}: ScrollControllerProps) => {
   const [isScrollLock, setScrollLock] = React.useState(false);
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
 

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -8,6 +8,7 @@ import { Platform } from "../../lib/platform";
 
 export interface AppearanceProviderProps {
   appearance?: AppearanceType;
+  children?: React.ReactNode;
 }
 
 export const generateVKUITokensClassName = (
@@ -35,10 +36,10 @@ export const generateVKUITokensClassName = (
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
+export const AppearanceProvider = ({
   children,
   appearance = "light",
-}) => {
+}: AppearanceProviderProps) => {
   const platform = usePlatform();
   const scheme = getScheme({
     platform,

package/src/components/Avatar/Avatar.css

@@ -18,6 +18,7 @@
   height: 100%;
   border: none;
   border-radius: inherit;
+  object-fit: cover;
 }
 
 .Avatar__children,
@@ -139,20 +140,6 @@
   margin-right: 8px;
 }
 
-/**
- * .RichCell
- */
-.RichCell > .Avatar {
-  margin-right: 12px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.RichCell > .Avatar--sz-48 {
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
 /**
  * .SimpleCell
  */

package/src/components/Avatar/Avatar.tsx

@@ -31,7 +31,7 @@ export const AVATAR_DEFAULT_SHADOW = true;
 /**
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
-export const Avatar: React.FC<AvatarProps> = ({
+export const Avatar = ({
   alt,
   crossOrigin,
   decoding,

package/src/components/Badge/Badge.tsx

@@ -9,6 +9,6 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export const Badge: React.FC<BadgeProps> = ({ mode = "new", ...restProps }) => (
+export const Badge = ({ mode = "new", ...restProps }: BadgeProps) => (
   <span vkuiClass={classNames("Badge", `Badge--${mode}`)} {...restProps} />
 );

package/src/components/Banner/Banner.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { HasComponent } from "../../types";
+import { HasComponent, HasChildren } from "../../types";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { IOS } from "../../lib/platform";
@@ -80,12 +80,11 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: React.ReactNode;
 }
 
-type BannerTypographyProps = Pick<BannerProps, "size"> & HasComponent;
+type BannerTypographyProps = Pick<BannerProps, "size"> &
+  HasComponent &
+  HasChildren;
 
-const BannerHeader: React.FC<BannerTypographyProps> = ({
-  size,
-  ...restProps
-}) => {
+const BannerHeader = ({ size, ...restProps }: BannerTypographyProps) => {
   return size === "m" ? (
     <Title level="2" weight="2" {...restProps} />
   ) : (

package/src/components/BaseGallery/BaseGallery.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { Touch, TouchEvent } from "../Touch/Touch";
-import HorizontalScrollArrow from "../HorizontalScroll/HorizontalScrollArrow";
+import { HorizontalScrollArrow } from "../HorizontalScroll/HorizontalScrollArrow";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useDOM } from "../../lib/dom";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -20,7 +20,7 @@ const ANIMATION_DURATION = 0.24;
 
 const LAYOUT_DEFAULT_STATE = {
   containerWidth: 0,
-  viewporOffsettWidth: 0,
+  viewportOffsetWidth: 0,
   layerWidth: 0,
   min: 0,
   max: 0,
@@ -96,7 +96,7 @@ export const BaseGallery = ({
       const { coordX, width } = targetSlide;
 
       if (isCenterWithCustomWidth) {
-        const viewportWidth = layoutState.current.viewporOffsettWidth ?? 0;
+        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;
         return viewportWidth / 2 - coordX - width / 2;
       }
 
@@ -137,7 +137,7 @@ export const BaseGallery = ({
       ) ?? [];
 
     const localContainerWidth = rootRef.current?.offsetWidth ?? 0;
-    const localViewporOffsettWidth = viewportRef.current?.offsetWidth ?? 0;
+    const localviewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;
     const localLayerWidth = localSlides.reduce(
       (val: number, slide: GallerySlidesState) => slide.width + val,
       0
@@ -145,18 +145,18 @@ export const BaseGallery = ({
 
     layoutState.current = {
       containerWidth: localContainerWidth,
-      viewporOffsettWidth: localViewporOffsettWidth,
+      viewportOffsetWidth: localviewportOffsetWidth,
       layerWidth: localLayerWidth,
       max: calcMax({
         slides: localSlides,
-        viewporOffsettWidth: localViewporOffsettWidth,
+        viewportOffsetWidth: localviewportOffsetWidth,
         isCenterWithCustomWidth,
       }),
       min: calcMin({
         containerWidth: localContainerWidth,
         layerWidth: localLayerWidth,
         slides: localSlides,
-        viewporOffsettWidth: localViewporOffsettWidth,
+        viewportOffsetWidth: localviewportOffsetWidth,
         isCenterWithCustomWidth,
         align,
       }),

package/src/components/BaseGallery/helpers.ts

@@ -10,7 +10,7 @@ export const calcMin = ({
   containerWidth = 0,
   layerWidth = 0,
   slides = [],
-  viewporOffsettWidth = 0,
+  viewportOffsetWidth = 0,
   align,
   isCenterWithCustomWidth,
 }: CalcMin) => {
@@ -18,15 +18,15 @@ export const calcMin = ({
     case "left":
       return containerWidth - layerWidth;
     case "right":
-      return viewporOffsettWidth - layerWidth;
+      return viewportOffsetWidth - layerWidth;
     case "center":
       if (isCenterWithCustomWidth && slides.length) {
         const { coordX, width } = slides[slides.length - 1];
-        return viewporOffsettWidth / 2 - coordX - width / 2;
+        return viewportOffsetWidth / 2 - coordX - width / 2;
       } else {
         return (
-          viewporOffsettWidth -
-          (containerWidth - viewporOffsettWidth) / 2 -
+          viewportOffsetWidth -
+          (containerWidth - viewportOffsetWidth) / 2 -
           layerWidth
         );
       }
@@ -40,12 +40,12 @@ interface CalcMax extends Partial<LayoutState> {
 
 export const calcMax = ({
   slides = [],
-  viewporOffsettWidth = 0,
+  viewportOffsetWidth = 0,
   isCenterWithCustomWidth,
 }: CalcMax) => {
   if (isCenterWithCustomWidth && slides.length) {
     const { width, coordX } = slides[0];
-    return viewporOffsettWidth / 2 - coordX - width / 2;
+    return viewportOffsetWidth / 2 - coordX - width / 2;
   }
   return 0;
 };