@hh.ru/magritte-ui-media-viewer 1.0.6 → 1.1.0

package/index.css

@@ -1,32 +1,45 @@
-.magritte-media-viewer___KnrXP_1-0-6{
+:root{
+  --magritte-color-background-overlay-viewer-v24-4-0:#000000;
+  --magritte-color-background-overlay-toolbar-v24-4-0:#000000a3;
+  --magritte-color-component-skeleton-background-content-v24-4-0:#8293a23d;;
+  --magritte-gradient-component-media-viewer-background-fade-v24-4-0:#00000000 0%, #00000052 100%;
+}
+
+:root{
+  --magritte-semantic-animation-time-m-duration-v24-4-0:400ms;
+  --magritte-semantic-animation-ease-base-timing-function-v24-4-0:cubic-bezier(0.4, 0.24, 0, 1);
+}
+
+.magritte-night-theme{
+  --magritte-color-component-skeleton-background-content-v24-4-0:#5e5e5e3d;
+}
+.magritte-media-viewer___KnrXP_1-1-0{
   position:fixed;
   inset:0;
-  display:flex;
+  display:grid;
+  grid-template-rows:auto 1fr auto;
   flex-direction:column;
   touch-action:none;
   user-select:none;
-  --magritte-ui-nav-bar-background-color-override:var(--magritte-color-background-overlay-toolbar-v24-3-0);
+  --media-viewer-toolbars-opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress) - var(--magritte-ui-media-viewer-hide-tools-progress));
+  --media-viewer-background-opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress));
+  --magritte-ui-nav-bar-background-color-override:var(--magritte-color-background-overlay-toolbar-v24-4-0);
 }
-.magritte-media-viewer___KnrXP_1-0-6::before{
+.magritte-media-viewer___KnrXP_1-1-0::before{
   content:'';
   position:absolute;
   inset:0;
-  background:var(--magritte-color-background-overlay-viewer-v24-3-0);
-  opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress));
+  background:var(--magritte-color-background-overlay-viewer-v24-4-0);
+  opacity:var(--media-viewer-background-opacity);
   pointer-events:none;
 }
