@onepercentio/one-ui 0.6.2 → 0.6.3

package/dist/components/Header/Header.test.js

@@ -1,100 +1,100 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const Hook = __importStar(require("../../context/OneUIProvider"));
-const Header_1 = __importDefault(require("./Header"));
-jest.mock("../../context/OneUIProvider");
-const MockedHook = Hook;
-MockedHook.setupMock({
-    component: { header: { LogoImage: () => react_1.default.createElement("div", { "data-testid": "logo-img" }) } },
-});
-function renderScreen(props) {
-    return (0, react_2.render)(react_1.default.createElement(Header_1.default, Object.assign({}, props)));
-}
-it("Should at least render :)", () => {
-    renderScreen({ moreOptions: [], options: [] });
-});
-it.each([
-    [true, "/some/path/profile.png"],
-    [true, undefined],
-    [false, undefined],
-])("Should display the profile data correctly 'when there is a user' = %s, 'the profile picture is' = %s and", (shouldHaveABasicUser, profileUrl) => {
-    const wrapper = renderScreen({
-        user: shouldHaveABasicUser
-            ? {
-                name: "Mocked user",
-                profilePicture: profileUrl,
-            }
-            : undefined,
-        moreOptions: [],
-        options: [],
-    });
-    const el = wrapper.queryByTestId("profile-container");
-    if (shouldHaveABasicUser)
-        expect(wrapper.container.textContent).toContain("Mocked user");
-    if (!shouldHaveABasicUser) {
-        expect(el).toBeNull();
-    }
-    else if (profileUrl) {
-        expect(el === null || el === void 0 ? void 0 : el.tagName).toBe("IMG");
-        expect(el === null || el === void 0 ? void 0 : el.getAttribute("src")).toBe(profileUrl);
-    }
-    else {
-        expect(el === null || el === void 0 ? void 0 : el.tagName).toBe("DIV");
-        expect(el === null || el === void 0 ? void 0 : el.textContent).toBe("MU");
-    }
-});
-it("Should trigger the option click when interacted", () => {
-    const cb = jest.fn();
-    const wrapper = renderScreen({
-        options: [
-            {
-                label: "One option",
-                onClick: cb,
-            },
-        ],
-        moreOptions: [],
-    });
-    expect(cb).toHaveBeenCalledTimes(0);
-    wrapper.getByTestId("option-0").click();
-    expect(cb).toHaveBeenCalledTimes(1);
-});
-it.each([true, false])("Should show more options only when provided = %s", (providedMoreOptions) => {
-    const wrapper = renderScreen({
-        options: [],
-        moreOptions: providedMoreOptions ? [] : undefined,
-    });
-    const el = wrapper.queryByTestId("more-options-container");
-    if (providedMoreOptions)
-        expect(el).not.toBeNull();
-    else
-        expect(el).toBeNull();
-});
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Hook = __importStar(require("../../context/OneUIProvider"));
+const Header_1 = __importDefault(require("./Header"));
+jest.mock("../../context/OneUIProvider");
+const MockedHook = Hook;
+MockedHook.setupMock({
+    component: { header: { LogoImage: () => react_1.default.createElement("div", { "data-testid": "logo-img" }) } },
+});
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(Header_1.default, Object.assign({}, props)));
+}
+it("Should at least render :)", () => {
+    renderScreen({ moreOptions: [], options: [] });
+});
+it.each([
+    [true, "/some/path/profile.png"],
+    [true, undefined],
+    [false, undefined],
+])("Should display the profile data correctly 'when there is a user' = %s, 'the profile picture is' = %s and", (shouldHaveABasicUser, profileUrl) => {
+    const wrapper = renderScreen({
+        user: shouldHaveABasicUser
+            ? {
+                name: "Mocked user",
+                profilePicture: profileUrl,
+            }
+            : undefined,
+        moreOptions: [],
+        options: [],
+    });
+    const el = wrapper.queryByTestId("profile-container");
+    if (shouldHaveABasicUser)
+        expect(wrapper.container.textContent).toContain("Mocked user");
+    if (!shouldHaveABasicUser) {
+        expect(el).toBeNull();
+    }
+    else if (profileUrl) {
+        expect(el === null || el === void 0 ? void 0 : el.tagName).toBe("IMG");
+        expect(el === null || el === void 0 ? void 0 : el.getAttribute("src")).toBe(profileUrl);
+    }
+    else {
+        expect(el === null || el === void 0 ? void 0 : el.tagName).toBe("DIV");
+        expect(el === null || el === void 0 ? void 0 : el.textContent).toBe("MU");
+    }
+});
+it("Should trigger the option click when interacted", () => {
+    const cb = jest.fn();
+    const wrapper = renderScreen({
+        options: [
+            {
+                label: "One option",
+                onClick: cb,
+            },
+        ],
+        moreOptions: [],
+    });
+    expect(cb).toHaveBeenCalledTimes(0);
+    wrapper.getByTestId("option-0").click();
+    expect(cb).toHaveBeenCalledTimes(1);
+});
+it.each([true, false])("Should show more options only when provided = %s", (providedMoreOptions) => {
+    const wrapper = renderScreen({
+        options: [],
+        moreOptions: providedMoreOptions ? [] : undefined,
+    });
+    const el = wrapper.queryByTestId("more-options-container");
+    if (providedMoreOptions)
+        expect(el).not.toBeNull();
+    else
+        expect(el).toBeNull();
+});
 //# sourceMappingURL=Header.test.js.map

