@vkontakte/vkui 7.5.1 → 7.5.3

package/package.json

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

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -5,6 +5,8 @@ import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { easeInOutSine } from '../../lib/fx';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
@@ -216,6 +218,11 @@ export const HorizontalScroll = ({
 }: HorizontalScrollProps): React.ReactNode => {
   const [canScrollStart, setCanScrollStart] = React.useState(false);
   const [canScrollEnd, setCanScrollEnd] = React.useState(false);
+  const { focusVisible, ...focusEvents } = useFocusVisible();
+  const focusVisibleClassNames = useFocusVisibleClassName({
+    focusVisible,
+  });
+
   const direction = useConfigDirection();
   const isRtl = direction === 'rtl';
 
@@ -346,7 +353,12 @@ export const HorizontalScroll = ({
           onClick={scrollToEnd}
         />
       )}
-      <div className={styles.in} ref={scrollerRef}>
+      <div
+        className={classNames(styles.in, focusVisibleClassNames)}
+        ref={scrollerRef}
+        tabIndex={0}
+        {...focusEvents}
+      >
         <ContentWrapperComponent
           className={classNames(styles.inWrapper, contentWrapperClassName)}
           ref={contentWrapperRef}

package/src/components/ImageBase/ImageBase.module.css

@@ -45,6 +45,13 @@
   display: block;
   inline-size: 100%;
   block-size: 100%;
+  /* Скрывает текст из атрибута alt. */
+  color: transparent;
+  /*
+  Скрывает альтернативную иконку, которая появляется когда нет атрибута alt.
+  Работает только в Chromium. В остальных ситуациях сработает `.imgHiddenAlt`, который добавляется на `onError`.
+  */
+  text-indent: 10000px;
   border: 0;
   border-radius: inherit;
 }
@@ -88,8 +95,8 @@
   );
 }
 
-.host:not(.loaded) .img {
-  visibility: hidden;
+.imgHiddenAlt {
+  opacity: 0;
 }
 
 .fallback {

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

@@ -1 +1 @@
-{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aAmDAC,c,WAnDA;AAAA,E,aAwDAC,qB,WAxDA;AAAA,E,aA4DAC,mB,WA5DA;AAAA,E,aAgEAC,kB,WAhEA;AAAA,E,aAoEAC,uB,WApEA;AAAA,E,aAwEAC,oB,WAxEA;AAAA,E,aAiFAC,Y,WAjFA;AAAA,E,aA0FAZ,M,WA1FA;AAAA,E,aA0FUC,Q,WA1FV;AAAA,E,aA0FmBI,K,WA1FnB;AAAA,E,aA8FAQ,U,WA9FA;AAAA,E,aA2G4Cb,M,WA3G5C;AAAA,E,aAgH2CA,M,WAhH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","imgHiddenAlt","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aA0DAC,c,WA1DA;AAAA,E,aA+DAC,qB,WA/DA;AAAA,E,aAmEAC,mB,WAnEA;AAAA,E,aAuEAC,kB,WAvEA;AAAA,E,aA2EAC,uB,WA3EA;AAAA,E,aA+EAC,oB,WA/EA;AAAA,E,aAwFAC,Y,WAxFA;AAAA,E,aAiGAC,c,WAjGA;AAAA,E,aAqGAC,U,WArGA;AAAA,E,aAkH4Cd,M,WAlH5C;AAAA,E,aAuH2CA,M,WAvH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBase.tsx

@@ -202,13 +202,11 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   const mouseOutHandlersRef = useRef<VoidFunction[]>([]);
 
   const hasSrc = src || srcSet;
-  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);
-
-  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
+  const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;
 
   if (process.env.NODE_ENV === 'development') {
     validateSize(size);
-    if (fallbackIcon) {
+    if (React.isValidElement(fallbackIcon)) {
       validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });
     }
   }
@@ -304,6 +302,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
               objectPosition && styles.withObjectPosition,
               filter && styles.withFilter,
               keepAspectRatio && styles.imgKeepRatio,
+              failed && styles.imgHiddenAlt,
             )}
             crossOrigin={crossOrigin}
             decoding={decoding}

package/src/components/ModalPage/ModalPage.module.css

