@vkontakte/vkui 4.33.1 → 4.33.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.33.1",
+  "version": "4.33.2",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ModalCard/ModalCard.css

@@ -15,7 +15,7 @@
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  transform: translateY(100%);
+  transform: translateY(calc(100% + 16px));
 }
 
 /**

package/src/components/ModalRoot/ModalRoot.tsx

@@ -362,7 +362,7 @@ class ModalRootTouchComponent extends React.Component<
 
     if (!this.state.touchDown) {
       modalState.touchStartContentScrollTop =
-        modalState.contentElement?.scrollTop;
+        modalState.contentElement?.scrollTop ?? 0;
       this.setState({ touchDown: true });
     }
 
@@ -830,6 +830,12 @@ function initPageModal(modalState: ModalsStateEntry) {
     translateY = 0;
   }
 
+  // Если модалка уже раскрыта обновляем состояния
+  if (translateY === 0) {
+    expanded = true;
+    collapsed = false;
+  }
+
   modalState.expandedRange = expandedRange;
   modalState.collapsedRange = collapsedRange;
   modalState.hiddenRange = hiddenRange;

package/src/components/Typography/Title/Title.tsx

@@ -21,7 +21,7 @@ export interface TitleProps
     | "1"
     | "2"
     | "3";
-  level: "1" | "2" | "3";
+  level?: "1" | "2" | "3";
 }
 
 const warn = warnOnce("Title");

package/src/components/WriteBar/WriteBar.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useExternRef } from "../../hooks/useExternRef";
 import { hasReactNode, isFunction } from "../../lib/utils";
-import { useDOM } from "../../lib/dom";
 import { getClassName } from "../../helpers/getClassName";
 import { HasRef, HasRootRef } from "../../types";
 import "./WriteBar.css";
@@ -55,9 +54,8 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
 
   const isControlledOutside = value != null;
 
-  const { window } = useDOM();
   const textareaRef = useExternRef(getRef);
-  const textareaMinHeightRef = React.useRef<number | null>(null);
+  const currentScrollHeight = React.useRef<number>();
 
   const resize = React.useCallback(() => {
     const textareaEl = textareaRef.current;
@@ -65,31 +63,19 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
       return;
     }
 
-    const { offsetHeight, scrollHeight } = textareaEl;
-    const style = window!.getComputedStyle(textareaEl);
-    const paddingTop = parseInt(style.paddingTop);
-    const paddingBottom = parseInt(style.paddingBottom);
-
-    if (textareaMinHeightRef.current === null) {
-      textareaMinHeightRef.current = offsetHeight;
-    }
-
-    let diff = paddingTop + paddingBottom + 10;
-
-    if (scrollHeight + diff <= offsetHeight) {
-      diff = 0;
-    }
-
-    textareaEl.style.height = "0px";
-
-    const height = textareaEl.scrollHeight - diff / 4;
-    textareaEl.style.height =
-      String(Math.max(height, textareaMinHeightRef.current)) + "px";
-
-    if (isFunction(onHeightChange)) {
-      onHeightChange();
+    if (textareaEl.offsetParent) {
+      textareaEl.style.height = "";
+      textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+
+      if (
+        textareaEl.scrollHeight !== currentScrollHeight.current &&
+        onHeightChange
+      ) {
+        onHeightChange();
+        currentScrollHeight.current = textareaEl.scrollHeight;
+      }
     }
-  }, [onHeightChange, textareaRef, window]);
+  }, [onHeightChange, textareaRef]);
 
   const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
     event

package/src/lib/polyfills.ts

@@ -94,3 +94,20 @@ if (!Array.prototype.find) {
     },
   });
 }
+
+// String.prototype.padStart
+if (!String.prototype.padStart) {
+  String.prototype.padStart = function padStart(targetLength, padString) {
+    targetLength = targetLength >> 0;
+    padString = String(padString || " ");
+    if (this.length > targetLength) {
+      return String(this);
+    } else {
+      targetLength = targetLength - this.length;
+      if (targetLength > padString.length) {
+        padString += padString.repeat(targetLength / padString.length);
+      }
+      return padString.slice(0, targetLength) + String(this);
+    }
+  };
+}