@via-profit/ui-kit 0.6.0 → 0.7.0

package/Swiper/SwiperSlide.js

@@ -54,6 +54,9 @@ const StyledSlide = styled_1.default.div `
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: calc(100% / ${({ $slidesPerView }) => $slidesPerView});
+  /* The size of the slide is set by slidesPerView, not by its content: the track positions rely on it */
+  min-width: 0;
+  min-height: 0;
   height: 100%;
   display: flex;
   align-items: center;

package/Swiper/SwiperSlidesRenderer.d.ts

@@ -14,6 +14,10 @@ export type SwiperSlidesRendererProps = {
     readonly realSlidesCount: number;
     readonly getSlideRealIndex: (index: number) => number;
     readonly slideLabel: (index: number, total: number) => string;
+    /**
+     * The index of the slide in the DOM shown by the fade effect, `null` for the slide effect
+     */
+    readonly activeDomIndex?: number | null;
 };
 declare const _default: React.NamedExoticComponent<SwiperSlidesRendererProps>;
 export default _default;

package/Swiper/SwiperSlidesRenderer.js

@@ -37,7 +37,7 @@ const React = __importStar(require("react"));
 // React 19 supports the boolean `inert`, React 18 passes only the string value to the DOM
 const INERT_VALUE = parseInt(React.version, 10) >= 19 ? true : '';
 const SwiperSlidesRenderer = props => {
-    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex, slideLabel, firstVisibleIndex = realIndex, visibleCount = slidesPerView, } = props;
+    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex, slideLabel, firstVisibleIndex = realIndex, visibleCount = Math.ceil(slidesPerView), activeDomIndex = null, } = props;
     const visibilityMap = React.useMemo(() => {
         const map = new Map();
         if (realSlidesCount <= visibleCount) {
@@ -80,6 +80,7 @@ const SwiperSlidesRenderer = props => {
             'aria-hidden': isClone || !isVisible ? true : undefined,
             inert: isVisible && !isClone ? undefined : INERT_VALUE,
             'data-index': i,
+            'data-active': activeDomIndex === null ? undefined : activeDomIndex === i,
             'data-real-index': slideRealIndex,
         });
     })));

package/Swiper/SwiperTrack.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 export type SwiperTrackProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode;
+    /**
+     * The position of the track in slides. It is fractional with a fractional `slidesPerView`
+     * and with the centered slides
+     */
     readonly index: number;
     readonly offset: number;
     readonly dragging: boolean;
@@ -10,9 +14,19 @@ export type SwiperTrackProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     readonly momentum?: boolean;
     readonly slidesPerView: number;
+    readonly vertical?: boolean;
+    readonly effect?: 'slide' | 'fade';
+    /**
+     * The duration of the slide change in milliseconds
+     */
+    readonly speed?: number;
 };
 export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode;
+    /**
+     * The position of the track in slides. It is fractional with a fractional `slidesPerView`
+     * and with the centered slides
+     */
     readonly index: number;
     readonly offset: number;
     readonly dragging: boolean;
@@ -22,5 +36,11 @@ export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttr
      */
     readonly momentum?: boolean;
     readonly slidesPerView: number;
+    readonly vertical?: boolean;
+    readonly effect?: "slide" | "fade";
+    /**
+     * The duration of the slide change in milliseconds
+     */
+    readonly speed?: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SwiperTrack;

package/Swiper/SwiperTrack.js

@@ -50,21 +50,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwiperTrack = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
 const StyledTrack = styled_1.default.div `
   display: flex;
+  flex-direction: ${({ $vertical }) => ($vertical ? 'column' : 'row')};
   height: 100%;
-  transition: ${({ $dragging, $disableAnimation, $momentum }) => {
+  transition: ${({ $dragging, $disableAnimation, $momentum, $speed }) => {
     if ($dragging || $disableAnimation) {
         return 'none';
     }
-    return $momentum ? 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)' : 'transform 0.3s ease';
+    return $momentum
+        ? 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)'
+        : `transform ${$speed}ms ease`;
 }};
   will-change: transform;
