@instructure/ui-pages 8.12.1-snapshot.7 → 8.13.0

package/src/Pages/Page/index.tsx

@@ -28,15 +28,18 @@ import PropTypes from 'prop-types'
 import { findDOMNode, findTabbable } from '@instructure/ui-dom-utils'
 import { logError as error } from '@instructure/console'
 import { View } from '@instructure/ui-view'
-import { PagesContext } from '..'
-import type { PagesPageProps } from './props'
+
+import { PagesContext } from '../PagesContext'
+
 import { allowedProps, propTypes } from './props'
+import type { PagesPageProps } from './props'
 
 /**
 ---
 parent: Pages
 id: Pages.Page
 ---
+@tsProps
 **/
 class Page extends Component<PagesPageProps> {
   static readonly componentId = 'Pages.Page'
@@ -76,18 +79,16 @@ class Page extends Component<PagesPageProps> {
     }
 
     if (defaultFocusElement) {
-      defaultFocusElement = findDOMNode(defaultFocusElement) as any
+      defaultFocusElement = findDOMNode(defaultFocusElement)
     }
 
     if (!defaultFocusElement) {
       const tabbable = findTabbable(this.ref)
-      // @ts-expect-error ts-migrate(2554) FIXME:
       defaultFocusElement = tabbable && tabbable[0]
     }
 
     error(
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'focus' does not exist on type 'ReactElem... Remove this comment to see the full error message
-      defaultFocusElement && defaultFocusElement.focus,
+      defaultFocusElement && !!(defaultFocusElement as HTMLElement).focus,
       '[Page] A default focusable element is required or focus will be lost.'
     )
 
@@ -97,14 +98,12 @@ class Page extends Component<PagesPageProps> {
   get focusable() {
     const element = this.defaultFocusElement
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'focus' does not exist on type 'ReactElem... Remove this comment to see the full error message
-    return element && typeof element.focus === 'function'
+    return !!element && typeof (element as HTMLElement).focus === 'function'
   }
 
   focus() {
     if (this.focusable) {
-      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-      this.defaultFocusElement.focus()
+      ;(this.defaultFocusElement as HTMLElement).focus()
     }
   }
 

package/src/Pages/Page/props.ts

@@ -28,13 +28,32 @@ import PropTypes from 'prop-types'
 import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type { Spacing } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type { PropValidators, UIElement } from '@instructure/shared-types'
+
+import type { PagesContextType } from '../PagesContext'
 
 type PagesPageOwnProps = {
-  defaultFocusElement?: React.ReactElement | ((...args: any[]) => any)
+  /**
+   * The children to be rendered
+   */
+  children?:
+    | React.ReactNode
+    | ((
+        history: PagesContextType['history'],
+        navigateToPreviousPage: PagesContextType['navigateToPreviousPage']
+      ) => React.ReactNode)
+
+  /**
+   * An element or a function returning an element to focus by default
+   */
+  defaultFocusElement?: UIElement | (() => UIElement)
+
+  /**
+   * Set the padding using familiar CSS shorthand
+   */
   padding?: Spacing
+
   textAlign?: 'start' | 'center' | 'end'
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
 }
 type PropKeys = keyof PagesPageOwnProps
 
@@ -43,21 +62,9 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 type PagesPageProps = PagesPageOwnProps
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * The children to be rendered
-   */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
-   * Set the padding using familiar CSS shorthand
-   */
   padding: ThemeablePropTypes.spacing,
-
   textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 }
 

package/src/Pages/PagesContext.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { createContext } from 'react'
+
+type PagesContextType = {
+  history: (number | undefined)[]
+  navigateToPreviousPage: () => void
+}
+
+const PagesContext = createContext<PagesContextType>({
+  history: [],
+  navigateToPreviousPage: () => {}
+})
+
+export default PagesContext
+export { PagesContext }
+export type { PagesContextType }

package/src/Pages/README.md

@@ -2,6 +2,8 @@
 describes: Pages
 ---
 
+The Pages component can be used to render Paginated content that does not fit into one page. Each page content should have at least one focusable element (e.g. the back button) otherwise the focus will be lost.
+
 ```js
 ---
 render: false
@@ -42,10 +44,9 @@ class Example extends React.Component {
 
   render () {
     return (
-      <Pages 
+      <Pages
         activePageIndex={this.state.activePageIndex}
         onPageIndexChange={this.handlePagesBackButtonClick}
-        backButtonLabel="Back to previous page"
       >
         <Pages.Page>
          {(history, navigateToPreviousPage) => {
@@ -90,7 +91,6 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-
 ```js
 ---
 render: false
@@ -134,7 +134,6 @@ class Example extends React.Component {
       <Pages
         activePageIndex={this.state.activePageIndex}
         onPageIndexChange={this.handlePagesBackButtonClick}
-        backButtonLabel="Back to previous page"
       >
         <Pages.Page>
         {(history, navigateToPreviousPage) => {
@@ -181,7 +180,6 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-
 ```js
 ---
 render: false
@@ -353,7 +351,6 @@ class Example extends React.Component {
           <Pages
             activePageIndex={this.state.activePageIndex}
             onPageIndexChange={this.handlePagesBackButtonClick}
-            backButtonLabel="Back to previous page"
           >
             <Pages.Page
               defaultFocusElement={() => this._usersNav[this.state.lastPageIndex]}

package/src/Pages/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import React, { Component, createContext, ReactElement } from 'react'
+import React, { Component, ReactElement } from 'react'
 
 import { View } from '@instructure/ui-view'
 import { containsActiveElement, findTabbable } from '@instructure/ui-dom-utils'
@@ -36,18 +36,18 @@ import { Page } from './Page'
 import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import type { PagesProps } from './props'
-import { allowedProps, propTypes } from './props'
 
-export const PagesContext = createContext({
-  history: [],
-  navigateToPreviousPage: () => {}
-})
+import { PagesContext } from './PagesContext'
+import type { PagesContextType } from './PagesContext'
+
+import { allowedProps, propTypes } from './props'
+import type { PagesProps } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Pages extends Component<PagesProps> {
@@ -57,15 +57,22 @@ class Pages extends Component<PagesProps> {
   static propTypes = propTypes
 
   static defaultProps = {
-    children: null,
-    defaultPageIndex: null,
-    activePageIndex: 0,
-    onPageIndexChange: function () {}
+    activePageIndex: 0
   }
 
   static Page = Page
 
-  _timeouts = []
+  _timeouts: ReturnType<typeof setTimeout>[] = []
+  _history: PagesContextType['history']
+  _activePage: Page | null = null
+  _contentId: string
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
   get _contentElement() {
     console.warn(
       '_contentElement property is deprecated and will be removed in v9, please use ref instead'
@@ -73,24 +80,16 @@ class Pages extends Component<PagesProps> {
 
     return this.ref
   }
-  ref: Element | null = null
 
-  handleRef = (el: Element | null) => {
-    this.ref = el
-  }
-
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: PagesProps) {
     super(props)
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
     this._history = [
       typeof props.defaultPageIndex === 'number'
         ? props.defaultPageIndex
-        : props.activePageIndex
+        : props.activePageIndex!
     ]
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_contentId' does not exist on type 'Page... Remove this comment to see the full error message
     this._contentId = uid('Pages')
   }
 
@@ -99,32 +98,26 @@ class Pages extends Component<PagesProps> {
   }
 
   handleBackButtonClick = () => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
     const oldPageIndex = this._history.pop()
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
     const newPageIndex = this._history[this._history.length - 1]
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.onPageIndexChange(newPageIndex || 0, oldPageIndex)
+
+    this.props.onPageIndexChange?.(newPageIndex || 0, oldPageIndex)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'nextProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  componentWillReceiveProps(nextProps, nextContext) {
+  // TODO: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
+  componentWillReceiveProps(nextProps: PagesProps) {
     if (
       nextProps &&
       typeof nextProps.activePageIndex === 'number' &&
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
       (this._history.length === 0 ||
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
         nextProps.activePageIndex !== this._history[this._history.length - 1])
     ) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
       this._history.push(nextProps.activePageIndex)
     }
   }
 
   componentDidUpdate() {
     this._timeouts.push(
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Timeout' is not assignable to pa... Remove this comment to see the full error message
       setTimeout(() => {
         !this.focused && this.focus()
       }, 0)
@@ -142,9 +135,7 @@ class Pages extends Component<PagesProps> {
 
   focus() {
     this._timeouts.push(
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Timeout' is not assignable to pa... Remove this comment to see the full error message
       setTimeout(() => {
-        // @ts-expect-error ts-migrate(2551) FIXME: Property '_activePage' does not exist on type 'Pag... Remove this comment to see the full error message
         const activePage = this._activePage
 
         // Attempt to focus active page
@@ -155,8 +146,7 @@ class Pages extends Component<PagesProps> {
           const tabbable = findTabbable(this.ref)
           const element = tabbable && tabbable[0]
 
-          // @ts-expect-error ts-migrate(2554) FIXME:
-          element && element.focus()
+          element && (element as HTMLElement).focus()
         }
       })
     )
@@ -166,16 +156,13 @@ class Pages extends Component<PagesProps> {
     const { activePageIndex, children } = this.props
     const pages = React.Children.toArray(children)
     const activePage =
-      activePageIndex < pages.length ? pages[activePageIndex] : null
+      activePageIndex! < pages.length ? pages[activePageIndex!] : null
 
-    // @ts-expect-error ts-migrate(2555) FIXME
-    error(activePage, '[Pages] Invalid `activePageIndex`.')
+    error(!!activePage, '[Pages] Invalid `activePageIndex`.')
 
     return activePage
       ? safeCloneElement(activePage as ReactElement, {
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-          ref: (el) => {
-            // @ts-expect-error ts-migrate(2551) FIXME: Property '_activePage' does not exist on type 'Pag... Remove this comment to see the full error message
+          ref: (el: Page | null) => {
             this._activePage = el
           }
         })
@@ -183,10 +170,11 @@ class Pages extends Component<PagesProps> {
   }
 
   render() {
-    return this.activePage ? (
+    const { activePage } = this
+
+    return activePage ? (
       <PagesContext.Provider
         value={{
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_history' does not exist on type 'Pages'... Remove this comment to see the full error message
           history: this._history,
           navigateToPreviousPage: () => {
             this.handleBackButtonClick()
@@ -195,14 +183,13 @@ class Pages extends Component<PagesProps> {
       >
         <View
           as="div"
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: any; as: string; id: any; css: a... Remove this comment to see the full error message
           id={this._contentId}
           css={this.props.styles?.pages}
           margin={this.props.margin}
           role="region"
           elementRef={this.handleRef}
         >
-          {this.activePage}
+          {activePage}
         </View>
       </PagesContext.Provider>
     ) : null

package/src/Pages/props.ts

@@ -37,11 +37,29 @@ import type {
 import type { PropValidators, PagesTheme } from '@instructure/shared-types'
 
 type PagesOwnProps = {
+  /**
+   * Children are type of `<Pages.Page>`
+   */
+  children?: React.ReactNode // TODO: oneOf([Page])
+
   defaultPageIndex?: number
-  activePageIndex?: any // TODO: controllable( PropTypes.number, 'onPageIndexChange', 'defaultPageIndex' )
-  onPageIndexChange?: (...args: any[]) => any
+
+  /**
+   * The currently active page index
+   */
+  activePageIndex?: number // TODO: controllable( PropTypes.number, 'onPageIndexChange', 'defaultPageIndex' )
+
+  /**
+   * Event handler fired anytime page index has changed due to back button being clicked
+   */
+  onPageIndexChange?: (newPageIndex: number, oldPageIndex?: number) => void
+
+  /**
+   * 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?: Spacing
-  children?: React.ReactNode // TODO: oneOf([Page])
 }
 
 type PropKeys = keyof PagesOwnProps
@@ -54,28 +72,13 @@ type PagesStyle = ComponentStyle<'pages'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: Children.oneOf([Page]),
-
   defaultPageIndex: PropTypes.number,
-
-  /**
-   * The currently active page index
-   */
   activePageIndex: controllable(
     PropTypes.number,
     'onPageIndexChange',
     'defaultPageIndex'
   ),
-
-  /**
-   * Event handler fired anytime page index has changed due to back button being clicked
-   */
   onPageIndexChange: PropTypes.func,
-
-  /**
-   * 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
 }
 

package/types/Pages/Page/index.d.ts

@@ -6,20 +6,21 @@ import type { PagesPageProps } from './props';
 parent: Pages
 id: Pages.Page
 ---
+@tsProps
 **/
 declare class Page extends Component<PagesPageProps> {
     static readonly componentId = "Pages.Page";
     static allowedProps: readonly (keyof {
-        defaultFocusElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
+        children?: React.ReactNode | ((history: (number | undefined)[], navigateToPreviousPage: () => void) => React.ReactNode);
+        defaultFocusElement?: import("@instructure/shared-types").UIElement | (() => import("@instructure/shared-types").UIElement) | undefined;
         padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         textAlign?: "start" | "center" | "end" | undefined;
-        children?: React.ReactNode | ((...args: any[]) => React.ReactNode);
     })[];
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
-        defaultFocusElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
+        children?: React.ReactNode | ((history: (number | undefined)[], navigateToPreviousPage: () => void) => React.ReactNode);
+        defaultFocusElement?: import("@instructure/shared-types").UIElement | (() => import("@instructure/shared-types").UIElement) | undefined;
         padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         textAlign?: "start" | "center" | "end" | undefined;
-        children?: React.ReactNode | ((...args: any[]) => React.ReactNode);
     }>;
     static defaultProps: {
         defaultFocusElement: null;
@@ -34,8 +35,8 @@ declare class Page extends Component<PagesPageProps> {
     get _content(): Element | null;
     ref: Element | null;
     handleRef: (el: Element | null) => void;
-    get defaultFocusElement(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
-    get focusable(): boolean | undefined;
+    get defaultFocusElement(): Node | Window;
+    get focusable(): boolean;
     focus(): void;
     render(): JSX.Element;
 }

package/types/Pages/Page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Pages/Page/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,SAAS,MAAM,YAAY,CAAA;AAMlC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;;GAKG;AACH,cAAM,IAAK,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1C,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,YAAY;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,MAAM,CAAC,YAAY;;;MAGlB;IAED,IAAI,QAAQ,mBAIX;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,IAAI,mBAAmB,+GAwBtB;IAED,IAAI,SAAS,wBAKZ;IAED,KAAK;IAOL,MAAM;CAoBP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Pages/Page/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,SAAS,MAAM,YAAY,CAAA;AASlC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;GAMG;AACH,cAAM,IAAK,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1C,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,YAAY;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,MAAM,CAAC,YAAY;;;MAGlB;IAED,IAAI,QAAQ,mBAIX;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,IAAI,mBAAmB,kBAsBtB;IAED,IAAI,SAAS,YAIZ;IAED,KAAK;IAML,MAAM;CAoBP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/types/Pages/Page/props.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
 import type { Spacing } from '@instructure/emotion';
-import type { PropValidators } from '@instructure/shared-types';
+import type { PropValidators, UIElement } from '@instructure/shared-types';
+import type { PagesContextType } from '../PagesContext';
 declare type PagesPageOwnProps = {
-    defaultFocusElement?: React.ReactElement | ((...args: any[]) => any);
+    /**
+     * The children to be rendered
+     */
+    children?: React.ReactNode | ((history: PagesContextType['history'], navigateToPreviousPage: PagesContextType['navigateToPreviousPage']) => React.ReactNode);
+    /**
+     * An element or a function returning an element to focus by default
+     */
+    defaultFocusElement?: UIElement | (() => UIElement);
+    /**
+     * Set the padding using familiar CSS shorthand
+     */
     padding?: Spacing;
     textAlign?: 'start' | 'center' | 'end';
-    children?: React.ReactNode | ((...args: any[]) => React.ReactNode);
 };
 declare type PropKeys = keyof PagesPageOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;

package/types/Pages/Page/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Pages/Page/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,iBAAiB,GAAG;IACvB,mBAAmB,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACnE,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAKnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Pages/Page/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAE1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,aAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CACC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,EACpC,sBAAsB,EAAE,gBAAgB,CAAC,wBAAwB,CAAC,KAC/D,KAAK,CAAC,SAAS,CAAC,CAAA;IAEzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAA;IAEnD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CACvC,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAKvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAKnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Pages/PagesContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type PagesContextType = {
+    history: (number | undefined)[];
+    navigateToPreviousPage: () => void;
+};
+declare const PagesContext: import("react").Context<PagesContextType>;
+export default PagesContext;
+export { PagesContext };
+export type { PagesContextType };
+//# sourceMappingURL=PagesContext.d.ts.map

package/types/Pages/PagesContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagesContext.d.ts","sourceRoot":"","sources":["../../src/Pages/PagesContext.ts"],"names":[],"mappings":";AA0BA,aAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAA;IAC/B,sBAAsB,EAAE,MAAM,IAAI,CAAA;CACnC,CAAA;AAED,QAAA,MAAM,YAAY,2CAGhB,CAAA;AAEF,eAAe,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/types/Pages/index.d.ts

@@ -2,47 +2,45 @@
 import React, { Component } from 'react';
 import { Page } from './Page';
 import { jsx } from '@instructure/emotion';
+import type { PagesContextType } from './PagesContext';
 import type { PagesProps } from './props';
-export declare const PagesContext: React.Context<{
-    history: never[];
-    navigateToPreviousPage: () => void;
-}>;
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 declare class Pages extends Component<PagesProps> {
     static readonly componentId = "Pages";
     static allowedProps: readonly (keyof {
+        children?: React.ReactNode;
         defaultPageIndex?: number | undefined;
-        activePageIndex?: any;
-        onPageIndexChange?: ((...args: any[]) => any) | undefined;
+        activePageIndex?: number | undefined;
+        onPageIndexChange?: ((newPageIndex: number, oldPageIndex?: number | undefined) => void) | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
-        children?: React.ReactNode;
     })[];
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        children?: React.ReactNode;
         defaultPageIndex?: number | undefined;
-        activePageIndex?: any;
-        onPageIndexChange?: ((...args: any[]) => any) | undefined;
+        activePageIndex?: number | undefined;
+        onPageIndexChange?: ((newPageIndex: number, oldPageIndex?: number | undefined) => void) | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
-        children?: React.ReactNode;
     }>;
     static defaultProps: {
-        children: null;
-        defaultPageIndex: null;
         activePageIndex: number;
-        onPageIndexChange: () => void;
     };
     static Page: typeof Page;
-    _timeouts: never[];
-    get _contentElement(): Element | null;
+    _timeouts: ReturnType<typeof setTimeout>[];
+    _history: PagesContextType['history'];
+    _activePage: Page | null;
+    _contentId: string;
     ref: Element | null;
     handleRef: (el: Element | null) => void;
-    constructor(props: any);
+    get _contentElement(): Element | null;
+    constructor(props: PagesProps);
     componentDidMount(): void;
     handleBackButtonClick: () => void;
-    componentWillReceiveProps(nextProps: any, nextContext: any): void;
+    componentWillReceiveProps(nextProps: PagesProps): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
     get focused(): boolean;

package/types/Pages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pages/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAQrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAGrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,eAAO,MAAM,YAAY;;;EAGvB,CAAA;AAEF;;;;GAIG;AACH,cACM,KAAM,SAAQ,SAAS,CAAC,UAAU,CAAC;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,WAAU;IAErC,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,MAAM,CAAC,IAAI,cAAO;IAElB,SAAS,UAAK;IACd,IAAI,eAAe,mBAMlB;IACD,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;gBAGW,KAAK,KAAA;IAcjB,iBAAiB;IAIjB,qBAAqB,aAOpB;IAGD,yBAAyB,CAAC,SAAS,KAAA,EAAE,WAAW,KAAA;IAchD,kBAAkB;IAUlB,oBAAoB;IAIpB,IAAI,OAAO,YAEV;IAED,KAAK;IAsBL,IAAI,UAAU,8EAkBb;IAED,MAAM;CAyBP;AAED,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pages/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAA;AAQtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC;;;;;GAKG;AACH,cACM,KAAM,SAAQ,SAAS,CAAC,UAAU,CAAC;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,WAAU;IAErC,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM,CAAC,IAAI,cAAO;IAElB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,EAAE,CAAK;IAC/C,QAAQ,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,WAAW,EAAE,IAAI,GAAG,IAAI,CAAO;IAC/B,UAAU,EAAE,MAAM,CAAA;IAElB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,IAAI,eAAe,mBAMlB;gBAEW,KAAK,EAAE,UAAU;IAY7B,iBAAiB;IAIjB,qBAAqB,aAKpB;IAGD,yBAAyB,CAAC,SAAS,EAAE,UAAU;IAW/C,kBAAkB;IASlB,oBAAoB;IAIpB,IAAI,OAAO,YAEV;IAED,KAAK;IAmBL,IAAI,UAAU,8EAeb;IAED,MAAM;CAyBP;AAED,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA"}

package/types/Pages/props.d.ts

@@ -2,11 +2,25 @@ import React from 'react';
 import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { PropValidators, PagesTheme } from '@instructure/shared-types';
 declare type PagesOwnProps = {
+    /**
+     * Children are type of `<Pages.Page>`
+     */
+    children?: React.ReactNode;
     defaultPageIndex?: number;
-    activePageIndex?: any;
-    onPageIndexChange?: (...args: any[]) => any;
+    /**
+     * The currently active page index
+     */
+    activePageIndex?: number;
+    /**
+     * Event handler fired anytime page index has changed due to back button being clicked
+     */
+    onPageIndexChange?: (newPageIndex: number, oldPageIndex?: number) => void;
+    /**
+     * 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?: Spacing;
-    children?: React.ReactNode;
 };
 declare type PropKeys = keyof PagesOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;