hero-slider - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

dist/components/AutoplayButton/index.js

@@ -5,7 +5,8 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index_module = require('./index.module.css.js');
 var Autoplay = require('../../modules/Autoplay.js');
 var IntervalTimer = require('../../modules/IntervalTimer.js');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index_module = require('./index.module.css.js');
 
@@ -53,5 +54,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     }, [isPausedByUser, autoplayState]);
-    return (React__default["default"].createElement("button", { className: composeCssClasses.composeCssClasses('hero-slider-autoplay-button', index_module["default"].Button, className), onClick: onClickHandler, style: Object.assign(Object.assign({}, position), style) },
-        React__default["default"].createElement("svg", { fill: "currentColor", height: "100%", width: "100%", viewBox: "0 0 36 36" },
-            React__default["default"].createElement("path", { d: AutoplaySvg.getPath(buttonType) }))));
+    return (jsxRuntime.jsx("button", Object.assign({ "data-testid": "hero-slider-autoplay-button", className: composeCssClasses.composeCssClasses('hero-slider-autoplay-button', index_module["default"].Button, className), onClick: onClickHandler, style: Object.assign(Object.assign({}, position), style) }, { children: jsxRuntime.jsx("svg", Object.assign({ fill: "currentColor", height: "100%", width: "100%", viewBox: "0 0 36 36" }, { children: jsxRuntime.jsx("path", { d: AutoplaySvg.getPath(buttonType) }) })) })));
 }
@@ -58,0 +57,0 @@ AutoplayButton.displayName =

dist/components/Buttons/index.js

@@ -5,35 +5,20 @@ 'use strict';
 
-var React = require('react');
-var index_module = require('./index.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Accessibility = require('../../modules/Accessibility.js');
+var Controller = require('../../modules/Controller.js');
 var Manager = require('../../modules/Manager.js');
-var Accessability = require('../../modules/Accessability.js');
-var Controller = require('../../modules/Controller.js');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index_module = require('./index.module.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function ArrowSvg() {
-    return (React__default["default"].createElement("svg", { width: "60px", height: "60px", strokeWidth: "5", version: "1.1", viewBox: "0 0 129 129" },
-        React__default["default"].createElement("g", { fill: "currentColor" },
-            React__default["default"].createElement("path", { d: "m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z" }))));
+    return (jsxRuntime.jsx("svg", Object.assign({ width: "60px", height: "60px", strokeWidth: "5", version: "1.1", viewBox: "0 0 129 129" }, { children: jsxRuntime.jsx("g", Object.assign({ fill: "currentColor" }, { children: jsxRuntime.jsx("path", { d: "m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z" }) })) })));
 }
 function Buttons() {
     const { state: { isMobile } } = Manager.useManager();
-    const { orientation } = Accessability.useAccessability();
+    const { orientation } = Accessibility.useAccessibility();
     const { goToPreviousSlide, goToNextSlide } = Controller.useController();
     if (isMobile)
         return null;
-    const isHorizontal = orientation === Accessability.AccessabilityOrientation.HORIZONTAL;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-previous', index_module["default"].Previous, index_module["default"].Wrapper, { className: index_module["default"].Horizontal, useIf: isHorizontal }, { className: index_module["default"].Vertical, useIf: !isHorizontal }) },
-            React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-previous-container', index_module["default"].Container) },
-                React__default["default"].createElement("button", { className: composeCssClasses.composeCssClasses('hero-slider-previous-button', index_module["default"].Button), onClick: goToPreviousSlide },
-                    React__default["default"].createElement(ArrowSvg, null)))),
-        React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-next', index_module["default"].Next, index_module["default"].Wrapper, { className: index_module["default"].Horizontal, useIf: isHorizontal }, { className: index_module["default"].Vertical, useIf: !isHorizontal }) },
-            React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-next-container', index_module["default"].Container) },
-                React__default["default"].createElement("button", { className: composeCssClasses.composeCssClasses('hero-slider-next-button', index_module["default"].Button), onClick: goToNextSlide },
-                    React__default["default"].createElement(ArrowSvg, null))))));
+    const isHorizontal = orientation === Accessibility.AccessibilityOrientation.HORIZONTAL;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ "data-testid": "hero-slider-previous", className: composeCssClasses.composeCssClasses('hero-slider-previous', index_module["default"].Previous, index_module["default"].Wrapper, { className: index_module["default"].Horizontal, useIf: isHorizontal }, { className: index_module["default"].Vertical, useIf: !isHorizontal }) }, { children: jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-previous-container', index_module["default"].Container) }, { children: jsxRuntime.jsx("button", Object.assign({ "data-testid": "hero-slider-previous-button", className: composeCssClasses.composeCssClasses('hero-slider-previous-button', index_module["default"].Button), onClick: goToPreviousSlide }, { children: jsxRuntime.jsx(ArrowSvg, {}) })) })) })), jsxRuntime.jsx("div", Object.assign({ "data-testid": "hero-slider-next", className: composeCssClasses.composeCssClasses('hero-slider-next', index_module["default"].Next, index_module["default"].Wrapper, { className: index_module["default"].Horizontal, useIf: isHorizontal }, { className: index_module["default"].Vertical, useIf: !isHorizontal }) }, { children: jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-next-container', index_module["default"].Container) }, { children: jsxRuntime.jsx("button", Object.assign({ "data-testid": "hero-slider-next-button", className: composeCssClasses.composeCssClasses('hero-slider-next-button', index_module["default"].Button), onClick: goToNextSlide }, { children: jsxRuntime.jsx(ArrowSvg, {}) })) })) }))] }));
 }