package/dist/components/Header/index.d.ts

@@ -1 +1 @@
-export { default } from './Header';
+export { default } from './Header';

package/dist/components/Header/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Header_1 = require("./Header");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Header_1 = require("./Header");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/HeaderCloseBtn/HeaderCloseBtn.d.ts

@@ -1,8 +1,8 @@
-/**
- * A simple close button implemented with pure HTML and CSS
- **/
-export default function HeaderButton({ mode, hidden, onClick, }: {
-    mode: "back" | "close";
-    hidden: boolean;
-    onClick: () => void;
-}): JSX.Element;
+/**
+ * A simple close button implemented with pure HTML and CSS
+ **/
+export default function HeaderButton({ mode, hidden, onClick, }: {
+    mode: "back" | "close";
+    hidden: boolean;
+    onClick: () => void;
+}): JSX.Element;

package/dist/components/HeaderCloseBtn/HeaderCloseBtn.js

@@ -1,17 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const HeaderCloseBtn_module_scss_1 = __importDefault(require("./HeaderCloseBtn.module.scss"));
-/**
- * A simple close button implemented with pure HTML and CSS
- **/
-function HeaderButton({ mode, hidden, onClick, }) {
-    return (react_1.default.createElement("div", { "data-testid": "header-control-back", className: `${HeaderCloseBtn_module_scss_1.default.headerButton} ${HeaderCloseBtn_module_scss_1.default[mode]} ${hidden ? HeaderCloseBtn_module_scss_1.default.pointOfNoReturn : ""}`, onClick: onClick },
-        react_1.default.createElement("div", null),
-        react_1.default.createElement("div", null)));
-}
-exports.default = HeaderButton;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const HeaderCloseBtn_module_scss_1 = __importDefault(require("./HeaderCloseBtn.module.scss"));
+/**
+ * A simple close button implemented with pure HTML and CSS
+ **/
+function HeaderButton({ mode, hidden, onClick, }) {
+    return (react_1.default.createElement("div", { "data-testid": "header-control-back", className: `${HeaderCloseBtn_module_scss_1.default.headerButton} ${HeaderCloseBtn_module_scss_1.default[mode]} ${hidden ? HeaderCloseBtn_module_scss_1.default.pointOfNoReturn : ""}`, onClick: onClick },
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null)));
+}
+exports.default = HeaderButton;
 //# sourceMappingURL=HeaderCloseBtn.js.map

