@vkontakte/vkui 7.5.4 → 7.6.0

package/src/components/CustomSelect/hooks/useSelectedOptionController.ts

@@ -0,0 +1,132 @@
+import { type ChangeEvent } from 'react';
+import * as React from 'react';
+import { useStateWithPrev } from '../../../hooks/useStateWithPrev';
+import {
+  type NativeSelectValue,
+  NOT_SELECTED,
+  remapFromNativeValueToSelectValue,
+  remapFromSelectValueToNativeValue,
+  type SelectValue,
+} from '../../NativeSelect/NativeSelect';
+import { type SelectProps } from '../CustomSelect';
+
+/* eslint-disable jsdoc/require-jsdoc */
+type UseSelectedOptionControllerProps = Pick<SelectProps, 'value' | 'defaultValue'> & {
+  isControlledOutside: boolean;
+  allowClearButton: boolean;
+  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;
+};
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function useSelectedOptionController({
+  value,
+  defaultValue,
+  isControlledOutside,
+  allowClearButton,
+  onChange,
+}: UseSelectedOptionControllerProps) {
+  const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] =
+    useStateWithPrev<NativeSelectValue>(() => {
+      if (value !== undefined) {
+        return remapFromSelectValueToNativeValue(value);
+      }
+      if (defaultValue !== undefined) {
+        return remapFromSelectValueToNativeValue(defaultValue);
+      }
+      return NOT_SELECTED.NATIVE;
+    });
+  const nativeSelectValueRef = React.useRef<NativeSelectValue>(nativeSelectValue);
+
+  const [selectedOptionValue, setSelectedOptionValue] = React.useState<SelectValue>(() =>
+    remapFromNativeValueToSelectValue(nativeSelectValue),
+  );
+
+  const _setNativeSelectValue = React.useCallback(
+    (newValue: NativeSelectValue) => {
+      setNativeSelectValue(newValue);
+      nativeSelectValueRef.current = newValue;
+    },
+    [setNativeSelectValue],
+  );
+
+  React.useEffect(
+    function syncNativeSelectValueWithPropValue() {
+      if (value !== undefined) {
+        _setNativeSelectValue(remapFromSelectValueToNativeValue(value));
+      }
+    },
+    [value, _setNativeSelectValue],
+  );
+
+  React.useEffect(
+    function syncNativeSelectValueWithSelectedOptionValue() {
+      const remappedSelectedValue = remapFromSelectValueToNativeValue(selectedOptionValue);
+      if (nativeSelectValueRef.current !== remappedSelectedValue) {
+        setNativeSelectValue(remappedSelectedValue);
+      }
+    },
+    [selectedOptionValue, setNativeSelectValue],
+  );
+
+  const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    // для ситуаций, когда в опциях value это string а value/defaultValue это number
+    // и наоборот, приводим значение nativeSelectValue из стейта к строке.
+    // ведь nativeSelect всегда возвращает string в onChange, а пользователь
+    // может использовать number для опций
+    //
+    // native select всегда возвращает string в качестве value в onChange
+    // Когда селект контролируемый, то пользователь, в onChange может сохранить в свой стейт строку (например '3'), хотя
+    // в качестве value опции может использовать число (3),
+    // тогда строчное значение value ('3') из стейта пользователя
+    // будет передано в CustomSelect, и после синхронизации nativeSelectValue (3) и props.value ('3') и после клика на уже выбранную опцию (3),
+    // когда nativeSelectValue обновится на значение опции (число 3),
+    // сравнение nativeSelectValue (3) и prevNativeSelectValue ('3') может не сработать лишь из-за того, что они в разных типах.
+    const convertedNativeSelectValue =
+      typeof nativeSelectValue === 'number' &&
+      (typeof value === 'string' || typeof prevNativeSelectValue === 'string')
+        ? String(nativeSelectValue)
+        : nativeSelectValue;
+
+    const isCalledWithSameControlledOptionValue =
+      isControlledOutside &&
+      value === remapFromNativeValueToSelectValue(convertedNativeSelectValue);
+
+    const isNativeValueChanged =
+      convertedNativeSelectValue !== prevNativeSelectValue && prevNativeSelectValue !== undefined;
+
+    const isTriggeredByClearButton =
+      allowClearButton &&
+      // Проверяем, что новое значение NOT_SELECTED.NATIVE
+      nativeSelectValue === NOT_SELECTED.NATIVE &&
+      // Проверяем, что предыдущее значение не undefined(кейс с первой отрисовкой, когда предыдущего значения не было)
+      prevNativeSelectValue !== undefined &&
+      // Проверяем, что предыдущее значение не NOT_SELECTED.NATIVE(если до этого было уже сброшенное значение)
+      prevNativeSelectValue !== NOT_SELECTED.NATIVE;
+
+    const shouldCallOnChange =
+      !isCalledWithSameControlledOptionValue && (isNativeValueChanged || isTriggeredByClearButton);
+
+    if (!shouldCallOnChange) {
+      return;
+    }
+
+    const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
+
+    if (e.target.value === NOT_SELECTED.NATIVE) {
+      e.target.value = '';
+    }
+    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+      e.currentTarget.value = '';
+    }
+
+    onChange?.(e, remappedNativeValue);
+  };
+
+  return {
+    selectedOptionValue,
+    setSelectedOptionValue,
+    nativeSelectValue,
+    setNativeSelectValue: _setNativeSelectValue,
+    onNativeSelectChange,
+  };
+}

