@vkontakte/vkui 8.1.3 → 8.2.0

package/src/components/ContentBadge/ContentBadge.module.css

@@ -14,7 +14,14 @@
    */
   min-inline-size: 0;
   block-size: auto;
+  color: var(--vkui_internal_ContentBadge--color);
   isolation: isolate;
+
+  --vkui_internal_ContentBadge--backgroundOpacity: 1;
+}
+
+.iconSlot {
+  color: var(--vkui_internal_ContentBadge--iconColor, inherit);
 }
 
 .sizeS {
@@ -60,74 +67,19 @@
 }
 
 /* mode="primary" */
-.primaryAccent {
-  color: var(--vkui--color_text_contrast);
-  background-color: var(--vkui--color_background_accent);
-}
-
-.primaryNeutral {
-  color: var(--vkui--color_text_contrast);
-  background-color: var(--vkui--color_icon_secondary);
-}
-
-.primaryAccentGreen {
-  color: var(--vkui--color_text_contrast);
-  background-color: var(--vkui--color_accent_green);
-}
-
-.primaryAccentRed {
-  color: var(--vkui--color_text_contrast);
-  background-color: var(--vkui--color_accent_red);
-}
-
-.primaryOverlay {
-  color: var(--vkui--color_text_contrast);
-  background-color: var(--vkui--color_overlay_primary);
-}
-
-.primaryAccent .iconSlot,
-.primaryAccentGreen .iconSlot,
-.primaryAccentRed .iconSlot,
-.primaryOverlay .iconSlot {
-  color: var(--vkui--color_icon_contrast);
+.modePrimary {
+  background-color: var(--vkui_internal_ContentBadge--background);
 }
 
 /* mode="secondary" */
-.secondaryAccent {
-  color: var(--vkui--color_text_accent);
-  background-color: var(--vkui--color_background_secondary_alpha);
-}
-
-.secondaryAccent .iconSlot {
-  color: var(--vkui--color_icon_accent);
-}
-
-.secondaryNeutral {
-  color: var(--vkui--color_text_primary);
-  background-color: var(--vkui--color_background_secondary_alpha);
-}
-
-.secondaryNeutral .iconSlot {
-  color: var(--vkui--color_icon_primary);
-}
-
-.secondaryAccentGreen {
-  color: var(--vkui--color_accent_green);
-  background-color: var(--vkui--color_background_positive_tint);
-}
-
-.secondaryAccentRed {
-  color: var(--vkui--color_accent_red);
-  background-color: var(--vkui--color_background_negative_tint);
-}
-
-.secondaryOverlay {
-  color: var(--vkui--color_text_contrast);
-  background-color: var(--vkui--color_overlay_secondary);
-}
-
-.secondaryOverlay .iconSlot {
-  color: var(--vkui--color_icon_contrast);
+.modeSecondary::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: '';
+  background-color: var(--vkui_internal_ContentBadge--background);
+  border-radius: inherit;
+  opacity: var(--vkui_internal_ContentBadge--backgroundOpacity, 1);
 }
 
 /* mode="outline" */
@@ -136,60 +88,101 @@
   inset: 0;
   z-index: -1;
   content: '';
-  border-style: solid;
-  border-width: 1px;
+  background-color: var(--vkui_internal_ContentBadge--background);
+  border: 1px solid var(--vkui_internal_ContentBadge--borderColor);
   border-radius: inherit;
 }
 
+.outlineOverlay::before {
+  border-width: 0;
+}
+
+/* appearance="accent" */
+.primaryAccent {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_background_accent);
+}
+
+.secondaryAccent {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_accent);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_accent);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_background_secondary_alpha);
+}
+
 .outlineAccent {
-  color: var(--vkui--color_text_accent);
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_accent);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_accent);
+  --vkui_internal_ContentBadge--borderColor: var(--vkui--color_stroke_accent);
 }
 
-.outlineAccent .iconSlot {
-  color: var(--vkui--color_icon_accent);
+/* appearance="neutral" */
+.primaryNeutral {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_icon_secondary);
 }
 
