@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/form-control/cssm/desktop/index.js

@@ -1,11 +1,7 @@
-export { FormControlDesktop } from './Component.desktop.js';
-import 'react';
-import '../components/base-form-control/Component.js';
-import 'classnames';
-import '../../../shared/cssm';
-import '../components/base-form-control/default.module.css';
-import '../components/base-form-control/index.module.css';
-import '../components/base-form-control/inverted.module.css';
-import './default.desktop.module.css';
-import './desktop.module.css';
-import './inverted.desktop.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.FormControlDesktop = desktop_Component_desktop.FormControlDesktop;

package/form-control/cssm/index.js

@@ -1,17 +1,7 @@
-export { FormControl } from './Component.responsive.js';
-import 'react';
-import '../../mq/cssm';
-import './desktop/Component.desktop.js';
-import './components/base-form-control/Component.js';
-import 'classnames';
-import '../../shared/cssm';
-import './components/base-form-control/default.module.css';
-import './components/base-form-control/index.module.css';
-import './components/base-form-control/inverted.module.css';
-import './desktop/default.desktop.module.css';
-import './desktop/desktop.module.css';
-import './desktop/inverted.desktop.module.css';
-import './mobile/Component.mobile.js';
-import './mobile/default.mobile.module.css';
-import './mobile/inverted.mobile.module.css';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+
+
+
+exports.FormControl = Component_responsive.FormControl;

package/form-control/cssm/mobile/Component.mobile.js

@@ -1,18 +1,23 @@
-import React, { forwardRef } from 'react';
-import { BaseFormControl } from '../components/base-form-control/Component.js';
-import defaultColors from './default.mobile.module.css';
-import invertedColors from './inverted.mobile.module.css';
-import styles from './mobile.module.css';
-import 'classnames';
-import '../../../shared/cssm';
-import '../components/base-form-control/default.module.css';
-import '../components/base-form-control/index.module.css';
-import '../components/base-form-control/inverted.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
+var tslib = require('tslib');
+var React = require('react');
+var components_baseFormControl_Component = require('../components/base-form-control/Component.js');
+var defaultColors = require('./default.mobile.module.css');
+var invertedColors = require('./inverted.mobile.module.css');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
 };
-const FormControlMobile = forwardRef((restProps, ref) => (React.createElement(BaseFormControl, { ...restProps, ref: ref, styles: styles, colorStyles: colorStyles })));
+var FormControlMobile = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_baseFormControl_Component.BaseFormControl, tslib.__assign({}, restProps, { ref: ref, styles: styles__default.default, colorStyles: colorStyles }))); });
 
-export { FormControlMobile };
+exports.FormControlMobile = FormControlMobile;

package/form-control/cssm/mobile/index.js

@@ -1,11 +1,7 @@
-export { FormControlMobile } from './Component.mobile.js';
-import 'react';
-import '../components/base-form-control/Component.js';
-import 'classnames';
-import '../../../shared/cssm';
-import '../components/base-form-control/default.module.css';
-import '../components/base-form-control/index.module.css';
-import '../components/base-form-control/inverted.module.css';
-import './default.mobile.module.css';
-import './inverted.mobile.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.FormControlMobile = mobile_Component_mobile.FormControlMobile;

package/form-control/cssm/shared/index.js

@@ -1,2 +1,7 @@
-export { getFormControlTestIds } from '../utils.js';
-import '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getFormControlTestIds = utils.getFormControlTestIds;

package/form-control/cssm/utils.js

@@ -1,14 +1,16 @@
-import { getDataTestId } from '../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
 
 function getFormControlTestIds(dataTestId) {
     return {
         inputWrapper: dataTestId,
-        inputWrapperInner: getDataTestId(dataTestId, 'inner'),
-        leftAddons: getDataTestId(dataTestId, 'left-addons'),
-        rightAddons: getDataTestId(dataTestId, 'right-addons'),
-        error: getDataTestId(dataTestId, 'error-message'),
-        hint: getDataTestId(dataTestId, 'hint'),
+        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'inner'),
+        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'left-addons'),
+        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'right-addons'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error-message'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'hint'),
     };
 }
 
-export { getFormControlTestIds };
+exports.getFormControlTestIds = getFormControlTestIds;

package/form-control/esm/Component.responsive.js

@@ -1,14 +1,14 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { FormControlDesktop } from './desktop/Component.desktop.js';
 import { FormControlMobile } from './mobile/Component.mobile.js';
 import './components/base-form-control/Component.js';
 import 'classnames';
