@instructure/ui-pagination 8.13.1-snapshot.9 → 8.14.0

package/lib/Pagination/index.js

@@ -38,6 +38,8 @@ var _PaginationButton = require("./PaginationButton");
 
 var _PaginationArrowButton = require("./PaginationArrowButton");
 
+var _PaginationPageInput = require("./PaginationPageInput");
+
 var _styles = _interopRequireDefault(require("./styles"));
 
 var _props = require("./props");
@@ -47,30 +49,35 @@ var _dec, _dec2, _class, _class2, _temp, _span, _span2;
 /** This is an [].findIndex optimized to work on really big, but sparse, arrays */
 const fastFindIndex = (arr, fn) => Number(Object.keys(arr).find(k => fn(arr[Number(k)])));
 
-function propsHaveCompactView(props) {
-  var _props$children;
+const childrenArray = props => {
+  const children = props.children;
 
-  return props.variant === 'compact' && (props === null || props === void 0 ? void 0 : (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.length) > 5;
-}
+  if (!children) {
+    return [];
+  }
 
-function shouldShowPrevButton(props, currentPageIndex) {
-  return propsHaveCompactView(props) && currentPageIndex > 0;
-}
+  return Array.isArray(children) ? children : [children];
+};
 
-function shouldShowNextButton(props, currentPageIndex) {
-  return propsHaveCompactView(props) && currentPageIndex < props.children.length - 1;
+function propsHaveCompactView(props) {
+  return props.variant === 'compact' && childrenArray(props).length > 5;
 }
+
 /**
 ---
 category: components
 ---
 **/
-
-
 let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pagination extends _react.Component {
   constructor() {
     super(...arguments);
+    this._labelId = void 0;
     this.ref = null;
+    this._inputRef = null;
+    this._firstButton = null;
+    this._prevButton = null;
+    this._nextButton = null;
+    this._lastButton = null;
 
     this.handleElementRef = el => {
       this.ref = el;
@@ -82,42 +89,87 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
       }
     };
 
+    this.handleInputRef = el => {
+      this._inputRef = el;
+    };
+
     this._labelId = (0, _uid.uid)('Pagination');
-    this._prevButton = null;
-    this._nextButton = null;
   }
 
   get _root() {
     return this.ref;
   }
 
+  get inputMode() {
+    return this.props.variant === 'input';
+  }
+
+  get childPages() {
+    return childrenArray(this.props);
+  }
+
+  get withFirstAndLastButton() {
+    return this.inputMode || this.props.withFirstAndLastButton;
+  }
+
+  get showDisabledButtons() {
+    return this.inputMode || this.props.showDisabledButtons;
+  }
+
   getSnapshotBeforeUpdate() {
     const activeElement = (0, _getActiveElement.getActiveElement)();
-    return {
-      prevButtonFocused: this._prevButton === activeElement,
-      nextButtonFocused: this._nextButton === activeElement
-    };
+
+    if (activeElement === this._firstButton || activeElement === this._prevButton || activeElement === this._nextButton || activeElement === this._lastButton) {
+      return {
+        lastFocusedButton: activeElement
+      };
+    } else {
+      return {
+        lastFocusedButton: void 0
+      };
+    }
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate(prevProps, _prevState, snapshot) {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
 
     if (!this.props.shouldHandleFocus || !propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props)) {
       return;
+    } else {
+      this.focusElementAfterUpdate(snapshot);
     }
+  }
 
-    const _ref = snapshot || {},
-          prevButtonFocused = _ref.prevButtonFocused,
-          nextButtonFocused = _ref.nextButtonFocused;
+  focusElementAfterUpdate(snapshot) {
+    const lastFocusedButton = snapshot.lastFocusedButton;
 
-    if (prevButtonFocused || nextButtonFocused) {
+    if (lastFocusedButton) {
       const focusable = (0, _findTabbable.findTabbable)(this.ref);
-      const focusIndex = prevButtonFocused ? 0 : focusable.length - 1;
-      focusable[focusIndex].focus();
+      const direction = lastFocusedButton.dataset.direction; // By default we want to focus the previously focused button
+
+      let nextFocusElement = lastFocusedButton; // In case the button is not focusable anymore
+      // (disabled or not in the DOM), we focus to the next available page
+
+      if (!focusable.includes(nextFocusElement)) {
+        if (direction === 'first' || direction === 'prev') {
+          nextFocusElement = focusable[0];
+        }
+
+        if (direction === 'next' || direction === 'last') {
+          nextFocusElement = focusable[focusable.length - 1];
+        }
+      }
+
+      ;
+      nextFocusElement.focus();
     }
   }
 
@@ -126,13 +178,13 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
   }
 
   transferDisabledPropToChildren(children) {
-    return this.props.disabled ? _react.default.Children.map(children, page => /*#__PURE__*/_react.default.cloneElement(page, {
+    return children && this.props.disabled ? _react.default.Children.map(children, page => /*#__PURE__*/_react.default.cloneElement(page, {
       disabled: this.props.disabled
     })) : children;
   }
 
   renderLabel() {
-    const display = this.props.variant === 'compact' ? 'block' : 'inline-block';
+    const display = this.props.variant === 'full' ? 'inline-block' : 'block';
     const visibleLabel = (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label);
     return (0, _emotion.jsx)(_View.View, {
       as: "span",
@@ -142,8 +194,26 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
     }, this.props.label);
   }
 
+  renderPageInput(currentPageIndex) {
+    return (0, _emotion.jsx)(_PaginationPageInput.PaginationPageInput, {
+      numberOfPages: this.childPages.length,
+      currentPageIndex: currentPageIndex,
+      onChange: this.handleInputChange.bind(this),
+      screenReaderLabel: this.props.screenReaderLabelNumberInput,
+      label: this.props.labelNumberInput,
+      disabled: this.props.disabled,
+      inputRef: this.handleInputRef
+    });
+  }
+
+  handleInputChange(event, pageIndex) {
+    var _this$childPages$page, _this$childPages$page2;
+
+    (_this$childPages$page = (_this$childPages$page2 = this.childPages[pageIndex].props).onClick) === null || _this$childPages$page === void 0 ? void 0 : _this$childPages$page.call(_this$childPages$page2, event);
+  }
+
   renderPages(currentPageIndex) {
-    const allPages = this.props.children;
+    const allPages = this.childPages;
     let visiblePages = allPages;
 
     if (this.compactView) {
@@ -155,14 +225,14 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
       const firstPage = allPages[firstIndex];
       const lastPage = allPages[lastIndex];
       if (sliceStart - firstIndex > 1) visiblePages.unshift(_span || (_span = (0, _emotion.jsx)("span", {
-          key: "first",
-          "aria-hidden": "true"
-        }, "\u2026")));
+        key: "first",
+        "aria-hidden": "true"
+      }, "\u2026")));
       if (sliceStart - firstIndex > 0) visiblePages.unshift(firstPage);
       if (lastIndex - sliceEnd + 1 > 1) visiblePages.push(_span2 || (_span2 = (0, _emotion.jsx)("span", {
-          key: "last",
-          "aria-hidden": "true"
-        }, "\u2026")));
+        key: "last",
+        "aria-hidden": "true"
+      }, "\u2026")));
       if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage);
     }
 
