@instructure/ui-pagination 8.8.1-snapshot.3 → 8.9.0

package/src/Pagination/index.tsx

@@ -23,22 +23,22 @@
  */
 /** @jsx jsx */
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
 import { testable } from '@instructure/ui-testable'
 import { omitProps } from '@instructure/ui-react-utils'
 import { uid } from '@instructure/uid'
-import { Children } from '@instructure/ui-prop-types'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils'
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import { PaginationButton } from './PaginationButton'
 import { PaginationArrowButton } from './PaginationArrowButton'
 
 import generateStyle from './styles'
-import { PaginationProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { PaginationProps } 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.
@@ -73,65 +73,10 @@ category: components
 class Pagination extends Component<PaginationProps> {
   static readonly componentId = 'Pagination'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /**
-     * children of type Pagination.Page
-     */
-    children: Children.oneOf([PaginationButton]),
-    /**
-     * Disables interaction with all pages
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Visible label for component
-     */
-    label: PropTypes.node,
-    /**
-     * Accessible label for next button
-     */
-    labelNext: PropTypes.string,
-    /**
-     * Accessible label for previous button
-     */
-    labelPrev: PropTypes.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']),
-    /**
-     * 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,
-    /**
-     * the element type to render as
-     */
-    as: PropTypes.elementType,
-    /**
-     * provides a reference to the underlying html root element
-     */
-    elementRef: PropTypes.func,
-    /**
-     * 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: PropTypes.bool
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     children: null,
-    label: undefined,
-    labelNext: undefined,
-    labelPrev: undefined,
-    margin: undefined,
     disabled: false,
     variant: 'full',
     as: 'div',
@@ -338,12 +283,12 @@ class Pagination extends Component<PaginationProps> {
         as={this.props.as}
         elementRef={this.handleElementRef}
         margin={this.props.margin}
-        css={this.props.styles.pagination}
+        css={this.props.styles?.pagination}
         // @ts-expect-error ts-migrate(2339) FIXME: Property '_labelId' does not exist on type 'Pagina... Remove this comment to see the full error message
         aria-labelledby={this.props.label && this._labelId}
       >
         {this.props.label && this.renderLabel()}
-        <View display="inline-block" css={this.props.styles.pages}>
+        <View display="inline-block" css={this.props.styles?.pages}>
           {shouldShowPrevButton(this.props, currentPageIndex) &&
             this.renderArrowButton(this.props.labelPrev, -1, currentPageIndex)}
           {this.renderPages(currentPageIndex)}

package/src/Pagination/props.ts

@@ -0,0 +1,118 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import { Children } from '@instructure/ui-prop-types'
+import { ThemeablePropTypes } from '@instructure/emotion'
+
+import { PaginationButton } from './PaginationButton'
+
+import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { AsElementType, PropValidators } from '@instructure/shared-types'
+
+type PaginationOwnProps = {
+  children?: React.ReactNode // TODO: oneof([PaginationButton])
+  disabled?: boolean
+  label?: React.ReactNode
+  labelNext?: string
+  labelPrev?: string
+  variant?: 'full' | 'compact'
+  margin?: Spacing
+  as?: AsElementType
+  elementRef?: (...args: any[]) => any
+  shouldHandleFocus?: boolean
+}
+
+type PropKeys = keyof PaginationOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PaginationProps = PaginationOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * children of type Pagination.Page
+   */
+  children: Children.oneOf([PaginationButton]),
+  /**
+   * Disables interaction with all pages
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Visible label for component
+   */
+  label: PropTypes.node,
+  /**
+   * Accessible label for next button
+   */
+  labelNext: PropTypes.string,
+  /**
+   * Accessible label for previous button
+   */
+  labelPrev: PropTypes.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']),
+  /**
+   * 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,
+  /**
+   * the element type to render as
+   */
+  as: PropTypes.elementType,
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef: PropTypes.func,
+  /**
+   * 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: PropTypes.bool
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'disabled',
+  'label',
+  'labelNext',
+  'labelPrev',
+  'variant',
+  'margin',
+  'as',
+  'elementRef',
+  'shouldHandleFocus'
+]
+
+export type { PaginationProps }
+export { propTypes, allowedProps }

package/src/index.ts

@@ -24,6 +24,6 @@
 
 export { Pagination, PaginationButton } from './Pagination'
 
-export type { PaginationProps } from './Pagination/types'
-export type { PaginationPageProps } from './Pagination/PaginationButton/types'
-export type { PaginationNavigationProps } from './Pagination/PaginationArrowButton/types'
+export type { PaginationProps } from './Pagination/props'
+export type { PaginationPageProps } from './Pagination/PaginationButton/props'
+export type { PaginationNavigationProps } from './Pagination/PaginationArrowButton/props'

package/types/Pagination/PaginationArrowButton/index.d.ts

@@ -1,6 +1,5 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { PaginationNavigationProps } from './types';
+import React, { Component } from 'react';
+import type { PaginationNavigationProps } from './props';
 /**
 ---
 parent: Pagination
@@ -9,13 +8,17 @@ id: Pagination.Navigation
 **/
 declare class PaginationArrowButton extends Component<PaginationNavigationProps> {
     static readonly componentId = "Pagination.Navigation";
-    static propTypes: {
-        direction: PropTypes.Requireable<string>;
-        label: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        buttonRef: PropTypes.Requireable<(...args: any[]) => any>;
-    };
+    static allowedProps: readonly (keyof {
+        direction?: "next" | "prev" | undefined;
+        label: React.ReactNode;
+        buttonRef?: ((...args: any[]) => any) | undefined;
+    })[];
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        direction?: "next" | "prev" | undefined;
+        label: React.ReactNode;
+        buttonRef?: ((...args: any[]) => any) | undefined;
+    }>;
     static defaultProps: {
-        direction: undefined;
         buttonRef: (el: any) => void;
     };
     render(): JSX.Element;

package/types/Pagination/PaginationArrowButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Pagination/PaginationArrowButton/index.tsx"],"names":[],"mappings":"AAwBA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,SAAS,MAAM,YAAY,CAAA;AAUlC,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;;GAKG;AACH,cACM,qBAAsB,SAAQ,SAAS,CAAC,yBAAyB,CAAC;IACtE,MAAM,CAAC,QAAQ,CAAC,WAAW,2BAA0B;IAErD,MAAM,CAAC,SAAS;;;;MAIf;IAED,MAAM,CAAC,YAAY;;;MAIlB;IAED,MAAM;CAyBP;AAED,eAAe,qBAAqB,CAAA;AACpC,OAAO,EAAE,qBAAqB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Pagination/PaginationArrowButton/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUxC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD;;;;;GAKG;AACH,cACM,qBAAsB,SAAQ,SAAS,CAAC,yBAAyB,CAAC;IACtE,MAAM,CAAC,QAAQ,CAAC,WAAW,2BAA0B;IAErD,MAAM,CAAC,YAAY;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;MAGlB;IAED,MAAM;CAyBP;AAED,eAAe,qBAAqB,CAAA;AACpC,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/types/Pagination/PaginationArrowButton/props.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PropValidators } from '@instructure/shared-types';
+declare type PaginationNavigationOwnProps = {
+    direction?: 'next' | 'prev';
+    label: string | React.ReactNode;
+    buttonRef?: (...args: any[]) => any;
+};
+declare type PropKeys = keyof PaginationNavigationOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type PaginationNavigationProps = PaginationNavigationOwnProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { PaginationNavigationProps };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

package/types/Pagination/PaginationArrowButton/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Pagination/PaginationArrowButton/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,4BAA4B,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;CACpC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,4BAA4B,CAAA;AAElD,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,yBAAyB,GAAG,4BAA4B,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAIvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAqD,CAAA;AAEzE,YAAY,EAAE,yBAAyB,EAAE,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Pagination/PaginationButton/index.d.ts

@@ -1,6 +1,5 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { PaginationPageProps } from './types';
+import React, { Component } from 'react';
+import type { PaginationPageProps } from './props';
 /**
 ---
 parent: Pagination
@@ -9,16 +8,14 @@ id: Pagination.Page
 **/
 declare class PaginationButton extends Component<PaginationPageProps> {
     static readonly componentId = "Pagination.Page";
-    static propTypes: {
-        /**
-         * Content to render as page selection
-         */
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Whether the page is currently displayed
-         */
-        current: PropTypes.Requireable<boolean>;
-    };
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        children: React.ReactNode;
+        current?: boolean | undefined;
+    }>;
+    static allowedProps: readonly (keyof {
+        children: React.ReactNode;
+        current?: boolean | undefined;
+    })[];
     static defaultProps: {
         current: boolean;
     };

package/types/Pagination/PaginationButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Pagination/PaginationButton/index.tsx"],"names":[],"mappings":"AAwBA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,SAAS,MAAM,YAAY,CAAA;AAKlC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;GAKG;AAEH,cACM,gBAAiB,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IAC3D,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAoB;IAE/C,MAAM,CAAC,SAAS;QACd;;WAEG;;QAEH;;WAEG;;MAEJ;IAED,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM;CAeP;AAED,eAAe,gBAAgB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Pagination/PaginationButton/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD;;;;;GAKG;AAEH,cACM,gBAAiB,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IAC3D,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAoB;IAE/C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM;CAeP;AAED,eAAe,gBAAgB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/types/Pagination/PaginationButton/props.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PropValidators } from '@instructure/shared-types';
+declare type PaginationPageOwnProps = {
+    children: React.ReactNode;
+    current?: boolean;
+};
+declare type PropKeys = keyof PaginationPageOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type PaginationPageProps = PaginationPageOwnProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { PaginationPageProps };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

