@instructure/ui-pagination 8.13.1-snapshot.44 → 8.13.1-snapshot.50

package/es/Pagination/PaginationArrowButton/props.js

@@ -25,7 +25,10 @@ import PropTypes from 'prop-types';
 const propTypes = {
   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 = ['direction', 'label', 'buttonRef'];
+const allowedProps = ['direction', 'label', 'buttonRef' // we don't want to pass onClick
+// 'onClick'
+];
 export { propTypes, allowedProps };

package/es/Pagination/PaginationButton/props.js

@@ -31,7 +31,14 @@ const propTypes = {
   /**
    * Whether the page is currently displayed
    */
-  current: PropTypes.bool
+  current: PropTypes.bool,
+
+  /**
+   * Whether the page is currently displayed
+   */
+  onClick: PropTypes.func
 };
-const allowedProps = ['children', 'current'];
+const allowedProps = ['children', 'current' // we don't want to pass onClick
+// 'onClick'
+];
 export { propTypes, allowedProps };

package/lib/Pagination/PaginationArrowButton/props.js

@@ -35,8 +35,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 const propTypes = {
   direction: _propTypes.default.oneOf(['first', 'prev', 'next', 'last']),
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
-  buttonRef: _propTypes.default.func
+  buttonRef: _propTypes.default.func,
+  onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['direction', 'label', 'buttonRef'];
+const allowedProps = ['direction', 'label', 'buttonRef' // we don't want to pass onClick
+// 'onClick'
+];
 exports.allowedProps = allowedProps;

package/lib/Pagination/PaginationButton/props.js

@@ -41,8 +41,15 @@ const propTypes = {
   /**
    * Whether the page is currently displayed
    */
-  current: _propTypes.default.bool
+  current: _propTypes.default.bool,
+
+  /**
+   * Whether the page is currently displayed
+   */
+  onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'current'];
+const allowedProps = ['children', 'current' // we don't want to pass onClick
+// 'onClick'
+];
 exports.allowedProps = allowedProps;

package/package.json

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

package/src/Pagination/PaginationArrowButton/props.ts

@@ -36,6 +36,12 @@ type PaginationNavigationOwnProps = {
   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
@@ -48,10 +54,18 @@ type PaginationNavigationProps = PaginationNavigationOwnProps &
 const propTypes: PropValidators<PropKeys> = {
   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, 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/PaginationPageInput/index.tsx

@@ -151,11 +151,19 @@ class PaginationPageInput extends Component<
     }
   }
 
-  handleDecrement = (event: React.UIEvent<HTMLInputElement>) => {
+  handleDecrement = (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => {
     this.setNewPage(event, Math.floor(this.currentPage - 1))
   }
 
-  handleIncrement = (event: React.UIEvent<HTMLInputElement>) => {
+  handleIncrement = (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => {
     this.setNewPage(event, Math.floor(this.currentPage + 1))
   }
 
@@ -170,7 +178,10 @@ class PaginationPageInput extends Component<
   }
 
   setNewPage(
-    event: React.UIEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>,
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>,
     n: number
   ) {
     const number = this.getNumberWithinRange(n)

package/src/Pagination/PaginationPageInput/props.ts

@@ -44,7 +44,10 @@ type PaginationPageInputOwnProps = {
    * Fires when a new page index is selected
    */
   onChange: (
-    event: React.SyntheticEvent<HTMLInputElement>,
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>,
     pageIndex: number
   ) => void
   /**

package/src/Pagination/index.tsx

@@ -39,10 +39,7 @@ import { PaginationPageInput } from './PaginationPageInput'
 import generateStyle from './styles'
 
 import type { PaginationPageProps } from './PaginationButton/props'
-import type {
-  PaginationNavigationProps,
-  PaginationArrowDirections
-} from './PaginationArrowButton/props'
+import type { PaginationArrowDirections } from './PaginationArrowButton/props'
 
 import { propTypes, allowedProps } from './props'
 import type { PaginationProps, PaginationSnapshot } from './props'
@@ -80,7 +77,6 @@ type ArrowConfig = {
 category: components
 ---
 **/
-
 @withStyle(generateStyle, null)
 @testable()
 class Pagination extends Component<PaginationProps> {
@@ -267,10 +263,13 @@ class Pagination extends Component<PaginationProps> {
   }
 
   handleInputChange(
-    event: React.SyntheticEvent<HTMLInputElement>,
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>,
     pageIndex: number
   ) {
-    this.childPages[pageIndex].props.onClick?.(event as any)
+    this.childPages[pageIndex].props.onClick?.(event)
   }
 
   renderPages(currentPageIndex: number) {
@@ -385,8 +384,7 @@ class Pagination extends Component<PaginationProps> {
 
     const disabled =
       page?.props?.disabled || this.props.disabled || !shouldEnableIcon
-    const onClick = page?.props
-      ?.onClick as React.MouseEventHandler<PaginationNavigationProps>
+    const onClick = page?.props?.onClick
 
     return shouldEnableIcon || this.showDisabledButtons ? (
       <PaginationArrowButton