-.outlineAccent::before {
-  border-color: var(--vkui--color_stroke_accent);
+.secondaryNeutral {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_primary);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_primary);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_background_secondary_alpha);
 }
 
 .outlineNeutral {
-  color: var(--vkui--color_text_secondary);
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_secondary);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_secondary);
+  --vkui_internal_ContentBadge--borderColor: var(--vkui--color_icon_secondary);
 }
 
-.outlineNeutral .iconSlot {
-  color: var(--vkui--color_icon_secondary);
+/* appearance="accent-green" */
+.primaryAccentGreen {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_accent_green);
 }
 
-.outlineNeutral::before {
-  border-color: var(--vkui--color_icon_secondary);
+.secondaryAccentGreen {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_accent_green);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_background_positive_tint);
 }
 
 .outlineAccentGreen {
-  color: var(--vkui--color_accent_green);
+  --vkui_internal_ContentBadge--color: var(--vkui--color_accent_green);
+  --vkui_internal_ContentBadge--borderColor: var(--vkui--color_accent_green);
 }
 
-.outlineAccentGreen::before {
-  border-color: currentColor;
+/* appearance="accent-red" */
+.primaryAccentRed {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_accent_red);
 }
 
-.outlineAccentRed {
-  color: var(--vkui--color_accent_red);
+.secondaryAccentRed {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_accent_red);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_background_negative_tint);
 }
 
-.outlineAccentRed::before {
-  border-color: currentColor;
+.outlineAccentRed {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_accent_red);
+  --vkui_internal_ContentBadge--borderColor: var(--vkui--color_accent_red);
 }
 
-.outlineOverlay {
-  color: var(--vkui--color_text_contrast);
+/* appearance="overlay" */
+.primaryOverlay {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_overlay_primary);
 }
 
-.outlineOverlay .iconSlot {
-  color: var(--vkui--color_icon_contrast);
+.secondaryOverlay {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_overlay_secondary);
 }
 
