@zendeskgarden/react-pagination 8.52.0 → 8.53.2

package/dist/index.cjs.js

@@ -196,46 +196,10 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var _path$3;
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
-var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
-  })));
-};
-
-var _path$2;
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
-var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
-  })));
-};
-
 var COMPONENT_ID$6 = 'pagination.pagination_view';
 var StyledPagination = styled__default["default"].ul.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPagination",
   componentId: "sc-1b7nye9-0"
@@ -273,7 +237,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledPageBase = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPageBase",
   componentId: "sc-lw1w9j-0"
@@ -301,7 +265,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledPage = styled__default["default"](StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPage",
   componentId: "sc-1k0een3-0"
@@ -323,7 +287,7 @@ StyledPage.defaultProps = {
 var COMPONENT_ID$3 = 'cursor_pagination';
 var StyledCursorPagination = styled__default["default"].nav.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
@@ -337,7 +301,7 @@ StyledCursorPagination.defaultProps = {
 var COMPONENT_ID$2 = 'cursor_pagination.cursor';
 var StyledCursor = styled__default["default"](StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.52.0',
+  'data-garden-version': '8.53.2',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
@@ -388,7 +352,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledGap = styled__default["default"](StyledPage).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledGap",
   componentId: "sc-1hqjltf-0"
@@ -404,7 +368,7 @@ StyledGap.defaultProps = {
 var COMPONENT_ID = 'pagination.navigation';
 var StyledNavigation = styled__default["default"](StyledPage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledNavigation",
   componentId: "sc-184uuwe-0"
@@ -415,6 +379,83 @@ StyledNavigation.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+var _path$3;
+
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
+
+var _path$2;
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
+
+var PreviousComponent$1 = React.forwardRef(function (props, ref) {
+  var ariaLabel = reactTheming.useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
+  var theme = React.useContext(styled.ThemeContext);
+  return React__default["default"].createElement(StyledNavigation, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }), theme.rtl ? React__default["default"].createElement(SvgChevronRightStroke, null) : React__default["default"].createElement(SvgChevronLeftStroke, null));
+});
+PreviousComponent$1.displayName = 'Pagination.Previous';
+var Previous$1 = PreviousComponent$1;
+
+var NextComponent$1 = React.forwardRef(function (props, ref) {
+  var ariaLabel = reactTheming.useText(NextComponent$1, props, 'aria-label', 'Next page');
+  var theme = React.useContext(styled.ThemeContext);
+  return React__default["default"].createElement(StyledNavigation, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }), theme.rtl ? React__default["default"].createElement(SvgChevronLeftStroke, null) : React__default["default"].createElement(SvgChevronRightStroke, null));
+});
+NextComponent$1.displayName = 'Pagination.Next';
+var Next$1 = NextComponent$1;
+
+var PageComponent = React.forwardRef(function (props, ref) {
+  var text = props['aria-current'] ? "Current page, page ".concat(props.children) : "Page ".concat(props.children);
+  var ariaLabel = reactTheming.useText(PageComponent, props, 'aria-label', text);
+  return React__default["default"].createElement(StyledPage, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }));
+});
+PageComponent.displayName = 'Pagination.Page';
+var Page = PageComponent;
+
+var GapComponent = React.forwardRef(function (props, ref) {
+  return React__default["default"].createElement(StyledGap, _extends$4({}, props, {
+    ref: ref
+  }), "\u2026");
+});
+GapComponent.displayName = 'Pagination.Gap';
+var Gap = GapComponent;
+
 var _excluded$4 = ["currentPage", "transformPageProps", "totalPages", "pagePadding", "pageGap", "onChange"];
 var PREVIOUS_KEY = 'previous';
 var NEXT_KEY = 'next';
