feat(ts): convert pagination widget and component (#4765)

Author: shortcuts

src/components/Pagination/Pagination.js

@@ -0,0 +1,174 @@
+/** @jsx h */
+
+import { Component, h } from 'preact';
+import cx from 'classnames';
+
+import PaginationLink from './PaginationLink';
+import { isSpecialClick } from '../../lib/utils';
+import {
+  PaginationCSSClasses,
+  PaginationTemplates,
+} from '../../widgets/pagination/pagination';
+
+export type PaginationComponentCSSClasses = {
+  [TClassName in keyof PaginationCSSClasses]: string;
+};
+
+export type PaginationProps = {
+  createURL(value: number): string;
+  cssClasses: PaginationComponentCSSClasses;
+  currentPage: number;
+  templates: PaginationTemplates;
+  nbPages?: number;
+  pages?: number[];
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  setCurrentPage(value: number): void;
+  showFirst?: boolean;
+  showLast?: boolean;
+  showPrevious?: boolean;
+  showNext?: boolean;
+};
+
+type PageLink = {
+  label: string;
+  ariaLabel: string;
+  pageNumber: number;
+  additionalClassName: string | null;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  createURL(value: number): string;
+};
+
+const defaultProps = {
+  currentPage: 0,
+  nbPages: 0,
+  pages: [],
+};
+
+class Pagination extends Component<PaginationProps> {
+  public static defaultProps = defaultProps;
+
+  private pageLink({
+    label,
+    ariaLabel,
+    pageNumber,
+    additionalClassName = null,
+    isDisabled = false,
+    isSelected = false,
+    createURL,
+  }: PageLink) {
+    const cssClasses = {
+      item: cx(this.props.cssClasses.item, additionalClassName),
+      link: this.props.cssClasses.link,
+    };
+
+    if (isDisabled) {
+      cssClasses.item = cx(cssClasses.item, this.props.cssClasses.disabledItem);
+    } else if (isSelected) {
+      cssClasses.item = cx(cssClasses.item, this.props.cssClasses.selectedItem);
+    }
+
+    const url = !isDisabled ? createURL(pageNumber) : '#';
+
+    return (
+      <PaginationLink
+        ariaLabel={ariaLabel}
+        cssClasses={cssClasses}
+        handleClick={this.handleClick}
+        isDisabled={isDisabled}
+        key={label + pageNumber + ariaLabel}
+        label={label}
+        pageNumber={pageNumber}
+        url={url}
+      />
+    );
+  }
+
+  public handleClick = (pageNumber: number, event: MouseEvent) => {
+    if (isSpecialClick(event)) {
+      // do not alter the default browser behavior
+      // if one special key is down
+      return;
+    }
+    event.preventDefault();
+    this.props.setCurrentPage(pageNumber);
+  };
+
+  private previousPageLink = () => {
+    return this.pageLink({
+      ariaLabel: 'Previous',
+      additionalClassName: this.props.cssClasses.previousPageItem,
+      isDisabled: this.props.isFirstPage,
+      label: this.props.templates.previous,
+      pageNumber: this.props.currentPage - 1,
+      createURL: this.props.createURL,
+    });
+  };
+
+  private nextPageLink = () => {
+    return this.pageLink({
+      ariaLabel: 'Next',
+      additionalClassName: this.props.cssClasses.nextPageItem,
+      isDisabled: this.props.isLastPage,
+      label: this.props.templates.next,
+      pageNumber: this.props.currentPage + 1,
+      createURL: this.props.createURL,
+    });
+  };
+
+  private firstPageLink = () => {
+    return this.pageLink({
+      ariaLabel: 'First',
+      additionalClassName: this.props.cssClasses.firstPageItem,
+      isDisabled: this.props.isFirstPage,
+      label: this.props.templates.first,
+      pageNumber: 0,
+      createURL: this.props.createURL,
+    });
+  };
+
+  private lastPageLink = () => {
+    return this.pageLink({
+      ariaLabel: 'Last',
+      additionalClassName: this.props.cssClasses.lastPageItem,
+      isDisabled: this.props.isLastPage,
+      label: this.props.templates.last,
+      pageNumber: this.props.nbPages! - 1,
+      createURL: this.props.createURL,
+    });
+  };
+
+  private pages = () => {
+    return this.props.pages!.map(pageNumber =>
+      this.pageLink({
+        ariaLabel: `${pageNumber + 1}`,
+        additionalClassName: this.props.cssClasses.pageItem,
+        isSelected: pageNumber === this.props.currentPage,
+        label: `${pageNumber + 1}`,
+        pageNumber,
+        createURL: this.props.createURL,
+      })
+    );
+  };
+
+  public render() {
+    return (
+      <div
+        className={cx(this.props.cssClasses.root, {
+          [this.props.cssClasses.noRefinementRoot]: this.props.nbPages! <= 1,
+        })}
+      >
+        <ul className={this.props.cssClasses.list}>
+          {this.props.showFirst && this.firstPageLink()}
+          {this.props.showPrevious && this.previousPageLink()}
+          {this.pages()}
+          {this.props.showNext && this.nextPageLink()}
+          {this.props.showLast && this.lastPageLink()}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default Pagination;

src/components/Pagination/Pagination.tsx

@@ -1,17 +1,31 @@
 /** @jsx h */
 
 import { h } from 'preact';
-import PropTypes from 'prop-types';
 
-function PaginationLink({
+export type PaginationLinkCSSClasses = {
+  item: string;
+  link: string;
+};
+
+export type PaginationLinkProps = {
+  ariaLabel: string;
+  cssClasses: PaginationLinkCSSClasses;
+  handleClick(pageNumber: number, event: MouseEvent): void;
+  isDisabled: boolean;
+  label: string;
+  pageNumber: number;
+  url?: string;
+};
+
+const PaginationLink = ({
   cssClasses,
   label,
   ariaLabel,
   url,
   isDisabled,
   handleClick,
   pageNumber,
-}) {
+}: PaginationLinkProps) => {
   if (isDisabled) {
     return (
       <li className={cssClasses.item}>
@@ -38,20 +52,6 @@ function PaginationLink({
       />
     </li>
   );
-}
-
-PaginationLink.propTypes = {
-  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    .isRequired,
-  cssClasses: PropTypes.shape({
-    item: PropTypes.string.isRequired,
-    link: PropTypes.string.isRequired,
-  }).isRequired,
-  handleClick: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  pageNumber: PropTypes.number,
-  url: PropTypes.string,
 };
 
 export default PaginationLink;

src/components/Pagination/PaginationLink.js src/components/Pagination/PaginationLink.tsx

@@ -2,16 +2,17 @@
 
 import { h } from 'preact';
 import { mount } from 'enzyme';
-import Pagination from '../Pagination';
+import Pagination, { PaginationProps } from '../Pagination';
 import Paginator from '../../../connectors/pagination/Paginator';
+import { ReactElementLike } from 'prop-types';
 
 describe('Pagination', () => {
   const pager = new Paginator({
     currentPage: 0,
     total: 20,
     padding: 3,
   });
-  const defaultProps = {
+  const defaultProps: PaginationProps = {
     cssClasses: {
       root: 'root',
       noRefinementRoot: 'noRefinementRoot',
@@ -26,52 +27,58 @@ describe('Pagination', () => {
       disabledItem: 'disabledItem',
       link: 'link',
     },
-    createURL: (...args) => JSON.stringify(args),
+    createURL: args => JSON.stringify(args),
     templates: { first: '', last: '', next: '', previous: '' },
     currentPage: 0,
-    nbHits: 200,
     pages: pager.pages(),
     isFirstPage: pager.isFirstPage(),
     isLastPage: pager.isLastPage(),
     nbPages: 20,
-    padding: 3,
     setCurrentPage: () => {},
   };
 
   it('should render five elements', () => {
-    const wrapper = mount(<Pagination {...defaultProps} />);
+    const wrapper = mount(
+      (<Pagination {...defaultProps} />) as ReactElementLike
+    );
 
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should display the first/last link', () => {
-    const wrapper = mount(<Pagination {...defaultProps} showFirst showLast />);
+    const wrapper = mount(
+      (<Pagination {...defaultProps} showFirst showLast />) as ReactElementLike
+    );
 
     expect(wrapper.find('.firstPageItem')).toHaveLength(1);
     expect(wrapper.find('.lastPageItem')).toHaveLength(1);
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should add the noRefinement CSS class with a single page', () => {
-    const wrapper = mount(<Pagination {...defaultProps} nbPages={1} />);
+    const wrapper = mount(
+      (<Pagination {...defaultProps} nbPages={1} />) as ReactElementLike
+    );
 
     expect(wrapper.find('.noRefinementRoot')).toHaveLength(1);
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should disable last page if already on it', () => {
     const wrapper = mount(
-      <Pagination
-        {...defaultProps}
-        showFirst
-        showLast
-        showPrevious
-        showNext
-        pages={[13, 14, 15, 16, 17, 18, 19]}
-        currentPage={19}
-        isFirstPage={false}
-        isLastPage={true}
-      />
+      (
+        <Pagination
+          {...defaultProps}
+          showFirst
+          showLast
+          showPrevious
+          showNext
+          pages={[13, 14, 15, 16, 17, 18, 19]}
+          currentPage={19}
+          isFirstPage={false}
+          isLastPage={true}
+        />
+      ) as ReactElementLike
     );
 
     expect(wrapper.find('.lastPageItem').hasClass('disabledItem')).toBe(true);
@@ -83,15 +90,17 @@ describe('Pagination', () => {
       setCurrentPage: jest.fn(),
     };
     const preventDefault = jest.fn();
-    const component = new Pagination(props);
+    const component = new Pagination({ ...defaultProps, ...props });
     ['ctrlKey', 'shiftKey', 'altKey', 'metaKey'].forEach(e => {
       const event = { preventDefault };
       event[e] = true;
+      // @ts-expect-error
       component.handleClick(42, event);
 
       expect(props.setCurrentPage).toHaveBeenCalledTimes(0);
       expect(preventDefault).toHaveBeenCalledTimes(0);
     });
+    // @ts-expect-error
     component.handleClick(42, { preventDefault });
 
     expect(props.setCurrentPage).toHaveBeenCalledTimes(1);
@@ -105,19 +114,20 @@ describe('Pagination', () => {
       padding: 3,
     });
     const wrapper = mount(
-      <Pagination
-        {...defaultProps}
-        showFirst
-        showLast
-        showPrevious
-        showNext
-        currentPage={0}
-        nbHits={0}
-        nbPages={0}
-        pages={localPager.pages()}
-        isFirstPage={localPager.isFirstPage()}
-        isLastPage={localPager.isLastPage()}
-      />
+      (
+        <Pagination
+          {...defaultProps}
+          showFirst
+          showLast
+          showPrevious
+          showNext
+          currentPage={0}
+          nbPages={0}
+          pages={localPager.pages()}
+          isFirstPage={localPager.isFirstPage()}
+          isLastPage={localPager.isLastPage()}
+        />
+      ) as ReactElementLike
     );
 
     expect(wrapper).toMatchSnapshot();

src/components/Pagination/__tests__/Pagination-test.js src/components/Pagination/__tests__/Pagination-test.tsx

@@ -20,7 +20,6 @@ Object {
   "currentPage": 0,
   "isFirstPage": true,
   "isLastPage": false,
-  "nbHits": 200,
   "nbPages": 20,
   "pages": Array [
     0,
@@ -42,7 +41,6 @@ Object {
     "next": "›",
     "previous": "‹",
   },
-  "totalPages": undefined,
 }
 `;
 
@@ -66,7 +64,6 @@ Object {
   "currentPage": 0,
   "isFirstPage": true,
   "isLastPage": false,
-  "nbHits": 200,
   "nbPages": 20,
   "pages": Array [
     0,
@@ -88,6 +85,5 @@ Object {
     "next": "›",
     "previous": "‹",
   },
-  "totalPages": undefined,
 }
 `;

src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap src/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap

@@ -1,10 +1,22 @@
-import { render } from 'preact';
-import getContainerNode from '../../../lib/utils/getContainerNode';
-import pagination from '../pagination';
-import { createRenderOptions } from '../../../../test/mock/createWidget';
-import { SearchResults, SearchParameters } from 'algoliasearch-helper';
+import { render as preactRender } from 'preact';
+import utilsGetContainerNode from '../../../lib/utils/getContainerNode';
+import pagination, {
+  PaginationCSSClasses,
+  PaginationWidgetParams,
+} from '../pagination';
+import {
+  createInitOptions,
+  createRenderOptions,
+} from '../../../../test/mock/createWidget';
+import algoliasearchHelper, {
+  SearchResults,
+  SearchParameters,
+} from 'algoliasearch-helper';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
+import { castToJestMock } from '../../../../test/utils/castToJestMock';
+import { createSearchClient } from '../../../../test/mock/createSearchClient';
 
+const render = castToJestMock(preactRender);
 jest.mock('preact', () => {
   const module = jest.requireActual('preact');
 
@@ -13,6 +25,7 @@ jest.mock('preact', () => {
   return module;
 });
 
+const getContainerNode = castToJestMock(utilsGetContainerNode);
 jest.mock('../../../lib/utils/getContainerNode', () => {
   const module = jest.requireActual('../../../lib/utils/getContainerNode');
 
@@ -25,6 +38,7 @@ jest.mock('../../../lib/utils/getContainerNode', () => {
 describe('Usage', () => {
   it('throws without container', () => {
     expect(() => {
+      // @ts-expect-error
       pagination({ container: undefined });
     }).toThrowErrorMatchingInlineSnapshot(`
 "The \`container\` option is required.
@@ -35,11 +49,11 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/pagination/
 });
 
 describe('pagination()', () => {
-  let container;
-  let widget;
-  let results;
+  let widget: ReturnType<typeof pagination>;
+  let container: HTMLElement;
   let helper;
-  let cssClasses;
+  let results;
+  let cssClasses: PaginationCSSClasses;
 
   beforeEach(() => {
     render.mockClear();
@@ -72,54 +86,84 @@ describe('pagination()', () => {
       search: jest.fn(),
       state: {},
     };
-    widget.init({ helper });
+    widget.init!(createInitOptions({ helper }));
   });
 
   it('sets the page', () => {
-    widget.getWidgetRenderState({ helper }).refine(42);
+    widget.getWidgetRenderState(createInitOptions({ helper })).refine(42);
     expect(helper.setPage).toHaveBeenCalledTimes(1);
     expect(helper.search).toHaveBeenCalledTimes(1);
   });
 
   it('calls twice render(<Pagination props />, container)', () => {
-    widget.render({ results, helper, state: { page: 0 } });
-    widget.render({ results, helper, state: { page: 0 } });
+    const { state } = algoliasearchHelper(createSearchClient(), '', {
+      page: 0,
+    });
+
+    widget.render!(
+      createRenderOptions({
+        results,
+        helper,
+        state,
+      })
+    );
+    widget.render!(
+      createRenderOptions({
+        results,
+        helper,
+        state,
+      })
+    );
 
     const [firstRender, secondRender] = render.mock.calls;
 
     expect(render).toHaveBeenCalledTimes(2);
+    // @ts-expect-error
     expect(firstRender[0].props).toMatchSnapshot();
     expect(firstRender[1]).toEqual(container);
+    // @ts-expect-error
     expect(secondRender[0].props).toMatchSnapshot();
     expect(secondRender[1]).toEqual(container);
   });
 
   describe('mocking getContainerNode', () => {
-    let scrollIntoView;
+    let scrollIntoView: jest.Mock;
 
     beforeEach(() => {
       scrollIntoView = jest.fn();
     });
 
     it('should not scroll', () => {
       widget = pagination({ container, scrollTo: false });
-      widget.init({ helper });
-      widget.getWidgetRenderState({ helper }).refine(2);
+      widget.init!(createInitOptions({ helper }));
+      widget.getWidgetRenderState(createInitOptions({ helper })).refine(2);
       expect(scrollIntoView).toHaveBeenCalledTimes(0);
     });
 
-    it('should scroll to body', () => {
+    it('should scrollto body', () => {
+      const { state } = algoliasearchHelper(createSearchClient(), '', {
+        page: 0,
+      });
+
+      // @ts-expect-error
       getContainerNode.mockImplementation(input =>
         input === 'body' ? { scrollIntoView } : input
       );
 
       widget = pagination({ container });
 
-      widget.init({ helper });
-      widget.render({ results, helper, state: { page: 0 } });
+      widget.init!(createInitOptions({ helper }));
+      widget.render!(
+        createRenderOptions({
+          results,
+          helper,
+          state,
+        })
+      );
 
       const [firstRender] = render.mock.calls;
 
+      // @ts-expect-error
       firstRender[0].props.setCurrentPage(2);
 
       expect(scrollIntoView).toHaveBeenCalledTimes(1);
@@ -128,11 +172,11 @@ describe('pagination()', () => {
 });
 
 describe('pagination MaxPage', () => {
-  let container;
-  let widget;
+  let widget: ReturnType<typeof pagination>;
+  let container: HTMLElement;
   let results;
-  let cssClasses;
-  let paginationOptions;
+  let cssClasses: PaginationCSSClasses;
+  let paginationOptions: PaginationWidgetParams;
 
   beforeEach(() => {
     container = document.createElement('div');

src/widgets/pagination/__tests__/__snapshots__/pagination-test.js.snap src/widgets/pagination/__tests__/__snapshots__/pagination-test.ts.snap

@@ -0,0 +1,315 @@
+/** @jsx h */
+
+import { h, render } from 'preact';
+import cx from 'classnames';
+import Pagination from '../../components/Pagination/Pagination';
+import connectPagination, {
+  PaginationConnectorParams,
+  PaginationRenderState,
+  PaginationWidgetDescription,
+} from '../../connectors/pagination/connectPagination';
+import {
+  getContainerNode,
+  createDocumentationMessageGenerator,
+} from '../../lib/utils';
+import { component } from '../../lib/suit';
+import { Renderer, WidgetFactory } from '../../types';
+
+const suit = component('Pagination');
+const withUsage = createDocumentationMessageGenerator({ name: 'pagination' });
+
+const defaultTemplates: PaginationTemplates = {
+  previous: '‹',
+  next: '›',
+  first: '«',
+  last: '»',
+};
+
+const renderer = ({
+  containerNode,
+  cssClasses,
+  templates,
+  showFirst,
+  showLast,
+  showPrevious,
+  showNext,
+  scrollToNode,
+}): Renderer<PaginationRenderState, Partial<PaginationWidgetParams>> => (
+  {
+    createURL,
+    currentRefinement,
+    nbPages,
+    pages,
+    isFirstPage,
+    isLastPage,
+    refine,
+  },
+  isFirstRendering
+) => {
+  if (isFirstRendering) return;
+
+  const setCurrentPage = (pageNumber: number) => {
+    refine(pageNumber);
+
+    if (scrollToNode !== false) {
+      scrollToNode.scrollIntoView();
+    }
+  };
+
+  render(
+    <Pagination
+      createURL={createURL}
+      cssClasses={cssClasses}
+      currentPage={currentRefinement}
+      templates={templates}
+      nbPages={nbPages}
+      pages={pages}
+      isFirstPage={isFirstPage}
+      isLastPage={isLastPage}
+      setCurrentPage={setCurrentPage}
+      showFirst={showFirst}
+      showLast={showLast}
+      showPrevious={showPrevious}
+      showNext={showNext}
+    />,
+    containerNode
+  );
+};
+
+export type PaginationCSSClasses = {
+  /**
+   * CSS classes added to the root element of the widget.
+   */
+  root: string | string[];
+
+  /**
+   * CSS class to add to the root element of the widget if there are no refinements.
+   */
+  noRefinementRoot: string | string[];
+
+  /**
+   * CSS classes added to the wrapping `<ul>`.
+   */
+  list: string | string[];
+
+  /**
+   * CSS classes added to each `<li>`.
+   */
+  item: string | string[];
+
+  /**
+   * CSS classes added to the first `<li>`.
+   */
+  firstPageItem: string | string[];
+
+  /**
+   * CSS classes added to the last `<li>`.
+   */
+  lastPageItem: string | string[];
+
+  /**
+   * CSS classes added to the previous `<li>`.
+   */
+  previousPageItem: string | string[];
+
+  /**
+   * CSS classes added to the next `<li>`.
+   */
+  nextPageItem: string | string[];
+
+  /**
+   * CSS classes added to page `<li>`.
+   */
+  pageItem: string | string[];
+
+  /**
+   * CSS classes added to the selected `<li>`.
+   */
+  selectedItem: string | string[];
+
+  /**
+   * CSS classes added to the disabled `<li>`.
+   */
+  disabledItem: string | string[];
+
+  /**
+   * CSS classes added to each link.
+   */
+  link: string | string[];
+};
+
+export type PaginationTemplates = {
+  /**
+   * Label for the Previous link.
+   */
+  previous: string;
+
+  /**
+   * Label for the Next link.
+   */
+  next: string;
+
+  /**
+   * Label for the First link.
+   */
+  first: string;
+
+  /**
+   * Label for the Last link.
+   */
+  last: string;
+};
+
+export type PaginationWidgetParams = {
+  /**
+   * CSS Selector or HTMLElement to insert the widget.
+   */
+  container: string | HTMLElement;
+
+  /**
+   * The max number of pages to browse.
+   */
+  totalPages?: number;
+
+  /**
+   * The number of pages to display on each side of the current page.
+   * @default 3
+   */
+  padding?: number;
+
+  /**
+   * Where to scroll after a click, set to `false` to disable.
+   * @default body
+   */
+  scrollTo?: string | HTMLElement | boolean;
+
+  /**
+   * Whether to show the "first page" control
+   * @default true
+   */
+  showFirst?: boolean;
+
+  /**
+   * Whether to show the "last page" control
+   * @default true
+   */
+  showLast?: boolean;
+
+  /**
+   * Whether to show the "next page" control
+   * @default true
+   */
+  showNext?: boolean;
+
+  /**
+   * Whether to show the "previous page" control
+   * @default true
+   */
+  showPrevious?: boolean;
+
+  /**
+   * Text to display in the links.
+   */
+  templates?: Partial<PaginationTemplates>;
+
+  /**
+   * CSS classes to be added.
+   */
+  cssClasses?: Partial<PaginationCSSClasses>;
+};
+
+export type PaginationWidget = WidgetFactory<
+  PaginationWidgetDescription & { $$widgetType: 'ais.pagination' },
+  PaginationConnectorParams,
+  PaginationWidgetParams
+>;
+
+const pagination: PaginationWidget = function pagination(widgetParams) {
+  const {
+    container,
+    templates: userTemplates = {},
+    cssClasses: userCssClasses = {},
+    totalPages,
+    padding,
+    showFirst = true,
+    showLast = true,
+    showPrevious = true,
+    showNext = true,
+    scrollTo: userScrollTo = 'body',
+  } = widgetParams || {};
+
+  if (!container) {
+    throw new Error(withUsage('The `container` option is required.'));
+  }
+
+  const containerNode = getContainerNode(container);
+
+  const scrollTo = userScrollTo === true ? 'body' : userScrollTo;
+  const scrollToNode = scrollTo !== false ? getContainerNode(scrollTo) : false;
+
+  const cssClasses = {
+    root: cx(suit(), userCssClasses.root),
+    noRefinementRoot: cx(
+      suit({ modifierName: 'noRefinement' }),
+      userCssClasses.noRefinementRoot
+    ),
+    list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
+    item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
+    firstPageItem: cx(
+      suit({ descendantName: 'item', modifierName: 'firstPage' }),
+      userCssClasses.firstPageItem
+    ),
+    lastPageItem: cx(
+      suit({ descendantName: 'item', modifierName: 'lastPage' }),
+      userCssClasses.lastPageItem
+    ),
+    previousPageItem: cx(
+      suit({ descendantName: 'item', modifierName: 'previousPage' }),
+      userCssClasses.previousPageItem
+    ),
+    nextPageItem: cx(
+      suit({ descendantName: 'item', modifierName: 'nextPage' }),
+      userCssClasses.nextPageItem
+    ),
+    pageItem: cx(
+      suit({ descendantName: 'item', modifierName: 'page' }),
+      userCssClasses.pageItem
+    ),
+    selectedItem: cx(
+      suit({ descendantName: 'item', modifierName: 'selected' }),
+      userCssClasses.selectedItem
+    ),
+    disabledItem: cx(
+      suit({ descendantName: 'item', modifierName: 'disabled' }),
+      userCssClasses.disabledItem
+    ),
+    link: cx(suit({ descendantName: 'link' }), userCssClasses.link),
+  };
+
+  const templates: PaginationTemplates = {
+    ...defaultTemplates,
+    ...userTemplates,
+  };
+
+  const specializedRenderer = renderer({
+    containerNode,
+    cssClasses,
+    templates,
+    showFirst,
+    showLast,
+    showPrevious,
+    showNext,
+    scrollToNode,
+  });
+
+  const makeWidget = connectPagination(specializedRenderer, () =>
+    render(null, containerNode)
+  );
+
+  return {
+    ...makeWidget({ totalPages, padding }),
+    $$widgetType: 'ais.pagination',
+  };
+};
+
+export default pagination;