@hh.ru/magritte-ui-media-viewer 1.0.7 → 1.2.0

package/index.css

@@ -1,32 +1,45 @@
-.magritte-media-viewer___KnrXP_1-0-7{
+: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-2-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-7::before{
+.magritte-media-viewer___KnrXP_1-2-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-7{
-  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-7{
+.magritte-gallery-placeholder___rUoGL_1-2-0{
   display:flex;
-  flex-grow:1;
-  order:1;
   align-items:stretch;
+  grid-row:2;
+  min-height:0;
 }
-.magritte-media-viewer-gallery___P0SnN_1-0-7{
+.magritte-media-viewer-gallery___P0SnN_1-2-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-7{
+  body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-2-0{
     position:relative;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-0-7{
+  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-2-0{
     position:relative;
   }
 }
-.magritte-gallery-item___Js0Z5_1-0-7{
+.magritte-gallery-item___Js0Z5_1-2-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-7{
+.magritte-gallery-item-transform-container___N8-sA_1-2-0{
   position:absolute;
   top:50%;
   left:50%;
@@ -59,99 +74,104 @@
   will-change:transform;
   touch-action:none;
 }
-.magritte-preview-counter___uP2Hc_1-0-7{
+.magritte-preview-counter___uP2Hc_1-2-0{
   min-width:0;
   text-align:center;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-0-7{
+  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-2-0{
     text-align:left;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-0-7{
+  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-2-0{
     text-align:left;
   }
 }
-.magritte-preview-counter___uP2Hc_1-0-7.magritte-with-description___-w7ld_1-0-7{
+.magritte-preview-counter___uP2Hc_1-2-0.magritte-with-description___-w7ld_1-2-0{
   cursor:pointer;
 }
-.magritte-counter-number___gUpMp_1-0-7{
+.magritte-counter-number___gUpMp_1-2-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-7 .magritte-counter-number___gUpMp_1-0-7{
+.magritte-with-description___-w7ld_1-2-0 .magritte-counter-number___gUpMp_1-2-0{
   transform:translateY(0);
 }
-.magritte-no-description-placeholder___qc6h2_1-0-7{
+.magritte-no-description-placeholder___qc6h2_1-2-0{
   display:block;
   height:18px;
   padding:0;
 }
-.magritte-preview-zoom-control___026jA_1-0-7{
+.magritte-preview-zoom-control___026jA_1-2-0{
   display:flex;
   flex-direction:row;
   gap:2px;
   align-items:center;
   justify-self:end;
 }
-.magritte-preview-container___nwjNY_1-0-7{
+.magritte-preview-container___nwjNY_1-2-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-7{
+  body.magritte-old-layout .magritte-preview-container___nwjNY_1-2-0{
     padding:16px 24px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-0-7{
+  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-2-0{
     padding:16px 24px;
   }
 }
-.magritte-preview___0Ge4C_1-0-7{
+.magritte-preview___0Ge4C_1-2-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-7{
-    max-width:calc(((32 + 8) * (var(--media-viewer-max-visible-items) - 1) + 64) * 1px);
+  body.magritte-old-layout .magritte-preview___0Ge4C_1-2-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-7{
-    max-width:calc(((32 + 8) * (var(--media-viewer-max-visible-items) - 1) + 64) * 1px);
+  body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-2-0{
+    max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
     overflow:hidden;
   }
 }
-.magritte-preview-list___SAXLZ_1-0-7{
+.magritte-preview-list___SAXLZ_1-2-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-7{
+  body.magritte-old-layout .magritte-preview-list___SAXLZ_1-2-0{
     margin:0;
     gap:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-0-7{
+  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-2-0{
     margin:0;
     gap:8px;
   }
 }
-.magritte-preview-item___gz5f2_1-0-7{
+.magritte-preview-item___gz5f2_1-2-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-7{
-    height:64px;
+  body.magritte-old-layout .magritte-preview-item___gz5f2_1-2-0{
+    height:80px;
+    border-radius:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-0-7{
-    height:64px;
+  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-2-0{
+    height:80px;
+    border-radius:8px;
   }
 }
-.magritte-preview-item-container___JDVsk_1-0-7{
+.magritte-preview-item-container___JDVsk_1-2-0{
   contain:layout paint size;
   overflow:hidden;
   scale:1;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-0-7{
-    scale:1.33333333;
+  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-2-0{
+    scale:1.66666667;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-0-7{
-    scale:1.33333333;
+  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-2-0{
+    scale:1.66666667;
   }
 }
-.magritte-preview-item-container___JDVsk_1-0-7 *{
+.magritte-preview-item-container___JDVsk_1-2-0 *{
   touch-action:none;
   position:absolute;
   top:0;
@@ -198,92 +221,147 @@
   height:100%;
   user-select:none;
 }
-.magritte-media-viewer-toolbar___2C8nr_1-0-7{
-  background:var(--magritte-color-background-overlay-toolbar-v24-3-0);
+.magritte-media-viewer-toolbar___2C8nr_1-2-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-7.magritte-no-description___NebrT_1-0-7{
+.magritte-media-viewer-toolbar___2C8nr_1-2-0.magritte-no-description___NebrT_1-2-0{
   display:flex;
   justify-content:space-between;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-0-7{
+  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-2-0{
     display:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-0-7{
+  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-2-0{
     display:none;
   }
 }
-.magritte-media-viewer-toolbar-left___YzkJt_1-0-7,
-.magritte-media-viewer-toolbar-right___kBER9_1-0-7{
+.magritte-media-viewer-toolbar-left___YzkJt_1-2-0,
+.magritte-media-viewer-toolbar-right___kBER9_1-2-0{
   display:flex;
   gap:4px;
 }
-.magritte-media-viewer-toolbar-right___kBER9_1-0-7{
+.magritte-media-viewer-toolbar-right___kBER9_1-2-0{
   justify-content:end;
 }
-.magritte-prev-button___WMYjR_1-0-7,
-.magritte-next-button___f8hJT_1-0-7{
-  border-width:0;
-  background:none;
-  padding:0;
+.magritte-prev-button___WMYjR_1-2-0,
+.magritte-next-button___f8hJT_1-2-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-2-0:active,
+.magritte-next-button___f8hJT_1-2-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-7,
-  body.magritte-old-layout .magritte-next-button___f8hJT_1-0-7{
-    display:flex;
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-0,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-2-0{
+    width:88px;
+  }
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-0:active,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-2-0:active{
+    background:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-0-7,
-  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-0-7{
-    display:flex;
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-0,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-0{
+    width:88px;
+  }
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-0:active,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-0:active{
+    background:none;
   }
 }
-.magritte-prev-button___WMYjR_1-0-7{
+.magritte-prev-button___WMYjR_1-2-0{
   left:0;
 }
-.magritte-next-button___f8hJT_1-0-7{
+.magritte-prev-button___WMYjR_1-2-0:active{
+  background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-0));
+}
+.magritte-next-button___f8hJT_1-2-0{
   right:0;
 }
-.magritte-bottom-container___oKHCF_1-0-7{
-  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-2-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-7{
+.magritte-preview-placeholder___yuhW1_1-2-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-7{
-    --magritte-media-viewer-preview-width:32px;
+  body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-2-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-7{
-    --magritte-media-viewer-preview-width:32px;
+  body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-2-0{
+    --magritte-media-viewer-preview-width:40px;
     --magritte-media-viewer-preview-gap:8px;
   }
 }
+.magritte-gallery-item-loader___70TDe_1-2-0{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}
+.magritte-gallery-item-error-container___Z-HyZ_1-2-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-2-0{
+  padding:8px 0;
+}
+.magritte-header___egZXt_1-2-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-2-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-2-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-EEyLOGS2.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-BNuKXbLq.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/index.mock.d.ts

@@ -0,0 +1,9 @@
+export declare const MediaViewer: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+export declare const useMediaViewerControls: () => {
+    goToSlideIndex: (index: number) => void;
+    close: VoidFunction;
+};
+export declare const useMediaViewerInfo: () => {
+    currentSlideIndex: number;
+    totalSlides: number;
+};

package/index.mock.js

@@ -0,0 +1,55 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const MediaViewer = mockComponent('MediaViewer', {
+    Gallery: mockComponent('Gallery', undefined, {
+        withChildren: true,
+    }),
+    GalleryItem: mockComponent('GalleryItem', undefined, {
+        withChildren: true,
+    }),
+    Preview: mockComponent('Preview', undefined, {
+        withChildren: true,
+    }),
+    Toolbar: mockComponent('Toolbar', undefined, {
+        withChildren: true,
+    }),
+    Header: mockComponent('Header', undefined, {
+        withChildren: true,
+    }),
+    Footer: mockComponent('Footer', undefined, {
+        withChildren: true,
+    }),
+    DesktopTool: mockComponent('DesktopTool', undefined, {
+        withChildren: true,
+    }),
+    MobileTool: mockComponent('MobileTool', undefined, {
+        withChildren: true,
+    }),
+    RotateTool: mockComponent('RotateTool', undefined, {
+        withChildren: true,
+    }),
+    CloseTool: mockComponent('CloseTool', undefined, {
+        withChildren: true,
+    }),
+    FullWidthTool: mockComponent('FullWidthTool', undefined, {
+        withChildren: true,
+    }),
+}, {
+    withChildren: true,
+});
+const useMediaViewerControls = () => {
+    return {
+        goToSlideIndex: () => { },
+        close: () => { },
+    };
+};
+const useMediaViewerInfo = () => {
+    return {
+        currentSlideIndex: 0,
+        totalSlides: 1,
+    };
+};
+
+export { MediaViewer, useMediaViewerControls, useMediaViewerInfo };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const MediaViewer = mockComponent(\n    'MediaViewer',\n    {\n        Gallery: mockComponent('Gallery', undefined, {\n            withChildren: true,\n        }),\n        GalleryItem: mockComponent('GalleryItem', undefined, {\n            withChildren: true,\n        }),\n        Preview: mockComponent('Preview', undefined, {\n            withChildren: true,\n        }),\n        Toolbar: mockComponent('Toolbar', undefined, {\n            withChildren: true,\n        }),\n        Header: mockComponent('Header', undefined, {\n            withChildren: true,\n        }),\n        Footer: mockComponent('Footer', undefined, {\n            withChildren: true,\n        }),\n        DesktopTool: mockComponent('DesktopTool', undefined, {\n            withChildren: true,\n        }),\n        MobileTool: mockComponent('MobileTool', undefined, {\n            withChildren: true,\n        }),\n        RotateTool: mockComponent('RotateTool', undefined, {\n            withChildren: true,\n        }),\n        CloseTool: mockComponent('CloseTool', undefined, {\n            withChildren: true,\n        }),\n        FullWidthTool: mockComponent('FullWidthTool', undefined, {\n            withChildren: true,\n        }),\n    },\n    {\n        withChildren: true,\n    }\n);\n\nexport const useMediaViewerControls = (): {\n    goToSlideIndex: (index: number) => void;\n    close: VoidFunction;\n} => {\n    return {\n        goToSlideIndex: () => {},\n        close: () => {},\n    };\n};\n\nexport const useMediaViewerInfo = (): {\n    currentSlideIndex: number;\n    totalSlides: number;\n} => {\n    return {\n        currentSlideIndex: 0,\n        totalSlides: 1,\n    };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,WAAW,GAAG,aAAa,CACpC,aAAa,EACb;AACI,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACjD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE;AACvC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE;AACvC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACjD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE;AAC/C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE;AAC/C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,SAAS,EAAE,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE;AAC7C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,aAAa,EAAE,aAAa,CAAC,eAAe,EAAE,SAAS,EAAE;AACrD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;CACL,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EACH;AAEK,MAAM,sBAAsB,GAAG,MAGlC;IACA,OAAO;AACH,QAAA,cAAc,EAAE,MAAK,GAAG;AACxB,QAAA,KAAK,EAAE,MAAK,GAAG;KAClB,CAAC;AACN,EAAE;AAEK,MAAM,kBAAkB,GAAG,MAG9B;IACA,OAAO;AACH,QAAA,iBAAiB,EAAE,CAAC;AACpB,QAAA,WAAW,EAAE,CAAC;KACjB,CAAC;AACN;;;;"}

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-BNuKXbLq.js';
+import { s as styles } from '../media-viewer-EEyLOGS2.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 };