@@ -171,27 +241,80 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
     }, this.transferDisabledPropToChildren(visiblePages));
   }
 
-  renderArrowButton(label, direction, currentPageIndex) {
-    // eslint-disable-next-line react/prop-types
-    const _this$props$children$ = this.props.children[currentPageIndex + direction].props,
-          onClick = _this$props$children$.onClick,
-          disabled = _this$props$children$.disabled;
+  getArrowVariant(direction, currentPageIndex, pagesCount) {
+    switch (direction) {
+      case 'first':
+        return {
+          pageIndex: 0,
+          label: this.props.labelFirst || 'First Page',
+          shouldEnableIcon: currentPageIndex > 1,
+          handleButtonRef: el => {
+            this._firstButton = el;
+          }
+        };
+
+      case 'prev':
+        return {
+          pageIndex: currentPageIndex - 1,
+          label: this.props.labelPrev || 'Previous Page',
+          shouldEnableIcon: currentPageIndex > 0,
+          handleButtonRef: el => {
+            this._prevButton = el;
+          }
+        };
+
+      case 'next':
+        return {
+          pageIndex: currentPageIndex + 1,
+          label: this.props.labelNext || 'Next Page',
+          shouldEnableIcon: currentPageIndex < pagesCount - 1,
+          handleButtonRef: el => {
+            this._nextButton = el;
+          }
+        };
+
+      case 'last':
+        return {
+          pageIndex: pagesCount - 1,
+          label: this.props.labelLast || 'Last Page',
+          shouldEnableIcon: currentPageIndex < pagesCount - 2,
+          handleButtonRef: el => {
+            this._lastButton = el;
+          }
+        };
+    }
+  }
 
-    const handleButtonRef = el => {
-      if (direction < 0) {
-        this._prevButton = el;
-      } else {
-        this._nextButton = el;
-      }
-    };
+  renderArrowButton(direction, currentPageIndex) {
+    var _page$props, _page$props2;
 
-    return (0, _emotion.jsx)(_PaginationArrowButton.PaginationArrowButton, {
-      direction: direction === -1 ? 'prev' : 'next',
+    const childPages = this.childPages; // We don't display the arrows in "compact" variant under 6 items
+
+    if (!(propsHaveCompactView(this.props) || this.inputMode)) {
+      return null;
+    }
+
+    if (!this.withFirstAndLastButton && (direction === 'first' || direction === 'last')) {
+      return null;
+    }
+
+    const _this$getArrowVariant = this.getArrowVariant(direction, currentPageIndex, childPages.length),
+          pageIndex = _this$getArrowVariant.pageIndex,
+          label = _this$getArrowVariant.label,
+          shouldEnableIcon = _this$getArrowVariant.shouldEnableIcon,
+          handleButtonRef = _this$getArrowVariant.handleButtonRef;
+
+    const page = childPages[pageIndex];
+    const disabled = (page === null || page === void 0 ? void 0 : (_page$props = page.props) === null || _page$props === void 0 ? void 0 : _page$props.disabled) || this.props.disabled || !shouldEnableIcon;
+    const onClick = page === null || page === void 0 ? void 0 : (_page$props2 = page.props) === null || _page$props2 === void 0 ? void 0 : _page$props2.onClick;
+    return shouldEnableIcon || this.showDisabledButtons ? (0, _emotion.jsx)(_PaginationArrowButton.PaginationArrowButton, {
+      direction: direction,
+      "data-direction": direction,
       label: label,
       onClick: onClick,
       disabled: disabled,
       buttonRef: handleButtonRef
-    });
+    }) : null;
   }
 
   render() {
@@ -208,19 +331,23 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
       elementRef: this.handleElementRef,
       margin: this.props.margin,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pagination,
-      "aria-labelledby": this.props.label && this._labelId
+      "aria-labelledby": this.props.label ? this._labelId : void 0
     }), this.props.label && this.renderLabel(), (0, _emotion.jsx)(_View.View, {
       display: "inline-block",
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
-    }, shouldShowPrevButton(this.props, currentPageIndex) && this.renderArrowButton(this.props.labelPrev, -1, currentPageIndex), this.renderPages(currentPageIndex), shouldShowNextButton(this.props, currentPageIndex) && this.renderArrowButton(this.props.labelNext, 1, currentPageIndex)));
+    }, this.renderArrowButton('first', currentPageIndex), this.renderArrowButton('prev', currentPageIndex), this.inputMode ? this.renderPageInput(currentPageIndex) : this.renderPages(currentPageIndex), this.renderArrowButton('next', currentPageIndex), this.renderArrowButton('last', currentPageIndex)));
   }
 
 }, _class2.displayName = "Pagination", _class2.componentId = 'Pagination', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   children: null,
   disabled: false,