@@ -40,0 +25,0 @@

dist/components/ButtonsNav/index.js

@@ -5,14 +5,10 @@ 'use strict';
 
-var React = require('react');
-var index_module = require('./index.module.css.js');
-var index = require('../Nav/index.js');
-var Manager = require('../../modules/Manager.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Controller = require('../../modules/Controller.js');
 var Layout = require('../../modules/Layout.js');
+var Manager = require('../../modules/Manager.js');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index = require('../Nav/index.js');
+var index_module = require('./index.module.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 function ButtonsNav(props) {
@@ -38,3 +34,3 @@ const { color, activeColor, backgroundColor, position = {
             return null;
-        return React__default["default"].createElement(index.Nav, Object.assign({}, props));
+        return jsxRuntime.jsx(index.Nav, Object.assign({}, props));
     }
@@ -53,12 +49,9 @@ function renderButtons() {
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-            React__default["default"].createElement("li", { key: number, className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button', index_module["default"].Button, {
+            jsxRuntime.jsx("li", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button', index_module["default"].Button, {
                     className: index_module["default"].Active,
                     useIf: activeSlide === number
-                }), onClick: () => onClickHandler(number) },
-                React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button-description', index_module["default"].Description) },
-                    React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button-text', index_module["default"].Text) }, description))));
+                }), onClick: () => onClickHandler(number) }, { children: jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button-description', index_module["default"].Description) }, { children: jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button-text', index_module["default"].Text) }, { children: description })) })) }), number));
         });
     }
