@vkontakte/vkui 7.4.2 → 7.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.4.2",
+  "version": "7.4.4",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/ImageBase/ImageBase.tsx

@@ -286,7 +286,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
         baseStyle={{ width, height }}
         baseClassName={classNames(
           styles.host,
-          loaded && styles.loaded,
+          hasSrc && loaded && styles.loaded,
           withTransparentBackground && styles.transparentBackground,
         )}
         getRootRef={wrapperRef}

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -15,6 +15,7 @@ import {
   useFloatingMiddlewaresBootstrap,
   usePlacementChangeCallback,
 } from '../../lib/floating';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
 import type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
@@ -22,7 +23,6 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 import { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';
-import { useOnboardingTooltipContext } from './OnboardingTooltipContext';
 import styles from './OnboardingTooltip.module.css';
 
 const warn = warnOnce('OnboardingTooltip');
@@ -109,7 +109,6 @@ export const OnboardingTooltip = ({
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
   const { entering } = useNavTransition();
-  const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();
 
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
   const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);
@@ -196,23 +195,18 @@ export const OnboardingTooltip = ({
     );
   }
 
-  React.useEffect(
+  useIsomorphicLayoutEffect(
     function initialize() {
       const referenceEl = childRef.current;
-      if (!referenceEl) {
-        return;
-      }
-      const tooltipContainer =
-        tooltipContainerRef.current ||
-        // eslint-disable-next-line no-restricted-properties
-        referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`);
-      if (tooltipContainer) {
-        setTooltipContainer(tooltipContainer);
+      if (referenceEl) {
+        setTooltipContainer(
+          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties
+        );
         setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');
         refs.setReference(referenceEl);
       }
     },
-    [childRef, refs, tooltipContainerRef],
+    [childRef],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx

@@ -1,10 +1,6 @@
-'use client';
-
 import * as React from 'react';
-import { useExternRef } from '../../hooks/useExternRef';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HasComponent, HasDataAttribute } from '../../types';
-import { OnboardingTooltipContext } from './OnboardingTooltipContext';
 
 export const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';
 
@@ -22,16 +18,11 @@ export const OnboardingTooltipContainer: React.ForwardRefExoticComponent<
   // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
 > = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(
   ({ fixed = false, Component = 'div', ...props }, ref) => {
-    const containerRef = useExternRef(ref);
     const dataProps = {
       [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',
     };
 
-    return (
-      <OnboardingTooltipContext.Provider value={{ containerRef }}>
-        <Component {...dataProps} {...props} ref={containerRef} />
-      </OnboardingTooltipContext.Provider>
-    );
+    return <Component {...dataProps} {...props} ref={ref} />;
   },
 );
 

package/src/components/SimpleCell/SimpleCell.module.css

@@ -123,6 +123,7 @@
   flex-shrink: 0;
   align-items: center;
   align-self: stretch;
+  padding-inline-start: var(--vkui--spacing_size_xl);
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
 }
 
@@ -138,10 +139,13 @@
 }
 
 .chevronIcon {
-  padding-inline-start: var(--vkui--spacing_size_xl);
   color: var(--vkui--color_icon_tertiary);
 }
 
+.chevronIcon:not(:first-child) {
+  padding-inline-start: var(--vkui--spacing_size_xl);
+}
+
 /**
  * sizeY === 'compact'
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["./SimpleCell.module.css"],"names":["host","mult","children","disabled","before","beforeIos","middle","overTitle","text","subtitle","extraSubtitle","content","badge","indicator","after","chevronIcon","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAYAC,M,WAZA;AAAA,E,aAgBAA,M,WAhBA;AAAA,E,aAgBMC,U,WAhBN;AAAA,E,aAoBAC,U,WApBA;AAAA,E,aAwBAC,Q,WAxBA;AAAA,E,aAkCAA,Q,WAlCA;AAAA,E,aAwCAC,W,WAxCA;AAAA,E,aA4CAD,Q,WA5CA;AAAA,E,aAgDAE,Q,WAhDA;AAAA,E,aA4DAA,Q,WA5DA;AAAA,E,aAgEAC,W,WAhEA;AAAA,E,aAoEAC,M,WApEA;AAAA,E,aAyEAC,U,WAzEA;AAAA,E,aA0EAC,e,WA1EA;AAAA,E,aA8EAV,M,WA9EA;AAAA,E,aA8EMW,S,WA9EN;AAAA,E,aAsFAT,U,WAtFA;AAAA,E,aA6FAD,M,WA7FA;AAAA,E,aA6FMC,U,WA7FN;AAAA,E,aA8FAD,M,WA9FA;AAAA,E,aA8FMQ,U,WA9FN;AAAA,E,aAkGAG,O,WAlGA;AAAA,E,aA0GAD,S,WA1GA;AAAA,E,aA8GAE,W,WA9GA;AAAA,E,aAwHAC,O,WAxHA;AAAA,E,aAiIAA,O,WAjIA;AAAA,E,aAuIAA,O,WAvIA;AAAA,E,aA2IAC,a,WA3IA;AAAA,E,aAoJAC,c,WApJA;AAAA,E,aAwJAA,c,WAxJA;AAAA,E,aAwJcZ,Q,WAxJd;AAAA,E,aA6JEa,W,WA7JF;AAAA,E,aAiKEA,W,WAjKF;AAAA,E,aAiKab,Q,WAjKb;AAAA,E,aA2KiCJ,M,WA3KjC;AAAA;AAAA","file":"SimpleCell.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./SimpleCell.module.css"],"names":["host","mult","children","disabled","before","beforeIos","middle","overTitle","text","subtitle","extraSubtitle","content","badge","indicator","after","chevronIcon","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAYAC,M,WAZA;AAAA,E,aAgBAA,M,WAhBA;AAAA,E,aAgBMC,U,WAhBN;AAAA,E,aAoBAC,U,WApBA;AAAA,E,aAwBAC,Q,WAxBA;AAAA,E,aAkCAA,Q,WAlCA;AAAA,E,aAwCAC,W,WAxCA;AAAA,E,aA4CAD,Q,WA5CA;AAAA,E,aAgDAE,Q,WAhDA;AAAA,E,aA4DAA,Q,WA5DA;AAAA,E,aAgEAC,W,WAhEA;AAAA,E,aAoEAC,M,WApEA;AAAA,E,aAyEAC,U,WAzEA;AAAA,E,aA0EAC,e,WA1EA;AAAA,E,aA8EAV,M,WA9EA;AAAA,E,aA8EMW,S,WA9EN;AAAA,E,aAsFAT,U,WAtFA;AAAA,E,aA6FAD,M,WA7FA;AAAA,E,aA6FMC,U,WA7FN;AAAA,E,aA8FAD,M,WA9FA;AAAA,E,aA8FMQ,U,WA9FN;AAAA,E,aAkGAG,O,WAlGA;AAAA,E,aA0GAD,S,WA1GA;AAAA,E,aA8GAE,W,WA9GA;AAAA,E,aAwHAC,O,WAxHA;AAAA,E,aAkIAA,O,WAlIA;AAAA,E,aAwIAA,O,WAxIA;AAAA,E,aA4IAC,a,WA5IA;AAAA,E,aAgJAA,a,WAhJA;AAAA,E,aAwJAC,c,WAxJA;AAAA,E,aA4JAA,c,WA5JA;AAAA,E,aA4JcZ,Q,WA5Jd;AAAA,E,aAiKEa,W,WAjKF;AAAA,E,aAqKEA,W,WArKF;AAAA,E,aAqKab,Q,WArKb;AAAA,E,aA+KiCJ,M,WA/KjC;AAAA;AAAA","file":"SimpleCell.module.css.d.ts","sourceRoot":""}

package/src/components/Switch/Switch.module.css

@@ -261,12 +261,3 @@
     --vkui_internal--Switch__handleRipple_opacity_duration: 105ms;
   }
 }
-
-/**
- * CMP:
- * SimpleCell
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalSimpleCell__after) > .host {
-  margin-inline-start: 12px;
-}

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

@@ -1 +1 @@
-{"version":3,"sources":["./Switch.module.css"],"names":["host","rtl","disabled","default","sizeYCompact","sizeYNone","ios","inputFake","inputNative","track","handle","handleWithRipple"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAsBAC,K,WAtBA;AAAA,E,aA0BAC,U,WA1BA;AAAA,E,aA+BAC,S,WA/BA;AAAA,E,aAsDAA,S,WAtDA;AAAA,E,aAsDQC,c,WAtDR;AAAA,E,aAoEED,S,WApEF;AAAA,E,aAoEUE,W,WApEV;AAAA,E,aAkFAC,K,WAlFA;AAAA,E,aA4GAA,K,WA5GA;AAAA,E,aA4GIF,c,WA5GJ;AAAA,E,aA0HEE,K,WA1HF;AAAA,E,aA0HMD,W,WA1HN;AAAA,E,aAwIAE,W,WAxIA;AAAA,E,aA4IAC,a,WA5IA;AAAA,E,aA4IuBD,W,WA5IvB;AAAA,E,aAyJAJ,S,WAzJA;AAAA,E,aAyJaD,U,WAzJb;AAAA,E,aAyJwBK,W,WAzJxB;AAAA,E,aA+JAE,O,WA/JA;AAAA,E,aAyKAN,S,WAzKA;AAAA,E,aAyKSM,O,WAzKT;AAAA,E,aAoLAC,Q,WApLA;AAAA,E,aAiMAA,Q,WAjMA;AAAA,E,aA+MAC,kB,WA/MA;AAAA,E,aAwOEA,kB,WAxOF;AAAA,E,aAgPEJ,W,WAhPF;AAAA,E,aAgPmBI,kB,WAhPnB;AAAA,E,aAqPAJ,W,WArPA;AAAA,E,aAqPkBI,kB,WArPlB;AAAA,E,aAyPAH,a,WAzPA;AAAA,E,aAyPuBD,W,WAzPvB;AAAA,E,aAyPkCI,kB,WAzPlC;AAAA,E,aA+PEA,kB,WA/PF;AAAA,E,aAmQEJ,W,WAnQF;AAAA,E,aAmQoBI,kB,WAnQpB;AAAA,E,aA6Q0CX,M,WA7Q1C;AAAA;AAAA","file":"Switch.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./Switch.module.css"],"names":["host","rtl","disabled","default","sizeYCompact","sizeYNone","ios","inputFake","inputNative","track","handle","handleWithRipple"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAsBAC,K,WAtBA;AAAA,E,aA0BAC,U,WA1BA;AAAA,E,aA+BAC,S,WA/BA;AAAA,E,aAsDAA,S,WAtDA;AAAA,E,aAsDQC,c,WAtDR;AAAA,E,aAoEED,S,WApEF;AAAA,E,aAoEUE,W,WApEV;AAAA,E,aAkFAC,K,WAlFA;AAAA,E,aA4GAA,K,WA5GA;AAAA,E,aA4GIF,c,WA5GJ;AAAA,E,aA0HEE,K,WA1HF;AAAA,E,aA0HMD,W,WA1HN;AAAA,E,aAwIAE,W,WAxIA;AAAA,E,aA4IAC,a,WA5IA;AAAA,E,aA4IuBD,W,WA5IvB;AAAA,E,aAyJAJ,S,WAzJA;AAAA,E,aAyJaD,U,WAzJb;AAAA,E,aAyJwBK,W,WAzJxB;AAAA,E,aA+JAE,O,WA/JA;AAAA,E,aAyKAN,S,WAzKA;AAAA,E,aAyKSM,O,WAzKT;AAAA,E,aAoLAC,Q,WApLA;AAAA,E,aAiMAA,Q,WAjMA;AAAA,E,aA+MAC,kB,WA/MA;AAAA,E,aAwOEA,kB,WAxOF;AAAA,E,aAgPEJ,W,WAhPF;AAAA,E,aAgPmBI,kB,WAhPnB;AAAA,E,aAqPAJ,W,WArPA;AAAA,E,aAqPkBI,kB,WArPlB;AAAA,E,aAyPAH,a,WAzPA;AAAA,E,aAyPuBD,W,WAzPvB;AAAA,E,aAyPkCI,kB,WAzPlC;AAAA,E,aA+PEA,kB,WA/PF;AAAA,E,aAmQEJ,W,WAnQF;AAAA,E,aAmQoBI,kB,WAnQpB;AAAA;AAAA","file":"Switch.module.css.d.ts","sourceRoot":""}

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface OnboardingTooltipContextValue {
-    containerRef: React.RefObject<HTMLElement | null>;
-}
-export declare const OnboardingTooltipContext: React.Context<OnboardingTooltipContextValue>;
-export declare const useOnboardingTooltipContext: () => OnboardingTooltipContextValue;
-//# sourceMappingURL=OnboardingTooltipContext.d.ts.map

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OnboardingTooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,wBAAwB,8CAEnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,qCAAmD,CAAC"}

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.js

@@ -1,9 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
-export const OnboardingTooltipContext = /*#__PURE__*/ React.createContext({
-    containerRef: {
-        current: null
-    }
-});
-export const useOnboardingTooltipContext = ()=>React.useContext(OnboardingTooltipContext);
-
-//# sourceMappingURL=OnboardingTooltipContext.js.map

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface OnboardingTooltipContextValue {\n  containerRef: React.RefObject<HTMLElement | null>;\n}\n\nexport const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({\n  containerRef: { current: null },\n});\n\nexport const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);\n"],"names":["React","OnboardingTooltipContext","createContext","containerRef","current","useOnboardingTooltipContext","useContext"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,yCAA2BD,MAAME,aAAa,CAAgC;IACzFC,cAAc;QAAEC,SAAS;IAAK;AAChC,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAML,MAAMM,UAAU,CAACL,0BAA0B"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContext.js

@@ -1,9 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
-export const OnboardingTooltipContext = /*#__PURE__*/ React.createContext({
-    containerRef: {
-        current: null
-    }
-});
-export const useOnboardingTooltipContext = ()=>React.useContext(OnboardingTooltipContext);
-
-//# sourceMappingURL=OnboardingTooltipContext.js.map

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContext.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface OnboardingTooltipContextValue {\n  containerRef: React.RefObject<HTMLElement | null>;\n}\n\nexport const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({\n  containerRef: { current: null },\n});\n\nexport const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);\n"],"names":["React","OnboardingTooltipContext","createContext","containerRef","current","useOnboardingTooltipContext","useContext"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,yCAA2BD,MAAME,aAAa,CAAgC;IACzFC,cAAc;QAAEC,SAAS;IAAK;AAChC,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAML,MAAMM,UAAU,CAACL,0BAA0B"}

package/src/components/OnboardingTooltip/OnboardingTooltipContext.tsx

@@ -1,13 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */
-
-import * as React from 'react';
-
-export interface OnboardingTooltipContextValue {
-  containerRef: React.RefObject<HTMLElement | null>;
-}
-
-export const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({
-  containerRef: { current: null },
-});
-
-export const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);