@vkontakte/vkui 7.5.4 → 7.6.1

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/RichCell/RichCell.module.css

@@ -32,11 +32,13 @@
   max-inline-size: 100%;
 }
 
-.host.withAfter:not(.alignAfterStart).contentAlignStart .in {
+.host.withAfter:not(.alignAfterStart).contentAlignStart .in,
+.host:not(.withAfter).contentAlignStart .in {
   justify-content: flex-start;
 }
 
-.host.withAfter:not(.alignAfterStart).contentAlignEnd .in {
+.host.withAfter:not(.alignAfterStart).contentAlignEnd .in,
+.host:not(.withAfter).contentAlignEnd .in {
   justify-content: flex-end;
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["./RichCell.module.css"],"names":["host","sizeYCompact","sizeYNone","before","in","withAfter","alignAfterStart","contentAlignStart","contentAlignEnd","content","contentBefore","contentAlignCenter","contentAfter","alignBeforeStart","alignBeforeCenter","alignAfterCenter","alignBeforeEnd","alignAfterEnd","afterChildren","afterCaption","overTitle","extraSubtitle","children","textEllipsis","subtitle","bottom","actions"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAWAC,c,WAXA;AAAA,E,aAgBEC,W,WAhBF;AAAA,E,aAqBAC,Q,WArBA;AAAA,E,aAyBAC,I,WAzBA;AAAA,E,aAkCAJ,M,WAlCA;AAAA,E,aAkCKK,W,WAlCL;AAAA,E,aAkCoBC,iB,WAlCpB;AAAA,E,aAkCqCC,mB,WAlCrC;AAAA,E,aAkCwDH,I,WAlCxD;AAAA,E,aAsCAJ,M,WAtCA;AAAA,E,aAsCKK,W,WAtCL;AAAA,E,aAsCoBC,iB,WAtCpB;AAAA,E,aAsCqCE,iB,WAtCrC;AAAA,E,aAsCsDJ,I,WAtCtD;AAAA,E,aA0CAK,S,WA1CA;AAAA,E,aA+CAC,e,WA/CA;AAAA,E,aAsDAJ,iB,WAtDA;AAAA,E,aAsDgBC,mB,WAtDhB;AAAA,E,aAsDmCG,e,WAtDnC;AAAA,E,aA0DAJ,iB,WA1DA;AAAA,E,aA0DgBK,oB,WA1DhB;AAAA,E,aA0DoCD,e,WA1DpC;AAAA,E,aA8DAJ,iB,WA9DA;AAAA,E,aA8DgBE,iB,WA9DhB;AAAA,E,aA8DiCE,e,WA9DjC;AAAA,E,aAkEAE,c,WAlEA;AAAA,E,aA2EAC,kB,WA3EA;AAAA,E,aA2EkBV,Q,WA3ElB;AAAA,E,aA4EAG,iB,WA5EA;AAAA,E,aA4EiBM,c,WA5EjB;AAAA,E,aAgFAE,mB,WAhFA;AAAA,E,aAgFmBX,Q,WAhFnB;AAAA,E,aAiFAY,kB,WAjFA;AAAA,E,aAiFkBH,c,WAjFlB;AAAA,E,aAqFAI,gB,WArFA;AAAA,E,aAqFgBb,Q,WArFhB;AAAA,E,aAsFAc,e,WAtFA;AAAA,E,aAsFeL,c,WAtFf;AAAA,E,aA0FAM,e,WA1FA;AAAA,E,aA8FAC,c,WA9FA;AAAA,E,aAqGAlB,c,WArGA;AAAA,E,aAqGckB,c,WArGd;AAAA,E,aA2GEjB,W,WA3GF;AAAA,E,aA2GaiB,c,WA3Gb;AAAA,E,aAiHAC,W,WAjHA;AAAA,E,aAqHAC,e,WArHA;AAAA,E,aA0HAC,U,WA1HA;AAAA,E,aA8HAC,c,WA9HA;AAAA,E,aA8HcH,W,WA9Hd;AAAA,E,aA+HAG,c,WA/HA;AAAA,E,aA+HcD,U,WA/Hd;AAAA,E,aAgIAC,c,WAhIA;AAAA,E,aAgIcC,U,WAhId;AAAA,E,aAiIAD,c,WAjIA;AAAA,E,aAiIcF,e,WAjId;AAAA,E,aAwIAI,Q,WAxIA;AAAA,E,aA4IAC,S,WA5IA;AAAA,E,aAgJAJ,U,WAhJA;AAAA,E,aAiJAE,U,WAjJA;AAAA,E,aAkJAN,e,WAlJA;AAAA,E,aAuJAjB,c,WAvJA;AAAA,E,aAuJcqB,U,WAvJd;AAAA,E,aAwJArB,c,WAxJA;AAAA,E,aAwJcuB,U,WAxJd;AAAA,E,aAyJAvB,c,WAzJA;AAAA,E,aAyJciB,e,WAzJd;AAAA,E,aA+JEhB,W,WA/JF;AAAA,E,aA+JaoB,U,WA/Jb;AAAA,E,aAgKIpB,W,WAhKJ;AAAA,E,aAgKesB,U,WAhKf;AAAA,E,aAiKItB,W,WAjKJ;AAAA,E,aAiKegB,e,WAjKf;AAAA,E,aA4K+BlB,M,WA5K/B;AAAA,E,aAiLEE,W,WAjLF;AAAA;AAAA","file":"RichCell.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./RichCell.module.css"],"names":["host","sizeYCompact","sizeYNone","before","in","withAfter","alignAfterStart","contentAlignStart","contentAlignEnd","content","contentBefore","contentAlignCenter","contentAfter","alignBeforeStart","alignBeforeCenter","alignAfterCenter","alignBeforeEnd","alignAfterEnd","afterChildren","afterCaption","overTitle","extraSubtitle","children","textEllipsis","subtitle","bottom","actions"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAWAC,c,WAXA;AAAA,E,aAgBEC,W,WAhBF;AAAA,E,aAqBAC,Q,WArBA;AAAA,E,aAyBAC,I,WAzBA;AAAA,E,aAkCAJ,M,WAlCA;AAAA,E,aAkCKK,W,WAlCL;AAAA,E,aAkCoBC,iB,WAlCpB;AAAA,E,aAkCqCC,mB,WAlCrC;AAAA,E,aAkCwDH,I,WAlCxD;AAAA,E,aAmCAJ,M,WAnCA;AAAA,E,aAmCUK,W,WAnCV;AAAA,E,aAmCqBE,mB,WAnCrB;AAAA,E,aAmCwCH,I,WAnCxC;AAAA,E,aAuCAJ,M,WAvCA;AAAA,E,aAuCKK,W,WAvCL;AAAA,E,aAuCoBC,iB,WAvCpB;AAAA,E,aAuCqCE,iB,WAvCrC;AAAA,E,aAuCsDJ,I,WAvCtD;AAAA,E,aAwCAJ,M,WAxCA;AAAA,E,aAwCUK,W,WAxCV;AAAA,E,aAwCqBG,iB,WAxCrB;AAAA,E,aAwCsCJ,I,WAxCtC;AAAA,E,aA4CAK,S,WA5CA;AAAA,E,aAiDAC,e,WAjDA;AAAA,E,aAwDAJ,iB,WAxDA;AAAA,E,aAwDgBC,mB,WAxDhB;AAAA,E,aAwDmCG,e,WAxDnC;AAAA,E,aA4DAJ,iB,WA5DA;AAAA,E,aA4DgBK,oB,WA5DhB;AAAA,E,aA4DoCD,e,WA5DpC;AAAA,E,aAgEAJ,iB,WAhEA;AAAA,E,aAgEgBE,iB,WAhEhB;AAAA,E,aAgEiCE,e,WAhEjC;AAAA,E,aAoEAE,c,WApEA;AAAA,E,aA6EAC,kB,WA7EA;AAAA,E,aA6EkBV,Q,WA7ElB;AAAA,E,aA8EAG,iB,WA9EA;AAAA,E,aA8EiBM,c,WA9EjB;AAAA,E,aAkFAE,mB,WAlFA;AAAA,E,aAkFmBX,Q,WAlFnB;AAAA,E,aAmFAY,kB,WAnFA;AAAA,E,aAmFkBH,c,WAnFlB;AAAA,E,aAuFAI,gB,WAvFA;AAAA,E,aAuFgBb,Q,WAvFhB;AAAA,E,aAwFAc,e,WAxFA;AAAA,E,aAwFeL,c,WAxFf;AAAA,E,aA4FAM,e,WA5FA;AAAA,E,aAgGAC,c,WAhGA;AAAA,E,aAuGAlB,c,WAvGA;AAAA,E,aAuGckB,c,WAvGd;AAAA,E,aA6GEjB,W,WA7GF;AAAA,E,aA6GaiB,c,WA7Gb;AAAA,E,aAmHAC,W,WAnHA;AAAA,E,aAuHAC,e,WAvHA;AAAA,E,aA4HAC,U,WA5HA;AAAA,E,aAgIAC,c,WAhIA;AAAA,E,aAgIcH,W,WAhId;AAAA,E,aAiIAG,c,WAjIA;AAAA,E,aAiIcD,U,WAjId;AAAA,E,aAkIAC,c,WAlIA;AAAA,E,aAkIcC,U,WAlId;AAAA,E,aAmIAD,c,WAnIA;AAAA,E,aAmIcF,e,WAnId;AAAA,E,aA0IAI,Q,WA1IA;AAAA,E,aA8IAC,S,WA9IA;AAAA,E,aAkJAJ,U,WAlJA;AAAA,E,aAmJAE,U,WAnJA;AAAA,E,aAoJAN,e,WApJA;AAAA,E,aAyJAjB,c,WAzJA;AAAA,E,aAyJcqB,U,WAzJd;AAAA,E,aA0JArB,c,WA1JA;AAAA,E,aA0JcuB,U,WA1Jd;AAAA,E,aA2JAvB,c,WA3JA;AAAA,E,aA2JciB,e,WA3Jd;AAAA,E,aAiKEhB,W,WAjKF;AAAA,E,aAiKaoB,U,WAjKb;AAAA,E,aAkKIpB,W,WAlKJ;AAAA,E,aAkKesB,U,WAlKf;AAAA,E,aAmKItB,W,WAnKJ;AAAA,E,aAmKegB,e,WAnKf;AAAA,E,aA8K+BlB,M,WA9K/B;AAAA,E,aAmLEE,W,WAnLF;AAAA;AAAA","file":"RichCell.module.css.d.ts","sourceRoot":""}

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;
 

package/src/components/SelectionControl/SelectionControl.module.css

@@ -3,9 +3,12 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  font-family: var(--vkui--font_family_base);
+}
+
+.withPadding {
   min-block-size: var(--vkui--size_field_height--regular);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  font-family: var(--vkui--font_family_base);
 }
 
 /**
@@ -22,12 +25,12 @@
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
-.sizeYCompact {
+.withPadding.sizeYCompact {
   min-block-size: var(--vkui--size_field_height--compact);
 }
 
 @media (--sizeY-compact) {
-  .sizeYNone {
+  .withPadding.sizeYNone {
     min-block-size: var(--vkui--size_field_height--compact);
   }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./SelectionControl.module.css"],"names":["host","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAe+BA,M,WAf/B;AAAA,E,aAoBAA,M,WApBA;AAAA,E,aAwBAC,c,WAxBA;AAAA,E,aA6BEC,W,WA7BF;AAAA;AAAA","file":"SelectionControl.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./SelectionControl.module.css"],"names":["host","withPadding","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,a,WARA;AAAA,E,aAkB+BD,M,WAlB/B;AAAA,E,aAuBAA,M,WAvBA;AAAA,E,aA2BAC,a,WA3BA;AAAA,E,aA2BYC,c,WA3BZ;AAAA,E,aAgCED,a,WAhCF;AAAA,E,aAgCcE,W,WAhCd;AAAA;AAAA","file":"SelectionControl.module.css.d.ts","sourceRoot":""}

package/src/components/SelectionControl/SelectionControl.tsx

@@ -7,6 +7,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import type { HasRootRef } from '../../types';
 import { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';
 import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
+import { SelectionControlContext } from './SelectionControlContext';
 import { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';
 import styles from './SelectionControl.module.css';
 
@@ -21,22 +22,43 @@ export interface SelectionControlProps
     Pick<
       TappableOmitProps,
       'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'
-    > {}
+    > {
+  /**
+   * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
+   */
+  noPadding?: boolean;
+}
 
 /**
  * @see https://vkui.io/components/selection-control
  */
-export const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {
+export const SelectionControl = ({
+  noPadding = false,
+  hoverMode: hoverModeProp,
+  activeMode: activeModeProp,
+  ...restProps
+}: SelectionControlProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const platform = usePlatform();
 
+  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');
+  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');
+
   return (
-    <Tappable
-      Component="label"
-      baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}
-      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
-      {...restProps}
-    />
+    <SelectionControlContext.Provider value={{ noPadding }}>
+      <Tappable
+        Component="label"
+        baseClassName={classNames(
+          styles.host,
+          sizeY !== 'regular' && sizeYClassNames[sizeY],
+          !noPadding && styles.withPadding,
+        )}
+        activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
+        hoverMode={hoverMode}
+        activeMode={activeMode}
+        {...restProps}
+      />
+    </SelectionControlContext.Provider>
   );
 };
 

package/src/components/SelectionControl/SelectionControlContext.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const SelectionControlContext = createContext<{ noPadding: boolean }>({
+  noPadding: false,
+});
+
+export const useSelectionControlContext = () => useContext(SelectionControlContext);

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css

@@ -1,12 +1,15 @@
 .host {
   flex-grow: 1;
   min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-  margin-block: var(--vkui--spacing_size_xl);
   margin-inline-start: 12px;
   color: var(--vkui--color_text_primary);
   word-break: break-word;
 }
 
+.withPadding {
+  margin-block: var(--vkui--spacing_size_xl);
+}
+
 .host:first-child {
   margin-inline-start: 0;
 }
@@ -33,12 +36,12 @@
   color: var(--vkui--color_icon_tertiary);
 }
 