package/src/components/CustomSelect/types.ts

@@ -0,0 +1,38 @@
+import type * as React from 'react';
+import { type Alignment, type Side } from '../../lib/floating';
+import { type CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
+import { type SelectValue } from '../NativeSelect/NativeSelect';
+
+/* eslint-disable jsdoc/require-jsdoc */
+export type MousePosition = {
+  x: React.MouseEvent['clientX'];
+  y: React.MouseEvent['clientY'];
+};
+/* eslint-enable jsdoc/require-jsdoc */
+
+export interface CustomSelectOptionInterface {
+  /**
+   * Значение.
+   */
+  value: Exclude<SelectValue, null>;
+  /**
+   * Отображаемый текст.
+   */
+  label: React.ReactElement | string;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
+  disabled?: boolean;
+  [index: string]: any;
+}
+
+export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface>
+  extends CustomSelectOptionProps {
+  /**
+   * Данные об опции.
+   */
+  option: T;
+}
+
+type PopupDirectionSide = Extract<Side, 'top' | 'bottom'>;
+export type PopupDirection = PopupDirectionSide | `${PopupDirectionSide}-${Alignment}`;

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -68,6 +68,7 @@ export const CustomSelectDropdown = ({
         className={noMaxHeight ? undefined : styles.inWithMaxHeight}
         overscrollBehavior={overscrollBehavior}
         tabIndex={-1}
+        aria-busy={fetching}
       >
         {fetching ? (
           <div className={styles.fetching}>

package/src/components/DateInput/DateInput.tsx

@@ -8,7 +8,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useExternRef } from '../../hooks/useExternRef';
 import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
-import { format, isMatch, parse } from '../../lib/date';
+import { dateFormatter, dateTimeFormatter, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../types';
@@ -471,7 +471,13 @@ export const DateInput = ({
           aria-hidden
           tabIndex={readOnly ? 0 : -1}
           name={name}
-          value={value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''}
+          value={
+            value
+              ? enableTime
+                ? dateTimeFormatter.format(value)
+                : dateFormatter.format(value)
+              : ''
+          }
           onFocus={handleFieldEnter}
         />
         <Text
@@ -557,7 +563,7 @@ export const DateInput = ({
           )}
         </Text>
         {customValue && (
-          <Text className={styles.customValue} aria-hidden>
+          <Text className={styles.customValue} aria-hidden normalize={false}>
             {customValue}
           </Text>
         )}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -3,13 +3,12 @@
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { isAfter } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
-import { format, isMatch, parse } from '../../lib/date';
+import { dateFormatter, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
 import {
@@ -321,7 +320,7 @@ export const DateRangeInput = ({
       const end = isEndValid
         ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)
         : null;
-      if (start && end && isAfter(end, start)) {
+      if (start && end && end > start) {
         updateValue([start, end]);
       }
     },
@@ -466,14 +465,18 @@ export const DateRangeInput = ({
           tabIndex={readOnly ? 0 : -1}
           value={
             value
-              ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${
-                  value[1] ? format(value[1], 'dd.MM.yyyy') : ''
+              ? `${value[0] ? dateFormatter.format(value[0]) : ''} - ${
+                  value[1] ? dateFormatter.format(value[1]) : ''
                 }`
               : ''
           }
           onFocus={handleFieldEnter}
         />
-        <Text className={dateInputStyles.input} onClick={showCalendarOnInputAreaClick}>
+        <Text
+          className={dateInputStyles.input}
+          onClick={showCalendarOnInputAreaClick}
+          normalize={false}
+        >
           <NumberInputLike
             value={internalValue[0]}
             minValue={1}

package/src/components/ModalCard/ModalCard.tsx

@@ -19,6 +19,7 @@ export const ModalCard = ({
   onClose,
   onClosed,
   keepMounted = false,
+  disableModalOverlay,
   ...restProps
 }: ModalCardProps): React.ReactNode => {
   const {
@@ -32,6 +33,7 @@ export const ModalCard = ({
     keepMounted,
     modalOverlayTestId,
     noFocusToDialog,
+    disableModalOverlay,
     onOpen,
     onOpened,
     onClose,

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -73,6 +73,7 @@ export const ModalCardInternal = ({
   onClose = noop,
   onClosed,
   disableFocusTrap,
+  disableModalOverlay,
   ...restProps
 }: ModalCardInternalProps): ReactNode => {
   const platform = usePlatform();
@@ -115,7 +116,7 @@ export const ModalCardInternal = ({
         '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',
       }
     : styleProp;
-  const modalOverlay = (
+  const modalOverlay = !disableModalOverlay && (
     <ModalOverlay
       getRootRef={setBackdropEl}
       data-testid={modalOverlayTestId}
@@ -146,7 +147,12 @@ export const ModalCardInternal = ({
   });
 
   return (
-    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>
+    <ModalOutlet
+      hidden={hidden}
+      isDesktop={isDesktop}
+      onKeyDown={handleEscKeyDown}
+      disableModalOverlay={disableModalOverlay}
+    >
       {modalOverlay}
       <ModalCardBase
         {...restProps}

package/src/components/ModalCard/types.ts

@@ -56,4 +56,10 @@ export interface ModalCardProps
    * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.
    */
   disableFocusTrap?: UseFocusTrapProps['disabled'];
+  /**
+   * Отключает отображение и взаимодействие с фоном модалки.
+   * > При использовании `ModalCard` внутри `ModalRoot` есть особенность использования этого свойства.
+   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#otklyuchenie-zadnego-fona-u-konkretnogo-modalnogo-okna).
+   */
+  disableModalOverlay?: boolean;
 }

package/src/components/ModalOutlet/ModalOutlet.module.css

@@ -6,6 +6,10 @@
   isolation: isolate;
 }
 
+.disableModalOverlay {
+  pointer-events: none;
+}
+
 /* Desktop */
 .hostDesktop:not([hidden]) {
   display: flex;

package/src/components/ModalOutlet/ModalOutlet.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalOutlet.module.css"],"names":["host","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,a,WATA;AAAA;AAAA","file":"ModalOutlet.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalOutlet.module.css"],"names":["host","disableModalOverlay","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,qB,WARA;AAAA,E,aAaAC,a,WAbA;AAAA;AAAA","file":"ModalOutlet.module.css.d.ts","sourceRoot":""}

package/src/components/ModalOutlet/ModalOutlet.tsx

@@ -6,6 +6,7 @@ import styles from './ModalOutlet.module.css';
 
 export interface ModalOutletProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
+  disableModalOverlay?: boolean;
   hidden?: boolean;
   isDesktop?: boolean;
 }
@@ -19,12 +20,18 @@ export const ModalOutlet = ({
   isDesktop,
   children,
   getRootRef,
+  disableModalOverlay,
   ...restProps
 }: ModalOutletProps) => {
   return (
     <div
       ref={getRootRef}
-      className={classNames(className, styles.host, isDesktop && styles.hostDesktop)}
+      className={classNames(
+        className,
+        styles.host,
+        isDesktop && styles.hostDesktop,
+        disableModalOverlay && styles.disableModalOverlay,
+      )}
       hidden={hidden}
       aria-hidden={hidden}
       {...restProps}

package/src/components/ModalOverlay/ModalOverlay.module.css

@@ -1,7 +1,7 @@
 .host {
   inset: 0;
   user-select: none;
-  background-color: rgb(0, 0, 0, 0.4);
+  background-color: var(--vkui--color_overlay_primary);
   transition: opacity 0.3s linear;
   will-change: opacity;
   -webkit-tap-highlight-color: transparent;

package/src/components/ModalPage/ModalPage.module.css

@@ -3,6 +3,7 @@
   inline-size: 100%;
   block-size: var(--vkui_internal_ModalPage--userHeight);
   margin-inline: auto;
+  pointer-events: initial;
   outline: none;
 }
 

package/src/components/ModalPage/ModalPage.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Y,WATA;AAAA,E,aAoBAC,4B,WApBA;AAAA,E,aAwBAC,4C,WAxBA;AAAA,E,aA+BAC,a,WA/BA;AAAA,E,aAkDAC,sB,WAlDA;AAAA,E,aAsDAC,sB,WAtDA;AAAA,E,aA0DAC,sB,WA1DA;AAAA,E,aA8DAC,U,WA9DA;AAAA,E,aA2EAC,gB,WA3EA;AAAA,E,aA4FAA,gB,WA5FA;AAAA,E,aA4FeC,oB,WA5Ff;AAAA,E,aAgGAD,gB,WAhGA;AAAA,E,aAgGeE,uB,WAhGf;AAAA,E,aAqGAF,gB,WArGA;AAAA,E,aAqGeG,sB,WArGf;AAAA,E,aA0GAH,gB,WA1GA;AAAA,E,aA0GeI,qB,WA1Gf;AAAA,E,aA+GAC,iB,WA/GA;AAAA,E,aAoHAA,iB,WApHA;AAAA,E,aAoHgBJ,oB,WApHhB;AAAA,E,aAwHAI,iB,WAxHA;AAAA,E,aAwHgBH,uB,WAxHhB;AAAA,E,aA6HAG,iB,WA7HA;AAAA,E,aA6HgBF,sB,WA7HhB;AAAA,E,aAkIAE,iB,WAlIA;AAAA,E,aAkIgBD,qB,WAlIhB;AAAA,E,aAsIAE,U,WAtIA;AAAA,E,aA0JAC,gB,WA1JA;AAAA,E,aA+JAC,iB,WA/JA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,Y,WAVA;AAAA,E,aAqBAC,4B,WArBA;AAAA,E,aAyBAC,4C,WAzBA;AAAA,E,aAgCAC,a,WAhCA;AAAA,E,aAmDAC,sB,WAnDA;AAAA,E,aAuDAC,sB,WAvDA;AAAA,E,aA2DAC,sB,WA3DA;AAAA,E,aA+DAC,U,WA/DA;AAAA,E,aA4EAC,gB,WA5EA;AAAA,E,aA6FAA,gB,WA7FA;AAAA,E,aA6FeC,oB,WA7Ff;AAAA,E,aAiGAD,gB,WAjGA;AAAA,E,aAiGeE,uB,WAjGf;AAAA,E,aAsGAF,gB,WAtGA;AAAA,E,aAsGeG,sB,WAtGf;AAAA,E,aA2GAH,gB,WA3GA;AAAA,E,aA2GeI,qB,WA3Gf;AAAA,E,aAgHAC,iB,WAhHA;AAAA,E,aAqHAA,iB,WArHA;AAAA,E,aAqHgBJ,oB,WArHhB;AAAA,E,aAyHAI,iB,WAzHA;AAAA,E,aAyHgBH,uB,WAzHhB;AAAA,E,aA8HAG,iB,WA9HA;AAAA,E,aA8HgBF,sB,WA9HhB;AAAA,E,aAmIAE,iB,WAnIA;AAAA,E,aAmIgBD,qB,WAnIhB;AAAA,E,aAuIAE,U,WAvIA;AAAA,E,aA2JAC,gB,WA3JA;AAAA,E,aAgKAC,iB,WAhKA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}

package/src/components/ModalPage/ModalPage.tsx

@@ -26,6 +26,7 @@ export const ModalPage = ({
   size = 's',
   settlingHeight = 50,
   dynamicContentHeight,
+  disableModalOverlay,
   keepMounted = false,
   ...restProps
 }: ModalPageProps) => {
@@ -34,6 +35,7 @@ export const ModalPage = ({
     open,
     keepMounted,
     modalOverlayTestId,
+    disableModalOverlay,
     noFocusToDialog,
     onOpen,
     onOpened,

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -74,6 +74,7 @@ export const ModalPageInternal = ({
   onClose = noop,
   onClosed,
   disableFocusTrap,
+  disableModalOverlay,
   ...restProps
 }: ModalPageInternalProps) => {
   const { hasCustomPanelHeaderAfter } = useConfigProvider();
@@ -121,7 +122,7 @@ export const ModalPageInternal = ({
     isDesktop ? desktopMaxWidth : 's',
   );
 
-  const modalOverlay = (
+  const modalOverlay = !disableModalOverlay && (
     <ModalOverlay
       getRootRef={setBackdropEl}
       data-testid={modalOverlayTestId}
@@ -147,7 +148,12 @@ export const ModalPageInternal = ({
   useScrollLock(!hidden);
 
   return (
-    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>
+    <ModalOutlet
+      hidden={hidden}
+      isDesktop={isDesktop}
+      onKeyDown={handleEscKeyDown}
+      disableModalOverlay={disableModalOverlay}
+    >
       {modalOverlay}
       <FocusTrap
         {...restProps}

package/src/components/ModalPage/types.ts

@@ -131,4 +131,10 @@ export interface ModalPageProps
    * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.
    */
   disableFocusTrap?: UseFocusTrapProps['disabled'];
+  /**
+   * Отключает отображение и взаимодействие с фоном модалки.
+   * > При использовании `ModalPage` внутри `ModalRoot` есть особенность использования этого свойства.
+   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#otklyuchenie-zadnego-fona-u-konkretnogo-modalnogo-okna).
+   */
+  disableModalOverlay?: boolean;
 }

package/src/components/ModalRoot/ModalRoot.tsx

@@ -17,6 +17,7 @@ export const ModalRoot = ({
   children,
   modalOverlayTestId,
   noFocusToDialog,
+  disableModalOverlay,
   usePortal,
   onOpen,
   onOpened,
@@ -31,6 +32,7 @@ export const ModalRoot = ({
       activeModal,
       modalOverlayTestId,
       noFocusToDialog,
+      disableModalOverlay,
 
       // callbacks
       onOpen,
@@ -56,18 +58,29 @@ export const ModalRoot = ({
             }
           : noop,
     }),
-    [activeModal, modalOverlayTestId, noFocusToDialog, onClose, onClosed, onOpen, onOpened],
+    [
+      activeModal,
+      disableModalOverlay,
+      modalOverlayTestId,
+      noFocusToDialog,
+      onClose,
+      onClosed,
+      onOpen,
+      onOpened,
+    ],
   );
   const modalOverlayRef = React.useRef<HTMLDivElement>(null);
   return (
     <AppRootPortal usePortal={usePortal}>
       <ModalRootContext.Provider value={contextValue}>
         <ModalRootOverlayContext.Provider value={modalOverlayRef}>
-          <ModalOverlay
-            position="fixed"
-            visible={typeof activeModal === 'string'}
-            getRootRef={modalOverlayRef}
-          />
+          {!disableModalOverlay && (
+            <ModalOverlay
+              position="fixed"
+              visible={typeof activeModal === 'string'}
+              getRootRef={modalOverlayRef}
+            />
+          )}
           {children}
         </ModalRootOverlayContext.Provider>
       </ModalRootContext.Provider>

package/src/components/ModalRoot/types.ts

@@ -124,6 +124,11 @@ type ModalRootBaseProps = {
    * Будет вызвано при окончательном закрытии активной модалки с её id.
    */
   onClosed?: ModalRootCallbackFunction;
+
+  /**
+   * Отключает отображение и взаимодействие с фоном модалки.
+   */
+  disableModalOverlay?: boolean;
 };
 
 export interface ModalRootProps extends ModalRootBaseProps {

package/src/components/ModalRoot/useModalManager.tsx

@@ -17,6 +17,7 @@ export interface UseModalManager {
   keepMounted: boolean;
   modalOverlayTestId?: string;
   noFocusToDialog?: boolean;
+  disableModalOverlay?: boolean;
   onOpen?: AnyFunction;
   onOpened?: AnyFunction;
   onClose?: AnyFunction;
@@ -27,6 +28,7 @@ export interface UseModalManagerResolvedProps {
   id: string;
   open: boolean;
   noFocusToDialog?: boolean;
+  disableModalOverlay?: boolean;
   modalOverlayTestId?: string;
   ModalOverlay: React.ComponentType<ModalOverlayProps>;
   onOpen?: AnyFunction;
@@ -45,6 +47,7 @@ export const useModalManager = ({
   keepMounted,
   modalOverlayTestId,
   noFocusToDialog,
+  disableModalOverlay,
   onOpen,
   onOpened,
   onClose,
@@ -78,6 +81,7 @@ export const useModalManager = ({
     shouldPreserveSnapPoint,
     noFocusToDialog: noFocusToDialog || context.noFocusToDialog,
     modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
+    disableModalOverlay: disableModalOverlay || context.disableModalOverlay,
     ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,
     onOpen: onOpen || getContextCallback(id, context.onOpen),
     onOpened: onOpened || getContextCallback(id, context.onOpened),

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -39,6 +39,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'children'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'disableShiftMiddleware'
   | 'disableFocusTrap'
 >;
 
@@ -98,6 +99,7 @@ export const OnboardingTooltip = ({
   disableArrow = false,
   onPlacementChange,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
   overlayLabel = 'Закрыть',
   title,
   'aria-label': ariaLabel,
@@ -124,6 +126,7 @@ export const OnboardingTooltip = ({
     arrowHeight,
     arrowPadding,
     disableFlipMiddleware,
+    disableShiftMiddleware,
   });
   const {
     x: floatingDataX,

package/src/components/Popover/Popover.tsx

@@ -63,6 +63,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'children'
   | 'zIndex'
   | 'disableFlipMiddleware'
+  | 'disableShiftMiddleware'
   | 'customMiddlewares'
   | 'strategy'
   | 'disableFocusTrap'

package/src/components/Popover/usePopover.tsx

@@ -43,6 +43,7 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
   placement = 'bottom-start',
   onPlacementChange,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
   trigger = 'click',
   strategy,
   content,
@@ -184,6 +185,7 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
     sameWidth,
     hideWhenReferenceHidden,
     disableFlipMiddleware,
+    disableShiftMiddleware,
     customMiddlewares,
 
     trigger,

package/src/components/Popper/Popper.tsx

@@ -55,6 +55,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'customMiddlewares'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'disableShiftMiddleware'
   | 'flipMiddlewareFallbackAxisSideDirection'
 >;
 
@@ -107,6 +108,7 @@ export const Popper = ({
   arrowPadding = DEFAULT_ARROW_PADDING,
   customMiddlewares,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
   flipMiddlewareFallbackAxisSideDirection,
 
   // UseFloatingProps
@@ -142,6 +144,7 @@ export const Popper = ({
     hideWhenReferenceHidden,
     customMiddlewares,
     disableFlipMiddleware,
+    disableShiftMiddleware,
     flipMiddlewareFallbackAxisSideDirection,
   });
 

package/src/components/Select/Select.tsx

@@ -4,11 +4,8 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import type { HasOnlyExpectedProps } from '../../types';
-import {
-  CustomSelect,
-  type CustomSelectOptionInterface,
-  type SelectProps,
-} from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
+import { type CustomSelectOptionInterface } from '../CustomSelect/types';
 import { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';
 export type SelectType = 'default' | 'plain' | 'accent';
 
@@ -53,6 +50,9 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
     beforeAlign,
     afterAlign,
     onInputKeyDown,
+    accessible,
+    fetchingCompletedLabel,
+    fetchingInProgressLabel,
     ...restProps
   } = props;