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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,29 +15,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-portal": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-number-input": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-tooltip": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/uid": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-portal": "11.6.1-snapshot-129",
+    "@instructure/ui-number-input": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-text": "11.6.1-snapshot-129",
+    "@instructure/ui-tooltip": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -47,17 +48,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Pagination/{PaginationArrowButton → v1/PaginationArrowButton}/index.tsx

@@ -24,9 +24,9 @@
 
 import { Component } from 'react'
 
-import { IconButton } from '@instructure/ui-buttons'
+import { IconButton } from '@instructure/ui-buttons/v11_6'
 import { PresentationContent } from '@instructure/ui-a11y-content'
-import { Tooltip } from '@instructure/ui-tooltip'
+import { Tooltip } from '@instructure/ui-tooltip/v11_6'
 import {
   IconArrowOpenStartSolid,
   IconArrowOpenEndSolid,

package/src/Pagination/{PaginationArrowButton → v1/PaginationArrowButton}/props.ts

@@ -27,7 +27,7 @@ import type {
   OtherHTMLAttributes,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
-import type { IconButtonProps } from '@instructure/ui-buttons'
+import type { IconButtonProps } from '@instructure/ui-buttons/v11_6'
 
 type PaginationArrowDirections = 'first' | 'prev' | 'next' | 'last'
 

package/src/Pagination/{PaginationButton → v1/PaginationButton}/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 
-import { BaseButton } from '@instructure/ui-buttons'
+import { BaseButton } from '@instructure/ui-buttons/v11_6'
 import { omitProps } from '@instructure/ui-react-utils'
 
 import { allowedProps } from './props'

package/src/Pagination/{PaginationButton → v1/PaginationButton}/props.ts

@@ -27,7 +27,7 @@ import type {
   OtherHTMLAttributes,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
-import type { BaseButtonProps } from '@instructure/ui-buttons'
+import type { BaseButtonProps } from '@instructure/ui-buttons/v11_6'
 
 type PaginationPageOwnProps = {
   /**

package/src/Pagination/{PaginationPageInput → v1/PaginationPageInput}/index.tsx

@@ -25,7 +25,7 @@
 import { Component } from 'react'
 
 import { withStyle } from '@instructure/emotion'
-import { NumberInput } from '@instructure/ui-number-input'
+import { NumberInput } from '@instructure/ui-number-input/v11_6'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
 import generateStyle from './styles'

package/src/Pagination/{index.tsx → v1/index.tsx}

@@ -29,7 +29,7 @@ import {
   ReactNode
 } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils'

package/src/Pagination/v2/PaginationArrowButton/index.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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 { Component } from 'react'
+
+import { IconButton } from '@instructure/ui-buttons/latest'
+import { PresentationContent } from '@instructure/ui-a11y-content'
+import { Tooltip } from '@instructure/ui-tooltip/latest'
+import {
+  ChevronLeftInstUIIcon,
+  ChevronRightInstUIIcon,
+  ChevronsLeftInstUIIcon,
+  ChevronsRightInstUIIcon,
+  renderIconWithProps
+} from '@instructure/ui-icons'
+
+import type { PaginationNavigationProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: Pagination
+id: Pagination.Navigation
+---
+**/
+class PaginationArrowButton extends Component<PaginationNavigationProps> {
+  static readonly componentId = 'Pagination.Navigation'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {}
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  get margin() {
+    switch (this.props.direction) {
+      case 'first':
+        return '0 xx-small 0 0'
+      case 'last':
+        return '0 0 0 xx-small'
+      default:
+        return undefined
+    }
+  }
+
+  get Icon() {
+    switch (this.props.direction) {
+      case 'first':
+        return ChevronsLeftInstUIIcon
+      case 'prev':
+        return ChevronLeftInstUIIcon
+      case 'next':
+        return ChevronRightInstUIIcon
+      case 'last':
+        return ChevronsRightInstUIIcon
+      default:
+        return null
+    }
+  }
+
+  renderIcon() {
+    const icon = this.Icon
+    if (!icon) return null
+    return renderIconWithProps(icon, 'md', 'actionTertiaryBaseColor')
+  }
+
+  render() {
+    const { label, direction, buttonRef, ...props } = this.props
+
+    return (
+      <Tooltip
+        elementRef={this.handleRef}
+        on={['hover', 'focus']}
+        renderTip={<PresentationContent>{label}</PresentationContent>}
+      >
+        <IconButton
+          {...props}
+          size="small"
+          withBackground={false}
+          withBorder={false}
+          screenReaderLabel={label}
+          rel={props.href || props.to ? direction : undefined}
+          elementRef={buttonRef}
+          margin={this.margin}
+          data-cid="PaginationArrowButton"
+        >
+          {this.renderIcon()}
+        </IconButton>
+      </Tooltip>
+    )
+  }
+}
+
+export default PaginationArrowButton
+export { PaginationArrowButton }

package/src/Pagination/v2/PaginationArrowButton/props.ts

@@ -0,0 +1,74 @@
+/*
+ * 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 {
+  OtherHTMLAttributes,
+  PickPropsWithExceptions
+} from '@instructure/shared-types'
+import type { IconButtonProps } from '@instructure/ui-buttons/latest'
+
+type PaginationArrowDirections = 'first' | 'prev' | 'next' | 'last'
+
+type PaginationNavigationOwnProps = {
+  direction?: PaginationArrowDirections
+  label: string
+  buttonRef?: (element: Element | null) => void
+  onClick?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>
+  ) => void
+}
+
+type PropKeys = keyof PaginationNavigationOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PaginationNavigationProps =
+  // We pass almost all the props to IconButton
+  PickPropsWithExceptions<
+    IconButtonProps,
+    | 'size'
+    | 'withBackground'
+    | 'withBorder'
+    | 'screenReaderLabel'
+    | 'rel'
+    | 'elementRef'
+    | 'margin'
+  > &
+    PaginationNavigationOwnProps &
+    OtherHTMLAttributes<PaginationNavigationOwnProps>
+const allowedProps: AllowedPropKeys = [
+  'direction',
+  'label',
+  'buttonRef'
+
+  // we don't want to pass onClick
+  // 'onClick'
+]
+
+export type { PaginationNavigationProps, PaginationArrowDirections }
+export { allowedProps }

package/src/Pagination/v2/PaginationButton/index.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { Component } from 'react'
+
+import { BaseButton } from '@instructure/ui-buttons/latest'
+import { omitProps } from '@instructure/ui-react-utils'
+
+import { allowedProps } from './props'
+import type { PaginationPageProps } from './props'
+
+/**
+---
+parent: Pagination
+id: Pagination.Page
+---
+**/
+
+class PaginationButton extends Component<PaginationPageProps> {
+  static readonly componentId = 'Pagination.Page'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    current: false
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  render() {
+    const exclude = this.props.current ? ['onClick', 'href'] : []
+
+    const props = omitProps(this.props, PaginationButton.allowedProps, exclude)
+
+    // wrapped in an unstyled <li> for better a11y
+    return (
+      <li style={{ all: 'unset' }}>
+        <BaseButton
+          color="primary"
+          data-cid="PaginationButton"
+          withBackground={this.props.current}
+          withBorder={this.props.current}
+          {...props}
+          aria-current={this.props.current ? 'page' : undefined}
+          elementRef={this.handleRef}
+          {...(this.props.screenReaderLabel
+            ? { 'aria-label': this.props.screenReaderLabel }
+            : {})}
+        >
+          {this.props.children}
+        </BaseButton>
+      </li>
+    )
+  }
+}
+
+export default PaginationButton
+export { PaginationButton }

package/src/Pagination/v2/PaginationButton/props.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 {
+  OtherHTMLAttributes,
+  PickPropsWithExceptions
+} from '@instructure/shared-types'
+import type { BaseButtonProps } from '@instructure/ui-buttons/latest'
+
+type PaginationPageOwnProps = {
+  /**
+   * Content to render as page selection
+   */
+  children: React.ReactNode
+  /**
+   * Whether the page is currently displayed
+   */
+  current?: boolean
+  /**
+   * Callback fired when the `Pagination.Page` is clicked.
+   */
+  onClick?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.FocusEvent<HTMLInputElement>
+  ) => void
+  /**
+   * The text screenreaders should say when this button is in focus (sets the
+   * `aria-label` attribute).
+   * If left undefined (default) SRs will announce text in the child node(s).
+   */
+  screenReaderLabel?: string
+}
+
+type PropKeys = keyof PaginationPageOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PaginationPageProps =
+  // We pass almost all props to BaseButton
+  PickPropsWithExceptions<BaseButtonProps, 'aria-current' | 'elementRef'> &
+    PaginationPageOwnProps &
+    OtherHTMLAttributes<PaginationPageOwnProps>
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'current',
+  'screenReaderLabel'
+  // we don't want to pass onClick
+  // 'onClick'
+]
+
+export type { PaginationPageProps }
+export { allowedProps }