-.magritte-media-viewer-nav-bar___JcBBD_1-0-6{
-  z-index:2;
-  opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress) - var(--magritte-ui-media-viewer-hide-tools-progress));
-  transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * -100%));
-}
-.magritte-gallery-placeholder___rUoGL_1-0-6{
+.magritte-gallery-placeholder___rUoGL_1-1-0{
   display:flex;
-  flex-grow:1;
-  order:1;
   align-items:stretch;
+  grid-row:2;
+  min-height:0;
 }
-.magritte-media-viewer-gallery___P0SnN_1-0-6{
+.magritte-media-viewer-gallery___P0SnN_1-1-0{
   display:grid;
   flex-grow:1;
   contain:layout size;
@@ -35,23 +48,25 @@
   inset:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-0-6{
+  body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-1-0{
     position:relative;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-0-6{
+  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-1-0{
     position:relative;
   }
 }
-.magritte-gallery-item___Js0Z5_1-0-6{
+.magritte-gallery-item___Js0Z5_1-1-0{
+  position:relative;
   grid-area:1 / 1;
   contain:size;
   touch-action:none;
   overflow-x:clip;
   overflow-y:visible;
+  opacity:calc(1 - var(--magritte-ui-media-viewer-image-close-progress, 0));
 }
-.magritte-gallery-item-transform-container___N8-sA_1-0-6{
+.magritte-gallery-item-transform-container___N8-sA_1-1-0{
   position:absolute;
   top:50%;
   left:50%;
@@ -59,99 +74,104 @@
   will-change:transform;
   touch-action:none;
 }
-.magritte-preview-counter___uP2Hc_1-0-6{
+.magritte-preview-counter___uP2Hc_1-1-0{
   min-width:0;
   text-align:center;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-0-6{
+  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-1-0{
     text-align:left;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-0-6{
+  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-1-0{
     text-align:left;
   }
 }
-.magritte-preview-counter___uP2Hc_1-0-6.magritte-with-description___-w7ld_1-0-6{
+.magritte-preview-counter___uP2Hc_1-1-0.magritte-with-description___-w7ld_1-1-0{
   cursor:pointer;
 }
-.magritte-counter-number___gUpMp_1-0-6{
+.magritte-counter-number___gUpMp_1-1-0{
   display:block;
   transform:translateY(calc(18px * 0.5));
-  transition:transform 0.2s;
+  transition:transform var(--magritte-semantic-animation-time-m-duration-v24-4-0) var(--magritte-semantic-animation-ease-base-timing-function-v24-4-0);
 }
-.magritte-with-description___-w7ld_1-0-6 .magritte-counter-number___gUpMp_1-0-6{
+.magritte-with-description___-w7ld_1-1-0 .magritte-counter-number___gUpMp_1-1-0{
   transform:translateY(0);
 }
-.magritte-no-description-placeholder___qc6h2_1-0-6{
+.magritte-no-description-placeholder___qc6h2_1-1-0{
   display:block;
   height:18px;
   padding:0;
 }
-.magritte-preview-zoom-control___026jA_1-0-6{
+.magritte-preview-zoom-control___026jA_1-1-0{
   display:flex;
   flex-direction:row;
   gap:2px;
   align-items:center;
   justify-self:end;
 }
-.magritte-preview-container___nwjNY_1-0-6{
+.magritte-preview-container___nwjNY_1-1-0{
   display:grid;
   grid-template-columns:1fr auto 1fr;
   gap:16px;
   padding:4px 16px;
-  background:var(--magritte-color-background-overlay-toolbar-v24-3-0);
+  background:var(--magritte-color-background-overlay-toolbar-v24-4-0);
   align-items:center;
+  grid-row:3;
+  z-index:10;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-container___nwjNY_1-0-6{
+  body.magritte-old-layout .magritte-preview-container___nwjNY_1-1-0{
     padding:16px 24px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-0-6{
+  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-1-0{
     padding:16px 24px;
   }
 }
-.magritte-preview___0Ge4C_1-0-6{
+.magritte-preview___0Ge4C_1-1-0{
+  display:flex;
+  flex-direction:row;
   touch-action:none;
   grid-column:2;
   min-width:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview___0Ge4C_1-0-6{
-    max-width:calc(((32 + 8) * (var(--media-viewer-max-visible-items) - 1) + 64) * 1px);
+  body.magritte-old-layout .magritte-preview___0Ge4C_1-1-0{
+    max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
     overflow:hidden;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-0-6{
-    max-width:calc(((32 + 8) * (var(--media-viewer-max-visible-items) - 1) + 64) * 1px);
+  body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-1-0{
+    max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
     overflow:hidden;
   }
 }
-.magritte-preview-list___SAXLZ_1-0-6{
+.magritte-preview-list___SAXLZ_1-1-0{
   margin-left:50%;
   contain:layout paint;
   display:flex;
   gap:2px;
   overflow:hidden;
   width:fit-content;
+  flex:0 0 auto;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-list___SAXLZ_1-0-6{
+  body.magritte-old-layout .magritte-preview-list___SAXLZ_1-1-0{
     margin:0;
     gap:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-0-6{
+  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-1-0{
     margin:0;
     gap:8px;
   }
 }
-.magritte-preview-item___gz5f2_1-0-6{
+.magritte-preview-item___gz5f2_1-1-0{
   contain:layout paint size;
   position:relative;
   flex-shrink:0;
@@ -162,33 +182,36 @@
   display:flex;
   align-items:center;
   justify-content:center;
+  background-color:var(--magritte-color-component-skeleton-background-content-v24-4-0);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-item___gz5f2_1-0-6{
-    height:64px;
+  body.magritte-old-layout .magritte-preview-item___gz5f2_1-1-0{
+    height:80px;
+    border-radius:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-0-6{
-    height:64px;
+  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-1-0{
+    height:80px;
+    border-radius:8px;
   }
 }
-.magritte-preview-item-container___JDVsk_1-0-6{
+.magritte-preview-item-container___JDVsk_1-1-0{
   contain:layout paint size;
   overflow:hidden;
   scale:1;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-0-6{
-    scale:1.33333333;
+  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-1-0{
+    scale:1.66666667;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-0-6{
-    scale:1.33333333;
+  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-1-0{
+    scale:1.66666667;
   }
 }
-.magritte-preview-item-container___JDVsk_1-0-6 *{
+.magritte-preview-item-container___JDVsk_1-1-0 *{
   touch-action:none;
   position:absolute;
   top:0;
@@ -198,92 +221,147 @@
   height:100%;
   user-select:none;
 }
-.magritte-media-viewer-toolbar___2C8nr_1-0-6{
-  background:var(--magritte-color-background-overlay-toolbar-v24-3-0);
+.magritte-media-viewer-toolbar___2C8nr_1-1-0{
+  background:var(--magritte-color-background-overlay-toolbar-v24-4-0);
   padding:0 8px;
   display:grid;
   grid-template-columns:1fr auto 1fr;
   align-items:center;
   height:48px;
   gap:8px;
+  grid-row:4;
+  z-index:10;
 }
-.magritte-media-viewer-toolbar___2C8nr_1-0-6.magritte-no-description___NebrT_1-0-6{
+.magritte-media-viewer-toolbar___2C8nr_1-1-0.magritte-no-description___NebrT_1-1-0{
   display:flex;
   justify-content:space-between;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-0-6{
+  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-1-0{
     display:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-0-6{
+  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-1-0{
     display:none;
   }
 }
-.magritte-media-viewer-toolbar-left___YzkJt_1-0-6,
-.magritte-media-viewer-toolbar-right___kBER9_1-0-6{
+.magritte-media-viewer-toolbar-left___YzkJt_1-1-0,
+.magritte-media-viewer-toolbar-right___kBER9_1-1-0{
   display:flex;
   gap:4px;
 }
-.magritte-media-viewer-toolbar-right___kBER9_1-0-6{
+.magritte-media-viewer-toolbar-right___kBER9_1-1-0{
   justify-content:end;
 }
-.magritte-prev-button___WMYjR_1-0-6,
-.magritte-next-button___f8hJT_1-0-6{
-  border-width:0;
-  background:none;
-  padding:0;
+.magritte-prev-button___WMYjR_1-1-0,
+.magritte-next-button___f8hJT_1-1-0{
   cursor:pointer;
-  align-items:center;
-  justify-content:center;
   position:absolute;
   top:0;
   bottom:0;
-  width:88px;
-  display:none;
-  opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress));
+  width:48px;
+  opacity:var(--media-viewer-background-opacity);
+}
+.magritte-prev-button___WMYjR_1-1-0:active,
+.magritte-next-button___f8hJT_1-1-0:active{
+  background:linear-gradient(90deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-0));
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-prev-button___WMYjR_1-0-6,
-  body.magritte-old-layout .magritte-next-button___f8hJT_1-0-6{
-    display:flex;
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-1-0,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-1-0{
+    width:88px;
+  }
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-1-0:active,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-1-0:active{
+    background:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-0-6,
-  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-0-6{
-    display:flex;
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-1-0,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-1-0{
+    width:88px;
+  }
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-1-0:active,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-1-0:active{
+    background:none;
   }
 }
-.magritte-prev-button___WMYjR_1-0-6{
+.magritte-prev-button___WMYjR_1-1-0{
   left:0;
 }
-.magritte-next-button___f8hJT_1-0-6{
+.magritte-prev-button___WMYjR_1-1-0:active{
+  background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-0));
+}
+.magritte-next-button___f8hJT_1-1-0{
   right:0;
 }
-.magritte-bottom-container___oKHCF_1-0-6{
-  order:2;
-  z-index:2;
-  opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress) - var(--magritte-ui-media-viewer-hide-tools-progress));
-  transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * 100%));
+.magritte-slide-button___sY8LB_1-1-0{
+  display:flex;
+  background:none;
+  padding:0;
+  border-width:0;
+  align-items:center;
+  justify-content:center;
+  position:absolute;
+  inset:0;
 }
-.magritte-preview-placeholder___yuhW1_1-0-6{
+.magritte-preview-placeholder___yuhW1_1-1-0{
   --magritte-media-viewer-preview-width:24px;
   --magritte-media-viewer-preview-gap:2px;
-  width:calc(var(--magritte-media-viewer-placeholder-size) * var(--magritte-media-viewer-preview-width) + (var(--magritte-media-viewer-placeholder-size) - 1) * var(--magritte-media-viewer-preview-gap));
+  flex:0 0 auto;
+  width:calc(var(--magritte-media-viewer-placeholder-size) * (var(--magritte-media-viewer-preview-width) + var(--magritte-media-viewer-preview-gap)));
   flex-shrink:0;
   flex-grow:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-0-6{
-    --magritte-media-viewer-preview-width:32px;
+  body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-1-0{
+    --magritte-media-viewer-preview-width:40px;
     --magritte-media-viewer-preview-gap:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-0-6{
-    --magritte-media-viewer-preview-width:32px;
+  body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-1-0{
+    --magritte-media-viewer-preview-width:40px;
     --magritte-media-viewer-preview-gap:8px;
   }
 }
+.magritte-gallery-item-loader___70TDe_1-1-0{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}
+.magritte-gallery-item-error-container___Z-HyZ_1-1-0{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+  padding:28px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  text-align:center;
+  width:100%;
+  box-sizing:border-box;
+}
+.magritte-description-bottom-sheet-content___swnEV_1-1-0{
+  padding:8px 0;
+}
+.magritte-header___egZXt_1-1-0{
+  grid-row:1;
+  z-index:2;
+  opacity:var(--media-viewer-toolbars-opacity);
+  transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * -100%));
+}
+.magritte-footer___rOH-M_1-1-0{
+  grid-row:3;
+  z-index:2;
+  opacity:var(--media-viewer-toolbars-opacity);
+  transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * 100%));
+}
+.magritte-description___dYc-E_1-1-0{
+  display:inline-block;
+  max-width:100%;
+}

package/index.d.ts

@@ -1,6 +1,5 @@
-export { Gallery } from '@hh.ru/magritte-ui-media-viewer/public/Gallery';
-export { GalleryItem } from '@hh.ru/magritte-ui-media-viewer/public/GalleryItem';
 export { type GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';
 export { MediaViewer } from '@hh.ru/magritte-ui-media-viewer/public/MediaViewer';
-export { Preview, type PreviewProps } from '@hh.ru/magritte-ui-media-viewer/public/Preview';
-export { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';
+export { type PreviewProps } from '@hh.ru/magritte-ui-media-viewer/public/Preview';
+export { type ToolbarProps } from '@hh.ru/magritte-ui-media-viewer/public/Toolbar';
+export { useMediaViewerControls, useMediaViewerInfo } from '@hh.ru/magritte-ui-media-viewer/internal/context';

package/index.js

@@ -1,40 +1,46 @@
 import './index.css';
-export { Gallery } from './public/Gallery.js';
-export { GalleryItem } from './public/GalleryItem.js';
 export { MediaViewer } from './public/MediaViewer.js';
-export { Preview } from './public/Preview.js';
-export { useMediaViewerContext } from './internal/context.js';
+export { useMediaViewerControls, useMediaViewerInfo } from './internal/context.js';
 import 'react/jsx-runtime';
 import 'react';
+import 'motion/react';
+import '@hh.ru/magritte-common-modal-helper';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-design-tokens/types';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-layer';
+import './internal/animations.js';
+import './internal/hooks/useAutoHideTools.js';
+import './internal/hooks/useSwipeToClose.js';
+import '@use-gesture/react';
+import './internal/utils.js';
+import './internal/hooks/useTapToToggleTools.js';
+import './internal/hooks/useVirtualization.js';
+import './public/Footer.js';
+import './media-viewer-p9Okm1U_.js';
+import './public/Gallery.js';
 import '@hh.ru/magritte-common-resize';
 import '@hh.ru/magritte-ui-icon/icon';
 import './internal/hooks/useSwipe.js';
-import '@use-gesture/react';
-import 'motion/react';
-import './internal/utils.js';
-import './media-viewer-1Q8LfWIb.js';
+import './public/GalleryItem.js';
 import './internal/GalleryItemBody.js';
+import '@hh.ru/magritte-ui-loader';
 import './internal/hooks/useDoubleTapScale.js';
 import './internal/hooks/useGalleryItemController.js';
-import './internal/ObservableValue.js';
 import './internal/hooks/usePan.js';
 import './internal/hooks/usePinchToZoom.js';
 import './internal/hooks/useWheelToZoom.js';
-import './internal/hooks/useVirtualization.js';
-import 'motion';
-import '@hh.ru/magritte-ui-breakpoint';
-import './internal/hooks/useAutoHideTools.js';
-import './internal/hooks/useSwipeToClose.js';
-import './internal/hooks/useTapToToggleTools.js';
-import './public/Toolbar.js';
-import 'classnames';
+import '@hh.ru/magritte-ui-typography';
+import './public/Header.js';
+import './public/Preview.js';
 import './internal/Counter.js';
+import 'classnames';
 import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-tooltip';
-import '@hh.ru/magritte-ui-typography';
-import '@hh.ru/magritte-ui-nav-bar';
 import './internal/PreviewItem.js';
 import './internal/PreviewItemBody.js';
 import './internal/PreviewZoomControl.js';
+import './public/Toolbar.js';
+import './public/Tools.js';
 import './internal/ImagesLoader.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/internal/Counter.js

@@ -3,17 +3,20 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import classNames from 'classnames';
 import { useMotionValueEvent } from 'motion/react';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
 import { useMediaViewerContext } from './context.js';
-import { Tooltip } from '@hh.ru/magritte-ui-tooltip';
+import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from '../media-viewer-1Q8LfWIb.js';
+import { s as styles } from '../media-viewer-p9Okm1U_.js';
 import './ImagesLoader.js';
-import './ObservableValue.js';
+import './utils.js';
+import '@hh.ru/magritte-design-tokens/types';
+import './animations.js';
 
 const Counter = ({ items }) => {
     const globalContext = useMediaViewerContext();
-    const [currentItemIndex, setCurrentItemIndex] = useState(globalContext.currentSlideIndex.get());
+    const [currentItemIndex, setCurrentItemIndex] = useState(Math.round(globalContext.currentSlideIndex.get()));
     const [showDescription, setShowDescription] = useState(false);
     const description = items[currentItemIndex]?.props.description;
     const elementRef = useRef(null);
@@ -21,12 +24,13 @@ const Counter = ({ items }) => {
         setShowDescription(false);
         setCurrentItemIndex(Math.round(newIndex));
     });
+    const ofTrl = useTranslation('MediaViewer', 'of');
     if (items.length <= 1) {
         return null;
     }
     return (jsxs("div", { className: classNames(styles.previewCounter, { [styles.withDescription]: !!description }), onClick: () => {
             setShowDescription(!!description);
-        }, children: [jsx("span", { className: styles.counterNumber, children: jsx(Text, { style: "contrast", typography: "subtitle-1-semibold", ellipsis: true, children: `${currentItemIndex + 1} / ${items.length}` }) }), !!description && (jsxs(Fragment, { children: [jsx("span", { ref: elementRef, children: jsx(Text, { style: "contrast-secondary", typography: "label-4-regular", ellipsis: true, children: description }) }), jsx(Tooltip, { placement: 'top-center', activatorRef: elementRef, closeByClickOutside: true, visible: showDescription, onClose: () => setShowDescription(false), children: description }), jsx(BottomSheet, { visible: showDescription, onClose: () => setShowDescription(false), children: jsx(Text, { style: "primary", typography: "paragraph-2-regular", children: description }) })] })), !description && jsx("span", { className: styles.noDescriptionPlaceholder })] }));
+        }, children: [jsx("span", { className: styles.counterNumber, "aria-atomic": "true", "aria-live": "polite", children: jsx(Text, { style: "contrast", typography: "subtitle-1-semibold", ellipsis: true, children: `${currentItemIndex + 1} ${ofTrl} ${items.length}` }) }), !!description && (jsxs(Fragment, { children: [jsx("span", { ref: elementRef, className: styles.description, children: jsx(Text, { style: "contrast-secondary", typography: "label-4-regular", ellipsis: true, children: description }) }), jsx(TooltipHover, { placement: 'top-center', activatorRef: elementRef, size: "small", onClose: () => setShowDescription(false), ignoreIntersections: false, children: description }), jsx(BottomSheet, { visible: showDescription, onClose: () => setShowDescription(false), children: jsx("div", { className: styles.descriptionBottomSheetContent, children: jsx(Text, { style: "primary", typography: "paragraph-2-regular", children: description }) }) })] })), !description && jsx("span", { className: styles.noDescriptionPlaceholder })] }));
 };
 
 export { Counter };

package/internal/Counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sources":["../../src/internal/Counter.tsx"],"sourcesContent":["import { type FC, type ReactElement, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValueEvent } from 'motion/react';\n\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport type { GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { Tooltip } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nexport const Counter: FC<{ items: ReactElement<GalleryItemProps>[] }> = ({ items }) => {\n    const globalContext = useMediaViewerContext();\n    const [currentItemIndex, setCurrentItemIndex] = useState(globalContext.currentSlideIndex.get());\n    const [showDescription, setShowDescription] = useState(false);\n    const description = items[currentItemIndex]?.props.description;\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    useMotionValueEvent(globalContext.currentSlideIndex, 'change', (newIndex) => {\n        setShowDescription(false);\n        setCurrentItemIndex(Math.round(newIndex));\n    });\n\n    if (items.length <= 1) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(styles.previewCounter, { [styles.withDescription]: !!description })}\n            onClick={() => {\n                setShowDescription(!!description);\n            }}\n        >\n            <span className={styles.counterNumber}>\n                <Text\n                    style=\"contrast\"\n                    typography=\"subtitle-1-semibold\"\n                    ellipsis\n                >{`${currentItemIndex + 1} / ${items.length}`}</Text>\n            </span>\n            {!!description && (\n                <>\n                    <span ref={elementRef}>\n                        <Text style=\"contrast-secondary\" typography=\"label-4-regular\" ellipsis>\n                            {description}\n                        </Text>\n                    </span>\n                    <Tooltip\n                        placement={'top-center'}\n                        activatorRef={elementRef}\n                        closeByClickOutside\n                        visible={showDescription}\n                        onClose={() => setShowDescription(false)}\n                    >\n                        {description}\n                    </Tooltip>\n                    <BottomSheet visible={showDescription} onClose={() => setShowDescription(false)}>\n                        <Text style=\"primary\" typography=\"paragraph-2-regular\">\n                            {description}\n                        </Text>\n                    </BottomSheet>\n                </>\n            )}\n            {!description && <span className={styles.noDescriptionPlaceholder}></span>}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;MAYa,OAAO,GAAoD,CAAC,EAAE,KAAK,EAAE,KAAI;AAClF,IAAA,MAAM,aAAa,GAAG,qBAAqB,EAAE,CAAC;AAC9C,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,EAAE,CAAC,CAAC;IAChG,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;AAC/D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CAAC,aAAa,CAAC,iBAAiB,EAAE,QAAQ,EAAE,CAAC,QAAQ,KAAI;QACxE,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC9C,KAAC,CAAC,CAAC;AAEH,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;AACnB,QAAA,OAAO,IAAI,CAAC;KACf;IAED,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EACzF,OAAO,EAAE,MAAK;AACV,YAAA,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;AACtC,SAAC,EAED,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,QAAA,EACjCA,GAAC,CAAA,IAAI,EACD,EAAA,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,qBAAqB,EAChC,QAAQ,EAAA,IAAA,EAAA,QAAA,EACV,GAAG,gBAAgB,GAAG,CAAC,CAAA,GAAA,EAAM,KAAK,CAAC,MAAM,CAAA,CAAE,GAAQ,EAClD,CAAA,EACN,CAAC,CAAC,WAAW,KACVD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACID,GAAM,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,UAAU,EACjB,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,oBAAoB,EAAC,UAAU,EAAC,iBAAiB,EAAC,QAAQ,kBACjE,WAAW,EAAA,CACT,EACJ,CAAA,EACPA,GAAC,CAAA,OAAO,EACJ,EAAA,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,UAAU,EACxB,mBAAmB,EAAA,IAAA,EACnB,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,MAAM,kBAAkB,CAAC,KAAK,CAAC,EAEvC,QAAA,EAAA,WAAW,EACN,CAAA,EACVA,IAAC,WAAW,EAAA,EAAC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC,KAAK,CAAC,EAC3E,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,qBAAqB,YACjD,WAAW,EAAA,CACT,EACG,CAAA,CAAA,EAAA,CACf,CACN,EACA,CAAC,WAAW,IAAIA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,wBAAwB,EAAS,CAAA,CAAA,EAAA,CACxE,EACR;AACN;;;;"}
+{"version":3,"file":"Counter.js","sources":["../../src/internal/Counter.tsx"],"sourcesContent":["import { type FC, type ReactElement, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValueEvent } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport type { GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { TooltipHover } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nexport const Counter: FC<{ items: ReactElement<GalleryItemProps>[] }> = ({ items }) => {\n    const globalContext = useMediaViewerContext();\n    const [currentItemIndex, setCurrentItemIndex] = useState(Math.round(globalContext.currentSlideIndex.get()));\n    const [showDescription, setShowDescription] = useState(false);\n    const description = items[currentItemIndex]?.props.description;\n    const elementRef = useRef<HTMLDivElement>(null);\n\n    useMotionValueEvent(globalContext.currentSlideIndex, 'change', (newIndex) => {\n        setShowDescription(false);\n        setCurrentItemIndex(Math.round(newIndex));\n    });\n\n    const ofTrl = useTranslation('MediaViewer', 'of');\n\n    if (items.length <= 1) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(styles.previewCounter, { [styles.withDescription]: !!description })}\n            onClick={() => {\n                setShowDescription(!!description);\n            }}\n        >\n            <span className={styles.counterNumber} aria-atomic=\"true\" aria-live=\"polite\">\n                <Text\n                    style=\"contrast\"\n                    typography=\"subtitle-1-semibold\"\n                    ellipsis\n                >{`${currentItemIndex + 1} ${ofTrl} ${items.length}`}</Text>\n            </span>\n            {!!description && (\n                <>\n                    <span ref={elementRef} className={styles.description}>\n                        <Text style=\"contrast-secondary\" typography=\"label-4-regular\" ellipsis>\n                            {description}\n                        </Text>\n                    </span>\n                    <TooltipHover\n                        placement={'top-center'}\n                        activatorRef={elementRef}\n                        size=\"small\"\n                        onClose={() => setShowDescription(false)}\n                        ignoreIntersections={false}\n                    >\n                        {description}\n                    </TooltipHover>\n                    <BottomSheet visible={showDescription} onClose={() => setShowDescription(false)}>\n                        <div className={styles.descriptionBottomSheetContent}>\n                            <Text style=\"primary\" typography=\"paragraph-2-regular\">\n                                {description}\n                            </Text>\n                        </div>\n                    </BottomSheet>\n                </>\n            )}\n            {!description && <span className={styles.noDescriptionPlaceholder}></span>}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/internal/GalleryItemBody.d.ts

@@ -3,7 +3,9 @@ import { type FC } from 'react';
 export interface GalleryItemProps {
     /** Описание элемента */
     description?: string;
+    /** URL изображения */
     src: string;
+    /** URL превью изображения */
     previewSrc?: string;
 }
 /** Внутренние пропсы GalleryItem — включают index, инжектируемый Gallery */