-.outlineOverlay::before {
-  background-color: var(--vkui--color_overlay_primary);
-  border-width: 0;
+.outlineOverlay {
+  --vkui_internal_ContentBadge--color: var(--vkui--color_text_contrast);
+  --vkui_internal_ContentBadge--iconColor: var(--vkui--color_icon_contrast);
+  --vkui_internal_ContentBadge--background: var(--vkui--color_overlay_primary);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./ContentBadge.module.css"],"names":["host","sizeS","sizeM","singleIconSlotSizeM","sizeL","iconSlotSizeL","singleIconSlotSizeL","capsule","primaryAccent","primaryNeutral","primaryAccentGreen","primaryAccentRed","primaryOverlay","iconSlot","secondaryAccent","secondaryNeutral","secondaryAccentGreen","secondaryAccentRed","secondaryOverlay","modeOutline","outlineAccent","outlineNeutral","outlineAccentGreen","outlineAccentRed","outlineOverlay"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAmBAC,O,WAnBA;AAAA,E,aA0BAC,O,WA1BA;AAAA,E,aAkCAC,qB,WAlCA;AAAA,E,aAuCAC,O,WAvCA;AAAA,E,aA+CAC,e,WA/CA;AAAA,E,aAoDAC,qB,WApDA;AAAA,E,aAyDAC,S,WAzDA;AAAA,E,aA8DAC,e,WA9DA;AAAA,E,aAmEAC,gB,WAnEA;AAAA,E,aAwEAC,oB,WAxEA;AAAA,E,aA6EAC,kB,WA7EA;AAAA,E,aAkFAC,gB,WAlFA;AAAA,E,aAuFAJ,e,WAvFA;AAAA,E,aAuFeK,U,WAvFf;AAAA,E,aAwFAH,oB,WAxFA;AAAA,E,aAwFoBG,U,WAxFpB;AAAA,E,aAyFAF,kB,WAzFA;AAAA,E,aAyFkBE,U,WAzFlB;AAAA,E,aA0FAD,gB,WA1FA;AAAA,E,aA0FgBC,U,WA1FhB;AAAA,E,aA+FAC,iB,WA/FA;AAAA,E,aAoGAA,iB,WApGA;AAAA,E,aAoGiBD,U,WApGjB;AAAA,E,aAwGAE,kB,WAxGA;AAAA,E,aA6GAA,kB,WA7GA;AAAA,E,aA6GkBF,U,WA7GlB;AAAA,E,aAiHAG,sB,WAjHA;AAAA,E,aAsHAC,oB,WAtHA;AAAA,E,aA2HAC,kB,WA3HA;AAAA,E,aAgIAA,kB,WAhIA;AAAA,E,aAgIkBL,U,WAhIlB;AAAA,E,aAqIAM,a,WArIA;AAAA,E,aA+IAC,e,WA/IA;AAAA,E,aAmJAA,e,WAnJA;AAAA,E,aAmJeP,U,WAnJf;AAAA,E,aAuJAO,e,WAvJA;AAAA,E,aA2JAC,gB,WA3JA;AAAA,E,aA+JAA,gB,WA/JA;AAAA,E,aA+JgBR,U,WA/JhB;AAAA,E,aAmKAQ,gB,WAnKA;AAAA,E,aAuKAC,oB,WAvKA;AAAA,E,aA2KAA,oB,WA3KA;AAAA,E,aA+KAC,kB,WA/KA;AAAA,E,aAmLAA,kB,WAnLA;AAAA,E,aAuLAC,gB,WAvLA;AAAA,E,aA2LAA,gB,WA3LA;AAAA,E,aA2LgBX,U,WA3LhB;AAAA,E,aA+LAW,gB,WA/LA;AAAA;AAAA","file":"ContentBadge.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ContentBadge.module.css"],"names":["host","iconSlot","sizeS","sizeM","singleIconSlotSizeM","sizeL","iconSlotSizeL","singleIconSlotSizeL","capsule","modePrimary","modeSecondary","modeOutline","outlineOverlay","primaryAccent","secondaryAccent","outlineAccent","primaryNeutral","secondaryNeutral","outlineNeutral","primaryAccentGreen","secondaryAccentGreen","outlineAccentGreen","primaryAccentRed","secondaryAccentRed","outlineAccentRed","primaryOverlay","secondaryOverlay"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAsBAC,U,WAtBA;AAAA,E,aA0BAC,O,WA1BA;AAAA,E,aAiCAC,O,WAjCA;AAAA,E,aAyCAC,qB,WAzCA;AAAA,E,aA8CAC,O,WA9CA;AAAA,E,aAsDAC,e,WAtDA;AAAA,E,aA2DAC,qB,WA3DA;AAAA,E,aAgEAC,S,WAhEA;AAAA,E,aAqEAC,a,WArEA;AAAA,E,aA0EAC,e,WA1EA;AAAA,E,aAqFAC,a,WArFA;AAAA,E,aA+FAC,gB,WA/FA;AAAA,E,aAoGAC,e,WApGA;AAAA,E,aA0GAC,iB,WA1GA;AAAA,E,aAgHAC,e,WAhHA;AAAA,E,aAuHAC,gB,WAvHA;AAAA,E,aA4HAC,kB,WA5HA;AAAA,E,aAkIAC,gB,WAlIA;AAAA,E,aAyIAC,oB,WAzIA;AAAA,E,aA+IAC,sB,WA/IA;AAAA,E,aAoJAC,oB,WApJA;AAAA,E,aA0JAC,kB,WA1JA;AAAA,E,aAgKAC,oB,WAhKA;AAAA,E,aAqKAC,kB,WArKA;AAAA,E,aA2KAC,gB,WA3KA;AAAA,E,aAiLAC,kB,WAjLA;AAAA,E,aAuLAd,gB,WAvLA;AAAA;AAAA","file":"ContentBadge.module.css.d.ts","sourceRoot":""}

package/src/components/ContentBadge/ContentBadge.tsx

@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { getRequiredValueByKey } from '../../helpers/getValueByKey';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { Tappable } from '../Tappable/Tappable';
 import { captionClassNames } from '../Typography/Caption/Caption';
 import { footnoteClassNames } from '../Typography/Footnote/Footnote';
@@ -14,7 +15,27 @@ import { ContentBadgeIconSlot } from './ContentBadgeIconSlot';
 import type { ContentBadgeModeType, ContentBadgeSizeType } from './types';
 import styles from './ContentBadge.module.css';
 
-const appearanceClassNames = {
+type ContentBadgePresetAppearance =
+  | 'accent'
+  | 'neutral'
+  | 'accent-green'
+  | 'accent-red'
+  | 'overlay';
+
+type ContentBadgeCustomAppearance = `var(--${string})` | `#${string}`;
+
+export type ContentBadgeAppearance = ContentBadgePresetAppearance | ContentBadgeCustomAppearance;
+
+const modeClassNames: Record<ContentBadgeModeType, string> = {
+  primary: styles.modePrimary,
+  secondary: styles.modeSecondary,
+  outline: styles.modeOutline,
+};
+
+const appearanceClassNames: Record<
+  ContentBadgePresetAppearance,
+  Record<ContentBadgeModeType, string>
+> = {
   'accent': {
     primary: styles.primaryAccent,
     secondary: styles.secondaryAccent,
@@ -48,6 +69,41 @@ const sizeClassNames = {
   l: styles.sizeL,
 };
 
+const isPresetAppearance = (
+  appearance: ContentBadgeAppearance,
+): appearance is ContentBadgePresetAppearance => appearance in appearanceClassNames;
+
+const resolveAppearance = (
+  appearance: ContentBadgeAppearance,
+  mode: ContentBadgeModeType,
+): [CSSCustomProperties | undefined, string | undefined] => {
+  if (isPresetAppearance(appearance)) {
+    return [undefined, appearanceClassNames[appearance][mode]];
+  }
+
+  return [
+    getRequiredValueByKey<CSSCustomProperties>(mode, {
+      primary: {
+        '--vkui_internal_ContentBadge--background': appearance,
+        '--vkui_internal_ContentBadge--color': 'var(--vkui--color_text_contrast)',
+        '--vkui_internal_ContentBadge--iconColor': 'var(--vkui--color_icon_contrast)',
+      },
+      secondary: {
+        '--vkui_internal_ContentBadge--color': appearance,
+        '--vkui_internal_ContentBadge--iconColor': appearance,
+        '--vkui_internal_ContentBadge--background': appearance,
+        '--vkui_internal_ContentBadge--backgroundOpacity': '0.16',
+      },
+      outline: {
+        '--vkui_internal_ContentBadge--color': appearance,
+        '--vkui_internal_ContentBadge--iconColor': appearance,
+        '--vkui_internal_ContentBadge--borderColor': appearance,
+      },
+    }),
+    undefined,
+  ];
+};
+
 export interface ContentBadgeProps
   extends HTMLAttributesWithRootRef<HTMLDivElement>,
     Pick<TypographyProps, 'weight'> {
@@ -57,8 +113,17 @@ export interface ContentBadgeProps
   mode?: ContentBadgeModeType | undefined;
   /**
    * Цвет оформления.
+   *
+   * Помимо предустановленных значений принимает кастомный цвет в формате
+   * CSS-переменной (`var(--my-token)`) или HEX (`#RRGGBB`).
+   *
+   * Применение кастомного цвета по режимам:
+   *
+   * - `mode="primary"` — фон = кастомный цвет, текст/иконка = `--vkui--color_text_contrast` / `--vkui--color_icon_contrast`;
+   * - `mode="secondary"` — фон = кастомный цвет с прозрачностью 16% (отдельным слоем), текст и иконка = кастомный цвет;
+   * - `mode="outline"` — бордер, текст и иконка = кастомный цвет.
    */
-  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay' | undefined;
+  appearance?: ContentBadgeAppearance | undefined;
   /**
    * Включает приближение значения закругления к форме круга.
    *
@@ -105,17 +170,20 @@ export const ContentBadge: React.FC<ContentBadgeProps> & {
   const typographyClassNames =
     size === 'l' ? footnoteClassNames(density) : captionClassNames(density);
 
+  const [appearanceStyles, appearanceClassName] = resolveAppearance(appearance, mode);
+
   return (
     <Tappable
       baseClassName={classNames(
         styles.host,
         size !== 's' && capsule && styles.capsule,
-        mode === 'outline' && styles.modeOutline,
-        appearanceClassNames[appearance][mode],
+        modeClassNames[mode],
+        appearanceClassName,
         sizeClassNames[size],
         typographyClassNames,
         weightClassNames(weight),
       )}
+      baseStyle={appearanceStyles}
       DefaultComponent="span"
       hoverMode="opacity"
       activeMode="opacity"

package/src/components/CustomSelect/CustomSelect.tsx

@@ -7,7 +7,6 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMergeProps } from '../../hooks/useMergeProps';
 import { callMultiple } from '../../lib/callMultiple';
-import { useDOM } from '../../lib/dom';
 import type { Placement } from '../../lib/floating';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -100,11 +99,19 @@ const FetchingStatus = ({
     function updateStatus() {
       if (fetching) {
         setStatus('fetching');
+        return;
       } else {
-        if (status === 'fetching') {
-          setStatus('loaded');
-          setTimeout(() => setStatus('none'), FETCH_STATUS_RESET_DELAY);
-        }
+        let timeoutId: ReturnType<typeof setTimeout>;
+        setStatus((prevStatus) => {
+          if (prevStatus === 'fetching') {
+            timeoutId = setTimeout(() => setStatus('none'), FETCH_STATUS_RESET_DELAY);
+            return 'loaded';
+          }
+          return prevStatus;
+        });
+        return () => {
+          clearTimeout(timeoutId);
+        };
       }
     },
     [fetching],
@@ -507,6 +514,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
       selectElRef.current?.dispatchEvent(event);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nativeSelectValue]);
 
   const openedClassNames = React.useMemo(
@@ -671,7 +679,6 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     icon: iconProp,
   });
 
-  const { document } = useDOM();
   const passClickAndFocusToInputOnClick = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       // Раньше внешней оберткой CustomSelect был <label>, что позволяло по клику в любую область CustomSelect,
@@ -683,7 +690,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       // Воспроизводится в некоторых версиях Chrome, при навигации по странице с помощью стрелок.
       // Договорились со специалистом по доступности убрать <label>-обёртки из Select и CustomSelect
 
-      if (!selectInputRef.current || !document) {
+      if (!selectInputRef.current) {
         return;
       }
 
@@ -691,13 +698,14 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       if (clickTargetIsNotAnInput) {
         selectInputRef.current.click();
 
-        const inputIsNotFocused = document.activeElement !== selectInputRef.current;
+        const inputIsNotFocused =
+          selectInputRef.current.ownerDocument.activeElement !== selectInputRef.current;
         if (inputIsNotFocused) {
           selectInputRef.current.focus();
         }
       }
     },
-    [document, selectInputRef],
+    [selectInputRef],
   );
 
   const preventInputBlurWhenClickInsideFocusedSelectArea = (
@@ -706,7 +714,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
     // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
     // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
-    const isInputFocused = document && document.activeElement === selectInputRef.current;
+    const isInputFocused =
+      selectInputRef.current?.ownerDocument.activeElement === selectInputRef.current;
     if (isInputFocused) {
       e.preventDefault();
     }

package/src/components/DateInput/DateInput.tsx

@@ -7,6 +7,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
+import { useLocale } from '../../hooks/useLocale';
 import {
   convertDateToTimeZone,
   createDateInTimeZone,
@@ -22,7 +23,6 @@ import { cacheDateTimeFormat } from '../../lib/intlCache';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../types';
 import { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
@@ -388,7 +388,7 @@ export const DateInput = ({
         setInternalValue(getLastUpdatedValue());
       }
     },
-    [open, getLastUpdatedValue],
+    [open, getLastUpdatedValue, setInternalValue],
   );
 
   const onCalendarChange = React.useCallback(
@@ -427,7 +427,7 @@ export const DateInput = ({
   const [calendarPlacement, setCalendarPlacement] =
     React.useState<PlacementWithAuto>(calendarPlacementProp);
 
-  const { locale } = useConfigProvider();
+  const locale = useLocale();
   const currentDateLabel = value
     ? labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(value)
     : null;

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -8,6 +8,7 @@ import { useDateInput } from '../../hooks/useDateInput';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
+import { useLocale } from '../../hooks/useLocale';
 import { dateFormatter, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import { cacheDateTimeFormat } from '../../lib/intlCache';
@@ -18,7 +19,6 @@ import {
   type CalendarRangeTestsProps,
   type DateRangeType,
 } from '../CalendarRange/CalendarRange';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
@@ -390,7 +390,7 @@ export const DateRangeInput = ({
   const [calendarPlacement, setCalendarPlacement] =
     React.useState<PlacementWithAuto>(calendarPlacementProp);
 
-  const { locale } = useConfigProvider();
+  const locale = useLocale();
   const currentDateLabel = React.useMemo(() => {
     if (!value) {
       return null;

package/src/components/Epic/ScrollSaver.tsx

@@ -22,6 +22,7 @@ export const ScrollSaver = ({
       scrollTo(0, initialScroll);
     }
     return () => saveScroll(getScroll().y);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return <React.Fragment>{children}</React.Fragment>;
 };

package/src/components/FixedLayout/ParentWidthWrapper.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
+import { setRef } from '../../lib/utils';
+import type { HasComponent } from '../../types';
+
+type ParentWidthWrapperProps = React.HTMLAttributes<HTMLElement> & HasComponent;
+
+export const ParentWidthWrapper: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<ParentWidthWrapperProps> & React.RefAttributes<HTMLElement>
+  // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
+> = React.forwardRef<HTMLElement, ParentWidthWrapperProps>(
+  ({ Component = 'div', style, ...restProps }, forwardedRef) => {
+    const rootRef = React.useRef<HTMLElement | null>(null);
+    const parentRef = React.useRef<HTMLElement | null>(null);
+    const [width, setWidth] = React.useState<string | undefined>(undefined);
+
+    const handleRootRef = React.useCallback(
+      (node: HTMLElement | null) => {
+        setRef(node, forwardedRef);
+        setRef(node, rootRef);
+        setRef(node?.parentElement ?? null, parentRef);
+      },
+      [forwardedRef],
+    );
+
+    const doResize = React.useCallback(() => {
+      if (!parentRef.current) {
+        setWidth(undefined);
+        return;
+      }
+
+      const parentWidth = parentRef.current.getBoundingClientRect().width;
+      setWidth(parentWidth ? `${parentWidth}px` : undefined);
+    }, []);
+
+    React.useEffect(doResize, [doResize]);
+    useResizeObserver(parentRef, doResize);
+
+    return <Component {...restProps} ref={handleRootRef} style={{ width, ...style }} />;
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(ParentWidthWrapper, 'ParentWidthWrapper');
+}

package/src/components/Flex/Flex.tsx

@@ -7,7 +7,7 @@ import {
   resolveLayoutProps,
   rowGapClassNames,
 } from '../../lib/layouts';
-import type { LayoutProps } from '../../lib/layouts/types';
+import type { LayoutProps, MarginProp } from '../../lib/layouts/types';
 import type { CSSCustomProperties } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
@@ -46,7 +46,7 @@ type FlexContentProps =
   | 'space-between'
   | 'space-evenly';
 
-export interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps {
+export interface FlexProps extends RootComponentProps<HTMLElement>, Omit<LayoutProps, 'margin'> {
   /**
    * Направление осей, эквивалентно `flex-direction`.
    */
@@ -70,9 +70,12 @@ export interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps
    */
   justify?: FlexContentProps | undefined;
   /**
-   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.
+   * Внешние отступы контейнера.
+   * Дополнительно поддерживаются специальные значения:
+   * `none` — отключает дополнительные отступы;
+   * `auto` — включает платформенные отступы вокруг контейнера.
    */
-  margin?: 'none' | 'auto' | undefined;
+  margin?: 'none' | 'auto' | MarginProp | undefined;
   /**
    * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
    */
@@ -104,7 +107,9 @@ export const Flex: React.FC<FlexProps> & {
   ...restProps
 }: FlexProps) => {
   const [rowGap, columnGap] = calculateGap(gap);
-  const resolvedProps = resolveLayoutProps(restProps);
+  const resolvedProps = resolveLayoutProps(
+    margin === 'none' || margin === 'auto' ? restProps : { ...restProps, margin },
+  );
 
   return (
     <RootComponent
@@ -113,7 +118,7 @@ export const Flex: React.FC<FlexProps> & {
         !noWrap && styles.wrap,
         reverse && styles.reverse,
         direction !== 'row' && styles.directionColumn,
-        margin !== 'none' && styles.marginAuto,
+        margin === 'auto' && styles.marginAuto,
         align && alignClassNames[align],
         justify && justifyClassNames[justify],
         getGapsPresets(rowGap, columnGap),

package/src/components/GridAvatar/GridAvatar.module.css

@@ -31,6 +31,6 @@
 /* если есть минимум три элемента — выбираем второй с конца */
 .item:nth-last-child(n + 3) ~ .item:nth-last-child(2),
 /* четвертый с конца */
-  .item:nth-last-child(4) {
+.item:nth-last-child(4) {
   margin-block-end: var(--vkui_internal--grid_avatar_image_offset);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./GridAvatar.module.css"],"names":["host","in","item"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,I,WAJA;AAAA,E,aAaAC,M,WAbA;AAAA,E,aAqBAA,M,WArBA;AAAA,E,aAyBAA,M,WAzBA;AAAA,E,aA0BAA,M,WA1BA;AAAA,E,aA+BAA,M,WA/BA;AAAA,E,aA+B8BA,M,WA/B9B;AAAA,E,aAiCEA,M,WAjCF;AAAA;AAAA","file":"GridAvatar.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./GridAvatar.module.css"],"names":["host","in","item"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,I,WAJA;AAAA,E,aAaAC,M,WAbA;AAAA,E,aAqBAA,M,WArBA;AAAA,E,aAyBAA,M,WAzBA;AAAA,E,aA0BAA,M,WA1BA;AAAA,E,aA+BAA,M,WA/BA;AAAA,E,aA+B8BA,M,WA/B9B;AAAA,E,aAiCAA,M,WAjCA;AAAA;AAAA","file":"GridAvatar.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

@@ -126,7 +126,7 @@ export const ImageBaseFloatElement = ({
       }
       return;
     },
-    [visibility],
+    [visibility, onMouseOverHandlers, onMouseOutHandlers],
   );
 
   const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =

package/src/components/NativeSelect/NativeSelect.tsx

@@ -189,7 +189,9 @@ export const NativeSelect = ({
     }
     onChange?.(e, newValue);
   };
-  useIsomorphicLayoutEffect(checkSelectedOption, [children]);
+  useIsomorphicLayoutEffect(checkSelectedOption, [children, placeholder, selectRef]);
+  // eslint-disable-next-line react-hooks/refs
+  const onSelectChange = callMultiple(_onChange, checkSelectedOption);
 
   return (
     <FormField
@@ -223,7 +225,7 @@ export const NativeSelect = ({
             ? remapFromSelectValueToNativeValue(defaultValue)
             : defaultValue
         }
-        onChange={callMultiple(_onChange, checkSelectedOption)}
+        onChange={onSelectChange}
         getRootRef={selectRef}
         {...selectRest}
       >