@instructure/ui-pagination 8.14.1-snapshot.21 → 8.14.1-snapshot.31

package/src/Pagination/PaginationArrowButton/index.tsx

@@ -43,6 +43,7 @@ import { allowedProps, propTypes } from './props'
 parent: Pagination
 id: Pagination.Navigation
 ---
+@tsProps
 **/
 @testable()
 class PaginationArrowButton extends Component<PaginationNavigationProps> {
@@ -51,10 +52,7 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
   static allowedProps = allowedProps
   static propTypes = propTypes
 
-  static defaultProps = {
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    buttonRef: (el) => {}
-  }
+  static defaultProps = {}
 
   ref: Element | null = null
 
@@ -90,6 +88,7 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
 
   render() {
     const { label, direction, buttonRef, ...props } = this.props
+
     return (
       <Tooltip
         on={['hover', 'focus']}
@@ -104,9 +103,7 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
           size="small"
           withBackground={false}
           withBorder={false}
-          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           screenReaderLabel={label}
-          // @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}

package/src/Pagination/PaginationArrowButton/props.ts

@@ -27,15 +27,17 @@ import PropTypes from 'prop-types'
 
 import type {
   OtherHTMLAttributes,
-  PropValidators
+  PropValidators,
+  PickPropsWithExceptions
 } from '@instructure/shared-types'
+import type { IconButtonProps } from '@instructure/ui-buttons'
 
 type PaginationArrowDirections = 'first' | 'prev' | 'next' | 'last'
 
 type PaginationNavigationOwnProps = {
   direction?: PaginationArrowDirections
-  label: string | React.ReactChild | React.ReactFragment
-  buttonRef?: (...args: any[]) => any
+  label: string
+  buttonRef?: (element: Element | null) => void
   onClick?: (
     event:
       | React.KeyboardEvent<HTMLInputElement>
@@ -48,12 +50,24 @@ type PropKeys = keyof PaginationNavigationOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type PaginationNavigationProps = PaginationNavigationOwnProps &
-  OtherHTMLAttributes<PaginationNavigationOwnProps>
+type PaginationNavigationProps =
+  // We pass almost all the props to IconButton
+  PickPropsWithExceptions<
+    IconButtonProps,
+    | 'size'
+    | 'withBackground'
+    | 'withBorder'
+    | 'screenReaderLabel'
+    | 'rel'
+    | 'elementRef'
+    | 'margin'
+  > &
+    PaginationNavigationOwnProps &
+    OtherHTMLAttributes<PaginationNavigationOwnProps>
 
 const propTypes: PropValidators<PropKeys> = {
   direction: PropTypes.oneOf(['first', 'prev', 'next', 'last']),
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  label: PropTypes.string.isRequired,
   buttonRef: PropTypes.func,
   onClick: PropTypes.func
 }

package/src/Pagination/PaginationButton/index.tsx

@@ -56,12 +56,14 @@ class PaginationButton extends Component<PaginationPageProps> {
 
   render() {
     const exclude = this.props.current ? ['onClick', 'href'] : []
+
     const props = omitProps(this.props, PaginationButton.allowedProps, exclude)
+
     return (
       <BaseButton
         color="primary"
-        withBackground={this.props.current ? true : false}
-        withBorder={this.props.current ? true : false}
+        withBackground={this.props.current}
+        withBorder={this.props.current}
         {...props}
         aria-current={this.props.current ? 'page' : undefined}
         elementRef={this.handleRef}

package/src/Pagination/PaginationButton/props.ts

@@ -27,12 +27,23 @@ import PropTypes from 'prop-types'
 
 import type {
   OtherHTMLAttributes,
+  PickPropsWithExceptions,
   PropValidators
 } from '@instructure/shared-types'
+import type { BaseButtonProps } from '@instructure/ui-buttons'
 
 type PaginationPageOwnProps = {
+  /**
+   * Content to render as page selection
+   */
   children: React.ReactNode
+  /**
+   * Whether the page is currently displayed
+   */
   current?: boolean
+  /**
+   * Whether the page is currently displayed
+   */
   onClick?: (
     event:
       | React.KeyboardEvent<HTMLInputElement>
@@ -45,21 +56,15 @@ type PropKeys = keyof PaginationPageOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type PaginationPageProps = PaginationPageOwnProps &
-  OtherHTMLAttributes<PaginationPageOwnProps>
+type PaginationPageProps =
+  // We pass almost all props to BaseButton
+  PickPropsWithExceptions<BaseButtonProps, 'aria-current' | 'elementRef'> &
+    PaginationPageOwnProps &
+    OtherHTMLAttributes<PaginationPageOwnProps>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * Content to render as page selection
-   */
   children: PropTypes.node.isRequired,
-  /**
-   * Whether the page is currently displayed
-   */
   current: PropTypes.bool,
-  /**
-   * Whether the page is currently displayed
-   */
   onClick: PropTypes.func
 }
 

package/src/Pagination/PaginationPageInput/index.tsx

@@ -61,7 +61,6 @@ class PaginationPageInput extends Component<
   }
 
   ref: HTMLSpanElement | null = null
-  _inputRef: HTMLInputElement | null = null
 
   constructor(props: PaginationPageInputProps) {
     super(props)
@@ -111,8 +110,6 @@ class PaginationPageInput extends Component<
   }
 
   handleInputRef = (el: HTMLInputElement | null) => {
-    this._inputRef = el
-
     if (typeof this.props.inputRef === 'function') {
       this.props.inputRef(el)
     }

package/src/Pagination/PaginationPageInput/props.ts

@@ -65,7 +65,7 @@ type PaginationPageInputOwnProps = {
   /**
    * provides a reference to the underlying html root element
    */
-  inputRef?: (element: Element | null) => void
+  inputRef?: (element: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof PaginationPageInputOwnProps

package/src/Pagination/index.tsx

@@ -42,12 +42,13 @@ import type { PaginationPageProps } from './PaginationButton/props'
 import type { PaginationArrowDirections } from './PaginationArrowButton/props'
 
 import { propTypes, allowedProps } from './props'
-import type { PaginationProps, PaginationSnapshot } from './props'
+import type { PaginationProps, PaginationSnapshot, ChildPage } from './props'
 
 /** This is an [].findIndex optimized to work on really big, but sparse, arrays */
-// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'arr' implicitly has an 'any' type.
-const fastFindIndex = (arr, fn) =>
-  Number(Object.keys(arr).find((k) => fn(arr[Number(k)])))
+const fastFindIndex = (
+  arr: ChildPage[],
+  fn: (page: ChildPage) => boolean | undefined
+) => Number(Object.keys(arr).find((k) => fn(arr[Number(k)])))
 
 const childrenArray = (props: PaginationProps) => {
   const { children } = props
@@ -69,13 +70,14 @@ type ArrowConfig = {
   pageIndex: number
   label: string
   shouldEnableIcon: boolean
-  handleButtonRef: (el: HTMLButtonElement) => void
+  handleButtonRef: (el: Element | null) => void
 }
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, null)
 @testable()
@@ -85,14 +87,11 @@ class Pagination extends Component<PaginationProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     disabled: false,
     withFirstAndLastButton: false,
     showDisabledButtons: false,
     variant: 'full',
     as: 'div',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     labelNumberInput: (numberOfPages: number) => `of ${numberOfPages}`,
     screenReaderLabelNumberInput: (
       currentPage: number,
@@ -104,20 +103,17 @@ class Pagination extends Component<PaginationProps> {
   static Page = PaginationButton
   static Navigation = PaginationArrowButton
 
-  _labelId: string
+  private readonly _labelId: string
 
-  ref: Element | null = null
-  _inputRef: Element | null = null
+  private _firstButton: HTMLButtonElement | null = null
+  private _prevButton: HTMLButtonElement | null = null
+  private _nextButton: HTMLButtonElement | null = null
+  private _lastButton: HTMLButtonElement | null = null
 
-  _firstButton: HTMLButtonElement | null = null
-  _prevButton: HTMLButtonElement | null = null
-  _nextButton: HTMLButtonElement | null = null
-  _lastButton: HTMLButtonElement | null = null
+  ref: Element | null = null
 
-  // @ts-expect-error ts-migrate(7019) FIXME: Rest parameter 'args' implicitly has an 'any[]' ty... Remove this comment to see the full error message
-  constructor(...args) {
-    // @ts-expect-error ts-migrate(2556) FIXME: Expected 1-2 arguments, but got 0 or more.
-    super(...args)
+  constructor(props: PaginationProps) {
+    super(props)
 
     this._labelId = uid('Pagination')
   }
@@ -221,15 +217,15 @@ class Pagination extends Component<PaginationProps> {
 
   handleElementRef = (el: Element | null) => {
     this.ref = el
-    if (el) {
-      if (typeof this.props.elementRef === 'function') {
-        this.props.elementRef(el)
-      }
+    if (el && typeof this.props.elementRef === 'function') {
+      this.props.elementRef(el)
     }
   }
 
-  handleInputRef = (el: Element | null) => {
-    this._inputRef = el
+  handleInputRef = (el: HTMLInputElement | null) => {
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
   }
 
   renderLabel() {
@@ -326,7 +322,7 @@ class Pagination extends Component<PaginationProps> {
           label: this.props.labelFirst || 'First Page',
           shouldEnableIcon: currentPageIndex > 1,
           handleButtonRef: (el) => {
-            this._firstButton = el
+            this._firstButton = el as HTMLButtonElement
           }
         }
       case 'prev':
@@ -335,7 +331,7 @@ class Pagination extends Component<PaginationProps> {
           label: this.props.labelPrev || 'Previous Page',
           shouldEnableIcon: currentPageIndex > 0,
           handleButtonRef: (el) => {
-            this._prevButton = el
+            this._prevButton = el as HTMLButtonElement
           }
         }
       case 'next':
@@ -344,7 +340,7 @@ class Pagination extends Component<PaginationProps> {
           label: this.props.labelNext || 'Next Page',
           shouldEnableIcon: currentPageIndex < pagesCount - 1,
           handleButtonRef: (el) => {
-            this._nextButton = el
+            this._nextButton = el as HTMLButtonElement
           }
         }
       case 'last':
@@ -353,7 +349,7 @@ class Pagination extends Component<PaginationProps> {
           label: this.props.labelLast || 'Last Page',
           shouldEnableIcon: currentPageIndex < pagesCount - 2,
           handleButtonRef: (el) => {
-            this._lastButton = el
+            this._lastButton = el as HTMLButtonElement
           }
         }
     }
@@ -402,8 +398,7 @@ class Pagination extends Component<PaginationProps> {
     if (!this.props.children) return null
 
     const currentPageIndex = fastFindIndex(
-      this.props.children,
-      // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'p' implicitly has an 'any' type.
+      this.childPages,
       (p) => p && p.props && p.props.current
     )
 

package/src/Pagination/props.ts

@@ -42,113 +42,139 @@ import type {
 } from '@instructure/shared-types'
 import type { PaginationPageProps } from './PaginationButton/props'
 
+type ChildPage = React.ReactElement<PaginationPageProps>
+
 type PaginationOwnProps = {
   // this won't filter the children completely well,
   // it will allow simple elements (e.g. `<div>`) and components with compatible props
   // TODO: find a better way to type Children.oneOf([PaginationButton])
-  children?:
-    | React.ReactElement<PaginationPageProps>
-    | React.ReactElement<PaginationPageProps>[]
-  disabled?: boolean
-  withFirstAndLastButton?: boolean
-  showDisabledButtons?: boolean
-  label?: React.ReactNode
-  labelNext?: string
-  labelPrev?: string
-  labelFirst?: string
-  labelLast?: string
-  labelNumberInput?: (numberOfPages: number) => React.ReactNode
-  screenReaderLabelNumberInput?: (
-    currentPage: number,
-    numberOfPages: number
-  ) => string
-  variant?: 'full' | 'compact' | 'input'
-  margin?: Spacing
-  as?: AsElementType
-  elementRef?: (element: Element | null) => void
-  shouldHandleFocus?: boolean
-}
-
-type PropKeys = keyof PaginationOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type PaginationProps = PaginationOwnProps &
-  WithStyleProps<null, PaginationStyle> &
-  OtherHTMLAttributes<PaginationOwnProps>
-
-type PaginationStyle = ComponentStyle<'pagination' | 'pages'>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * children of type Pagination.Page
    */
-  children: Children.oneOf([PaginationButton]),
+  children?: ChildPage | ChildPage[]
+
   /**
    * Disables interaction with all pages
    */
-  disabled: PropTypes.bool,
+  disabled?: boolean
+
   /**
    * Displays "jump to first" and "jump to last" buttons. Always turned on with `input` variant.
    */
-  withFirstAndLastButton: PropTypes.bool,
+  withFirstAndLastButton?: boolean
+
   /**
-   * Displays the unavailable navigation buttons as disabled instead of hiding them.  Always turned on with `input` variant.
+   * Displays the unavailable navigation buttons as disabled instead of hiding them. Always turned on with `input` variant.
    */
-  showDisabledButtons: PropTypes.bool,
+  showDisabledButtons?: boolean
+
   /**
    * Visible label for component
    */
-  label: PropTypes.node,
+  label?: React.ReactNode
+
   /**
    * Accessible label for next button
    */
-  labelNext: PropTypes.string,
+  labelNext?: string
+
   /**
    * Accessible label for previous button
    */
-  labelPrev: PropTypes.string,
+  labelPrev?: string
+
   /**
    * Accessible label for "jump to first" button
    */
-  labelFirst: PropTypes.string,
+  labelFirst?: string
+
   /**
    * Accessible label for "jump to last" button
    */
-  labelLast: PropTypes.string,
+  labelLast?: string
+
   /**
-   * Label for number input (for `input` variant)
+   * Label for number input
+   *
+   * (__only__ for `input` variant)
    */
-  labelNumberInput: PropTypes.func,
+  labelNumberInput?: (numberOfPages: number) => React.ReactNode
+
   /**
-   * ScreenReaderLabel for number input (for `input` variant)
+   * ScreenReaderLabel for number input
+   *
+   * (__only__ for `input` variant)
    */
-  screenReaderLabelNumberInput: PropTypes.func,
+  screenReaderLabelNumberInput?: (
+    currentPage: number,
+    numberOfPages: number
+  ) => string
+
   /**
    * 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.oneOf(['full', 'compact', 'input']),
+  variant?: 'full' | 'compact' | 'input'
+
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
-  margin: ThemeablePropTypes.spacing,
+  margin?: Spacing
+
   /**
    * the element type to render as
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * provides a reference to the underlying html root element
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
-   * For accessibility, Pagination sets focus on the first or last Pagination.Pages,
-   * respectively, when the Previous or Next arrow buttons are removed from the DOM.
+   * provides a reference to the html input element
+   *
+   * (__only__ for `input` variant)
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
+
+  /**
+   * For accessibility, Pagination sets focus on the first or last Pagination.Pages, respectively, when the Previous or Next arrow buttons are removed from the DOM.
    * Set this property to `false` to prevent this behavior.
    */
+  shouldHandleFocus?: boolean
+}
+
+type PropKeys = keyof PaginationOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PaginationProps = PaginationOwnProps &
+  WithStyleProps<null, PaginationStyle> &
+  OtherHTMLAttributes<PaginationOwnProps>
+
+type PaginationStyle = ComponentStyle<'pagination' | 'pages'>
+
+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,
+  variant: PropTypes.oneOf(['full', 'compact', 'input']),
+  margin: ThemeablePropTypes.spacing,
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func,
+  inputRef: PropTypes.func,
   shouldHandleFocus: PropTypes.bool
 }
 
@@ -168,6 +194,7 @@ const allowedProps: AllowedPropKeys = [
   'margin',
   'as',
   'elementRef',
+  'inputRef',
   'shouldHandleFocus'
 ]
 
@@ -175,5 +202,5 @@ type PaginationSnapshot = {
   lastFocusedButton?: HTMLButtonElement
 }
 
-export type { PaginationProps, PaginationStyle, PaginationSnapshot }
+export type { PaginationProps, PaginationStyle, PaginationSnapshot, ChildPage }
 export { propTypes, allowedProps }