@instructure/ui-pagination 10.26.1 → 11.0.0

package/CHANGELOG.md

@@ -3,9 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
+# [11.0.0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v11.0.0) (2025-10-06)
 
-**Note:** Version bump only for package @instructure/ui-pagination
+
+### Features
+
+* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
+
+
+### BREAKING CHANGES
+
+* **many:** InstUI v11 contains the following breaking changes:
+- React 16 and 17 are no longer supported
+- remove `PropTypes` from all packages
+- remove `CodeEditor` component
+- remove `@instui/theme-registry` package
+- remove `@testable`, `@experimental`, `@hack` decorators
+- InstUISettingsProvider's `as` prop is removed
+- `canvas.use()`, `canvasHighContrast.use()` functions are removed
+- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
+- `variables` field on theme objects are removed
+- remove deprecated props from Table: Row's `isStacked`, Body's
+  `isStacked`, `hover`, and `headers`
+- `Table`'s `caption` prop is now required
+- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
 
 
 

package/es/Pagination/PaginationArrowButton/index.js

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["label", "direction", "buttonRef"];
-var _dec, _class, _PaginationArrowButton;
 /*
  * The MIT License (MIT)
  *
@@ -30,8 +29,7 @@ import { IconButton } from '@instructure/ui-buttons';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { IconArrowOpenStartSolid, IconArrowOpenEndSolid, IconArrowDoubleStartSolid, IconArrowDoubleEndSolid } from '@instructure/ui-icons';
-import { testable } from '@instructure/ui-testable';
-import { allowedProps, propTypes } from './props';
+import { allowedProps } from './props';
 
 /**
 ---
@@ -40,7 +38,7 @@ id: Pagination.Navigation
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let PaginationArrowButton = (_dec = testable(), _dec(_class = (_PaginationArrowButton = class PaginationArrowButton extends Component {
+class PaginationArrowButton extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -93,10 +91,15 @@ let PaginationArrowButton = (_dec = testable(), _dec(_class = (_PaginationArrowB
         rel: props.href || props.to ? direction : void 0,
         elementRef: buttonRef,
         margin: this.margin,
+        "data-cid": "PaginationArrowButton",
         children: this.Icon
       })
     });
   }
-}, _PaginationArrowButton.displayName = "PaginationArrowButton", _PaginationArrowButton.componentId = 'Pagination.Navigation', _PaginationArrowButton.allowedProps = allowedProps, _PaginationArrowButton.propTypes = propTypes, _PaginationArrowButton.defaultProps = {}, _PaginationArrowButton)) || _class);
+}
+PaginationArrowButton.displayName = "PaginationArrowButton";
+PaginationArrowButton.componentId = 'Pagination.Navigation';
+PaginationArrowButton.allowedProps = allowedProps;
+PaginationArrowButton.defaultProps = {};
 export default PaginationArrowButton;
 export { PaginationArrowButton };

package/es/Pagination/PaginationArrowButton/props.js

@@ -22,16 +22,9 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  direction: PropTypes.oneOf(['first', 'prev', 'next', 'last']),
-  label: PropTypes.string.isRequired,
-  buttonRef: PropTypes.func,
-  onClick: PropTypes.func
-};
 const allowedProps = ['direction', 'label', 'buttonRef'
 
 // we don't want to pass onClick
 // 'onClick'
 ];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/Pagination/PaginationButton/index.js

@@ -1,4 +1,3 @@
-var _dec, _class, _PaginationButton;
 /*
  * The MIT License (MIT)
  *
@@ -26,8 +25,7 @@ var _dec, _class, _PaginationButton;
 import { Component } from 'react';
 import { BaseButton } from '@instructure/ui-buttons';
 import { omitProps } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -35,7 +33,8 @@ parent: Pagination
 id: Pagination.Page
 ---
 **/
