@instructure/ui-pagination 11.6.0 → 11.6.1-snapshot-129

package/src/Pagination/v2/props.ts

@@ -0,0 +1,245 @@
+/*
+ * 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 type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  AsElementType,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { PaginationPageProps } from './PaginationButton/props'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+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 of type Pagination.Page
+   */
+  children?: ChildPage | ChildPage[]
+
+  /**
+   * Disables interaction with all pages
+   */
+  disabled?: boolean
+
+  /**
+   * Displays "jump to first" and "jump to last" buttons. Always turned on with `input` variant.
+   */
+  withFirstAndLastButton?: boolean
+
+  /**
+   * Displays the unavailable navigation buttons as disabled instead of hiding them. Always turned on with `input` variant.
+   */
+  showDisabledButtons?: boolean
+
+  /**
+   * Visible label for component
+   */
+  label?: React.ReactNode
+
+  /**
+   * Accessible label for next button
+   */
+  labelNext?: string
+
+  /**
+   * Accessible label for previous button
+   */
+  labelPrev?: string
+
+  /**
+   * Accessible label for "jump to first" button
+   */
+  labelFirst?: string
+
+  /**
+   * Accessible label for "jump to last" button
+   */
+  labelLast?: string
+
+  /**
+   * Label for number input
+   *
+   * (__only__ for `input` variant)
+   */
+  labelNumberInput?: (totalPageNumber: number) => React.ReactNode
+
+  /**
+   * ScreenReaderLabel for number input
+   *
+   * (__only__ for `input` variant)
+   */
+  screenReaderLabelNumberInput?: (
+    currentPage: number,
+    totalPageNumber: number
+  ) => string
+
+  /**
+   * ScreenReaderLabel for page number buttons
+   *
+   * (__only__ for `full` and `compact variants)
+   */
+  screenReaderLabelPageButton?: (
+    currentPage: number,
+    totalPageNumber: 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?: 'full' | 'compact' | 'input'
+
+  /**
+   * Spacing token values can be found here: [Spacing Tokens](https://instructure.design/#layout-spacing/%23Tokens)
+   *
+   * Apply these values via familiar CSS-like shorthand. For example: `margin="space8 0 space12"`.
+   */
+  margin?: Spacing
+
+  /**
+   * the element type to render as
+   */
+  as?: AsElementType
+
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+
+  /**
+   * 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
+
+  /**
+   * The total number of pages
+   */
+  totalPageNumber?: number
+
+  /**
+   * The current page number
+   */
+  currentPage?: number
+
+  /**
+   * The number of pages to display before and after the current page
+   */
+  siblingCount?: number
+
+  /**
+   * The number of always visible pages at the beginning and end
+   * of the pagination component
+   * */
+  boundaryCount?: number
+
+  /**
+   * Called when page number is changed
+   */
+  onPageChange?: (next: number, prev: number) => void
+
+  /**
+   * Called when a page is hovered.
+   */
+  onMouseEnter?: (page: number) => void
+
+  /**
+   * Renders the visible pages
+   */
+  renderPageIndicator?: (
+    pageIndex: number,
+    currentPage: number
+  ) => React.ReactNode
+
+  /**
+   * The ellipsis
+   * (e.g. "...")
+   */
+  ellipsis?: React.ReactNode
+}
+
+type PropKeys = keyof PaginationOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PaginationProps = PaginationOwnProps &
+  WithStyleProps<null, PaginationStyle> &
+  OtherHTMLAttributes<PaginationOwnProps> &
+  WithDeterministicIdProps
+
+type PaginationStyle = ComponentStyle<
+  'pagination' | 'pages' | 'pageIndicatorList'
+>
+
+const allowedProps: AllowedPropKeys = [
+  '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'
+]
+
+type PaginationSnapshot = {
+  lastFocusedButton?: HTMLButtonElement
+}
+
+export type { PaginationProps, PaginationStyle, PaginationSnapshot, ChildPage }
+export { allowedProps }

package/src/Pagination/v2/styles.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { PaginationStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Pagination']
+): PaginationStyle => {
+  return {
+    pageIndicatorList: {
+      all: 'unset',
+      display: 'flex',
+      alignItems: 'center',
+      gap: componentTheme.pageIndicatorGap,
+      flexWrap: 'wrap',
+      justifyContent: 'center'
+    },
+    pagination: {
+      label: 'pagination',
+      textAlign: 'center'
+    },
+    pages: {
+      label: 'pagination__pages',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: componentTheme.pageIndicatorGap
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export { Pagination, PaginationButton } from '../Pagination/v1'
+
+export type { PaginationProps } from '../Pagination/v1/props'
+export type { PaginationPageProps } from '../Pagination/v1/PaginationButton/props'
+export type { PaginationNavigationProps } from '../Pagination/v1/PaginationArrowButton/props'

package/src/exports/b.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export { Pagination, PaginationButton } from '../Pagination/v2'
+
+export type { PaginationProps } from '../Pagination/v2/props'
+export type { PaginationPageProps } from '../Pagination/v2/PaginationButton/props'
+export type { PaginationNavigationProps } from '../Pagination/v2/PaginationArrowButton/props'

package/tsconfig.build.json

@@ -18,6 +18,7 @@
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-portal/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-text/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" },
     { "path": "../ui-tooltip/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },