@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.37

package/src/components/List/tests/List.conformance.test.jsx

@@ -1,18 +1,17 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'vitest-axe';
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
-import { List, ListItem } from '../';
+import { List, ListItem } from "../";
 
 const items = [
-  'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  'Praesent commodo cursus magna, vel scelerisque nisl consectetur et.',
+  "Cras justo odio, dapibus ac facilisis in, egestas eget quam.",
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
 ];
 
 const defaultExample = (
   <List>
-    {items.map(item => (
+    {items.map((item) => (
       <ListItem key={item}>{item}</ListItem>
     ))}
   </List>
@@ -20,8 +19,8 @@ const defaultExample = (
 
 const clickableAnchor = (
   <List>
-    {items.map(item => (
-      <ListItem key={item} controlProps={{ href: '#' }}>
+    {items.map((item) => (
+      <ListItem key={item} controlProps={{ href: "#" }}>
         {item}
       </ListItem>
     ))}
@@ -30,7 +29,7 @@ const clickableAnchor = (
 
 const clickableButton = (
   <List>
-    {items.map(item => (
+    {items.map((item) => (
       <ListItem key={item} controlProps={{}}>
         {item}
       </ListItem>
@@ -38,32 +37,32 @@ const clickableButton = (
   </List>
 );
 
-it('default is valid html', () => {
+it("default is valid html", () => {
   const { container } = render(defaultExample);
   expect(container).toHTMLValidate();
 });
 
-it('default is accessible', async () => {
+it("default is accessible", async () => {
   const { container } = render(defaultExample);
   expect(await axe(container)).toHaveNoViolations();
 });
 
-it('clickableAnchor is valid html', () => {
+it("clickableAnchor is valid html", () => {
   const { container } = render(clickableAnchor);
   expect(container).toHTMLValidate();
 });
 
-it('clickableAnchor is accessible', async () => {
+it("clickableAnchor is accessible", async () => {
   const { container } = render(clickableAnchor);
   expect(await axe(container)).toHaveNoViolations();
 });
 
-it('clickableButton is valid html', () => {
+it("clickableButton is valid html", () => {
   const { container } = render(clickableButton);
   expect(container).toHTMLValidate();
 });
 
-it('clickableButton is accessible', async () => {
+it("clickableButton is accessible", async () => {
   const { container } = render(clickableButton);
   expect(await axe(container)).toHaveNoViolations();
 });

package/src/components/List/tests/ListItem.unit.test.jsx

@@ -1,104 +1,103 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { ListItem } from '../ListItem';
+import { ListItem } from "../ListItem";
 
 const controlProps1 = {
-  className: 'test-class',
+  className: "test-class",
 };
 const controlProps2 = {
-  className: 'test-class',
-  href: 'test',
+  className: "test-class",
+  href: "test",
 };
 
 //conditional wrapper component inside ListItem requires child to render
-describe('rendering ListItem', () => {
-  describe('initial state', () => {
-    it('has default class list__item', () => {
+describe("rendering ListItem", () => {
+  describe("initial state", () => {
+    it("has default class list__item", () => {
       const { getByTestId } = render(
-        <ListItem data-testid="test-id">test-child</ListItem>
+        <ListItem data-testid="test-id">test-child</ListItem>,
       );
-      expect(getByTestId('test-id')).toHaveClass('list__item');
+      expect(getByTestId("test-id")).toHaveClass("list__item");
     });
   });
-  describe('passed props', () => {
-    it('renders children', () => {
+  describe("passed props", () => {
+    it("renders children", () => {
       const { getByText } = render(
-        <ListItem data-testid="test-id">test-child</ListItem>
+        <ListItem data-testid="test-id">test-child</ListItem>,
       );
-      expect(getByText('test-child')).toBeInTheDocument();
+      expect(getByText("test-child")).toBeInTheDocument();
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = render(
         <ListItem data-testid="test-id" className="test-class">
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByTestId('test-id')).toHaveClass('list__item');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
+      expect(getByTestId("test-id")).toHaveClass("list__item");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    it('renders button with type button when controlProps without href is passed', () => {
+    it("renders button with type button when controlProps without href is passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button').getAttribute('type')).toBe('button');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button").getAttribute("type")).toBe("button");
     });
-    it('renders button with class from controlProps.className when passed', () => {
+    it("renders button with class from controlProps.className when passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button')).toHaveClass('test-class');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button")).toHaveClass("test-class");
     });
-    it('renders button with class from controlProps.className when passed', () => {
+    it("renders button with class from controlProps.className when passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button')).toHaveClass('test-class');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button")).toHaveClass("test-class");
     });
-    it('children are rendered inside button element when button is rendered', () => {
+    it("children are rendered inside button element when button is rendered", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button').textContent).toBe('test-child');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button").textContent).toBe("test-child");
     });
-    it('renders anchor without type when controlProps with href is passed', () => {
+    it("renders anchor without type when controlProps with href is passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps2}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link').getAttribute('type')).toBeFalsy();
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link").getAttribute("type")).toBeFalsy();
     });
-    it('renders anchor with class from controlProps.className when passed', () => {
+    it("renders anchor with class from controlProps.className when passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps2}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link')).toHaveClass('test-class');
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link")).toHaveClass("test-class");
     });
-    it('children are rendered inside anchor element when anchor is rendered', () => {
+    it("children are rendered inside anchor element when anchor is rendered", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps2}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link').textContent).toBe('test-child');
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link").textContent).toBe("test-child");
     });
   });
 });

package/src/components/Loader/Loader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
+import React, { ReactNode } from "react";
 
 import { useStatic } from "../../utils/hooks";
 

package/src/components/Loader/tests/Loader.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Loader } from "../";
 

package/src/components/Megamenu/MegaMenuIcon.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export interface MegaMenuIconProps extends React.SVGAttributes<SVGSVGElement> {
   /** Accessible label for the icon. */

package/src/components/Megamenu/Megamenu.static.ts

@@ -1,12 +1,12 @@
 import {
-  CLASS_NAV_BUTTON,
-  CLASS_NAV_DROPDOWN,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_ICON,
+  CLASS_HIDE_LG_UP,
   CLASS_MOBILE,
   CLASS_MOBILE_OVERLAY,
-  CLASS_HIDE_LG_UP,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
   CLASS_OVERLAY,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_ICON,
 } from "./constants";
 
 interface MegamenuConfig {

package/src/components/Megamenu/Megamenu.tsx

@@ -1,18 +1,29 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
-import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
-import { MegamenuSearchContent } from "./MegamenuSearchContent";
-import { getMegamenuIds } from "./ids";
+import React from "react";
 import {
+  CLASS_ACCORDION,
+  CLASS_ACCORDION_BODY,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_HEADER,
+  CLASS_ACCORDION_ICON,
+  CLASS_ACCORDION_ITEM,
+  CLASS_ACCORDION_TITLE,
+  CLASS_CAPTION,
+  CLASS_CARD,
   CLASS_CONTAINER,
   CLASS_GRID,
-  CLASS_HIDE_MD_DOWN,
   CLASS_HIDE_LG_UP,
+  CLASS_HIDE_MD_DOWN,
   CLASS_MAIN,
+  CLASS_MOBILE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
   CLASS_NAV_BUTTON,
   CLASS_NAV_BUTTON_INDICATOR,
+  CLASS_NAV_CART_ICON,
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
   CLASS_NAV_ITEM,
@@ -20,39 +31,27 @@ import {
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_LOCALE,
-  CLASS_NAV_MOBILE_LOCALE,
   CLASS_NAV_LOGO,
+  CLASS_NAV_MOBILE_LOCALE,
+  CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_ROOT,
-  CLASS_SUBNAV,
-  CLASS_SUBNAV_ITEM,
-  CLASS_TEXT_LARGE,
-  CLASS_CAPTION,
-  CLASS_TOP,
-  CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
   CLASS_NAV_VERTICAL,
   CLASS_OVERLAY,
-  CLASS_ACCORDION,
-  CLASS_ACCORDION_ITEM,
-  CLASS_ACCORDION_HEADER,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_TITLE,
-  CLASS_ACCORDION_ICON,
-  CLASS_ACCORDION_BODY,
-  CLASS_CARD,
-  CLASS_NAV_SPACE_SMALL,
-  CLASS_NAV_CART_ICON,
+  CLASS_ROOT,
   CLASS_SPACER,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
   CLASS_TAG,
   CLASS_TAG_ORANGE,
   CLASS_TAG_SMALL,
+  CLASS_TEXT_LARGE,
+  CLASS_TOP,
 } from "./constants";
-import React from "react";
 import { MenuItem, MenuSection, menuSections } from "./data";
+import { getMegamenuIds } from "./ids";
+import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 
 export type MegamenuProps = {
   className?: string;

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -1,45 +1,43 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
-import { MegamenuSearchContent } from "./MegamenuSearchContent";
-import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
-import { getMegamenuIds } from "./ids";
 import {
+  CLASS_CAPTION,
   CLASS_CONTAINER,
-  CLASS_HIDE_MD_DOWN,
   CLASS_HIDE_LG_UP,
+  CLASS_HIDE_MD_DOWN,
+  CLASS_LIST_GAP_SMALL,
+  CLASS_LIST_INLINE,
   CLASS_MAIN,
+  CLASS_MOBILE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
   CLASS_NAV_BUTTON,
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
   CLASS_NAV_ICON_NO_GAP_MD_DOWN,
   CLASS_NAV_ITEM,
-  CLASS_NAV_VERTICAL,
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_NO_LINE,
   CLASS_NAV_LOGO,
+  CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_ROOT,
-  CLASS_SUBNAV,
-  CLASS_SUBNAV_ITEM,
-  CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
+  CLASS_NAV_VERTICAL,
   CLASS_OVERLAY,
-  CLASS_NAV_SPACE_SMALL,
+  CLASS_ROOT,
   CLASS_SPACER_SMALL,
-  CLASS_LIST_INLINE,
-  CLASS_LIST_GAP_SMALL,
+  CLASS_SUBNAV,
   CLASS_TAG,
   CLASS_TAG_LARGE,
   CLASS_TAG_TRANSPARENT,
-  CLASS_CAPTION,
 } from "./constants";
+import { getMegamenuIds } from "./ids";
+import { MegamenuIcon } from "./MegaMenuIcon";
 import { MegamenuProps } from "./Megamenu";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 
 const blogCategories = [
   "Kategória 1",

package/src/components/Megamenu/MegamenuSearchContent.tsx

@@ -1,15 +1,15 @@
 import cx from "classnames";
 
 import {
+  CLASS_CAPTION,
   CLASS_INPUT,
   CLASS_INPUT_WRAPPER,
-  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
   CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
   CLASS_LIST_INLINE,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
   CLASS_TAG,
-  CLASS_CAPTION,
 } from "./constants";
 import { searchResultItems, searchTerms } from "./data";
 

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -1,29 +1,28 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
 import {
   CLASS_CONTAINER,
   CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
   CLASS_MOBILE_ACCOUNT,
   CLASS_MOBILE_ACCOUNT_AVATAR,
-  CLASS_MOBILE_ACCOUNT_NAME,
-  CLASS_MOBILE_ACCOUNT_PHONE,
-  CLASS_MOBILE_ACCOUNT_LOGOUT,
   CLASS_MOBILE_ACCOUNT_CTA,
-  CLASS_MOBILE_ACCOUNT_LINKS,
   CLASS_MOBILE_ACCOUNT_LINK,
+  CLASS_MOBILE_ACCOUNT_LINKS,
+  CLASS_MOBILE_ACCOUNT_LOGOUT,
+  CLASS_MOBILE_ACCOUNT_NAME,
+  CLASS_MOBILE_ACCOUNT_PHONE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_ITEM,
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_NAV_ITEM,
-  CLASS_NAV_BUTTON,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
 } from "./constants";
+import { MegamenuIcon } from "./MegaMenuIcon";
 
 type MyOrangeMobilePanelProps = {
   titleId: string;

package/src/components/Megamenu/index.ts

@@ -1,3 +1,3 @@
+export { MegamenuIcon } from "./MegaMenuIcon";
 export { Megamenu } from "./Megamenu";
 export { MegamenuBlog } from "./MegamenuBlog";
-export { MegamenuIcon } from "./MegaMenuIcon";

package/src/components/Megamenu/static.ts

@@ -1,8 +1,8 @@
-import Megamenu from "./Megamenu.static";
 import moduleFactory, {
-  initModulesWithin,
   destroyModulesWithin,
+  initModulesWithin,
 } from "../../scripts/lib/moduleFactory";
+import Megamenu from "./Megamenu.static";
 import "./styles/style.scss";
 
 // Module configuration for Megamenu

package/src/components/Modal/Modal.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import React, { useEffect, useMemo } from "react";
 import cx from "classnames";
-
-import { useStatic } from "../../utils/hooks";
+import React, { useEffect, useMemo } from "react";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { useStatic } from "../../utils/hooks";
 import { Button } from "../Button";
 import { Buttons } from "../Buttons";
 import ModalStatic from "./Modal.static";
+import { ModalBody } from "./ModalBody";
 import { ModalCloseButton } from "./ModalCloseButton";
 import { ModalTitle } from "./ModalTitle";
-import { ModalBody } from "./ModalBody";
 
 const CLASS_ROOT = "modal";
 

package/src/components/Modal/ModalBody.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export const modalBodyColors = [
   "background-primary",

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "../Button";
-import { IconButtonProps } from "../Button/IconButton";
 import { ButtonType } from "../Button/Button";
+import { IconButtonProps } from "../Button/IconButton";
 
 interface ExtendedIconButtonProps extends IconButtonProps {
   type?: ButtonType;

package/src/components/Modal/ModalProductFooter.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface ModalProductFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;

package/src/components/Modal/ModalProductHeader.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;

package/src/components/Modal/index.ts

@@ -1,6 +1,6 @@
 export { Modal } from "./Modal";
 export { ModalBody } from "./ModalBody";
-export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
-export { ModalProductHeader } from "./ModalProductHeader";
 export { ModalProductFooter } from "./ModalProductFooter";
+export { ModalProductHeader } from "./ModalProductHeader";
+export { ModalTitle } from "./ModalTitle";

package/src/components/Modal/tests/Modal.conformance.test.jsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { fireEvent, render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
 import { Button } from "../../Button";
 import { Modal, ModalProductHeader } from "../";

package/src/components/Modal/tests/Modal.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { Modal } from "../Modal";

package/src/components/Modal/tests/ModalProductHeader.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { ModalProductHeader } from "../ModalProductHeader";

package/src/components/Modal/tests/ModalTitle.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { ModalTitle } from "../ModalTitle";

package/src/components/Pagination/Pagination.tsx

@@ -1,9 +1,8 @@
-import React, { useMemo } from "react";
 import cx from "classnames";
-
+import React, { useMemo } from "react";
+import { getItemState } from "./helpers";
 import { PaginationItem } from "./PaginationItem";
 import Separator from "./Separator";
-import { getItemState } from "./helpers";
 
 interface PaginationItemProps {
   /** Page link href */

package/src/components/Pagination/PaginationItem.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Icon } from "../Icon/index";
 

package/src/components/Pagination/Separator.tsx

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes } from "react";
 import cx from "classnames";
+import { HTMLAttributes } from "react";
 
 const CLASS_ROOT = "pagination__separator";
 

package/src/components/Pagination/helpers.ts

@@ -22,7 +22,12 @@ interface ItemState {
   showSeparator: boolean;
 }
 
-export function getItemState({ activeIndex, items, isCompact, index }: GetItemStateParams): ItemState {
+export function getItemState({
+  activeIndex,
+  items,
+  isCompact,
+  index,
+}: GetItemStateParams): ItemState {
   const isFirst = index === 0;
   const isSecond = index === 1;
   const isCurrent = index === activeIndex;