package/dist/components/HeaderCloseBtn/HeaderCloseBtn.stories.d.ts

@@ -1,14 +1,14 @@
-import HeaderCloseBtn from "./HeaderCloseBtn";
-declare const _default: {
-    component: typeof HeaderCloseBtn;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        mode: "close" | "back";
-        hidden: boolean;
-        onClick: () => void;
-    }>;
-};
+import HeaderCloseBtn from "./HeaderCloseBtn";
+declare const _default: {
+    component: typeof HeaderCloseBtn;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        mode: "close" | "back";
+        hidden: boolean;
+        onClick: () => void;
+    }>;
+};

package/dist/components/HeaderCloseBtn/HeaderCloseBtn.stories.js

@@ -1,16 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialImplementation = void 0;
-const react_1 = __importDefault(require("react"));
-const HeaderCloseBtn_1 = __importDefault(require("./HeaderCloseBtn"));
-exports.default = {
-    component: HeaderCloseBtn_1.default,
-    title: "Header Close Btn"
-};
-const InitialImplementation = (args) => react_1.default.createElement(HeaderCloseBtn_1.default, Object.assign({}, args));
-exports.InitialImplementation = InitialImplementation;
-exports.InitialImplementation.args = {};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const HeaderCloseBtn_1 = __importDefault(require("./HeaderCloseBtn"));
+exports.default = {
+    component: HeaderCloseBtn_1.default,
+    title: "Header Close Btn"
+};
+const InitialImplementation = (args) => react_1.default.createElement(HeaderCloseBtn_1.default, Object.assign({}, args));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {};
 //# sourceMappingURL=HeaderCloseBtn.stories.js.map

package/dist/components/HeaderCloseBtn/index.d.ts

@@ -1 +1 @@
-export { default } from './HeaderCloseBtn';
+export { default } from './HeaderCloseBtn';

