@instructure/ui-pagination 10.26.1 → 11.0.1-snapshot-0

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'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "10.26.1",
+  "version": "11.0.1-snapshot-0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,36 +23,33 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-0",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-a11y-content": "10.26.1",
-    "@instructure/ui-a11y-utils": "10.26.1",
-    "@instructure/ui-buttons": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-number-input": "10.26.1",
-    "@instructure/ui-portal": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
-    "@instructure/ui-tooltip": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "@instructure/uid": "10.26.1",
-    "prop-types": "^15.8.1"
+    "@instructure/emotion": "11.0.1-snapshot-0",
+    "@instructure/shared-types": "11.0.1-snapshot-0",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-0",
+    "@instructure/ui-a11y-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-buttons": "11.0.1-snapshot-0",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-icons": "11.0.1-snapshot-0",
+    "@instructure/ui-number-input": "11.0.1-snapshot-0",
+    "@instructure/ui-portal": "11.0.1-snapshot-0",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-themes": "11.0.1-snapshot-0",
+    "@instructure/ui-tooltip": "11.0.1-snapshot-0",
+    "@instructure/ui-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-view": "11.0.1-snapshot-0",
+    "@instructure/uid": "11.0.1-snapshot-0"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/Pagination/PaginationArrowButton/index.tsx

@@ -33,10 +33,9 @@ import {
   IconArrowDoubleStartSolid,
   IconArrowDoubleEndSolid
 } from '@instructure/ui-icons'
-import { testable } from '@instructure/ui-testable'
 
 import type { PaginationNavigationProps } from './props'
-import { allowedProps, propTypes } from './props'
+import { allowedProps } from './props'
 
 /**
 ---
@@ -44,12 +43,10 @@ parent: Pagination
 id: Pagination.Navigation
 ---
 **/