-    return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) },
-        React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-container', index_module["default"].Container), style: {
+    return (jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, { children: jsxRuntime.jsxs("ul", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-container', index_module["default"].Container), style: {
                 justifyContent: justifyContent || 'center',
@@ -73,7 +66,5 @@ /**
                     (position.top !== undefined ? 'flex-start' : 'flex-end')
-            } },
-            renderButtons(),
-            extraButton && (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-extra-button', index_module["default"].ExtraButton), style: {
-                    order: isExtraButtonRight ? 1 : 0
-                } }, extraButton)))));
+            } }, { children: [renderButtons(), extraButton && (jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-extra-button', index_module["default"].ExtraButton), style: {
+                        order: isExtraButtonRight ? 1 : 0
+                    } }, { children: extraButton })))] })) })));
 }
@@ -80,0 +71,0 @@ ButtonsNav.displayName = 'hero-slider/buttons-nav';

dist/components/MenuNav/index.js

@@ -5,14 +5,10 @@ 'use strict';
 
-var React = require('react');
-var index_module = require('./index.module.css.js');
-var index = require('../Nav/index.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Controller = require('../../modules/Controller.js');
 var Layout = require('../../modules/Layout.js');
 var Manager = require('../../modules/Manager.js');
-var Controller = require('../../modules/Controller.js');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index = require('../Nav/index.js');
+var index_module = require('./index.module.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 function MenuNav(props) {
@@ -30,3 +26,3 @@ const { color, activeColor, position = {
             return null;
-        return React__default["default"].createElement(index.Nav, Object.assign({}, props));
+        return jsxRuntime.jsx(index.Nav, Object.assign({}, props));
     }
@@ -45,11 +41,6 @@ function renderButtons() {
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-            React__default["default"].createElement("li", { key: index, className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button', index_module["default"].Button, {
+            jsxRuntime.jsx("li", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button', index_module["default"].Button, {
                     className: index_module["default"].Active,
                     useIf: activeSlide === number
-                }), onClick: () => onClickHandler(number) },
-                React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-description', index_module["default"].Description) },
-                    React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-number', index_module["default"].Number) },
-                        number,
-                        React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-square', index_module["default"].Square) })),
-                    React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-text', index_module["default"].Text) }, description))));
+                }), onClick: () => onClickHandler(number) }, { children: jsxRuntime.jsxs("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-description', index_module["default"].Description) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-number', index_module["default"].Number) }, { children: [number, jsxRuntime.jsx("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-square', index_module["default"].Square) })] })), jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-text', index_module["default"].Text) }, { children: description }))] })) }), index));
         });
@@ -64,20 +55,15 @@ }
     };
-    return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign(Object.assign({}, position), CSSVariables), { justifyContent }) },
-        extraButton && (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-extra', index_module["default"].Extra), style: {
-                order: isExtraButtonRight ? 1 : 0
-            } },
-            React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-extra-button', index_module["default"].ExtraButton), style: {
-                    borderLeft: isExtraButtonRight
-                        ? '1px solid var(--nav-color, rgba(215, 225, 235, 0.6))'
-                        : undefined,
-                    borderRight: !isExtraButtonRight
-                        ? '1px solid var(--nav-color, rgba(215, 225, 235, 0.6))'
-                        : undefined
-                } }, extraButton))),
-        React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-container', index_module["default"].Container) },
-            renderButtons(),
-            React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-bar', index_module["default"].Bar), style: {
-                    width: `${100 / totalSlides}%`,
-                    transform: `translate3d(${activeSlide - 1}00%, 0, 0)`
-                } }))));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign(Object.assign({}, position), CSSVariables), { justifyContent }) }, { children: [extraButton && (jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-extra', index_module["default"].Extra), style: {
+                    order: isExtraButtonRight ? 1 : 0
+                } }, { children: jsxRuntime.jsx("span", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-extra-button', index_module["default"].ExtraButton), style: {
+                        borderLeft: isExtraButtonRight
+                            ? '1px solid var(--nav-color, rgba(215, 225, 235, 0.6))'
+                            : undefined,
+                        borderRight: !isExtraButtonRight
+                            ? '1px solid var(--nav-color, rgba(215, 225, 235, 0.6))'
+                            : undefined
+                    } }, { children: extraButton })) }))), jsxRuntime.jsxs("ul", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-container', index_module["default"].Container) }, { children: [renderButtons(), jsxRuntime.jsx("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-bar', index_module["default"].Bar), style: {
+                            width: `${100 / totalSlides}%`,
+                            transform: `translate3d(${activeSlide - 1}00%, 0, 0)`
+                        } })] }))] })));
 }
@@ -84,0 +70,0 @@ MenuNav.displayName = 'hero-slider/menu-nav';

dist/components/Nav/index.js

@@ -5,12 +5,8 @@ 'use strict';
 
-var React = require('react');
-var index_module = require('./index.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Controller = require('../../modules/Controller.js');
 var Manager = require('../../modules/Manager.js');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index_module = require('./index.module.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 function Nav({ color, activeColor, position = {
@@ -34,3 +30,3 @@ bottom: '1.5rem',
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-            React__default["default"].createElement("li", { key: number, className: composeCssClasses.composeCssClasses('hero-slider-nav-button', index_module["default"].Button, { className: index_module["default"].Active, useIf: activeSlide === number }), onClick: () => onClickHandler(number) }));
+            jsxRuntime.jsx("li", { className: composeCssClasses.composeCssClasses('hero-slider-nav-button', index_module["default"].Button, { className: index_module["default"].Active, useIf: activeSlide === number }), onClick: () => onClickHandler(number) }, number));
         });
@@ -45,3 +41,3 @@ }
     };
-    return (React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, renderButtons()));
+    return (jsxRuntime.jsx("ul", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, { children: renderButtons() })));
 }
@@ -48,0 +44,0 @@ Nav.displayName = 'hero-slider/nav';

dist/components/Overlay/index.js

@@ -5,12 +5,8 @@ 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
 var index_module = require('./index.module.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 function Overlay(props) {
-    return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-overlay', index_module["default"].Container) }, props.children));
+    return (jsxRuntime.jsx("div", Object.assign({ "data-testid": "hero-slider-overlay", className: composeCssClasses.composeCssClasses('hero-slider-overlay', index_module["default"].Container) }, { children: props.children })));
 }
@@ -17,0 +13,0 @@ Overlay.displayName = 'hero-slider/overlay';

dist/components/SideNav/index.js

@@ -5,12 +5,8 @@ 'use strict';
 
-var React = require('react');
-var index_module = require('./index.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Controller = require('../../modules/Controller.js');
 var Manager = require('../../modules/Manager.js');
 var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index_module = require('./index.module.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 function SideNav({ color, activeColor, left, right, isPositionedRight = true, position = {
@@ -36,3 +32,3 @@ bottom: undefined,
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-            React__default["default"].createElement("li", { key: number, className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button', index_module["default"].Button, {
+            jsxRuntime.jsxs("li", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button', index_module["default"].Button, {
                     className: index_module["default"].Active,
@@ -42,5 +38,3 @@ useIf: activeSlide === number
                     justifyContent: isPositionedRight ? 'flex-end' : 'flex-start'
-                } },
-                React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button-line', index_module["default"].Line) }),
-                React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button-number', index_module["default"].Number) }, number.toLocaleString())));
+                } }, { children: [jsxRuntime.jsx("span", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button-line', index_module["default"].Line) }), jsxRuntime.jsx("span", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button-number', index_module["default"].Number) }, { children: number.toLocaleString() }))] }), number));
         });
@@ -55,3 +49,3 @@ }
     };
-    return (React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, renderButtons()));
+    return (jsxRuntime.jsx("ul", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-side-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, { children: renderButtons() })));
 }
@@ -58,0 +52,0 @@ SideNav.displayName = 'hero-slider/nav';

dist/components/Slide/Background/index.d.ts

@@ -0,3 +1,3 @@
+import type CSS from 'csstype';
 import React from 'react';
-import type CSS from 'csstype';
 /**
@@ -4,0 +4,0 @@ * Type definition for `BackgroundProps.backgroundAnimation`.

dist/components/Slide/Background/index.js

@@ -6,5 +6,6 @@ 'use strict';
 var tslib_es6 = require('../../../node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_rollup@2.79.1_tslib@2.4.0_typescript@4.8.3/node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var composeCssClasses = require('../../../utils/composeCssClasses.js');
 var index_module = require('./index.module.css.js');
-var composeCssClasses = require('../../../utils/composeCssClasses.js');
 
@@ -54,4 +55,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     }
-    return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-background', backgroundImageClassName, index_module["default"].Background), style: background },
-        React__default["default"].createElement("img", { className: composeCssClasses.composeCssClasses('hero-slider-slide-background-image', backgroundImageClassName, index_module["default"].Image, ...imageBackgroundClassNames), sizes: backgroundImageSizes, srcSet: backgroundImageSrcSet, src: backgroundImageSrc, alt: backgroundImageAlt, style: Object.assign({ mixBlendMode: backgroundImageBlendMode }, backgroundImageStyle), onLoad: onLoadHandler, loading: shouldLazyLoad ? 'lazy' : 'eager' })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-slide-background', backgroundImageClassName, index_module["default"].Background), style: background }, { children: jsxRuntime.jsx("img", { className: composeCssClasses.composeCssClasses('hero-slider-slide-background-image', backgroundImageClassName, index_module["default"].Image, ...imageBackgroundClassNames), sizes: backgroundImageSizes, srcSet: backgroundImageSrcSet, src: backgroundImageSrc, alt: backgroundImageAlt, style: Object.assign({ mixBlendMode: backgroundImageBlendMode }, backgroundImageStyle), onLoad: onLoadHandler, loading: shouldLazyLoad ? 'lazy' : 'eager' }) })));
 }
@@ -58,0 +58,0 @@

dist/components/Slide/index.js

@@ -5,11 +5,12 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var Animations = require('../../modules/Animations.js');
+var ConsoleLogger = require('../../modules/ConsoleLogger.js');
+var Controller = require('../../modules/Controller.js');
+var Manager = require('../../modules/Manager.js');
+var composeCssClasses = require('../../utils/composeCssClasses.js');
+var index = require('./Background/index.js');
 var index_module = require('./index.module.css.js');
-var index = require('./Background/index.js');
 var index$1 = require('./Mask/index.js');
-var Manager = require('../../modules/Manager.js');
-var Controller = require('../../modules/Controller.js');
-var Animations = require('../../modules/Animations.js');
-var composeCssClasses = require('../../utils/composeCssClasses.js');
-var ConsoleLogger = require('../../modules/ConsoleLogger.js');
 
@@ -24,3 +25,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     const { getSlide, registerSlide, removeSlide } = Manager.useManager();
-    const { state: { activeSlide, isSliding, prevActiveSlide, slidingDirection } } = Controller.useController(); // controller
+    const { state: { activeSlide, isSliding, prevActiveSlide, slidingDirection } } = Controller.useController();
     const { getSlidingAnimationCssClass } = Animations.useAnimations();
@@ -61,7 +62,9 @@ const slideRef = React__default["default"].useRef(null);
     };
-    return (React__default["default"].createElement("div", { ref: slideRef, className: classNames, style: Object.assign(Object.assign({}, style), CSSVariables) },
-        React__default["default"].createElement(index["default"], Object.assign({}, background, { onLoad: onBackgroundLoad })),
-        React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-wrapper', index_module["default"].Wrapper) },
-            shouldRenderMask ? (React__default["default"].createElement(index$1["default"], { background: background, isActive: isActive })) : null,
-            React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-container', index_module["default"].Container, { className: index_module["default"].Active, useIf: isActive && !isSliding }) }, children))));
+    const isHidden = isSliding
+        ? slide.number !== activeSlide && slide.number !== prevActiveSlide
+        : slide.number !== activeSlide;
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": `hero-slider-slide-${slide.number}`, ref: slideRef, hidden: isHidden, className: classNames, style: Object.assign(Object.assign({}, style), CSSVariables) }, { children: [jsxRuntime.jsx(index["default"], Object.assign({}, background, { onLoad: onBackgroundLoad })), jsxRuntime.jsxs("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-slide-wrapper', index_module["default"].Wrapper) }, { children: [shouldRenderMask ? (jsxRuntime.jsx(index$1["default"], { background: background, isActive: isActive })) : null, jsxRuntime.jsx("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-slide-container', index_module["default"].Container, {
+                            className: index_module["default"].Active,
+                            useIf: isActive && !isSliding
+                        }) }, { children: children }))] }))] })));
 }
@@ -68,0 +71,0 @@ Slide.displayName = 'hero-slider/slide';

dist/components/Slide/Mask/index.js

@@ -5,6 +5,7 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index_module = require('./index.module.css.js');
 var Controller = require('../../../modules/Controller.js');
 var composeCssClasses = require('../../../utils/composeCssClasses.js');
+var index_module = require('./index.module.css.js');
 
@@ -27,5 +28,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     const isLoaded = className === index_module["default"].Loaded;
-    return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-mask', index_module["default"].Mask, { className: index_module["default"].Active, useIf: isActive && !isSliding }, { className: index_module["default"].Inactive, useIf: !(isActive && !isSliding) }) },
-        React__default["default"].createElement("img", { alt: (background === null || background === void 0 ? void 0 : background.backgroundImageAlt) || '', className: index_module["default"].Loader, onLoad: onLoadHandler, src: background === null || background === void 0 ? void 0 : background.backgroundImageSrc, loading: (background === null || background === void 0 ? void 0 : background.shouldLazyLoad) ? 'lazy' : 'eager' }),
-        isLoaded && (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-mask-inner', className, index_module["default"].Inner, { className: index_module["default"].Sliding, useIf: isSliding }), style: style }))));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: composeCssClasses.composeCssClasses('hero-slider-slide-mask', index_module["default"].Mask, { className: index_module["default"].Active, useIf: isActive && !isSliding }, { className: index_module["default"].Inactive, useIf: !(isActive && !isSliding) }) }, { children: [jsxRuntime.jsx("img", { alt: (background === null || background === void 0 ? void 0 : background.backgroundImageAlt) || '', className: index_module["default"].Loader, onLoad: onLoadHandler, src: background === null || background === void 0 ? void 0 : background.backgroundImageSrc, loading: (background === null || background === void 0 ? void 0 : background.shouldLazyLoad) ? 'lazy' : 'eager' }), isLoaded && (jsxRuntime.jsx("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-mask-inner', className, index_module["default"].Inner, { className: index_module["default"].Sliding, useIf: isSliding }), style: style }))] })));
 }
@@ -32,0 +31,0 @@

dist/HeroSlider.d.ts

 import React from 'react';
-import { AccessabilityProps } from './modules/Accessability';
+import { AccessibilityProps } from './modules/Accessibility';
 import { AnimationsProps } from './modules/Animations';
@@ -33,3 +33,3 @@ import { AutoplayProps } from './modules/Autoplay';
     controller?: ControllerProps;
-    accessability?: AccessabilityProps;
+    accessibility?: AccessibilityProps;
     animations?: AnimationsProps;
@@ -36,0 +36,0 @@ autoplay?: AutoplayProps;

dist/HeroSlider.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var index = require('./components/Buttons/index.js');
 var HeroSlider_module = require('./HeroSlider.module.css.js');
-var Accessability = require('./modules/Accessability.js');
+var Accessibility = require('./modules/Accessibility.js');
 var Animations = require('./modules/Animations.js');
@@ -20,10 +20,6 @@ var Autoplay = require('./modules/Autoplay.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const logger = ConsoleLogger["default"].new();
 function Orchestrator({ className, width = '100%', height = '100vh', style, children }) {
     logger.info('[Orchestrator] rerender');
-    const { shouldDisplayButtons } = Accessability.useAccessability();
+    const { shouldDisplayButtons } = Accessibility.useAccessibility();
     const { sliderFadeInDuration, navbarFadeInDuration, navbarFadeInDelay } = Animations.useAnimations();
@@ -34,3 +30,3 @@ const { state: layout } = Layout.useLayout();
     const { debounce } = Autoplay.useAutoplay();
-    const { onTouchStartHandler, onTouchMoveHandler, onTouchEndHandler } = Accessability.useAccessability();
+    const { onTouchStartHandler, onTouchMoveHandler, onTouchEndHandler } = Accessibility.useAccessibility();
     const { elementObservedRef } = IntersectionObserver.useIntersectionObserver();
@@ -40,3 +36,3 @@ /**
      */
-    const CSSVariables = {
+    const cssVariables = {
         '--sliding-duration': `${slidingDuration}ms`,
@@ -59,18 +55,7 @@ '--sliding-delay': `${slidingDelay}ms`,
     };
-    return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-root', className), ref: elementObservedRef },
-        React__default["default"].createElement("div", { ref: layout.slider, className: composeCssClasses.composeCssClasses('hero-slider-wrapper', HeroSlider_module["default"].Wrapper), onTouchStart: onTouchStartHandler, onTouchMove: onTouchMoveHandler, onTouchEnd: onTouchEndHandler, onMouseMoveCapture: debounce, style: Object.assign(Object.assign(Object.assign({}, CSSVariables), style), { width,
-                height }) },
-            children,
-            shouldDisplayButtons && React__default["default"].createElement(index["default"], null))));
+    return (jsxRuntime.jsx("div", Object.assign({ "data-testid": "hero-slider", className: composeCssClasses.composeCssClasses('hero-slider', className), ref: elementObservedRef }, { children: jsxRuntime.jsxs("div", Object.assign({ "data-testid": "hero-slider-wrapper", ref: layout.slider, className: composeCssClasses.composeCssClasses('hero-slider-wrapper', HeroSlider_module["default"].Wrapper), onTouchStart: onTouchStartHandler, onTouchMove: onTouchMoveHandler, onTouchEnd: onTouchEndHandler, onMouseMoveCapture: debounce, style: Object.assign(Object.assign(Object.assign({}, cssVariables), style), { width,
+                height }) }, { children: [children, shouldDisplayButtons && jsxRuntime.jsx(index["default"], {})] })) })));
 }
 function HeroSlider(props) {
-    return (React__default["default"].createElement(Layout.LayoutProvider, null,
-        React__default["default"].createElement(Manager.ManagerProvider, { manager: props.manager },
-            React__default["default"].createElement(Settings.SettingsProvider, { settings: props.settings },
-                React__default["default"].createElement(Controller.ControllerProvider, { controller: props.controller },
-                    React__default["default"].createElement(Accessability.AccessabilityProvider, { accessability: props.accessability },
-                        React__default["default"].createElement(Animations.AnimationsProvider, { animations: props.animations },
-                            React__default["default"].createElement(IntersectionObserver.IntersectionObserverProvider, null,
-                                React__default["default"].createElement(Autoplay.AutoplayProvider, { autoplay: props.autoplay },
-                                    React__default["default"].createElement(Orchestrator, { className: props.className, width: props.width, height: props.height, style: props.style }, props.children))))))))));
+    return (jsxRuntime.jsx(Layout.LayoutProvider, { children: jsxRuntime.jsx(Manager.ManagerProvider, Object.assign({ manager: props.manager }, { children: jsxRuntime.jsx(Settings.SettingsProvider, Object.assign({ settings: props.settings }, { children: jsxRuntime.jsx(Controller.ControllerProvider, Object.assign({ controller: props.controller }, { children: jsxRuntime.jsx(Accessibility.AccessibilityProvider, Object.assign({ accessibility: props.accessibility }, { children: jsxRuntime.jsx(Animations.AnimationsProvider, Object.assign({ animations: props.animations }, { children: jsxRuntime.jsx(IntersectionObserver.IntersectionObserverProvider, { children: jsxRuntime.jsx(Autoplay.AutoplayProvider, Object.assign({ autoplay: props.autoplay }, { children: jsxRuntime.jsx(Orchestrator, Object.assign({ className: props.className, width: props.width, height: props.height, style: props.style }, { children: props.children })) })) }) })) })) })) })) })) }));
 }
@@ -77,0 +62,0 @@

dist/modules/Animations.js

@@ -5,5 +5,6 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var HeroSlider_module = require('../HeroSlider.module.css.js');
-var Accessability = require('./Accessability.js');
+var Accessibility = require('./Accessibility.js');
 
@@ -39,3 +40,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     var _a, _b, _c, _d;
-    const { orientation } = Accessability.useAccessability();
+    const { orientation } = Accessibility.useAccessibility();
     const params = {
@@ -62,7 +63,7 @@ slidingAnimation: (animations === null || animations === void 0 ? void 0 : animations.slidingAnimation) || defaultProps.slidingAnimation,
                     if (direction === 'forward')
-                        return orientation === Accessability.AccessabilityOrientation.HORIZONTAL
+                        return orientation === Accessibility.AccessibilityOrientation.HORIZONTAL
                             ? SlidingAnimation.RIGHT_TO_LEFT
                             : SlidingAnimation.BOTTOM_TO_TOP;
                     else
-                        return orientation === Accessability.AccessabilityOrientation.HORIZONTAL
+                        return orientation === Accessibility.AccessibilityOrientation.HORIZONTAL
                             ? SlidingAnimation.LEFT_TO_RIGHT
@@ -86,3 +87,3 @@ : SlidingAnimation.TOP_TO_BOTTOM;
     };
-    return (React__default["default"].createElement(AnimationsStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(AnimationsStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
@@ -89,0 +90,0 @@ function useAnimations() {

dist/modules/Autoplay.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -157,3 +158,3 @@ var ConsoleLogger = require('./ConsoleLogger.js');
     };
-    return (React__default["default"].createElement(AutoplayStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(AutoplayStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
@@ -160,0 +161,0 @@ function useAutoplay() {

dist/modules/Controller.d.ts

@@ -46,3 +46,3 @@ /// <reference types="node" />
     /**
-     * Callback executed after the sliding ends similar to `onBeforeSliding`.
+     * Callback executed once the sliding starts similar to `onBeforeSliding`.
      * @param activeSlide
@@ -49,0 +49,0 @@ * @param prevSlide

dist/modules/Controller.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -141,3 +142,3 @@ var Manager = require('./Manager.js');
             payload: setTimeout(() => {
-                if (controller === null || controller === void 0 ? void 0 : controller.onSliding)
+                if (state.isSliding && (controller === null || controller === void 0 ? void 0 : controller.onSliding))
                     controller.onSliding(state.activeSlide, state.prevActiveSlide);
@@ -150,3 +151,3 @@ }, params.slidingDelay)
                 dispatch({ type: 'finish-sliding' });
-                if (controller === null || controller === void 0 ? void 0 : controller.onAfterSliding)
+                if (!state.isSliding && (controller === null || controller === void 0 ? void 0 : controller.onAfterSliding))
                     controller.onAfterSliding(state.activeSlide, state.prevActiveSlide);
@@ -178,3 +179,3 @@ }, getSlidingCycleDuration())
     };
-    return (React__default["default"].createElement(ControllerStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(ControllerStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
@@ -181,0 +182,0 @@ function useController() {

dist/modules/IntersectionObserver.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -22,3 +23,3 @@ var reactIntersectionObserver_modern = require('../node_modules/.pnpm/react-intersection-observer@9.4.0_react@18.2.0/node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js');
     };
-    return (React__default["default"].createElement(IntersectionObserverStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(IntersectionObserverStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
@@ -25,0 +26,0 @@ function useIntersectionObserver() {

dist/modules/Layout.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -55,9 +56,8 @@
     const value = { state, mobileThreshold };
-    return (React__default["default"].createElement(LayoutStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(LayoutStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
 function useLayout() {
     const context = React__default["default"].useContext(LayoutStateContext);
-    if (context === undefined) {
+    if (context === undefined)
         throw new Error('useLayout must be used within a LayoutProvider');
-    }
     return context;
@@ -64,0 +64,0 @@ }

dist/modules/Manager.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -102,3 +103,3 @@
     const value = { state, getSlide, registerSlide, removeSlide };
-    return (React__default["default"].createElement(ManagerStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(ManagerStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
@@ -105,0 +106,0 @@ function useManager() {

dist/modules/Settings.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -38,3 +39,3 @@ var ConsoleLogger = require('./ConsoleLogger.js');
     const value = params;
-    return (React__default["default"].createElement(SettingsStateContext.Provider, { value: value }, children));
+    return (jsxRuntime.jsx(SettingsStateContext.Provider, Object.assign({ value: value }, { children: children })));
 }
@@ -41,0 +42,0 @@ function useSettings() {

package.json

 {
   "name": "hero-slider",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "private": false,
@@ -66,2 +66,3 @@ "description": "This package contains multiple components with a fair range of options to help developers quickly set up a hero slider.",
     "@types/react-lazyload": "3.2.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "csstype": "3.1.1",
@@ -71,2 +72,3 @@ "gh-pages": "4.0.0",
     "jest-environment-jsdom": "~29.5.0",
+    "jsdom-testing-mocks": "^1.9.0",
     "react": "18.2.0",
@@ -73,0 +75,0 @@ "react-dom": "18.2.0",

No alert changes

Improved metrics

Total package byte prevSize

352174

increased by0.57%

Worsened metrics

Dev dependency count

35

increased by6.06%

Lines of code

2848

decreased by-0.84%

No dependency changes