-.sizeYCompact {
+.withPadding.sizeYCompact {
   margin-block: var(--vkui--spacing_size_m);
 }
 
 @media (--sizeY-compact) {
-  .sizeYNone {
+  .withPadding.sizeYNone {
     margin-block: var(--vkui--spacing_size_m);
   }
 }

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./SelectionControlLabel.module.css"],"names":["host","description","titleLayout","title","titleAfter","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAA,M,WATA;AAAA,E,aAaAC,a,WAbA;AAAA,E,aAmBAC,a,WAnBA;AAAA,E,aAyBAC,O,WAzBA;AAAA,E,aA6BAC,Y,WA7BA;AAAA,E,aAmCAC,c,WAnCA;AAAA,E,aAwCEC,W,WAxCF;AAAA;AAAA","file":"SelectionControlLabel.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./SelectionControlLabel.module.css"],"names":["host","withPadding","description","titleLayout","title","titleAfter","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,a,WARA;AAAA,E,aAYAD,M,WAZA;AAAA,E,aAgBAE,a,WAhBA;AAAA,E,aAsBAC,a,WAtBA;AAAA,E,aA4BAC,O,WA5BA;AAAA,E,aAgCAC,Y,WAhCA;AAAA,E,aAsCAJ,a,WAtCA;AAAA,E,aAsCYK,c,WAtCZ;AAAA,E,aA2CEL,a,WA3CF;AAAA,E,aA2CcM,W,WA3Cd;AAAA;AAAA","file":"SelectionControlLabel.module.css.d.ts","sourceRoot":""}

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx

@@ -6,6 +6,7 @@ import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import { Footnote } from '../../Typography/Footnote/Footnote';
 import { Text } from '../../Typography/Text/Text';
+import { useSelectionControlContext } from '../SelectionControlContext';
 import styles from './SelectionControlLabel.module.css';
 
 const sizeYClassNames = {
@@ -24,11 +25,16 @@ export function SelectionControlLabel({
   description,
   ...restProps
 }: SelectionControlLabelProps) {
+  const { noPadding } = useSelectionControlContext();
   const { sizeY = 'none' } = useAdaptivity();
 
   return (
     <RootComponent
-      baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}
+      baseClassName={classNames(
+        styles.host,
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+        !noPadding && styles.withPadding,
+      )}
       {...restProps}
     >
       <div className={styles.titleLayout}>

package/src/components/SimpleCell/SimpleCell.tsx

@@ -9,6 +9,7 @@ import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import { Chevron } from './Chevron/Chevron';
 import styles from './SimpleCell.module.css';
 
@@ -125,12 +126,14 @@ export const SimpleCell = ({
         {overTitle && (
           <Subhead Component="span" className={classNames(styles.text, styles.overTitle)}>
             {overTitle}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
           </Subhead>
         )}
         <div className={styles.content}>
           {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}
           <Headline Component="span" className={styles.children} weight="3">
             {children}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
           </Headline>
           {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}
         </div>
@@ -139,6 +142,7 @@ export const SimpleCell = ({
             {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}
             <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>
               {subtitle}
+              <VisuallyHidden>&nbsp;</VisuallyHidden>
             </Footnote>
             {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}
           </div>
@@ -146,6 +150,7 @@ export const SimpleCell = ({
         {extraSubtitle && (
           <Footnote className={classNames(styles.text, styles.extraSubtitle)}>
             {extraSubtitle}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
           </Footnote>
         )}
       </div>

package/src/components/Skeleton/Skeleton.tsx

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { millisecondsInSecond } from 'date-fns/constants';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useStateWithPrev } from '../../hooks/useStateWithPrev';
+import { millisecondsInSecond } from '../../lib/date';
 import { useDOM } from '../../lib/dom';
 import { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';
 import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';

package/src/components/Slider/SliderThumb/SliderThumb.module.css

@@ -37,6 +37,6 @@
   overflow: hidden;
   white-space: nowrap;
   border: 0 none;
-  clip: rect(0, 0, 0, 0);
+  clip-path: rect(0 0 0 0);
   direction: ltr;
 }

package/src/components/Tabs/Tabs.tsx

@@ -8,9 +8,9 @@ import { useTabsNavigation } from '../../hooks/useTabsNavigation';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { useTabsController } from './TabsController';
+import { TabsControllerContext } from './TabsControllerContext';
 import { TabsModeContext } from './TabsModeContext';
 import styles from './Tabs.module.css';
-
 export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Режим отображения компонента.
@@ -76,6 +76,17 @@ export const Tabs = ({
 
   const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');
 
+  const tabsModeContext = React.useMemo(
+    () => ({
+      mode,
+      withGaps,
+      layoutFillMode,
+      withScrollToSelectedTab,
+      scrollBehaviorToSelectedTab,
+    }),
+    [mode, withGaps, layoutFillMode, withScrollToSelectedTab, scrollBehaviorToSelectedTab],
+  );
+
   return (
     <RootComponent
       {...restProps}
@@ -89,17 +100,10 @@ export const Tabs = ({
       role={role}
     >
       <div className={styles.in} ref={tabsRef}>
-        <TabsModeContext.Provider
-          value={{
-            mode,
-            withGaps,
-            layoutFillMode,
-            withScrollToSelectedTab,
-            scrollBehaviorToSelectedTab,
-            controller,
-          }}
-        >
-          {children}
+        <TabsModeContext.Provider value={tabsModeContext}>
+          <TabsControllerContext.Provider value={controller}>
+            {children}
+          </TabsControllerContext.Provider>
         </TabsModeContext.Provider>
       </div>
     </RootComponent>

package/src/components/Tabs/TabsController.ts

@@ -3,7 +3,7 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import { type TabsProps } from './Tabs';
 
 /* eslint-disable jsdoc/require-jsdoc */
-export type TabsController = {
+export type TabsControllerProps = {
   onChange: (id: string) => void;
   selectedTab: string;
 };
@@ -16,7 +16,7 @@ export const useTabsController = ({
 }: Pick<
   TabsProps,
   'selectedId' | 'defaultSelectedId' | 'onSelectedIdChange'
->): TabsController | null => {
+>): TabsControllerProps | null => {
   const onSelectedIdChange = useStableCallback(
     (id: string | undefined) => id && onSelectedIdChangeProp?.(id),
   );

package/src/components/Tabs/TabsControllerContext.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type TabsControllerProps } from './TabsController';
+
+export type TabsControllerContextProps = TabsControllerProps | null;
+
+export const TabsControllerContext: React.Context<TabsControllerContextProps> =
+  React.createContext<TabsControllerContextProps>(null);

package/src/components/Tabs/TabsModeContext.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type TabsProps } from './Tabs';
-import { type TabsController } from './TabsController';
 
 /* eslint-disable jsdoc/require-jsdoc */
 export interface TabsContextProps {
@@ -9,7 +8,6 @@ export interface TabsContextProps {
   layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;
   withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
   scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
-  controller: TabsController | null;
 }
 /* eslint-enable jsdoc/require-jsdoc */
 
@@ -20,5 +18,4 @@ export const TabsModeContext: React.Context<TabsContextProps> =
     layoutFillMode: 'auto',
     withScrollToSelectedTab: false,
     scrollBehaviorToSelectedTab: 'nearest',
-    controller: null,
   });

package/src/components/TabsItem/TabsItem.tsx

@@ -8,7 +8,8 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { useDOM } from '../../lib/dom';
 import { warnOnce } from '../../lib/warnOnce';
 import type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
-import { type TabsContextProps, TabsModeContext } from '../Tabs/TabsModeContext';
+import { TabsControllerContext } from '../Tabs/TabsControllerContext';
+import { TabsModeContext } from '../Tabs/TabsModeContext';
 import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
@@ -99,14 +100,9 @@ export const TabsItem = ({
   ...restProps
 }: TabsItemProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
-  const {
-    mode,
-    withGaps,
-    layoutFillMode,
-    scrollBehaviorToSelectedTab,
-    withScrollToSelectedTab,
-    controller,
-  }: TabsContextProps = React.useContext(TabsModeContext);
+  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =
+    React.useContext(TabsModeContext);
+  const controller = React.useContext(TabsControllerContext);
   let statusComponent = null;
 
   const isTabFlow = role === 'tab';

package/src/components/Tooltip/Tooltip.tsx

@@ -24,6 +24,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'usePortal'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'disableShiftMiddleware'
   | 'strategy'
 >;
 

package/src/components/Tooltip/useTooltip.tsx

@@ -43,6 +43,7 @@ export const useTooltip = ({
   offsetByCrossAxis = 0,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
   disableTriggerOnFocus = false,
   onReferenceHiddenChange,
 
@@ -151,6 +152,7 @@ export const useTooltip = ({
     offsetByCrossAxis,
     hideWhenReferenceHidden,
     disableFlipMiddleware,
+    disableShiftMiddleware,
 
     defaultShown,
     shown: shownProp,

package/src/components/Typography/Caption/Caption.tsx

@@ -2,6 +2,7 @@
 
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { type SizeTypeValues } from '../../../lib/adaptivity';
 import { type HasCaps, Typography, type TypographyProps } from '../Typography';
 import styles from './Caption.module.css';
 
@@ -16,6 +17,18 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
+export function captionClassNames(
+  sizeY: 'none' | SizeTypeValues,
+  level: '1' | '2' | '3' | undefined = '1',
+  caps = false,
+) {
+  return classNames(
+    sizeY !== 'regular' && sizeYClassNames[sizeY],
+    caps && styles.caps,
+    stylesLevel[level],
+  );
+}
+
 export interface CaptionProps extends TypographyProps, HasCaps {
   /**
    * Уровень заголовка (от 1 до 3).
@@ -44,12 +57,7 @@ export const Caption = ({
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(
-        className,
-        sizeY !== 'regular' && sizeYClassNames[sizeY],
-        caps && styles.caps,
-        stylesLevel[level],
-      )}
+      className={classNames(className, captionClassNames(sizeY, level, caps))}
       {...restProps}
     />
   );

package/src/components/Typography/Footnote/Footnote.tsx

@@ -2,6 +2,7 @@
 
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { type SizeTypeValues } from '../../../lib/adaptivity';
 import { type HasCaps, Typography, type TypographyProps } from '../Typography';
 import styles from './Footnote.module.css';
 
@@ -10,6 +11,14 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
+export function footnoteClassNames(sizeY: 'none' | SizeTypeValues, caps = false) {
+  return classNames(
+    styles.host,
+    sizeY !== 'regular' && sizeYClassNames[sizeY],
+    caps && styles.caps,
+  );
+}
+
 export interface FootnoteProps extends TypographyProps, HasCaps {}
 
 /**
@@ -32,12 +41,7 @@ export const Footnote = ({
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(
-        className,
-        sizeY !== 'regular' && sizeYClassNames[sizeY],
-        styles.host,
-        caps && styles.caps,
-      )}
+      className={classNames(className, footnoteClassNames(sizeY, caps))}
       {...restProps}
     />
   );

package/src/components/Typography/Typography.tsx

@@ -10,6 +10,14 @@ const stylesWeight = {
   '3': styles.weight3,
 };
 
+export function weightClassNames(weight: '1' | '2' | '3' | undefined, useAccentWeight = false) {
+  if (!weight) {
+    return '';
+  }
+
+  return classNames(stylesWeight[weight], useAccentWeight && styles.accent);
+}
+
 export interface HasCaps {
   /**
    * Отображение текста в верхнем регистре.
@@ -55,8 +63,7 @@ export const Typography = ({
       styles.host,
       normalize && styles.normalize,
       inline && styles.inline,
-      weight && stylesWeight[weight],
-      weight && useAccentWeight && styles.accent,
+      weightClassNames(weight, useAccentWeight),
     )}
     {...restProps}
   />

package/src/components/View/View.module.css

@@ -4,7 +4,7 @@
   position: relative;
   inline-size: 100%;
   block-size: 100%;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 @media (--reduce-motion) {

package/src/components/View/View.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
+import { millisecondsInSecond } from '../../lib/date';
 import { blurActiveElement, useDOM } from '../../lib/dom';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
@@ -275,7 +276,7 @@ export const View = ({
   const handleTouchEndForIOSSwipeBackSimulation = (event: CustomTouchEvent) => {
     swipeBackPrevented.current = false;
     if (swipingBack) {
-      const speed = (swipeBackShift / event.duration) * 1000;
+      const speed = (swipeBackShift / event.duration) * millisecondsInSecond;
       if (swipeBackShift === 0) {
         onSwipeBackCancel();
       } else if (swipeBackShift >= (window!.innerWidth ?? 0)) {

package/src/components/View/ViewInfinite.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { withContext } from '../../hoc/withContext';
 import { withPlatform } from '../../hoc/withPlatform';
+import { millisecondsInSecond } from '../../lib/date';
 import { canUseDOM, type DOMProps, withDOM } from '../../lib/dom';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
@@ -501,7 +502,7 @@ class ViewInfiniteComponent extends React.Component<
     this.swipeBackPrevented = false;
 
     if (this.state.swipingBack && this.window) {
-      const speed = (this.state.swipeBackShift / event.duration) * 1000;
+      const speed = (this.state.swipeBackShift / event.duration) * millisecondsInSecond;
       if (this.state.swipeBackShift === 0) {
         this.onSwipeBackCancel();
       } else if (this.state.swipeBackShift >= this.window.innerWidth) {

package/src/components/VisuallyHidden/VisuallyHidden.module.css

@@ -10,7 +10,6 @@
   user-select: none;
   border: 0 !important;
   opacity: 0;
-  clip: rect(0, 0, 0, 0) !important;
   clip-path: inset(50%);
 }
 
@@ -22,7 +21,6 @@
   inline-size: 100% !important;
   block-size: 100% !important;
   pointer-events: none;
-  clip: auto !important;
   clip-path: none !important;
 }
 /* stylelint-enable declaration-no-important */

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

@@ -1 +1 @@
-{"version":3,"sources":["./VisuallyHidden.module.css"],"names":["host","focusableInput"],"mappings":"AAAA;AAAA,E,aACAA,M,WADA;AAAA,E,aAkBAC,gB,WAlBA;AAAA;AAAA","file":"VisuallyHidden.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./VisuallyHidden.module.css"],"names":["host","focusableInput"],"mappings":"AAAA;AAAA,E,aACAA,M,WADA;AAAA,E,aAiBAC,gB,WAjBA;AAAA;AAAA","file":"VisuallyHidden.module.css.d.ts","sourceRoot":""}