-  transform: ${({ $index, $offset, $slidesPerView }) => `translateX(calc(${-(($index * 100) / $slidesPerView)}% + ${$offset}px))`};
+  transform: ${({ $index, $offset, $slidesPerView, $vertical }) => `${$vertical ? 'translateY' : 'translateX'}(calc(${-(($index * 100) / $slidesPerView)}% + ${$offset}px))`};
+
+  ${({ $fade, $speed }) => $fade &&
+    (0, react_1.css) `
+      /* The slides lie on top of each other, the current one is opaque */
+      display: grid;
+      transform: none;
+      will-change: auto;
+
+      & > * {
+        grid-area: 1 / 1;
+        opacity: 0;
+        transition: opacity ${$speed}ms ease;
+      }
+
+      & > [data-active='true'] {
+        opacity: 1;
+        z-index: 1;
+      }
+    `}
 `;
 exports.SwiperTrack = React.forwardRef((props, ref) => {
-    const { children, index, offset, dragging, disableAnimation, momentum, slidesPerView } = props, restProps = __rest(props, ["children", "index", "offset", "dragging", "disableAnimation", "momentum", "slidesPerView"]);
-    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset, "$disableAnimation": disableAnimation, "$momentum": momentum, "$slidesPerView": slidesPerView }, restProps, { ref: ref }), children));
+    const { children, index, offset, dragging, disableAnimation, momentum, slidesPerView, vertical = false, effect = 'slide', speed = 300 } = props, restProps = __rest(props, ["children", "index", "offset", "dragging", "disableAnimation", "momentum", "slidesPerView", "vertical", "effect", "speed"]);
+    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset, "$disableAnimation": disableAnimation, "$momentum": momentum, "$slidesPerView": slidesPerView, "$vertical": vertical, "$fade": effect === 'fade', "$speed": speed }, restProps, { ref: ref }), children));
 });
 exports.SwiperTrack.displayName = 'SwiperTrack';
 exports.default = exports.SwiperTrack;

package/Swiper/SwiperWrapper.d.ts

@@ -2,15 +2,18 @@ import * as React from 'react';
 export type SwiperWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly draggable: boolean;
     readonly slidesPerView: number;
+    readonly vertical?: boolean;
 };
 export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     $draggable: boolean;
+    $vertical: boolean;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const SwiperWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly draggable: boolean;
     readonly slidesPerView: number;
+    readonly vertical?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SwiperWrapper;

package/Swiper/SwiperWrapper.js

@@ -58,9 +58,10 @@ exports.StyledWrapper = styled_1.default.div `
   overflow: hidden;
   user-select: none;
 
-  ${({ $draggable }) => $draggable &&
+  /* The page still scrolls across the swiper on the touch screens */
+  ${({ $draggable, $vertical }) => $draggable &&
     (0, react_1.css) `
-      touch-action: pan-y;
+      touch-action: ${$vertical ? 'pan-x' : 'pan-y'};
     `};
 
   /* Inside: the container clips the outer outline */
@@ -73,8 +74,8 @@ exports.StyledWrapper = styled_1.default.div `
 const SwiperWrapper = React.forwardRef((props, ref) => {
     // slidesPerView is for the overrides only, it is not a DOM attribute
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, draggable, slidesPerView } = props, restProps = __rest(props, ["children", "draggable", "slidesPerView"]);
-    return (React.createElement(exports.StyledWrapper, Object.assign({}, restProps, { ref: ref, "$draggable": draggable }), children));
+    const { children, draggable, slidesPerView, vertical = false } = props, restProps = __rest(props, ["children", "draggable", "slidesPerView", "vertical"]);
+    return (React.createElement(exports.StyledWrapper, Object.assign({}, restProps, { ref: ref, "$draggable": draggable, "$vertical": vertical }), children));
 });
 SwiperWrapper.displayName = 'SwiperWrapper';
 exports.default = SwiperWrapper;