+  withFirstAndLastButton: false,
+  showDisabledButtons: false,
   variant: 'full',
   as: 'div',
   elementRef: el => {},
+  labelNumberInput: numberOfPages => `of ${numberOfPages}`,
+  screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
   shouldHandleFocus: true
 }, _class2.Page = _PaginationButton.PaginationButton, _class2.Navigation = _PaginationArrowButton.PaginationArrowButton, _temp)) || _class) || _class);
 exports.Pagination = Pagination;

package/lib/Pagination/props.js

@@ -49,6 +49,16 @@ const propTypes = {
    */
   disabled: _propTypes.default.bool,
 
+  /**
+   * Displays "jump to first" and "jump to last" buttons. Always turned on with `input` variant.
+   */
+  withFirstAndLastButton: _propTypes.default.bool,
+
+  /**
+   * Displays the unavailable navigation buttons as disabled instead of hiding them.  Always turned on with `input` variant.
+   */
+  showDisabledButtons: _propTypes.default.bool,
+
   /**
    * Visible label for component
    */
@@ -64,12 +74,32 @@ const propTypes = {
    */
   labelPrev: _propTypes.default.string,
 
+  /**
+   * Accessible label for "jump to first" button
+   */
+  labelFirst: _propTypes.default.string,
+
+  /**
+   * Accessible label for "jump to last" button
+   */
+  labelLast: _propTypes.default.string,
+
+  /**
+   * Label for number input (for `input` variant)
+   */
+  labelNumberInput: _propTypes.default.func,
+
+  /**
+   * ScreenReaderLabel for number input (for `input` variant)
+   */
+  screenReaderLabelNumberInput: _propTypes.default.func,
+
   /**
    * The compact variant truncates the page navigation to show only the first,
    * last, and pages immediately surrounding the current page. Fewer than 5 pages,
    * no next/previous arrow buttons will be shown, and all pages will be listed
    */
-  variant: _propTypes.default.oneOf(['full', 'compact']),
+  variant: _propTypes.default.oneOf(['full', 'compact', 'input']),
 
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
@@ -96,5 +126,5 @@ const propTypes = {
   shouldHandleFocus: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'disabled', 'label', 'labelNext', 'labelPrev', 'variant', 'margin', 'as', 'elementRef', 'shouldHandleFocus'];
+const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'shouldHandleFocus'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-queries": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.0",
+    "@instructure/ui-test-locator": "8.14.0",
+    "@instructure/ui-test-queries": "8.14.0",
+    "@instructure/ui-test-utils": "8.14.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-a11y-content": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-a11y-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-buttons": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-portal": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-tooltip": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-view": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/uid": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/emotion": "8.14.0",
+    "@instructure/shared-types": "8.14.0",
+    "@instructure/ui-a11y-content": "8.14.0",
+    "@instructure/ui-a11y-utils": "8.14.0",
+    "@instructure/ui-buttons": "8.14.0",
+    "@instructure/ui-dom-utils": "8.14.0",
+    "@instructure/ui-icons": "8.14.0",
+    "@instructure/ui-number-input": "8.14.0",
+    "@instructure/ui-portal": "8.14.0",
+    "@instructure/ui-prop-types": "8.14.0",
+    "@instructure/ui-react-utils": "8.14.0",
+    "@instructure/ui-testable": "8.14.0",
+    "@instructure/ui-tooltip": "8.14.0",
+    "@instructure/ui-utils": "8.14.0",
+    "@instructure/ui-view": "8.14.0",
+    "@instructure/uid": "8.14.0",
+    "keycode": "^2",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -54,6 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  "sideEffects": false
 }

package/src/Pagination/PaginationArrowButton/index.tsx

@@ -29,9 +29,12 @@ import { PresentationContent } from '@instructure/ui-a11y-content'
 import { Tooltip } from '@instructure/ui-tooltip'
 import {
   IconArrowOpenStartSolid,
-  IconArrowOpenEndSolid
+  IconArrowOpenEndSolid,
+  IconArrowDoubleStartSolid,
+  IconArrowDoubleEndSolid
 } from '@instructure/ui-icons'
 import { testable } from '@instructure/ui-testable'
+
 import type { PaginationNavigationProps } from './props'
 import { allowedProps, propTypes } from './props'
 
@@ -59,10 +62,34 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
     this.ref = el
   }
 