@@ -433,7 +474,7 @@ var Pagination = React.forwardRef(function (_ref, ref) {
   var _useState3 = React.useState(1),
       _useState4 = _slicedToArray(_useState3, 2),
       internalCurrentPage = _useState4[0],
-      setCurrentPage = _useState4[1];
+      setInternalCurrentPage = _useState4[1];
   var currentPage = containerUtilities.getControlledValue(controlledCurrentPage, internalCurrentPage);
   var theme = React.useContext(styled.ThemeContext);
   var _usePagination = containerPagination.usePagination({
@@ -461,7 +502,7 @@ var Pagination = React.forwardRef(function (_ref, ref) {
         onChange(updatedCurrentPage);
       }
       setFocusedItem(updatedFocusedKey);
-      setCurrentPage(updatedCurrentPage);
+      setInternalCurrentPage(updatedCurrentPage);
     }
   }),
       getContainerProps = _usePagination.getContainerProps,
@@ -470,58 +511,73 @@ var Pagination = React.forwardRef(function (_ref, ref) {
       getNextPageProps = _usePagination.getNextPageProps;
   var getTransformedProps = function getTransformedProps(pageType) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var pageNumber = arguments.length > 2 ? arguments[2] : undefined;
     if (transformPageProps) {
-      return transformPageProps(pageType, props);
+      return transformPageProps(pageType, props, pageNumber);
     }
     return props;
   };
-  var renderPreviousPage = function renderPreviousPage(rtl) {
+  var renderPreviousPage = function renderPreviousPage() {
     var isFirstPageSelected = totalPages > 0 && currentPage === 1;
     var focusRef = React__default["default"].createRef();
-    return React__default["default"].createElement(StyledNavigation, getTransformedProps('previous',
-    isFirstPageSelected ? {
+    var props = isFirstPageSelected ?
+    {
       hidden: true
-    } : getPreviousPageProps({
+    } : _objectSpread2(_objectSpread2({}, getPreviousPageProps({
+      'aria-label': '',
       role: null,
-      key: PREVIOUS_KEY,
-      isFocused: focusedItem === PREVIOUS_KEY,
       item: PREVIOUS_KEY,
-      ref: focusRef,
       focusRef: focusRef
-    })), rtl ? React__default["default"].createElement(SvgChevronRightStroke, null) : React__default["default"].createElement(SvgChevronLeftStroke, null));
+    })), {}, {
+      'aria-label': undefined
+    });
+    return React__default["default"].createElement(Previous$1, _extends$4({
+      isFocused: focusedItem === PREVIOUS_KEY
+    }, getTransformedProps('previous', props), {
+      ref: focusRef
+    }));
   };
-  var renderNextPage = function renderNextPage(rtl) {
+  var renderNextPage = function renderNextPage() {
     var isLastPageSelected = currentPage === totalPages;
     var focusRef = React__default["default"].createRef();
-    return React__default["default"].createElement(StyledNavigation, getTransformedProps('next',
-    isLastPageSelected ? {
+    var props = isLastPageSelected ?
+    {
       hidden: true
-    } : getNextPageProps({
+    } : _objectSpread2(_objectSpread2({}, getNextPageProps({
+      'aria-label': '',
       role: null,
       item: NEXT_KEY,
-      key: NEXT_KEY,
-      isFocused: focusedItem === NEXT_KEY,
-      ref: focusRef,
       focusRef: focusRef
-    })), rtl ? React__default["default"].createElement(SvgChevronLeftStroke, null) : React__default["default"].createElement(SvgChevronRightStroke, null));
+    })), {}, {
+      'aria-label': undefined
+    });
+    return React__default["default"].createElement(Next$1, _extends$4({
+      isFocused: focusedItem === NEXT_KEY
+    }, getTransformedProps('next', props), {
+      ref: focusRef
+    }));
   };
   var createGap = function createGap(pageIndex) {
-    return React__default["default"].createElement(StyledGap, getTransformedProps('gap', {
+    return React__default["default"].createElement(Gap, _extends$4({
       key: "gap-".concat(pageIndex)
-    }), "\u2026");
+    }, getTransformedProps('gap')));
   };
   var createPage = function createPage(pageIndex) {
     var focusRef = React__default["default"].createRef();
-    return React__default["default"].createElement(StyledPage, getTransformedProps('page', getPageProps({
+    var props = _objectSpread2(_objectSpread2({}, getPageProps({
+      'aria-label': '',
       role: null,
-      key: pageIndex,
       item: pageIndex,
-      page: pageIndex,
-      title: pageIndex.toString(),
-      current: currentPage === pageIndex,
-      ref: focusRef,
       focusRef: focusRef
-    })), pageIndex);
+    })), {}, {
+      'aria-label': undefined,
+      title: pageIndex
+    });
+    return React__default["default"].createElement(Page, _extends$4({
+      key: pageIndex
+    }, getTransformedProps('page', props, pageIndex), {
+      ref: focusRef
+    }), pageIndex);
   };
   var renderPages = function renderPages() {
     var pages = [];
@@ -567,11 +623,11 @@ var Pagination = React.forwardRef(function (_ref, ref) {
     }
     return pages;
   };
-  return React__default["default"].createElement(StyledPagination, _extends$4({}, getContainerProps(_objectSpread2({
+  return React__default["default"].createElement(StyledPagination, _extends$4({}, getContainerProps({
     role: null
-  }, otherProps)), {
+  }), otherProps, {
     ref: ref
-  }), renderPreviousPage(theme.rtl), totalPages > 0 && renderPages(), renderNextPage(theme.rtl));
+  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage());
 });
 Pagination.propTypes = {
   currentPage: PropTypes__default["default"].number.isRequired,

package/dist/index.esm.js

@@ -6,12 +6,12 @@
  */
 
 import * as React from 'react';
-import React__default, { cloneElement, Children, forwardRef, useState, useContext } from 'react';
+import React__default, { cloneElement, Children, forwardRef, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
 import { usePagination } from '@zendeskgarden/container-pagination';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 function ownKeys(object, enumerableOnly) {
@@ -168,46 +168,10 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var _path$3;
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
-var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
-  })));
-};
-
-var _path$2;
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
-var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
-  })));
-};
-
 var COMPONENT_ID$6 = 'pagination.pagination_view';
 var StyledPagination = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPagination",
   componentId: "sc-1b7nye9-0"
