@vkontakte/vkui 7.11.2 → 7.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.11.2",
+  "version": "7.11.4",
   "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/Flex/Flex.tsx

@@ -145,14 +145,14 @@ export const Flex: React.FC<FlexProps> & {
   );
 };
 
-function getGapsPresets(rowGap?: GapProp, columnGap?: GapProp) {
+function getGapsPresets(rowGap: GapProp, columnGap: GapProp) {
   return classNames(
     typeof rowGap === 'string' && rowGapClassNames[rowGap],
     typeof columnGap === 'string' && columnGapClassNames[columnGap],
   );
 }
 
-function getGapsByUser(rowGap?: GapProp, columnGap?: GapProp) {
+function getGapsByUser(rowGap: GapProp, columnGap: GapProp) {
   const style: CSSCustomProperties = {};
 
   if (typeof rowGap === 'number') {

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

@@ -22,16 +22,17 @@
 .hostMobile {
   --vkui_internal_ModalCard--translateY: 100%;
   --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
+  --vkui_internal_ModalCard--insetBlockEnd: calc(
+    var(--vkui--spacing_size_m) +
+    var(--vkui_internal_ModalCard--safeAreaInsetBottom)
+  );
 
   position: absolute;
   /*
    * Используем inset вместо padding, чтобы срабатывала логика с закрытие с Click Outside.
    * Для этого также нужны `inline-size: auto` и `margin-inline: auto`.
    */
-  inset-block-end: calc(
-    var(--vkui--spacing_size_m) +
-    var(--vkui_internal_ModalCard--safeAreaInsetBottom)
-  );
+  inset-block-end: var(--vkui_internal_ModalCard--insetBlockEnd);
   inset-inline: var(--vkui--spacing_size_m);
   box-sizing: border-box;
   inline-size: auto;
@@ -40,7 +41,7 @@
 }
 
 .hostMobile.hostStateEnter {
-  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--safeAreaInsetBottom)), 0);
+  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--insetBlockEnd)), 0);
   transition: none;
 }
 
@@ -49,12 +50,12 @@
 }
 
 .hostMobile.hostStateExiting {
-  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--safeAreaInsetBottom)), 0);
+  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--insetBlockEnd)), 0);
   transition: transform 0.2s ease;
 }
 
 .hostMobile.hostStateExited {
-  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--safeAreaInsetBottom)), 0);
+  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--insetBlockEnd)), 0);
   transition: none;
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAQAC,e,WARA;AAAA,E,aAYAC,e,WAZA;AAAA,E,aAgBAC,e,WAhBA;AAAA,E,aAqBAC,Y,WArBA;AAAA,E,aAyCAA,Y,WAzCA;AAAA,E,aAyCWC,gB,WAzCX;AAAA,E,aA8CAD,Y,WA9CA;AAAA,E,aA8CWE,mB,WA9CX;AAAA,E,aAkDAF,Y,WAlDA;AAAA,E,aAkDWG,kB,WAlDX;AAAA,E,aAuDAH,Y,WAvDA;AAAA,E,aAuDWI,iB,WAvDX;AAAA,E,aA6DAC,a,WA7DA;AAAA,E,aAqEAA,a,WArEA;AAAA,E,aAqEYJ,gB,WArEZ;AAAA,E,aA0EAI,a,WA1EA;AAAA,E,aA0EYH,mB,WA1EZ;AAAA,E,aA8EAG,a,WA9EA;AAAA,E,aA8EYF,kB,WA9EZ;AAAA,E,aAkFAE,a,WAlFA;AAAA,E,aAkFYD,iB,WAlFZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAQAC,e,WARA;AAAA,E,aAYAC,e,WAZA;AAAA,E,aAgBAC,e,WAhBA;AAAA,E,aAqBAC,Y,WArBA;AAAA,E,aA0CAA,Y,WA1CA;AAAA,E,aA0CWC,gB,WA1CX;AAAA,E,aA+CAD,Y,WA/CA;AAAA,E,aA+CWE,mB,WA/CX;AAAA,E,aAmDAF,Y,WAnDA;AAAA,E,aAmDWG,kB,WAnDX;AAAA,E,aAwDAH,Y,WAxDA;AAAA,E,aAwDWI,iB,WAxDX;AAAA,E,aA8DAC,a,WA9DA;AAAA,E,aAsEAA,a,WAtEA;AAAA,E,aAsEYJ,gB,WAtEZ;AAAA,E,aA2EAI,a,WA3EA;AAAA,E,aA2EYH,mB,WA3EZ;AAAA,E,aA+EAG,a,WA/EA;AAAA,E,aA+EYF,kB,WA/EZ;AAAA,E,aAmFAE,a,WAnFA;AAAA,E,aAmFYD,iB,WAnFZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}

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/SimpleGrid/SimpleGrid.tsx

@@ -71,7 +71,7 @@ export interface SimpleGridProps
  */
 export const SimpleGrid = ({
   columns = 1,
-  gap,
+  gap = 0,
   margin = 'none',
   minColWidth,
   align = 'stretch',

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/components/Touch/Touch.tsx

@@ -465,6 +465,11 @@ export const Touch = ({
       // handlePointerDown(onTouchStart устанавливается отдельно через initializeNativeTouchEventStartWithPassiveFalse)
       onMouseDownCapture={useCapture ? handlePointerDown : undefined}
       onMouseDown={!useCapture ? handlePointerDown : undefined}
+      onPointerDown={(event: PointerEvent) => {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+          event.preventDefault();
+        }
+      }}
     />
   );
 };

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 {

package/src/lib/layouts/gaps.ts

@@ -33,12 +33,7 @@ export type GapsProp = GapProp | [GapProp, GapProp];
 /**
  * Возвращает массив отступов [rowGap, columnGap]
  */
-export function calculateGap(
-  gap: GapsProp | undefined,
-): [GapProp, GapProp] | [undefined, undefined] {
-  if (gap === undefined) {
-    return [undefined, undefined];
-  }
+export function calculateGap(gap: GapsProp): [GapProp, GapProp] {
   if (typeof gap === 'number' || typeof gap === 'string') {
     return [gap, gap];
   }