-let PaginationButton = (_dec = testable(), _dec(_class = (_PaginationButton = class PaginationButton extends Component {
+
+class PaginationButton extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -54,6 +53,7 @@ let PaginationButton = (_dec = testable(), _dec(_class = (_PaginationButton = cl
       },
       children: _jsx(BaseButton, {
         color: "primary",
+        "data-cid": "PaginationButton",
         withBackground: this.props.current,
         withBorder: this.props.current,
         ...props,
@@ -66,8 +66,12 @@ let PaginationButton = (_dec = testable(), _dec(_class = (_PaginationButton = cl
       })
     });
   }
-}, _PaginationButton.displayName = "PaginationButton", _PaginationButton.componentId = 'Pagination.Page', _PaginationButton.propTypes = propTypes, _PaginationButton.allowedProps = allowedProps, _PaginationButton.defaultProps = {
+}
+PaginationButton.displayName = "PaginationButton";
+PaginationButton.componentId = 'Pagination.Page';
+PaginationButton.allowedProps = allowedProps;
+PaginationButton.defaultProps = {
   current: false
-}, _PaginationButton)) || _class);
+};
 export default PaginationButton;
 export { PaginationButton };

package/es/Pagination/PaginationButton/props.js

@@ -22,15 +22,8 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  current: PropTypes.bool,
-  onClick: PropTypes.func,
-  screenReaderLabel: PropTypes.string
-};
 const allowedProps = ['children', 'current', 'screenReaderLabel'
 // we don't want to pass onClick
 // 'onClick'
 ];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/Pagination/PaginationPageInput/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _PaginationPageInput;
+var _dec, _class, _PaginationPageInput;
 /*
  * The MIT License (MIT)
  *
@@ -24,13 +24,12 @@ var _dec, _dec2, _class, _PaginationPageInput;
  */
 
 import { Component } from 'react';
-import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import { NumberInput } from '@instructure/ui-number-input';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -38,7 +37,7 @@ parent: Pagination
 id: Pagination.PageInput
 ---
 **/
-let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_PaginationPageInput = class PaginationPageInput extends Component {
+let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_PaginationPageInput = class PaginationPageInput extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -160,6 +159,7 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
     return _jsxs("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
       ref: this.handleRef,
+      "data-cid": "PaginationPageInput",
       children: [_jsx("span", {
         css: styles === null || styles === void 0 ? void 0 : styles.numberInput,
         children: _jsx(NumberInput, {
@@ -179,8 +179,8 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
       }), this.renderLabel()]
     });
   }
-}, _PaginationPageInput.displayName = "PaginationPageInput", _PaginationPageInput.componentId = 'Pagination.PageInput', _PaginationPageInput.propTypes = propTypes, _PaginationPageInput.allowedProps = allowedProps, _PaginationPageInput.defaultProps = {
+}, _PaginationPageInput.displayName = "PaginationPageInput", _PaginationPageInput.componentId = 'Pagination.PageInput', _PaginationPageInput.allowedProps = allowedProps, _PaginationPageInput.defaultProps = {
   disabled: false
-}, _PaginationPageInput)) || _class) || _class);
+}, _PaginationPageInput)) || _class);
 export default PaginationPageInput;
 export { PaginationPageInput };

package/es/Pagination/PaginationPageInput/props.js

@@ -22,15 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  numberOfPages: PropTypes.number.isRequired,
-  currentPageIndex: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-  screenReaderLabel: PropTypes.func.isRequired,
-  label: PropTypes.func,
-  disabled: PropTypes.bool,
-  inputRef: PropTypes.func
-};
 const allowedProps = ['numberOfPages', 'currentPageIndex', 'onChange', 'screenReaderLabel', 'label', 'disabled', 'inputRef'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/Pagination/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _Pagination;
+var _dec, _dec2, _class, _Pagination;
 /*
  * The MIT License (MIT)
  *
@@ -22,10 +22,8 @@ var _dec, _dec2, _dec3, _class, _Pagination;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import { cloneElement, Children, Component } from 'react';
 import { View } from '@instructure/ui-view';
-import { testable } from '@instructure/ui-testable';
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils';
@@ -35,7 +33,7 @@ import { PaginationArrowButton } from './PaginationArrowButton';
 import { PaginationPageInput } from './PaginationPageInput';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** 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)])));
@@ -55,7 +53,7 @@ function propsHaveCompactView(props) {
 category: components
 ---
 **/
-let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Pagination = class Pagination extends Component {
+let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Pagination = class Pagination extends Component {
   constructor(props) {
     super(props);
     this._labelId = void 0;
@@ -105,7 +103,11 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       for (let i = from; i <= to; i++) {
         var _this$props$renderPag, _this$props3;
         pages.push(_jsx(Pagination.Page, {
-          ref: e => i === currentPage ? this.currentPageRef = e : null,
+          ref: e => {
+            if (i === currentPage) {
+              this.currentPageRef = e;
+            }
+          },
           onClick: () => this.handleNavigation(i, currentPage),
           onMouseEnter: () => this.handleOnMouseEnter(i),
           current: i === currentPage,
@@ -440,6 +442,7 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       margin: this.props.margin,
       css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.pagination,
       "aria-labelledby": this.props.label ? this._labelId : void 0,
+      "data-cid": "Pagination",
       children: [this.props.label && this.renderLabel(), _jsxs(View, {
         display: "inline-block",
         css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.pages,
@@ -447,7 +450,7 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       })]
     });
   }
-}, _Pagination.displayName = "Pagination", _Pagination.componentId = 'Pagination', _Pagination.propTypes = propTypes, _Pagination.allowedProps = allowedProps, _Pagination.defaultProps = {
+}, _Pagination.displayName = "Pagination", _Pagination.componentId = 'Pagination', _Pagination.allowedProps = allowedProps, _Pagination.defaultProps = {
   disabled: false,
   withFirstAndLastButton: false,
   showDisabledButtons: false,
@@ -463,6 +466,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   ellipsis: '…',
   renderPageIndicator: page => page,
   margin: 'space8'
-}, _Pagination.Page = PaginationButton, _Pagination.Navigation = PaginationArrowButton, _Pagination)) || _class) || _class) || _class);
+}, _Pagination.Page = PaginationButton, _Pagination.Navigation = PaginationArrowButton, _Pagination)) || _class) || _class);
 export default Pagination;
 export { Pagination, PaginationButton };