+  get margin() {
+    switch (this.props.direction) {
+      case 'first':
+        return '0 xx-small 0 0'
+      case 'last':
+        return '0 0 0 xx-small'
+      default:
+        return undefined
+    }
+  }
+
+  get Icon() {
+    switch (this.props.direction) {
+      case 'first':
+        return IconArrowDoubleStartSolid
+      case 'prev':
+        return IconArrowOpenStartSolid
+      case 'next':
+        return IconArrowOpenEndSolid
+      case 'last':
+        return IconArrowDoubleEndSolid
+      default:
+        return null
+    }
+  }
+
   render() {
     const { label, direction, buttonRef, ...props } = this.props
-    const Icon =
-      direction === 'prev' ? IconArrowOpenStartSolid : IconArrowOpenEndSolid
     return (
       <Tooltip
         on={['hover', 'focus']}
@@ -82,8 +109,9 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
           // @ts-expect-error ts-migrate(2339) FIXME: Property 'href' does not exist on type '{ children... Remove this comment to see the full error message
           rel={props.href || props.to ? direction : undefined}
           elementRef={buttonRef}
+          margin={this.margin}
         >
-          {Icon}
+          {this.Icon}
         </IconButton>
       </Tooltip>
     )

package/src/Pagination/PaginationArrowButton/props.ts

@@ -30,10 +30,18 @@ import type {
   PropValidators
 } from '@instructure/shared-types'
 
+type PaginationArrowDirections = 'first' | 'prev' | 'next' | 'last'
+
 type PaginationNavigationOwnProps = {
-  direction?: 'next' | 'prev'
-  label: string | React.ReactNode
+  direction?: PaginationArrowDirections
+  label: string | React.ReactChild | React.ReactFragment
   buttonRef?: (...args: any[]) => any
+  onClick?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>
+  ) => void
 }
 
 type PropKeys = keyof PaginationNavigationOwnProps