package/dist/components/HeaderCloseBtn/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var HeaderCloseBtn_1 = require("./HeaderCloseBtn");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(HeaderCloseBtn_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var HeaderCloseBtn_1 = require("./HeaderCloseBtn");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(HeaderCloseBtn_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/InfinityScroll/InfinityScroll.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-export declare function shouldIncrementPage(howMuchTheParentScrolled: number, prevSectionPosition: number, currSectionPosition: number, nextSectionPosition: number): -1 | 0 | 1;
-export declare function keys(currPage: number): string[];
-declare const _default: React.ForwardRefExoticComponent<{
-    items: (string | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[];
-    pageSize: number;
-    initialPage?: number | undefined;
-    pageClass?: string | undefined;
-    className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+import React from "react";
+export declare function shouldIncrementPage(howMuchTheParentScrolled: number, prevSectionPosition: number, currSectionPosition: number, nextSectionPosition: number): -1 | 0 | 1;
+export declare function keys(currPage: number): string[];
+declare const _default: React.ForwardRefExoticComponent<{
+    items: (string | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[];
+    pageSize: number;
+    initialPage?: number | undefined;
+    pageClass?: string | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/components/InfinityScroll/InfinityScroll.js

@@ -1,112 +1,112 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.keys = exports.shouldIncrementPage = void 0;
-const react_1 = __importStar(require("react"));
-const InfinityScroll_module_scss_1 = __importDefault(require("./InfinityScroll.module.scss"));
-function shouldIncrementPage(howMuchTheParentScrolled, prevSectionPosition, currSectionPosition, nextSectionPosition) {
-    if (howMuchTheParentScrolled === nextSectionPosition)
-        return 1;
-    else if (howMuchTheParentScrolled === prevSectionPosition)
-        return -1;
-    else
-        return 0;
-}
-exports.shouldIncrementPage = shouldIncrementPage;
-function keys(currPage) {
-    return [currPage % 3, (currPage + 1) % 3, (currPage + 2) % 3]
-        .map((a) => `step_${a}`)
-        .reverse();
-}
-exports.keys = keys;
-/**
- * Manages a set of divs that allows the effect of inifinite scrolling between pages
- **/
-function InfinityScroll({ items, pageSize, initialPage = 0, pageClass, className = "", }, ref) {
-    const [currPage, setCurrPage] = (0, react_1.useState)({
-        page: initialPage,
-        offset: 0,
-    });
-    const parentDiv = ref;
-    const prevDiv = (0, react_1.useRef)(null);
-    const currDiv = (0, react_1.useRef)(null);
-    const nextDiv = (0, react_1.useRef)(null);
-    const isCountTheSameOrLowerThanPage = items.length <= pageSize;
-    function getItems(page, offset, _pageSize = pageSize) {
-        let from = page * _pageSize + offset;
-        if (from < 0)
-            from = items.length + from;
-        if (from > items.length)
-            from = from - items.length;
-        const to = from + _pageSize;
-        const slicedItems = items.slice(from, to);
-        if (slicedItems.length < _pageSize && !isCountTheSameOrLowerThanPage) {
-            slicedItems.push(...getItems(0, 0, _pageSize - slicedItems.length));
-        }
-        return slicedItems.map((i, index) => typeof i === "object"
-            ? Object.assign(Object.assign({}, i), { key: index }) : i);
-    }
-    (0, react_1.useEffect)(() => {
-        if (isCountTheSameOrLowerThanPage)
-            return;
-        const viewportWidth = parentDiv.current.clientWidth;
-        const centerScroll = parentDiv.current.scrollWidth / 2;
-        parentDiv.current.scrollTo({
-            left: centerScroll - viewportWidth / 2,
-        });
-    }, [isCountTheSameOrLowerThanPage, currPage.page, currPage.offset]);
-    const [beforeKey, currKey, afterKey] = keys(currPage.page);
-    return (react_1.default.createElement("div", { ref: ref, className: `${InfinityScroll_module_scss_1.default.container} ${className}`, "data-testid": "infinity-parent", onScroll: !isCountTheSameOrLowerThanPage
-            ? () => {
-                const pageToIncrement = shouldIncrementPage(parentDiv.current.scrollLeft, prevDiv.current.offsetLeft, currDiv.current.offsetLeft, nextDiv.current.offsetLeft);
-                if (pageToIncrement) {
-                    setCurrPage((prev) => {
-                        let nextPage = prev.page + pageToIncrement;
-                        if (nextPage < 0) {
-                            nextPage = Math.ceil(items.length / pageSize) - 1;
-                        }
-                        let offset = prev.offset;
-                        let nextIndex = nextPage * pageSize + offset;
-                        if (nextIndex > items.length) {
-                            offset = nextIndex - items.length;
-                            nextPage = 0;
-                        }
-                        return {
-                            page: nextPage,
-                            offset,
-                        };
-                    });
-                }
-            }
-            : undefined },
-        !isCountTheSameOrLowerThanPage && (react_1.default.createElement("div", { key: beforeKey, className: pageClass, "data-testid": "infinity-prev", ref: prevDiv }, getItems(currPage.page - 1, currPage.offset))),
-        react_1.default.createElement("div", { key: currKey, className: pageClass, "data-testid": "infinity-curr", ref: currDiv }, getItems(currPage.page, currPage.offset)),
-        !isCountTheSameOrLowerThanPage && (react_1.default.createElement("div", { key: afterKey, className: pageClass, "data-testid": "infinity-next", ref: nextDiv }, getItems(currPage.page + 1, currPage.offset)))));
-}
-exports.default = (0, react_1.forwardRef)(InfinityScroll);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keys = exports.shouldIncrementPage = void 0;
+const react_1 = __importStar(require("react"));
+const InfinityScroll_module_scss_1 = __importDefault(require("./InfinityScroll.module.scss"));
+function shouldIncrementPage(howMuchTheParentScrolled, prevSectionPosition, currSectionPosition, nextSectionPosition) {
+    if (howMuchTheParentScrolled === nextSectionPosition)
+        return 1;
+    else if (howMuchTheParentScrolled === prevSectionPosition)
+        return -1;
+    else
+        return 0;
+}
+exports.shouldIncrementPage = shouldIncrementPage;
+function keys(currPage) {
+    return [currPage % 3, (currPage + 1) % 3, (currPage + 2) % 3]
+        .map((a) => `step_${a}`)
+        .reverse();
+}
+exports.keys = keys;
+/**
+ * Manages a set of divs that allows the effect of inifinite scrolling between pages
+ **/
+function InfinityScroll({ items, pageSize, initialPage = 0, pageClass, className = "", }, ref) {
+    const [currPage, setCurrPage] = (0, react_1.useState)({
+        page: initialPage,
+        offset: 0,
+    });
+    const parentDiv = ref;
+    const prevDiv = (0, react_1.useRef)(null);
+    const currDiv = (0, react_1.useRef)(null);
+    const nextDiv = (0, react_1.useRef)(null);
+    const isCountTheSameOrLowerThanPage = items.length <= pageSize;
+    function getItems(page, offset, _pageSize = pageSize) {
+        let from = page * _pageSize + offset;
+        if (from < 0)
+            from = items.length + from;
+        if (from > items.length)
+            from = from - items.length;
+        const to = from + _pageSize;
+        const slicedItems = items.slice(from, to);
+        if (slicedItems.length < _pageSize && !isCountTheSameOrLowerThanPage) {
+            slicedItems.push(...getItems(0, 0, _pageSize - slicedItems.length));
+        }
+        return slicedItems.map((i, index) => typeof i === "object"
+            ? Object.assign(Object.assign({}, i), { key: index }) : i);
+    }
+    (0, react_1.useEffect)(() => {
+        if (isCountTheSameOrLowerThanPage)
+            return;
+        const viewportWidth = parentDiv.current.clientWidth;
+        const centerScroll = parentDiv.current.scrollWidth / 2;
+        parentDiv.current.scrollTo({
+            left: centerScroll - viewportWidth / 2,
+        });
+    }, [isCountTheSameOrLowerThanPage, currPage.page, currPage.offset]);
+    const [beforeKey, currKey, afterKey] = keys(currPage.page);
+    return (react_1.default.createElement("div", { ref: ref, className: `${InfinityScroll_module_scss_1.default.container} ${className}`, "data-testid": "infinity-parent", onScroll: !isCountTheSameOrLowerThanPage
+            ? () => {
+                const pageToIncrement = shouldIncrementPage(parentDiv.current.scrollLeft, prevDiv.current.offsetLeft, currDiv.current.offsetLeft, nextDiv.current.offsetLeft);
+                if (pageToIncrement) {
+                    setCurrPage((prev) => {
+                        let nextPage = prev.page + pageToIncrement;
+                        if (nextPage < 0) {
+                            nextPage = Math.ceil(items.length / pageSize) - 1;
+                        }
+                        let offset = prev.offset;
+                        let nextIndex = nextPage * pageSize + offset;
+                        if (nextIndex > items.length) {
+                            offset = nextIndex - items.length;
+                            nextPage = 0;
+                        }
+                        return {
+                            page: nextPage,
+                            offset,
+                        };
+                    });
+                }
+            }
+            : undefined },
+        !isCountTheSameOrLowerThanPage && (react_1.default.createElement("div", { key: beforeKey, className: pageClass, "data-testid": "infinity-prev", ref: prevDiv }, getItems(currPage.page - 1, currPage.offset))),
+        react_1.default.createElement("div", { key: currKey, className: pageClass, "data-testid": "infinity-curr", ref: currDiv }, getItems(currPage.page, currPage.offset)),
+        !isCountTheSameOrLowerThanPage && (react_1.default.createElement("div", { key: afterKey, className: pageClass, "data-testid": "infinity-next", ref: nextDiv }, getItems(currPage.page + 1, currPage.offset)))));
+}
+exports.default = (0, react_1.forwardRef)(InfinityScroll);
 //# sourceMappingURL=InfinityScroll.js.map