package/es/Pagination/props.js

@@ -22,36 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-import { Children } from '@instructure/ui-prop-types';
-import { PaginationButton } from './PaginationButton';
-const propTypes = {
-  children: Children.oneOf([PaginationButton]),
-  disabled: PropTypes.bool,
-  withFirstAndLastButton: PropTypes.bool,
-  showDisabledButtons: PropTypes.bool,
-  label: PropTypes.node,
-  labelNext: PropTypes.string,
-  labelPrev: PropTypes.string,
-  labelFirst: PropTypes.string,
-  labelLast: PropTypes.string,
-  labelNumberInput: PropTypes.func,
-  screenReaderLabelNumberInput: PropTypes.func,
-  screenReaderLabelPageButton: PropTypes.func,
-  variant: PropTypes.oneOf(['full', 'compact', 'input']),
-  margin: PropTypes.string,
-  as: PropTypes.elementType,
-  elementRef: PropTypes.func,
-  inputRef: PropTypes.func,
-  shouldHandleFocus: PropTypes.bool,
-  totalPageNumber: PropTypes.number,
-  currentPage: PropTypes.number,
-  siblingCount: PropTypes.number,
-  boundaryCount: PropTypes.number,
-  onPageChange: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  renderPageIndicator: PropTypes.func,
-  ellipsis: PropTypes.node
-};
 const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'screenReaderLabelPageButton', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus', 'totalPageNumber', 'currentPage', 'onPageChange', 'siblingCount', 'boundaryCount', 'renderPageIndicator', 'ellipsis', 'onMouseEnter'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/lib/Pagination/PaginationArrowButton/index.js

@@ -14,11 +14,9 @@ var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenS
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 var _IconArrowDoubleStartSolid = require("@instructure/ui-icons/lib/IconArrowDoubleStartSolid.js");
 var _IconArrowDoubleEndSolid = require("@instructure/ui-icons/lib/IconArrowDoubleEndSolid.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["label", "direction", "buttonRef"];
-var _dec, _class, _PaginationArrowButton;
 /*
  * The MIT License (MIT)
  *
@@ -48,7 +46,7 @@ parent: Pagination
 id: Pagination.Navigation
 ---
 **/
-let PaginationArrowButton = exports.PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_PaginationArrowButton = class PaginationArrowButton extends _react.Component {
+class PaginationArrowButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -101,9 +99,15 @@ let PaginationArrowButton = exports.PaginationArrowButton = (_dec = (0, _testabl
         rel: props.href || props.to ? direction : void 0,
         elementRef: buttonRef,
         margin: this.margin,
+        "data-cid": "PaginationArrowButton",
         children: this.Icon
       })
     });
   }
-}, _PaginationArrowButton.displayName = "PaginationArrowButton", _PaginationArrowButton.componentId = 'Pagination.Navigation', _PaginationArrowButton.allowedProps = _props.allowedProps, _PaginationArrowButton.propTypes = _props.propTypes, _PaginationArrowButton.defaultProps = {}, _PaginationArrowButton)) || _class);
+}
+exports.PaginationArrowButton = PaginationArrowButton;
+PaginationArrowButton.displayName = "PaginationArrowButton";
+PaginationArrowButton.componentId = 'Pagination.Navigation';
+PaginationArrowButton.allowedProps = _props.allowedProps;
+PaginationArrowButton.defaultProps = {};
 var _default = exports.default = PaginationArrowButton;