@@ -44,12 +52,20 @@ type PaginationNavigationProps = PaginationNavigationOwnProps &
   OtherHTMLAttributes<PaginationNavigationOwnProps>
 
 const propTypes: PropValidators<PropKeys> = {
-  direction: PropTypes.oneOf(['next', 'prev']),
+  direction: PropTypes.oneOf(['first', 'prev', 'next', 'last']),
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  buttonRef: PropTypes.func
+  buttonRef: PropTypes.func,
+  onClick: PropTypes.func
 }
 
-const allowedProps: AllowedPropKeys = ['direction', 'label', 'buttonRef']
+const allowedProps: AllowedPropKeys = [
+  'direction',
+  'label',
+  'buttonRef'
+
+  // we don't want to pass onClick
+  // 'onClick'
+]
 
-export type { PaginationNavigationProps }
+export type { PaginationNavigationProps, PaginationArrowDirections }
 export { propTypes, allowedProps }

package/src/Pagination/PaginationButton/props.ts

@@ -33,6 +33,12 @@ import type {
 type PaginationPageOwnProps = {
   children: React.ReactNode
   current?: boolean
+  onClick?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>
+  ) => void
 }
 
 type PropKeys = keyof PaginationPageOwnProps
@@ -50,10 +56,20 @@ const propTypes: PropValidators<PropKeys> = {
   /**
    * Whether the page is currently displayed
    */
-  current: PropTypes.bool
+  current: PropTypes.bool,
+  /**
+   * Whether the page is currently displayed
+   */
+  onClick: PropTypes.func
 }
 
-const allowedProps: AllowedPropKeys = ['children', 'current']
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'current'
+
+  // we don't want to pass onClick
+  // 'onClick'
+]
 
 export type { PaginationPageProps }
 export { propTypes, allowedProps }

package/src/Pagination/PaginationLocator.ts

@@ -23,6 +23,7 @@
  */
 import { locator } from '@instructure/ui-test-locator'
 
+import { PaginationPageInputLocator } from './PaginationPageInput/PaginationPageInputLocator'
 import { PaginationArrowButtonLocator } from './PaginationArrowButton/PaginationArrowButtonLocator'
 import { Pagination } from './index'
 
@@ -38,5 +39,8 @@ export const PaginationLocator = locator(Pagination.selector, {
     PaginationButtonLocator.find(...args),
 
   findArrowButton: async (...args: any[]) =>
-    PaginationArrowButtonLocator.find(...args)
+    PaginationArrowButtonLocator.find(...args),
+
+  findPageInput: async (...args: any[]) =>
+    PaginationPageInputLocator.find(...args)
 })

package/src/Pagination/PaginationPageInput/PaginationPageInputLocator.ts

@@ -0,0 +1,42 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { locator } from '@instructure/ui-test-locator'
+
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
+import { NumberInputLocator } from '@instructure/ui-number-input/es/NumberInput/NumberInputLocator' // eslint-disable-line no-restricted-imports
+
+import { PaginationPageInput } from './index'
+
+export const PaginationPageInputLocator = locator(
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+  PaginationPageInput.selector,
+
+  {
+    findInput: (...args: any[]) => NumberInputLocator.findInput(...args),
+
+    findNumberInputArrows: (...args: any[]) =>
+      NumberInputLocator.findArrowButtons(...args)
+  }
+)