@vkontakte/vkui 7.11.2 → 7.11.3

package/package.json

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

package/src/components/CalendarHeader/CalendarHeader.module.css

@@ -24,6 +24,10 @@
   padding: 3px;
 }
 
+.navIcon.navIcon {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
 .navIconAccent {
   color: var(--vkui--color_icon_accent);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./CalendarHeader.module.css"],"names":["host","pickers","picker","navIcon","navIconAccent","navIconNext","navIconPrev","month"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,S,WARA;AAAA,E,aAcAC,Q,WAdA;AAAA,E,aAcUA,Q,WAdV;AAAA,E,aAkBAC,S,WAlBA;AAAA,E,aA0BAC,e,WA1BA;AAAA,E,aA8BAC,a,WA9BA;AAAA,E,aAkCAC,a,WAlCA;AAAA,E,aAsCAC,O,WAtCA;AAAA;AAAA","file":"CalendarHeader.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CalendarHeader.module.css"],"names":["host","pickers","picker","navIcon","navIconAccent","navIconNext","navIconPrev","month"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,S,WARA;AAAA,E,aAcAC,Q,WAdA;AAAA,E,aAcUA,Q,WAdV;AAAA,E,aAkBAC,S,WAlBA;AAAA,E,aA0BAA,S,WA1BA;AAAA,E,aA0BQA,S,WA1BR;AAAA,E,aA8BAC,e,WA9BA;AAAA,E,aAkCAC,a,WAlCA;AAAA,E,aAsCAC,a,WAtCA;AAAA,E,aA0CAC,O,WA1CA;AAAA;AAAA","file":"CalendarHeader.module.css.d.ts","sourceRoot":""}

package/src/components/ContentCard/ContentCard.tsx

@@ -102,6 +102,10 @@ export const ContentCard = ({
       >
         {(src || srcSet) && (
           <img
+            // safari и firefox нужно чтобы атрибут `loading` был до `src`
+            //
+            // https://mihaly4.ru/image-loading-lazy-bug
+            loading={loading}
             ref={getRef}
             className={styles.img}
             src={src}
@@ -109,7 +113,6 @@ export const ContentCard = ({
             alt={alt}
             crossOrigin={crossOrigin}
             decoding={decoding}
-            loading={loading}
             referrerPolicy={referrerPolicy}
             sizes={sizes}
             useMap={useMap}

package/src/components/ImageBase/ImageBase.tsx

@@ -257,6 +257,10 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(
     hasSrc
       ? {
+          // safari и firefox нужно чтобы атрибут `loading` был до `src`
+          //
+          // https://mihaly4.ru/image-loading-lazy-bug
+          loading,
           getRootRef: getRef,
           alt,
           className: classNames(
@@ -269,7 +273,6 @@ export const ImageBase: React.FC<ImageBaseProps> & {
           ),
           crossOrigin,
           decoding,
-          loading,
           referrerPolicy,
           style: mergeStyle(
             keepAspectRatio

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -16,6 +16,18 @@ const platformClassNames = {
   vkcom: styles.vkcom,
 };
 
+const defaultHoverMode = {
+  ios: 'background',
+  android: 'background',
+  vkcom: styles.hover,
+};
+
+const defaultActiveMode = {
+  ios: 'opacity',
+  android: 'background',
+  vkcom: styles.active,
+};
+
 export interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'> {
   /**
    * Флаг для обозначения первичной кнопки
@@ -59,29 +71,15 @@ export const PanelHeaderButton = ({
   children,
   primary = false,
   label,
+  activeEffectDelay = 200,
+  hoverMode,
+  activeMode,
   ...restProps
 }: PanelHeaderButtonProps): React.ReactNode => {
   const isPrimitive = isPrimitiveReactNode(children);
   const isPrimitiveLabel = isPrimitiveReactNode(label);
   const platform = usePlatform();
 
-  let hoverMode;
-  let activeMode;
-
-  switch (platform) {
-    case 'ios':
-      hoverMode = 'background';
-      activeMode = 'opacity';
-      break;
-    case 'vkcom':
-      hoverMode = styles.hover;
-      activeMode = styles.active;
-      break;
-    default:
-      hoverMode = 'background';
-      activeMode = 'background';
-  }
-
   if (process.env.NODE_ENV === 'development') {
     /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */
     const isAccessible = hasAccessibleName({
@@ -100,9 +98,9 @@ export const PanelHeaderButton = ({
   return (
     <Tappable
       Component={restProps.href ? 'a' : 'button'}
-      hoverMode={hoverMode}
-      activeEffectDelay={200}
-      activeMode={activeMode}
+      activeEffectDelay={activeEffectDelay}
+      hoverMode={hoverMode ? hoverMode : defaultHoverMode[platform]}
+      activeMode={activeMode ? activeMode : defaultActiveMode[platform]}
       {...restProps}
       baseClassName={classNames(
         styles.host,

package/src/components/Tooltip/useTooltip.tsx

@@ -9,7 +9,7 @@ import {
   type UseFloatingElementProps,
 } from '../../hooks/useFloatingElement';
 import { animationFadeClassNames } from '../../lib/animation';
-import { getArrowCoordsByMiddlewareData, sizeMiddleware } from '../../lib/floating';
+import { getArrowCoordsByMiddlewareData } from '../../lib/floating';
 import { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { TooltipBase } from '../TooltipBase/TooltipBase';
@@ -171,18 +171,6 @@ export const useTooltip = ({
     renderFloatingComponent,
     externalFloatingElementRef: getRootRef,
     remapReferenceProps,
-
-    customMiddlewares: [
-      sizeMiddleware({
-        apply({ rects, elements, availableWidth }) {
-          const width = Math.min(Math.ceil(rects.floating.width), Math.floor(availableWidth));
-          Object.assign(elements.floating.style, {
-            width: `${width}px`,
-          });
-        },
-        padding: overflowPadding,
-      }),
-    ],
   });
 
   return {

package/src/hooks/useAdaptivityWithJSMediaQueries.ts

@@ -13,6 +13,7 @@ import {
   tryToCheckIsDesktop,
 } from '../lib/adaptivity';
 import { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';
+import { warnOnce } from '../lib/warnOnce';
 import { useMediaQueries } from './useMediaQueries';
 import { usePlatform } from './usePlatform';
 
@@ -33,14 +34,18 @@ export interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivity
  * > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки
  * > страницы либо пользователем, либо программно.
  */
+const warn = warnOnce('useAdaptivityWithJSMediaQueries');
+
 export const useAdaptivityWithJSMediaQueries = (): UseAdaptivityWithJSMediaQueries => {
   if (!canUseDOM) {
-    // eslint-disable-next-line no-console
-    console.error(`[useAdaptivityWithJSMediaQueries] Похоже, вы пытаетесь использовать хук вне браузера.
+    warn(
+      `Похоже, вы пытаетесь использовать хук вне браузера.
 
 Постарайтесь этого избегать, чтобы не было ошибок при гидратации: при SSR нет информации о размерах экрана.
 
-Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`);
+Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`,
+      'error',
+    );
   }
 
   const {