package/lib/Pagination/PaginationArrowButton/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,12 +28,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  direction: _propTypes.default.oneOf(['first', 'prev', 'next', 'last']),
-  label: _propTypes.default.string.isRequired,
-  buttonRef: _propTypes.default.func,
-  onClick: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['direction', 'label', 'buttonRef'
 
 // we don't want to pass onClick

package/lib/Pagination/PaginationButton/index.js

@@ -7,10 +7,8 @@ exports.default = exports.PaginationButton = void 0;
 var _react = require("react");
 var _BaseButton = require("@instructure/ui-buttons/lib/BaseButton");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _PaginationButton;
 /*
  * The MIT License (MIT)
  *
@@ -34,13 +32,15 @@ var _dec, _class, _PaginationButton;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /**
 ---
 parent: Pagination
 id: Pagination.Page
 ---
 **/
-let PaginationButton = exports.PaginationButton = (_dec = (0, _testable.testable)(), _dec(_class = (_PaginationButton = class PaginationButton extends _react.Component {
+
+class PaginationButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -59,6 +59,7 @@ let PaginationButton = exports.PaginationButton = (_dec = (0, _testable.testable
       },
       children: (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
         color: "primary",
+        "data-cid": "PaginationButton",
         withBackground: this.props.current,
         withBorder: this.props.current,
         ...props,
@@ -71,7 +72,12 @@ let PaginationButton = exports.PaginationButton = (_dec = (0, _testable.testable
       })
     });
   }
-}, _PaginationButton.displayName = "PaginationButton", _PaginationButton.componentId = 'Pagination.Page', _PaginationButton.propTypes = _props.propTypes, _PaginationButton.allowedProps = _props.allowedProps, _PaginationButton.defaultProps = {
+}
+exports.PaginationButton = PaginationButton;
+PaginationButton.displayName = "PaginationButton";
+PaginationButton.componentId = 'Pagination.Page';
+PaginationButton.allowedProps = _props.allowedProps;
+PaginationButton.defaultProps = {
   current: false
-}, _PaginationButton)) || _class);
+};
 var _default = exports.default = PaginationButton;

package/lib/Pagination/PaginationButton/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,12 +28,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  current: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  screenReaderLabel: _propTypes.default.string
-};
 const allowedProps = exports.allowedProps = ['children', 'current', 'screenReaderLabel'
 // we don't want to pass onClick
 // 'onClick'

package/lib/Pagination/PaginationPageInput/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.PaginationPageInput = void 0;
 var _react = require("react");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _NumberInput = require("@instructure/ui-number-input/lib/NumberInput");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
@@ -14,7 +13,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _PaginationPageInput;
+var _dec, _class, _PaginationPageInput;
 /*
  * The MIT License (MIT)
  *
@@ -44,7 +43,7 @@ parent: Pagination
 id: Pagination.PageInput
 ---
 **/
-let PaginationPageInput = exports.PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_PaginationPageInput = class PaginationPageInput extends _react.Component {
+let PaginationPageInput = exports.PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_PaginationPageInput = class PaginationPageInput extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -166,6 +165,7 @@ let PaginationPageInput = exports.PaginationPageInput = (_dec = (0, _emotion.wit
     return (0, _jsxRuntime.jsxs)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
       ref: this.handleRef,
+      "data-cid": "PaginationPageInput",
       children: [(0, _jsxRuntime.jsx)("span", {
         css: styles === null || styles === void 0 ? void 0 : styles.numberInput,
         children: (0, _jsxRuntime.jsx)(_NumberInput.NumberInput, {
@@ -185,7 +185,7 @@ let PaginationPageInput = exports.PaginationPageInput = (_dec = (0, _emotion.wit
       }), this.renderLabel()]
     });
   }
-}, _PaginationPageInput.displayName = "PaginationPageInput", _PaginationPageInput.componentId = 'Pagination.PageInput', _PaginationPageInput.propTypes = _props.propTypes, _PaginationPageInput.allowedProps = _props.allowedProps, _PaginationPageInput.defaultProps = {
+}, _PaginationPageInput.displayName = "PaginationPageInput", _PaginationPageInput.componentId = 'Pagination.PageInput', _PaginationPageInput.allowedProps = _props.allowedProps, _PaginationPageInput.defaultProps = {
   disabled: false
-}, _PaginationPageInput)) || _class) || _class);
+}, _PaginationPageInput)) || _class);
 var _default = exports.default = PaginationPageInput;

package/lib/Pagination/PaginationPageInput/props.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,13 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  numberOfPages: _propTypes.default.number.isRequired,
-  currentPageIndex: _propTypes.default.number.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  screenReaderLabel: _propTypes.default.func.isRequired,
-  label: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  inputRef: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['numberOfPages', 'currentPageIndex', 'onChange', 'screenReaderLabel', 'label', 'disabled', 'inputRef'];