@@ -30,29 +30,24 @@
 
 /* Desktop */
 .hostDesktop {
-  --vkui_internal_ModalPage--desktopSafeInsetBlock: calc(var(--vkui--spacing_size_2xl) * 2);
+  --vkui_internal_ModalPage--desktopStretchedSize: calc(100% - var(--vkui--spacing_size_2xl) * 2);
   --vkui_internal_ModalPage--desktopMaxWidth: 100%;
   --vkui_internal_ModalPage--desktopMaxHeight: 640px;
   --vkui_internal_ModalPage--userHeight: auto;
 
   position: relative;
   box-sizing: content-box;
-  max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
-  max-block-size: var(--vkui_internal_ModalPage--desktopMaxHeight);
-  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
-  padding-inline: var(--vkui--spacing_size_xl);
+  max-inline-size: min(
+    var(--vkui_internal_ModalPage--desktopMaxWidth),
+    var(--vkui_internal_ModalPage--desktopStretchedSize)
+  );
+  max-block-size: min(
+    var(--vkui_internal_ModalPage--desktopMaxHeight),
+    var(--vkui_internal_ModalPage--desktopStretchedSize)
+  );
   margin-block: auto;
 }
 
-/* Неизвестный брейкпоинт */
-@media (max-height: 672px) {
-  .hostDesktop {
-    --vkui_internal_ModalPage--desktopMaxHeight: calc(
-      100% - var(--vkui_internal_ModalPage--desktopSafeInsetBlock) * 2
-    );
-  }
-}
-
 .hostDesktopMaxWidthS {
   --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_small--regular);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Y,WATA;AAAA,E,aAoBAC,4B,WApBA;AAAA,E,aAwBAC,4C,WAxBA;AAAA,E,aA+BAC,a,WA/BA;AAAA,E,aAgDEA,a,WAhDF;AAAA,E,aAuDAC,sB,WAvDA;AAAA,E,aA2DAC,sB,WA3DA;AAAA,E,aA+DAC,sB,WA/DA;AAAA,E,aAmEAC,U,WAnEA;AAAA,E,aAgFAC,gB,WAhFA;AAAA,E,aAiGAA,gB,WAjGA;AAAA,E,aAiGeC,oB,WAjGf;AAAA,E,aAqGAD,gB,WArGA;AAAA,E,aAqGeE,uB,WArGf;AAAA,E,aA0GAF,gB,WA1GA;AAAA,E,aA0GeG,sB,WA1Gf;AAAA,E,aA+GAH,gB,WA/GA;AAAA,E,aA+GeI,qB,WA/Gf;AAAA,E,aAoHAC,iB,WApHA;AAAA,E,aAyHAA,iB,WAzHA;AAAA,E,aAyHgBJ,oB,WAzHhB;AAAA,E,aA6HAI,iB,WA7HA;AAAA,E,aA6HgBH,uB,WA7HhB;AAAA,E,aAkIAG,iB,WAlIA;AAAA,E,aAkIgBF,sB,WAlIhB;AAAA,E,aAuIAE,iB,WAvIA;AAAA,E,aAuIgBD,qB,WAvIhB;AAAA,E,aA2IAE,U,WA3IA;AAAA,E,aA+JAC,gB,WA/JA;AAAA,E,aAoKAC,iB,WApKA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Y,WATA;AAAA,E,aAoBAC,4B,WApBA;AAAA,E,aAwBAC,4C,WAxBA;AAAA,E,aA+BAC,a,WA/BA;AAAA,E,aAkDAC,sB,WAlDA;AAAA,E,aAsDAC,sB,WAtDA;AAAA,E,aA0DAC,sB,WA1DA;AAAA,E,aA8DAC,U,WA9DA;AAAA,E,aA2EAC,gB,WA3EA;AAAA,E,aA4FAA,gB,WA5FA;AAAA,E,aA4FeC,oB,WA5Ff;AAAA,E,aAgGAD,gB,WAhGA;AAAA,E,aAgGeE,uB,WAhGf;AAAA,E,aAqGAF,gB,WArGA;AAAA,E,aAqGeG,sB,WArGf;AAAA,E,aA0GAH,gB,WA1GA;AAAA,E,aA0GeI,qB,WA1Gf;AAAA,E,aA+GAC,iB,WA/GA;AAAA,E,aAoHAA,iB,WApHA;AAAA,E,aAoHgBJ,oB,WApHhB;AAAA,E,aAwHAI,iB,WAxHA;AAAA,E,aAwHgBH,uB,WAxHhB;AAAA,E,aA6HAG,iB,WA7HA;AAAA,E,aA6HgBF,sB,WA7HhB;AAAA,E,aAkIAE,iB,WAlIA;AAAA,E,aAkIgBD,qB,WAlIhB;AAAA,E,aAsIAE,U,WAtIA;AAAA,E,aA0JAC,gB,WA1JA;AAAA,E,aA+JAC,iB,WA/JA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}