-import '../../shared/esm';
 
 var FormControl = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query, defaultMatchMediaValue)[0];
     var Component = isDesktop ? FormControlDesktop : FormControlMobile;

package/form-control/esm/index.js

@@ -2,8 +2,8 @@ export { FormControl } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-form-control/Component.js';
 import 'classnames';
-import '../../shared/esm';
 import './mobile/Component.mobile.js';

package/form-control/modern/Component.responsive.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { FormControlDesktop } from './desktop/Component.desktop.js';
 import { FormControlMobile } from './mobile/Component.mobile.js';
 import './components/base-form-control/Component.js';
 import 'classnames';
-import '../../shared/modern';
 
-const FormControl = forwardRef(({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+const FormControl = forwardRef(({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
     const Component = isDesktop ? FormControlDesktop : FormControlMobile;

package/form-control/modern/index.js

@@ -1,8 +1,8 @@
 export { FormControl } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-form-control/Component.js';
 import 'classnames';
-import '../../shared/modern';
 import './mobile/Component.mobile.js';

package/gallery/components/header/Component.js

@@ -5,7 +5,7 @@ var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
 var components_headerInfoBlock_Component = require('../header-info-block/Component.js');
-var components_header_buttons = require('../../buttons-68cc8e2c.js');
+var components_header_buttons = require('../../buttons-86aa9ca3.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/header/buttons.js

@@ -8,7 +8,7 @@ require('@alfalab/icons-glyph/ArrowsInwardMIcon');
 require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('@alfalab/icons-glyph/PointerDownMIcon');
-var components_header_buttons = require('../../buttons-68cc8e2c.js');
+var components_header_buttons = require('../../buttons-86aa9ca3.js');
 
 
 

package/gallery/components/image-viewer/component.js

@@ -12,7 +12,7 @@ var ChevronForwardHeavyMIcon = require('@alfalab/icons-glyph/ChevronForwardHeavy
 var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
-var components_imageViewer_slide = require('../../slide-4a5002c6.js');
+var components_imageViewer_slide = require('../../slide-aa977082.js');
 require('swiper/swiper.min.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/gallery/components/image-viewer/slide.js

@@ -6,7 +6,7 @@ require('../../../typography');
 require('../../utils/utils.js');
 require('../../utils/constants.js');
 require('./paths.js');
-var components_imageViewer_slide = require('../../slide-4a5002c6.js');
+var components_imageViewer_slide = require('../../slide-aa977082.js');
 
 
 

package/gallery/cssm/Component.js

@@ -1,86 +1,68 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { BaseModal } from '../../base-modal/cssm';
-import { NavigationBar } from './components/navigation-bar/Component.js';
-import { Header } from './components/header/Component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import { GalleryContext } from './context.js';
-import './components/image-preview/index.module.css';
-import { ImageViewer } from './components/image-viewer/component.js';
-import styles from './index.module.css';
-import './utils/utils.js';
-import './utils/constants.js';
-import './components/image-preview/Component.js';
-import './components/navigation-bar/index.module.css';
-import '../../typography/cssm';
-import './components/header-info-block/index.module.css';
-import '../../icon-button/cssm';
-import '../../tooltip/cssm/desktop';
-import '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '@alfalab/icons-glyph/PointerDownMIcon';
-import './components/header/index.module.css';
-import './components/image-preview/paths.js';
-import './components/header-info-block/Component.js';
-import './utils/split-filename.js';
-import './components/header/buttons.js';
-import 'element-closest';
-import 'swiper';
-import 'swiper/react';
-import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
-import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './components/image-viewer/slide.js';
-import './components/image-viewer/paths.js';
-import './components/image-viewer/index.module.css';
-import 'swiper/swiper.min.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Backdrop = () => null;
-const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onClose, onSlideIndexChange, }) => {
-    const currentSlideIndexState = useState(initialSlide);
-    const uncontrolled = slideIndex === undefined;
-    const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled
+var React = require('react');
+var coreComponentsBaseModal = require('../../base-modal/cssm');
+var components_navigationBar_Component = require('./components/navigation-bar/Component.js');
+var components_header_Component = require('./components/header/Component.js');
+require('classnames');
+require('@alfalab/hooks');
+var context = require('./context.js');
+require('./components/image-preview/index.module.css');
+var components_imageViewer_component = require('./components/image-viewer/component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Backdrop = function () { return null; };
+var Gallery = function (_a) {
+    var open = _a.open, images = _a.images, slideIndex = _a.slideIndex, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b, _c = _a.loop, loop = _c === void 0 ? true : _c, onClose = _a.onClose, onSlideIndexChange = _a.onSlideIndexChange;
+    var currentSlideIndexState = React.useState(initialSlide);
+    var uncontrolled = slideIndex === undefined;
+    var _d = uncontrolled
         ? currentSlideIndexState
-        : [slideIndex, onSlideIndexChange];
-    const [swiper, setSwiper] = useState();
-    const [imagesMeta, setImagesMeta] = useState([]);
-    const [fullScreen, setFullScreen] = useState(false);
-    const slideTo = useCallback((index) => {
+        : [slideIndex, onSlideIndexChange], currentSlideIndex = _d[0], setCurrentSlideIndex = _d[1];
+    var _e = React.useState(), swiper = _e[0], setSwiper = _e[1];
+    var _f = React.useState([]), imagesMeta = _f[0], setImagesMeta = _f[1];
+    var _g = React.useState(false), fullScreen = _g[0], setFullScreen = _g[1];
+    var slideTo = React.useCallback(function (index) {
         if (images[index]) {
-            setCurrentSlideIndex?.(index);
+            setCurrentSlideIndex === null || setCurrentSlideIndex === void 0 ? void 0 : setCurrentSlideIndex(index);
             if (swiper) {
                 swiper.slideTo(index);
             }
         }
     }, [images, setCurrentSlideIndex, swiper]);
-    const slideNext = useCallback(() => {
-        const lastIndex = images.length - 1;
-        let nextIndex = currentSlideIndex + 1;
+    var slideNext = React.useCallback(function () {
+        var lastIndex = images.length - 1;
+        var nextIndex = currentSlideIndex + 1;
         if (nextIndex >= images.length) {
             nextIndex = loop ? 0 : lastIndex;
         }
         slideTo(nextIndex);
     }, [images.length, loop, currentSlideIndex, slideTo]);
-    const slidePrev = useCallback(() => {
-        const lastIndex = images.length - 1;
-        let nextIndex = currentSlideIndex - 1;
+    var slidePrev = React.useCallback(function () {
+        var lastIndex = images.length - 1;
+        var nextIndex = currentSlideIndex - 1;
         if (nextIndex < 0) {
             nextIndex = loop ? lastIndex : 0;
         }
         slideTo(nextIndex);
     }, [images.length, loop, currentSlideIndex, slideTo]);
-    const setImageMeta = useCallback((meta, index) => {
+    var setImageMeta = React.useCallback(function (meta, index) {
         imagesMeta[index] = meta;
         setImagesMeta(imagesMeta.slice());
     }, [imagesMeta]);
-    const handleClose = useCallback(() => {
+    var handleClose = React.useCallback(function () {
         onClose();
         if (uncontrolled) {
-            setCurrentSlideIndex?.(initialSlide);
+            setCurrentSlideIndex === null || setCurrentSlideIndex === void 0 ? void 0 : setCurrentSlideIndex(initialSlide);
         }
         setFullScreen(false);
     }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);
-    const handleEscapeKeyDown = () => {
+    var handleEscapeKeyDown = function () {
         if (fullScreen) {
             setFullScreen(false);
         }
@@ -88,7 +70,7 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
             handleClose();
         }
     };
-    const handleKeyDown = useCallback((event) => {
+    var handleKeyDown = React.useCallback(function (event) {
         if (!open || fullScreen) {
             return;
         }
@@ -101,45 +83,45 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
                 break;
         }
     }, [fullScreen, open, slideNext, slidePrev]);
-    useEffect(() => {
-        if (!uncontrolled && !swiper?.destroyed) {
-            swiper?.slideTo(currentSlideIndex);
+    React.useEffect(function () {
+        if (!uncontrolled && !(swiper === null || swiper === void 0 ? void 0 : swiper.destroyed)) {
+            swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(currentSlideIndex);
         }
     }, [uncontrolled, currentSlideIndex, swiper]);
-    useEffect(() => {
+    React.useEffect(function () {
         document.addEventListener('keydown', handleKeyDown);
-        return () => {
+        return function () {
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [handleKeyDown]);
-    const singleSlide = images.length === 1;
-    const showNavigationBar = !singleSlide && !fullScreen;
+    var singleSlide = images.length === 1;
+    var showNavigationBar = !singleSlide && !fullScreen;
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const galleryContext = {
-        singleSlide,
-        currentSlideIndex,
-        images,
-        imagesMeta,
-        fullScreen,
+    var galleryContext = {
+        singleSlide: singleSlide,
+        currentSlideIndex: currentSlideIndex,
+        images: images,
+        imagesMeta: imagesMeta,
+        fullScreen: fullScreen,
         initialSlide: uncontrolled ? initialSlide : currentSlideIndex,
-        setFullScreen,
-        setImageMeta,
-        slideNext,
-        slidePrev,
-        slideTo,
-        getSwiper: () => swiper,
-        setSwiper,
+        setFullScreen: setFullScreen,
+        setImageMeta: setImageMeta,
+        slideNext: slideNext,
+        slidePrev: slidePrev,
+        slideTo: slideTo,
+        getSwiper: function () { return swiper; },
+        setSwiper: setSwiper,
         onClose: handleClose,
-        setCurrentSlideIndex,
-        getCurrentImage: () => images[currentSlideIndex],
-        getCurrentImageMeta: () => imagesMeta[currentSlideIndex],
+        setCurrentSlideIndex: setCurrentSlideIndex,
+        getCurrentImage: function () { return images[currentSlideIndex]; },
+        getCurrentImageMeta: function () { return imagesMeta[currentSlideIndex]; },
     };
-    return (React.createElement(GalleryContext.Provider, { value: galleryContext },
-        React.createElement(BaseModal, { open: open, className: styles.modal, onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop },
-            React.createElement("div", { className: styles.container },
-                React.createElement(Header, null),
-                React.createElement(ImageViewer, null),
-                showNavigationBar && React.createElement(NavigationBar, null)))));
+    return (React__default.default.createElement(context.GalleryContext.Provider, { value: galleryContext },
+        React__default.default.createElement(coreComponentsBaseModal.BaseModal, { open: open, className: styles__default.default.modal, onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop },
+            React__default.default.createElement("div", { className: styles__default.default.container },
+                React__default.default.createElement(components_header_Component.Header, null),
+                React__default.default.createElement(components_imageViewer_component.ImageViewer, null),
+                showNavigationBar && React__default.default.createElement(components_navigationBar_Component.NavigationBar, null)))));
 };
 
-export { Gallery };
+exports.Gallery = Gallery;

package/gallery/cssm/components/header/Component.js

@@ -1,50 +1,51 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import { GalleryContext } from '../../context.js';
-import { isSmallImage } from '../../utils/utils.js';
-import { TestIds } from '../../utils/constants.js';
-import { HeaderInfoBlock } from '../header-info-block/Component.js';
-import { Download, Exit, ExitFullscreen, Fullscreen } from './buttons.js';
-import styles from './index.module.css';
-import '../../../../typography/cssm';
-import '../../utils/split-filename.js';
-import '../header-info-block/index.module.css';
-import '../../../../icon-button/cssm';
-import '../../../../tooltip/cssm/desktop';
-import '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '@alfalab/icons-glyph/PointerDownMIcon';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Header = () => {
-    const { currentSlideIndex, singleSlide, images, fullScreen, getCurrentImageMeta, getCurrentImage, setFullScreen, onClose, } = useContext(GalleryContext);
-    const toggleFullScreenButton = useRef(null);
-    const closeFullScreen = () => {
+var React = require('react');
+var context = require('../../context.js');
+var utils_utils = require('../../utils/utils.js');
+var utils_constants = require('../../utils/constants.js');
+var components_headerInfoBlock_Component = require('../header-info-block/Component.js');
+var components_header_buttons = require('./buttons.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Header = function () {
+    var _a;
+    var _b = React.useContext(context.GalleryContext), currentSlideIndex = _b.currentSlideIndex, singleSlide = _b.singleSlide, images = _b.images, fullScreen = _b.fullScreen, getCurrentImageMeta = _b.getCurrentImageMeta, getCurrentImage = _b.getCurrentImage, setFullScreen = _b.setFullScreen, onClose = _b.onClose;
+    var toggleFullScreenButton = React.useRef(null);
+    var closeFullScreen = function () {
         setFullScreen(false);
     };
-    const openFullScreen = () => {
+    var openFullScreen = function () {
         setFullScreen(true);
     };
-    useEffect(() => {
+    React.useEffect(function () {
         if (toggleFullScreenButton.current) {
             toggleFullScreenButton.current.focus();
         }
     }, [fullScreen]);
-    const currentImage = getCurrentImage();
-    const canDownload = currentImage?.canDownload ?? true;
-    const filename = currentImage?.name || '';
-    const description = singleSlide || !images.length
+    var currentImage = getCurrentImage();
+    var canDownload = (_a = currentImage === null || currentImage === void 0 ? void 0 : currentImage.canDownload) !== null && _a !== void 0 ? _a : true;
+    var filename = (currentImage === null || currentImage === void 0 ? void 0 : currentImage.name) || '';
+    var description = singleSlide || !images.length
         ? ''
-        : `Изображение ${currentSlideIndex + 1} из ${images.length}`;
-    const meta = getCurrentImageMeta();
-    const showFullScreenButton = !isSmallImage(meta) && !meta?.broken;
-    const showDownloadButton = !meta?.broken && canDownload;
-    const renderToggleFullScreenButton = () => fullScreen ? (React.createElement(ExitFullscreen, { onClick: closeFullScreen, buttonRef: toggleFullScreenButton, dataTestId: TestIds.EXIT_FULLSCREEN_BUTTON })) : (React.createElement(Fullscreen, { onClick: openFullScreen, buttonRef: toggleFullScreenButton, dataTestId: TestIds.FULLSCREEN_BUTTON }));
-    return (React.createElement("div", { className: styles.header },
-        React.createElement(HeaderInfoBlock, { filename: filename, description: description }),
-        React.createElement("div", { className: styles.buttons },
+        : "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 ".concat(currentSlideIndex + 1, " \u0438\u0437 ").concat(images.length);
+    var meta = getCurrentImageMeta();
+    var showFullScreenButton = !utils_utils.isSmallImage(meta) && !(meta === null || meta === void 0 ? void 0 : meta.broken);
+    var showDownloadButton = !(meta === null || meta === void 0 ? void 0 : meta.broken) && canDownload;
+    var renderToggleFullScreenButton = function () {
+        return fullScreen ? (React__default.default.createElement(components_header_buttons.ExitFullscreen, { onClick: closeFullScreen, buttonRef: toggleFullScreenButton, dataTestId: utils_constants.TestIds.EXIT_FULLSCREEN_BUTTON })) : (React__default.default.createElement(components_header_buttons.Fullscreen, { onClick: openFullScreen, buttonRef: toggleFullScreenButton, dataTestId: utils_constants.TestIds.FULLSCREEN_BUTTON }));
+    };
+    return (React__default.default.createElement("div", { className: styles__default.default.header },
+        React__default.default.createElement(components_headerInfoBlock_Component.HeaderInfoBlock, { filename: filename, description: description }),
+        React__default.default.createElement("div", { className: styles__default.default.buttons },
             showFullScreenButton && renderToggleFullScreenButton(),
-            showDownloadButton && (React.createElement(Download, { href: currentImage?.src, download: currentImage?.name, dataTestId: TestIds.DOWNLOAD_BUTTON })),
-            React.createElement(Exit, { onClick: onClose, dataTestId: TestIds.CLOSE_BUTTON }))));
+            showDownloadButton && (React__default.default.createElement(components_header_buttons.Download, { href: currentImage === null || currentImage === void 0 ? void 0 : currentImage.src, download: currentImage === null || currentImage === void 0 ? void 0 : currentImage.name, dataTestId: utils_constants.TestIds.DOWNLOAD_BUTTON })),
+            React__default.default.createElement(components_header_buttons.Exit, { onClick: onClose, dataTestId: utils_constants.TestIds.CLOSE_BUTTON }))));
 };
 
-export { Header };
+exports.Header = Header;

package/gallery/cssm/components/header/buttons.js

@@ -1,18 +1,35 @@
-import React from 'react';
-import { IconButton } from '../../../../icon-button/cssm';
-import { TooltipDesktop } from '../../../../tooltip/cssm/desktop';
-import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Fullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
-const ExitFullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
-const Download = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
-const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsIconButton = require('../../../../icon-button/cssm');
+var desktop = require('../../../../tooltip/cssm/desktop');
+var ArrowsInwardMIcon = require('@alfalab/icons-glyph/ArrowsInwardMIcon');
+var ArrowsOutwardMIcon = require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
+var styles = require('./index.module.css');
 
-export { Download, Exit, ExitFullscreen, Fullscreen };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Fullscreen = function (_a) {
+    var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
+    return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
+        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon.ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles__default.default.iconButton }))));
+};
+var ExitFullscreen = function (_a) {
+    var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
+    return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
+        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon.ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles__default.default.iconButton }))));
+};
+var Download = function (props) { return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
+    React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: PointerDownMIcon.PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles__default.default.iconButton })))); };
+var Exit = function (props) { return (React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles__default.default.iconButton }))); };
+
+exports.Download = Download;
+exports.Exit = Exit;
+exports.ExitFullscreen = ExitFullscreen;
+exports.Fullscreen = Fullscreen;