package/types/Pagination/PaginationButton/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Pagination/PaginationButton/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,sBAAsB,CAAA;AAE5C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,mBAAmB,GAAG,sBAAsB,CAAA;AAEjD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CASvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAyC,CAAA;AAE7D,YAAY,EAAE,mBAAmB,EAAE,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Pagination/index.d.ts

@@ -1,10 +1,9 @@
 /** @jsx jsx */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { jsx } from '@instructure/emotion';
 import { PaginationButton } from './PaginationButton';
 import { PaginationArrowButton } from './PaginationArrowButton';
-import { PaginationProps } from './types';
+import type { PaginationProps } from './props';
 /**
 ---
 category: components
@@ -12,65 +11,32 @@ category: components
 **/
 declare class Pagination extends Component<PaginationProps> {
     static readonly componentId = "Pagination";
-    static propTypes: {
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-        /**
-         * children of type Pagination.Page
-         */
-        children: {
-            (props: Record<string, any>, propName: string, componentName: string): Error | null;
-            isRequired: (props: Record<string, any>, propName: string, componentName: string, location?: string | undefined, propFullName?: string | undefined) => Error | null;
-        };
-        /**
-         * Disables interaction with all pages
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Visible label for component
-         */
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Accessible label for next button
-         */
-        labelNext: PropTypes.Requireable<string>;
-        /**
-         * Accessible label for previous button
-         */
-        labelPrev: PropTypes.Requireable<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.Requireable<string>;
-        /**
-         * 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: (props: any, propName: any, componentName: any, location: any) => any;
-        /**
-         * the element type to render as
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * provides a reference to the underlying html root element
-         */
-        elementRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * 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: PropTypes.Requireable<boolean>;
-    };
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        children?: React.ReactNode;
+        disabled?: boolean | undefined;
+        label?: React.ReactNode;
+        labelNext?: string | undefined;
+        labelPrev?: string | undefined;
+        variant?: "full" | "compact" | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        shouldHandleFocus?: boolean | undefined;
+    }>;
+    static allowedProps: readonly (keyof {
+        children?: React.ReactNode;
+        disabled?: boolean | undefined;
+        label?: React.ReactNode;
+        labelNext?: string | undefined;
+        labelPrev?: string | undefined;
+        variant?: "full" | "compact" | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        shouldHandleFocus?: boolean | undefined;
+    })[];
     static defaultProps: {
         children: null;
-        label: undefined;
-        labelNext: undefined;
-        labelPrev: undefined;
-        margin: undefined;
         disabled: boolean;
         variant: string;
         as: string;