-@testable()
 class PaginationArrowButton extends Component<PaginationNavigationProps> {
   static readonly componentId = 'Pagination.Navigation'
 
   static allowedProps = allowedProps
-  static propTypes = propTypes
 
   static defaultProps = {}
 
@@ -103,6 +100,7 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
           rel={props.href || props.to ? direction : undefined}
           elementRef={buttonRef}
           margin={this.margin}
+          data-cid="PaginationArrowButton"
         >
           {this.Icon}
         </IconButton>

package/src/Pagination/PaginationArrowButton/props.ts

@@ -23,11 +23,8 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
   OtherHTMLAttributes,
-  PropValidators,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
 import type { IconButtonProps } from '@instructure/ui-buttons'
@@ -64,14 +61,6 @@ type PaginationNavigationProps =
   > &
     PaginationNavigationOwnProps &
     OtherHTMLAttributes<PaginationNavigationOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
-  direction: PropTypes.oneOf(['first', 'prev', 'next', 'last']),
-  label: PropTypes.string.isRequired,
-  buttonRef: PropTypes.func,
-  onClick: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'direction',
   'label',
@@ -82,4 +71,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { PaginationNavigationProps, PaginationArrowDirections }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Pagination/PaginationButton/index.tsx

@@ -26,9 +26,8 @@ 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 type { PaginationPageProps } from './props'
 
 /**
@@ -38,11 +37,9 @@ id: Pagination.Page
 ---
 **/
 
-@testable()
 class PaginationButton extends Component<PaginationPageProps> {
   static readonly componentId = 'Pagination.Page'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     current: false
@@ -64,6 +61,7 @@ class PaginationButton extends Component<PaginationPageProps> {
       <li style={{ all: 'unset' }}>
         <BaseButton
           color="primary"
+          data-cid="PaginationButton"
           withBackground={this.props.current}
           withBorder={this.props.current}
           {...props}

package/src/Pagination/PaginationButton/props.ts

@@ -23,12 +23,9 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
   OtherHTMLAttributes,
-  PickPropsWithExceptions,
-  PropValidators
+  PickPropsWithExceptions
 } from '@instructure/shared-types'
 import type { BaseButtonProps } from '@instructure/ui-buttons'
 
@@ -68,13 +65,6 @@ type PaginationPageProps =
     PaginationPageOwnProps &
     OtherHTMLAttributes<PaginationPageOwnProps>
 
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node.isRequired,
-  current: PropTypes.bool,
-  onClick: PropTypes.func,
-  screenReaderLabel: PropTypes.string
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'current',
@@ -84,4 +74,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { PaginationPageProps }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Pagination/PaginationPageInput/index.tsx

@@ -24,7 +24,6 @@
 
 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'
@@ -32,7 +31,7 @@ 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 type {
   PaginationPageInputProps,
   PaginationPageInputState
@@ -45,14 +44,12 @@ id: Pagination.PageInput
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class PaginationPageInput extends Component<
   PaginationPageInputProps,
   PaginationPageInputState
 > {
   static readonly componentId = 'Pagination.PageInput'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     disabled: false
@@ -212,7 +209,11 @@ class PaginationPageInput extends Component<
     const { styles, disabled } = this.props
 
     return (
-      <span css={styles?.paginationPageInput} ref={this.handleRef}>
+      <span
+        css={styles?.paginationPageInput}
+        ref={this.handleRef}
+        data-cid="PaginationPageInput"
+      >
         <span css={styles?.numberInput}>
           <NumberInput
             renderLabel={this.renderScreenReaderLabel()}

package/src/Pagination/PaginationPageInput/props.ts

@@ -22,15 +22,9 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  PaginationPageInputTheme,
-  PropValidators
-} from '@instructure/shared-types'
+import type { PaginationPageInputTheme } from '@instructure/shared-types'
 import React from 'react'
-
 type PaginationPageInputOwnProps = {
   /**
    * The number of pages in total
@@ -83,17 +77,6 @@ type PaginationPageInputState = {
   number: number
   value: string
 }
-
-const propTypes: PropValidators<PropKeys> = {
-  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: AllowedPropKeys = [
   'numberOfPages',
   'currentPageIndex',
@@ -109,4 +92,4 @@ export type {
   PaginationPageInputStyle,
   PaginationPageInputState
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Pagination/index.tsx

@@ -21,7 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import {
   cloneElement,
   Children,
@@ -31,7 +30,6 @@ import {
 } 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'
@@ -47,7 +45,7 @@ import generateComponentTheme from './theme'
 import type { PaginationPageProps } from './PaginationButton/props'
 import type { PaginationArrowDirections } from './PaginationArrowButton/props'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { PaginationProps, PaginationSnapshot, ChildPage } from './props'
 
 /** This is an [].findIndex optimized to work on really big, but sparse, arrays */
@@ -88,11 +86,9 @@ category: components
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class Pagination extends Component<PaginationProps> {
   static readonly componentId = 'Pagination'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     disabled: false,
@@ -328,7 +324,11 @@ class Pagination extends Component<PaginationProps> {
     for (let i = from; i <= to; i++) {
       pages.push(
         <Pagination.Page
-          ref={(e) => (i === currentPage ? (this.currentPageRef = e) : null)}
+          ref={(e) => {
+            if (i === currentPage) {
+              this.currentPageRef = e
+            }
+          }}
           key={i}
           onClick={() => this.handleNavigation(i, currentPage)}
           onMouseEnter={() => this.handleOnMouseEnter(i)}
@@ -642,6 +642,7 @@ class Pagination extends Component<PaginationProps> {
         margin={this.props.margin}
         css={this.props.styles?.pagination}
         aria-labelledby={this.props.label ? this._labelId : undefined}
+        data-cid="Pagination"
       >
         {this.props.label && this.renderLabel()}
         <View display="inline-block" css={this.props.styles?.pages}>

package/src/Pagination/props.ts

@@ -23,12 +23,6 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Children } from '@instructure/ui-prop-types'
-
-import { PaginationButton } from './PaginationButton'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -36,8 +30,7 @@ import type {
 } from '@instructure/emotion'
 import type {
   AsElementType,
-  OtherHTMLAttributes,
-  PropValidators
+  OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { PaginationPageProps } from './PaginationButton/props'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
@@ -215,35 +208,6 @@ type PaginationStyle = ComponentStyle<
   'pagination' | 'pages' | 'pageIndicatorList'
 >
 
-const propTypes: PropValidators<PropKeys> = {
-  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: AllowedPropKeys = [
   'children',
   'disabled',
@@ -278,4 +242,4 @@ type PaginationSnapshot = {
 }
 
 export type { PaginationProps, PaginationStyle, PaginationSnapshot, ChildPage }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -17,9 +17,7 @@
     { "path": "../ui-dom-utils/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-portal/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" },
     { "path": "../ui-tooltip/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },