@vkontakte/vkui 4.33.2 → 4.33.3

package/package.json

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

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Modifier } from "react-popper";
 import { CustomScrollView } from "../CustomScrollView/CustomScrollView";
 import { classNames } from "../../lib/classNames";
 import { Popper, Placement } from "../Popper/Popper";
@@ -11,7 +12,7 @@ export interface CustomSelectDropdownProps
     HasRef<HTMLDivElement> {
   targetRef: React.RefObject<HTMLElement>;
   placement?: Placement;
-  scrollBoxRef?: React.Ref<HTMLDivElement>;
+  scrollBoxRef?: React.RefObject<HTMLDivElement>;
   fetching?: boolean;
   offsetDistance?: number;
   sameWidth?: boolean;
@@ -35,6 +36,32 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
 }) => {
   const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
 
+  const customModifiers = React.useMemo<Array<Modifier<string>>>(() => {
+    if (!scrollBoxRef?.current) {
+      return [];
+    }
+
+    return [
+      {
+        name: "customSelectChildrenChange",
+        enabled: true,
+        phase: "main",
+        effect: ({ instance }) => {
+          const observer = new MutationObserver(instance.forceUpdate);
+
+          observer.observe(scrollBoxRef.current as Element, {
+            childList: true,
+          });
+
+          return () => {
+            observer.disconnect();
+          };
+        },
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollBoxRef?.current]);
+
   const onPlacementChange = React.useCallback(
     ({ placement }: { placement?: Placement }) => {
       setIsTop(calcIsTop(placement));
@@ -59,6 +86,7 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
         sameWidth && "CustomSelectDropdown--wide"
       )}
       forcePortal={forcePortal}
+      customModifiers={customModifiers}
       {...restProps}
     >
       <CustomScrollView

package/src/components/File/File.tsx

@@ -28,6 +28,8 @@ export const File: React.FC<FileProps> = ({
   mode,
   stretched,
   before,
+  after,
+  loading,
   className,
   style,
   getRef,
@@ -49,6 +51,8 @@ export const File: React.FC<FileProps> = ({
       // TODO: v5.0.0 удалить controlSize
       size={size ?? controlSize}
       before={before}
+      after={after}
+      loading={loading}
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}

package/src/components/FixedLayout/FixedLayout.css

@@ -48,3 +48,13 @@
 .PanelHeader ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
   top: calc(var(--panelheader_height) + var(--safe-area-inset-top));
 }
+
+.PanelHeader--ios ~ .FixedLayout--top,
+.PanelHeader--ios ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_ios) + var(--safe-area-inset-top));
+}
+
+.PanelHeader--vkcom ~ .FixedLayout--top,
+.PanelHeader--vkcom ~ * .FixedLayout--top:not(.PanelHeader__fixed) {
+  top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
+}

package/src/components/Popper/Popper.tsx

@@ -48,6 +48,10 @@ export interface PopperCommonProps
   sameWidth?: boolean;
   forcePortal?: boolean;
   onPlacementChange?: (data: { placement?: Placement }) => void;
+  /**
+   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)
+   */
+  customModifiers?: Array<Modifier<string>>;
 }
 
 export interface PopperProps extends PopperCommonProps {
@@ -74,6 +78,7 @@ export const Popper: React.FC<PopperProps> = ({
   offsetSkidding = 0,
   forcePortal = true,
   style: compStyles,
+  customModifiers = [],
   ...restProps
 }: PopperProps) => {
   const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
@@ -135,6 +140,7 @@ export const Popper: React.FC<PopperProps> = ({
       modifiers.push(sameWidth);
     }
 
+    modifiers.push(...customModifiers);
     return modifiers;
   }, [
     arrow,
@@ -142,6 +148,7 @@ export const Popper: React.FC<PopperProps> = ({
     smallTargetOffsetSkidding,
     offsetSkidding,
     offsetDistance,
+    customModifiers,
   ]);
 
   const { styles, state, attributes } = usePopper(