@atlaskit/pagination/dist/esm/pagination.js

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

/* pagination.tsx generated by @compiled/babel-plugin v0.36.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./pagination.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { forwardRef, memo } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
import noop from '@atlaskit/ds-lib/noop';
import useControlled from '@atlaskit/ds-lib/use-controlled';
import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
import { Box, Inline } from '@atlaskit/primitives/compiled';
import Navigator from './internal/components/navigator';
import PageComponent from './internal/components/page';
import renderDefaultEllipsis from './internal/components/render-ellipsis';
import { emptyObject } from './internal/constants';
import collapseRange from './internal/utils/collapse-range';
var styles = {
  paginationMenu: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t",
  paginationMenuItem: "_1pfhze3t _ect41gqc",
  navigatorIconWrapper: "_18zr12x7"
};
var analyticsAttributes = {
  componentName: 'pagination',
  packageName: "@atlaskit/pagination",
  packageVersion: "16.1.0"
};
function NavigatorIcon(_ref) {
  var chevronDirection = _ref.chevronDirection;
  var Chevron = chevronDirection === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
  return /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: styles.navigatorIconWrapper
  }, /*#__PURE__*/React.createElement(Chevron, {
    label: "",
    LEGACY_margin: "0 ".concat("var(--ds-space-negative-075, -6px)"),
    color: "currentColor"
  }));
}
function InnerPagination(_ref2, ref) {
  var _ref2$components = _ref2.components,
    components = _ref2$components === void 0 ? emptyObject : _ref2$components,
    _ref2$defaultSelected = _ref2.defaultSelectedIndex,
    defaultSelectedIndex = _ref2$defaultSelected === void 0 ? 0 : _ref2$defaultSelected,
    selectedIndex = _ref2.selectedIndex,
    _ref2$label = _ref2.label,
    label = _ref2$label === void 0 ? 'pagination' : _ref2$label,
    _ref2$pageLabel = _ref2.pageLabel,
    pageLabel = _ref2$pageLabel === void 0 ? 'page' : _ref2$pageLabel,
    _ref2$previousLabel = _ref2.previousLabel,
    previousLabel = _ref2$previousLabel === void 0 ? 'previous' : _ref2$previousLabel,
    _ref2$nextLabel = _ref2.nextLabel,
    nextLabel = _ref2$nextLabel === void 0 ? 'next' : _ref2$nextLabel,
    _ref2$style = _ref2.style,
    style = _ref2$style === void 0 ? emptyObject : _ref2$style,
    _ref2$max = _ref2.max,
    max = _ref2$max === void 0 ? 7 : _ref2$max,
    _ref2$onChange = _ref2.onChange,
    onChange = _ref2$onChange === void 0 ? noop : _ref2$onChange,
    pages = _ref2.pages,
    getPageLabel = _ref2.getPageLabel,
    _ref2$renderEllipsis = _ref2.renderEllipsis,
    renderEllipsis = _ref2$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref2$renderEllipsis,
    analyticsContext = _ref2.analyticsContext,
    testId = _ref2.testId,
    isDisabled = _ref2.isDisabled;
  var _useControlled = useControlled(selectedIndex, function () {
      return defaultSelectedIndex || 0;
    }),
    _useControlled2 = _slicedToArray(_useControlled, 2),
    selectedIndexValue = _useControlled2[0],
    setSelectedIndexValue = _useControlled2[1];
  var onChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
    fn: function fn(value, analyticsEvent) {
      var event = value.event,
        selectedPageIndex = value.selectedPageIndex;
      if (selectedIndex === undefined) {
        setSelectedIndexValue(selectedPageIndex);
      }
      if (onChange) {
        onChange(event, pages[selectedPageIndex], analyticsEvent);
      }
    },
    action: 'changed',
    actionSubject: 'pageNumber',
    analyticsData: analyticsContext
  }, analyticsAttributes));
  var transform = function transform(page, currPageIndex, testId) {
    var selectedPage = pages[selectedIndexValue];
    var pageIndexLabel = "".concat(pageLabel, " ").concat(getPageLabel ? getPageLabel(page, currPageIndex) : page);
    var isCurrentPage = page === selectedPage;
    return /*#__PURE__*/React.createElement(Inline, {
      as: "li",
      xcss: styles.paginationMenuItem,
      key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex)
    }, /*#__PURE__*/React.createElement(PageComponent, {
      component: components.Page,
      onClick: function onClick(event) {
        return onChangeWithAnalytics({
          event: event,
          selectedPageIndex: currPageIndex
        });
      },
      "aria-current": isCurrentPage ? 'page' : undefined,
      "aria-label": pageIndexLabel,
      isSelected: isCurrentPage,
      isDisabled: isDisabled,
      page: page,
      testId: testId && "".concat(testId, "--").concat(isCurrentPage ? 'current-' : '', "page-").concat(currPageIndex)
    }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
  };
  return (
    /*#__PURE__*/
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    React.createElement(Box, {
      testId: testId,
      style: style,
      ref: ref,
      "aria-label": label,
      as: "nav"
    }, /*#__PURE__*/React.createElement(Inline, {
      space: "space.0",
      alignBlock: "center"
    }, /*#__PURE__*/React.createElement(Navigator, {
      key: "left-navigator",
      component: components.Previous,
      onClick: function onClick(event) {
        return onChangeWithAnalytics({
          event: event,
          selectedPageIndex: selectedIndexValue - 1
        });
      },
      isDisabled: isDisabled || selectedIndexValue === 0,
      iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
        chevronDirection: "left"
      }),
      "aria-label": previousLabel,
      testId: testId && "".concat(testId, "--left-navigator")
    }), /*#__PURE__*/React.createElement(Inline, {
      space: "space.0",
      alignBlock: "baseline",
      as: "ul",
      xcss: styles.paginationMenu
    }, collapseRange(pages, selectedIndexValue, {
      max: max,
      ellipsis: renderEllipsis,
      transform: transform
    }, testId)), /*#__PURE__*/React.createElement(Navigator, {
      key: "right-navigator",
      component: components.Next,
      onClick: function onClick(event) {
        return onChangeWithAnalytics({
          event: event,
          selectedPageIndex: selectedIndexValue + 1
        });
      },
      isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
      iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
        chevronDirection: "right"
      }),
      "aria-label": nextLabel,
      testId: testId && "".concat(testId, "--right-navigator")
    })))
  );
}

/**
 * __Pagination__
 *
 * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
 *
 * - [Examples](https://atlassian.design/components/pagination/examples)
 * - [Code](https://atlassian.design/components/pagination/code)
 * - [Usage](https://atlassian.design/components/pagination/usage)
 */
var Pagination = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(InnerPagination));
export default Pagination;