package/lib/Pagination/index.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "PaginationButton", {
 exports.default = void 0;
 var _react = require("react");
 var _View = require("@instructure/ui-view/lib/View");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
@@ -28,7 +27,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _dec3, _class, _Pagination;
+var _dec, _dec2, _class, _Pagination;
 /*
  * The MIT License (MIT)
  *
@@ -70,7 +69,7 @@ function propsHaveCompactView(props) {
 category: components
 ---
 **/
-let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Pagination = class Pagination extends _react.Component {
+let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Pagination = class Pagination extends _react.Component {
   constructor(props) {
     super(props);
     this._labelId = void 0;
@@ -120,7 +119,11 @@ let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeter
       for (let i = from; i <= to; i++) {
         var _this$props$renderPag, _this$props3;
         pages.push((0, _jsxRuntime.jsx)(Pagination.Page, {
-          ref: e => i === currentPage ? this.currentPageRef = e : null,
+          ref: e => {
+            if (i === currentPage) {
+              this.currentPageRef = e;
+            }
+          },
           onClick: () => this.handleNavigation(i, currentPage),
           onMouseEnter: () => this.handleOnMouseEnter(i),
           current: i === currentPage,
@@ -455,6 +458,7 @@ let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeter
       margin: this.props.margin,
       css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.pagination,
       "aria-labelledby": this.props.label ? this._labelId : void 0,
+      "data-cid": "Pagination",
       children: [this.props.label && this.renderLabel(), (0, _jsxRuntime.jsxs)(_View.View, {
         display: "inline-block",
         css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.pages,
@@ -462,7 +466,7 @@ let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeter
       })]
     });
   }
-}, _Pagination.displayName = "Pagination", _Pagination.componentId = 'Pagination', _Pagination.propTypes = _props.propTypes, _Pagination.allowedProps = _props.allowedProps, _Pagination.defaultProps = {
+}, _Pagination.displayName = "Pagination", _Pagination.componentId = 'Pagination', _Pagination.allowedProps = _props.allowedProps, _Pagination.defaultProps = {
   disabled: false,
   withFirstAndLastButton: false,
   showDisabledButtons: false,
@@ -478,5 +482,5 @@ let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeter
   ellipsis: '…',
   renderPageIndicator: page => page,
   margin: 'space8'
-}, _Pagination.Page = _PaginationButton.PaginationButton, _Pagination.Navigation = _PaginationArrowButton.PaginationArrowButton, _Pagination)) || _class) || _class) || _class);
+}, _Pagination.Page = _PaginationButton.PaginationButton, _Pagination.Navigation = _PaginationArrowButton.PaginationArrowButton, _Pagination)) || _class) || _class);
 var _default = exports.default = Pagination;

package/lib/Pagination/props.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-var _PaginationButton = require("./PaginationButton");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -32,32 +28,4 @@ var _PaginationButton = require("./PaginationButton");
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _Children.Children.oneOf([_PaginationButton.PaginationButton]),
-  disabled: _propTypes.default.bool,
-  withFirstAndLastButton: _propTypes.default.bool,
-  showDisabledButtons: _propTypes.default.bool,
-  label: _propTypes.default.node,
-  labelNext: _propTypes.default.string,
-  labelPrev: _propTypes.default.string,
-  labelFirst: _propTypes.default.string,
-  labelLast: _propTypes.default.string,
-  labelNumberInput: _propTypes.default.func,
-  screenReaderLabelNumberInput: _propTypes.default.func,
-  screenReaderLabelPageButton: _propTypes.default.func,
-  variant: _propTypes.default.oneOf(['full', 'compact', 'input']),
-  margin: _propTypes.default.string,
-  as: _propTypes.default.elementType,
-  elementRef: _propTypes.default.func,
-  inputRef: _propTypes.default.func,
-  shouldHandleFocus: _propTypes.default.bool,
-  totalPageNumber: _propTypes.default.number,
-  currentPage: _propTypes.default.number,
-  siblingCount: _propTypes.default.number,
-  boundaryCount: _propTypes.default.number,
-  onPageChange: _propTypes.default.func,
-  onMouseEnter: _propTypes.default.func,
-  renderPageIndicator: _propTypes.default.func,
-  ellipsis: _propTypes.default.node
-};
 const allowedProps = exports.allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'screenReaderLabelPageButton', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus', 'totalPageNumber', 'currentPage', 'onPageChange', 'siblingCount', 'boundaryCount', 'renderPageIndicator', 'ellipsis', 'onMouseEnter'];