@itcase/ui 1.9.21 → 1.9.22

package/dist/cjs/components/Modal.js

@@ -100,7 +100,7 @@ const modalAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderPrimary',
-        closeIconAppearance: 'surfacePrimary solid circular',
+        closeIconAppearance: 'surfacePrimary ghost circular',
     },
 };
 
@@ -137,7 +137,7 @@ const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);

package/dist/cjs/components/Swiper.js

@@ -81,13 +81,13 @@ function Swiper(props) {
     const { alignClass, alignDirectionClass, fillClass, shapeClass } = propsGenerator;
     // @ts-expect-error
     const { styles: style } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), style: style, children: [(title || (prevButton && nextButton)) && (jsxRuntime.jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter, prevButton && nextButton && (jsxRuntime.jsxs("div", { className: "swiper-block__navigation", children: [jsxRuntime.jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsxRuntime.jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] }))] })), jsxRuntime.jsx(react.Swiper, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), style: style, children: [title && (jsxRuntime.jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter] })), prevButton && nextButton && (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsxRuntime.jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] })), jsxRuntime.jsx(react.Swiper, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
                     minRatio: minZoom,
                     maxRatio: maxZoom,
                     enabled: isZoomEnabled,
                     toggle: true,
                 }, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, children: children ||
-                    items?.map((item, i) => (jsxRuntime.jsx(react.SwiperSlide, { className: clsx('swiper-block__item', isZoomEnabled && 'swiper-block__item_zooming', swiperSlideClass, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), children: isZoomEnabled ? (jsxRuntime.jsx("div", { className: "swiper-zoom-container", children: item })) : (item) }, `swiper-slide_${i}`))) }), isShowOriginalLink && (jsxRuntime.jsx(Group.Group, { width: "fill", fill: "surfacePrimary", padding: "1m 0", children: jsxRuntime.jsx(Text.Text, { size: "m", textColor: "surfaceTextPrimary", onClick: onClickShowOriginalButton, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B" }) }))] }));
+                    items?.map((item, i) => (jsxRuntime.jsx(react.SwiperSlide, { className: clsx('swiper-block__item', isZoomEnabled && 'swiper-block__item_zooming', swiperSlideClass, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), children: isZoomEnabled ? (jsxRuntime.jsx("div", { className: "swiper-zoom-container", children: item })) : (item) }, `swiper-slide_${i}`))) }), isShowOriginalLink && (jsxRuntime.jsx(Group.Group, { width: "fill", fill: "surfacePrimary", padding: "1m 0", children: jsxRuntime.jsx(Text.Text, { size: "s", textColor: "surfaceTextPrimary", textColorHover: "surfaceTextQuaternary", onClick: onClickShowOriginalButton, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B" }) }))] }));
 }
 // https://github.com/nolimits4web/swiper/issues/3855#issuecomment-1050694342
 const useSwiperRef = () => {

package/dist/components/Modal.js

@@ -98,7 +98,7 @@ const modalAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderPrimary',
-        closeIconAppearance: 'surfacePrimary solid circular',
+        closeIconAppearance: 'surfacePrimary ghost circular',
     },
 };
 
@@ -135,7 +135,7 @@ const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = useState(null);
     const [isOpen, setIsOpen] = useState(initialIsOpen);

package/dist/components/Swiper.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useCallback, useImperativeHandle, useEffect, useState } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { G as Group } from '../Group_es_BwTj-yH-.js';
@@ -79,13 +79,13 @@ function Swiper(props) {
     const { alignClass, alignDirectionClass, fillClass, shapeClass } = propsGenerator;
     // @ts-expect-error
     const { styles: style } = useStyles(props);
-    return (jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), style: style, children: [(title || (prevButton && nextButton)) && (jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsx(Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter, prevButton && nextButton && (jsxs("div", { className: "swiper-block__navigation", children: [jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] }))] })), jsx(Swiper$1, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
+    return (jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), style: style, children: [title && (jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsx(Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter] })), prevButton && nextButton && (jsxs(React.Fragment, { children: [jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] })), jsx(Swiper$1, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
                     minRatio: minZoom,
                     maxRatio: maxZoom,
                     enabled: isZoomEnabled,
                     toggle: true,
                 }, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, children: children ||
-                    items?.map((item, i) => (jsx(SwiperSlide, { className: clsx('swiper-block__item', isZoomEnabled && 'swiper-block__item_zooming', swiperSlideClass, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), children: isZoomEnabled ? (jsx("div", { className: "swiper-zoom-container", children: item })) : (item) }, `swiper-slide_${i}`))) }), isShowOriginalLink && (jsx(Group, { width: "fill", fill: "surfacePrimary", padding: "1m 0", children: jsx(Text, { size: "m", textColor: "surfaceTextPrimary", onClick: onClickShowOriginalButton, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B" }) }))] }));
+                    items?.map((item, i) => (jsx(SwiperSlide, { className: clsx('swiper-block__item', isZoomEnabled && 'swiper-block__item_zooming', swiperSlideClass, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), children: isZoomEnabled ? (jsx("div", { className: "swiper-zoom-container", children: item })) : (item) }, `swiper-slide_${i}`))) }), isShowOriginalLink && (jsx(Group, { width: "fill", fill: "surfacePrimary", padding: "1m 0", children: jsx(Text, { size: "s", textColor: "surfaceTextPrimary", textColorHover: "surfaceTextQuaternary", onClick: onClickShowOriginalButton, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B" }) }))] }));
 }
 // https://github.com/nolimits4web/swiper/issues/3855#issuecomment-1050694342
 const useSwiperRef = () => {

package/dist/css/styles/bundles.css

@@ -98906,6 +98906,12 @@ div.swiper-block__item {
   &_type_center {
     height: auto !important;
   }
+  &_zooming {
+    cursor: zoom-in;
+    &.swiper-slide-zoomed {
+      cursor: grab;
+    }
+  }
 }
 .swiper-block {
   &&_type_auto {
@@ -98953,15 +98959,28 @@ div.swiper-block {
       justify-content: space-between;
     }
   }
+  &__prev {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    cursor: pointer;
+    transform: translateY(-50%);
+    z-index: 100;
+  }
+  &__next {
+    position: absolute;
+    right: 0;
+    cursor: pointer;
+    top: 50%;
+    z-index: 100;
+    transform: translateY(-50%);
+  }
 }
 .swiper-zoom-container {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.swiper-slide-zoomed {
-  cursor: grab;
-}
 div.swiper-pagination {
   display: flex;
   &-horizontal {
@@ -98994,7 +99013,7 @@ div.swiper-pagination {
       &::after {
         width: 10px;
         height: 10px;
-        background: #fff;
+        background: #000;
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.21",
+  "version": "1.9.22",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",