@@ -245,7 +209,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledPageBase = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPageBase",
   componentId: "sc-lw1w9j-0"
@@ -273,7 +237,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledPage = styled(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPage",
   componentId: "sc-1k0een3-0"
@@ -295,7 +259,7 @@ StyledPage.defaultProps = {
 var COMPONENT_ID$3 = 'cursor_pagination';
 var StyledCursorPagination = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledCursorPagination",
   componentId: "sc-qmfecg-0"
@@ -309,7 +273,7 @@ StyledCursorPagination.defaultProps = {
 var COMPONENT_ID$2 = 'cursor_pagination.cursor';
 var StyledCursor = styled(StyledPageBase).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.52.0',
+  'data-garden-version': '8.53.2',
   as: 'button'
 }).withConfig({
   displayName: "StyledCursor",
@@ -360,7 +324,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledGap = styled(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledGap",
   componentId: "sc-1hqjltf-0"
@@ -376,7 +340,7 @@ StyledGap.defaultProps = {
 var COMPONENT_ID = 'pagination.navigation';
 var StyledNavigation = styled(StyledPage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.52.0'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledNavigation",
   componentId: "sc-184uuwe-0"
@@ -387,6 +351,83 @@ StyledNavigation.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+var _path$3;
+
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
+
+var _path$2;
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
+
+var PreviousComponent$1 = forwardRef(function (props, ref) {
+  var ariaLabel = useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
+  var theme = useContext(ThemeContext);
+  return React__default.createElement(StyledNavigation, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }), theme.rtl ? React__default.createElement(SvgChevronRightStroke, null) : React__default.createElement(SvgChevronLeftStroke, null));
+});
+PreviousComponent$1.displayName = 'Pagination.Previous';
+var Previous$1 = PreviousComponent$1;
+
+var NextComponent$1 = forwardRef(function (props, ref) {
+  var ariaLabel = useText(NextComponent$1, props, 'aria-label', 'Next page');
+  var theme = useContext(ThemeContext);
+  return React__default.createElement(StyledNavigation, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }), theme.rtl ? React__default.createElement(SvgChevronLeftStroke, null) : React__default.createElement(SvgChevronRightStroke, null));
+});
+NextComponent$1.displayName = 'Pagination.Next';
+var Next$1 = NextComponent$1;
+
+var PageComponent = forwardRef(function (props, ref) {
+  var text = props['aria-current'] ? "Current page, page ".concat(props.children) : "Page ".concat(props.children);
+  var ariaLabel = useText(PageComponent, props, 'aria-label', text);
+  return React__default.createElement(StyledPage, _extends$4({}, props, {
+    "aria-label": ariaLabel,
+    ref: ref
+  }));
+});
+PageComponent.displayName = 'Pagination.Page';
+var Page = PageComponent;
+
+var GapComponent = forwardRef(function (props, ref) {
+  return React__default.createElement(StyledGap, _extends$4({}, props, {
+    ref: ref
+  }), "\u2026");
+});
+GapComponent.displayName = 'Pagination.Gap';
+var Gap = GapComponent;
+
 var _excluded$4 = ["currentPage", "transformPageProps", "totalPages", "pagePadding", "pageGap", "onChange"];
 var PREVIOUS_KEY = 'previous';
 var NEXT_KEY = 'next';
@@ -405,7 +446,7 @@ var Pagination = forwardRef(function (_ref, ref) {
   var _useState3 = useState(1),
       _useState4 = _slicedToArray(_useState3, 2),
       internalCurrentPage = _useState4[0],
-      setCurrentPage = _useState4[1];
+      setInternalCurrentPage = _useState4[1];
   var currentPage = getControlledValue(controlledCurrentPage, internalCurrentPage);
   var theme = useContext(ThemeContext);
   var _usePagination = usePagination({
@@ -433,7 +474,7 @@ var Pagination = forwardRef(function (_ref, ref) {
         onChange(updatedCurrentPage);
       }
       setFocusedItem(updatedFocusedKey);
-      setCurrentPage(updatedCurrentPage);
+      setInternalCurrentPage(updatedCurrentPage);
     }
   }),
       getContainerProps = _usePagination.getContainerProps,
@@ -442,58 +483,73 @@ var Pagination = forwardRef(function (_ref, ref) {
       getNextPageProps = _usePagination.getNextPageProps;
   var getTransformedProps = function getTransformedProps(pageType) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var pageNumber = arguments.length > 2 ? arguments[2] : undefined;
     if (transformPageProps) {
-      return transformPageProps(pageType, props);
+      return transformPageProps(pageType, props, pageNumber);
     }
     return props;
   };
-  var renderPreviousPage = function renderPreviousPage(rtl) {
+  var renderPreviousPage = function renderPreviousPage() {
     var isFirstPageSelected = totalPages > 0 && currentPage === 1;
     var focusRef = React__default.createRef();
-    return React__default.createElement(StyledNavigation, getTransformedProps('previous',
-    isFirstPageSelected ? {
+    var props = isFirstPageSelected ?
+    {
       hidden: true
-    } : getPreviousPageProps({
+    } : _objectSpread2(_objectSpread2({}, getPreviousPageProps({
+      'aria-label': '',
       role: null,
-      key: PREVIOUS_KEY,
-      isFocused: focusedItem === PREVIOUS_KEY,
       item: PREVIOUS_KEY,
-      ref: focusRef,
       focusRef: focusRef
-    })), rtl ? React__default.createElement(SvgChevronRightStroke, null) : React__default.createElement(SvgChevronLeftStroke, null));
+    })), {}, {
+      'aria-label': undefined
+    });
+    return React__default.createElement(Previous$1, _extends$4({
+      isFocused: focusedItem === PREVIOUS_KEY
+    }, getTransformedProps('previous', props), {
+      ref: focusRef
+    }));
   };
-  var renderNextPage = function renderNextPage(rtl) {
+  var renderNextPage = function renderNextPage() {
     var isLastPageSelected = currentPage === totalPages;
     var focusRef = React__default.createRef();
-    return React__default.createElement(StyledNavigation, getTransformedProps('next',
-    isLastPageSelected ? {
+    var props = isLastPageSelected ?
+    {
       hidden: true
-    } : getNextPageProps({
+    } : _objectSpread2(_objectSpread2({}, getNextPageProps({
+      'aria-label': '',
       role: null,
       item: NEXT_KEY,
-      key: NEXT_KEY,
-      isFocused: focusedItem === NEXT_KEY,
-      ref: focusRef,
       focusRef: focusRef
-    })), rtl ? React__default.createElement(SvgChevronLeftStroke, null) : React__default.createElement(SvgChevronRightStroke, null));
+    })), {}, {
+      'aria-label': undefined
+    });
+    return React__default.createElement(Next$1, _extends$4({
+      isFocused: focusedItem === NEXT_KEY
+    }, getTransformedProps('next', props), {
+      ref: focusRef
+    }));
   };
   var createGap = function createGap(pageIndex) {
-    return React__default.createElement(StyledGap, getTransformedProps('gap', {
+    return React__default.createElement(Gap, _extends$4({
       key: "gap-".concat(pageIndex)
-    }), "\u2026");
+    }, getTransformedProps('gap')));
   };
   var createPage = function createPage(pageIndex) {
     var focusRef = React__default.createRef();
-    return React__default.createElement(StyledPage, getTransformedProps('page', getPageProps({
+    var props = _objectSpread2(_objectSpread2({}, getPageProps({
+      'aria-label': '',
       role: null,
-      key: pageIndex,
       item: pageIndex,
-      page: pageIndex,
-      title: pageIndex.toString(),
-      current: currentPage === pageIndex,
-      ref: focusRef,
       focusRef: focusRef
-    })), pageIndex);
+    })), {}, {
+      'aria-label': undefined,
+      title: pageIndex
+    });
+    return React__default.createElement(Page, _extends$4({
+      key: pageIndex
+    }, getTransformedProps('page', props, pageIndex), {
+      ref: focusRef
+    }), pageIndex);
   };
   var renderPages = function renderPages() {
     var pages = [];
@@ -539,11 +595,11 @@ var Pagination = forwardRef(function (_ref, ref) {
     }
     return pages;
   };
-  return React__default.createElement(StyledPagination, _extends$4({}, getContainerProps(_objectSpread2({
+  return React__default.createElement(StyledPagination, _extends$4({}, getContainerProps({
     role: null
-  }, otherProps)), {
+  }), otherProps, {
     ref: ref
-  }), renderPreviousPage(theme.rtl), totalPages > 0 && renderPages(), renderNextPage(theme.rtl));
+  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage());
 });
 Pagination.propTypes = {
   currentPage: PropTypes.number.isRequired,

package/dist/typings/elements/Pagination/components/Gap.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends LiHTMLAttributes<HTMLLIElement>
+ */
+export declare const Gap: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/dist/typings/elements/Pagination/components/Next.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends LiHTMLAttributes<HTMLLIElement>
+ */
+export declare const Next: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/dist/typings/elements/Pagination/components/Page.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends LiHTMLAttributes<HTMLLIElement>
+ */
+export declare const Page: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/dist/typings/elements/Pagination/components/Previous.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends LiHTMLAttributes<HTMLLIElement>
+ */
+export declare const Previous: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/dist/typings/types/index.d.ts

@@ -28,7 +28,7 @@ export interface IPaginationProps extends Omit<HTMLAttributes<HTMLUListElement>,
     /**
      * Handles page change events
      *
-     * @param {any} currentPage The current page
+     * @param {number} currentPage The current page
      */
     onChange?: (currentPage: number) => void;
     /**
@@ -36,6 +36,7 @@ export interface IPaginationProps extends Omit<HTMLAttributes<HTMLUListElement>,
      *
      * @param {string} pageType The type of the page accepting the props
      * @param {any} props Default page props to transform
+     * @param {number} pageNumber The page number
      */
-    transformPageProps?: (pageType: PageType, props: any) => any;
+    transformPageProps?: (pageType: PageType, props: any, pageNumber?: number) => any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-pagination",
-  "version": "8.52.0",
+  "version": "8.53.2",
   "description": "Components relating to pagination in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,8 +21,8 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-pagination": "^0.3.8",
-    "@zendeskgarden/container-utilities": "^0.7.0",
+    "@zendeskgarden/container-pagination": "^1.0.0",
+    "@zendeskgarden/container-utilities": "^1.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
   },
@@ -33,8 +33,8 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.52.0",
-    "@zendeskgarden/svg-icons": "6.31.1"
+    "@zendeskgarden/react-theming": "^8.53.2",
+    "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "1bc3c4a001a73769a5e33b7431e8b5f895b7caec"
+  "gitHead": "b4ef84eb8f6606659aee9e689b8b44cb1feb0b87"
 }