@atlaskit/pagination 14.4.16 → 14.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/pagination
 
+## 14.5.0
+
+### Minor Changes
+
+- [#68812](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68812) [`91d4a48c1430`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91d4a48c1430) - Support better loading state for assistive tech
+
+## 14.4.17
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.4.16
 
 ### Patch Changes

package/dist/cjs/pagination.js

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.4.16"
+  packageVersion: "14.5.0"
 };
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
@@ -54,7 +54,8 @@ function InnerPagination(_ref, ref) {
     _ref$renderEllipsis = _ref.renderEllipsis,
     renderEllipsis = _ref$renderEllipsis === void 0 ? _renderEllipsis.default : _ref$renderEllipsis,
     analyticsContext = _ref.analyticsContext,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    isDisabled = _ref.isDisabled;
   var _useControlled = (0, _useControlled3.default)(selectedIndex, function () {
       return defaultSelectedIndex || 0;
     }),
@@ -91,6 +92,7 @@ function InnerPagination(_ref, ref) {
       "aria-current": page === selectedPage ? 'page' : undefined,
       "aria-label": pageIndexLabel,
       isSelected: page === selectedPage,
+      isDisabled: isDisabled,
       page: page,
       testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
@@ -113,7 +115,7 @@ function InnerPagination(_ref, ref) {
         selectedPageIndex: selectedIndexValue - 1
       });
     },
-    isDisabled: selectedIndexValue === 0,
+    isDisabled: isDisabled || selectedIndexValue === 0,
     iconBefore: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
       label: ""
     }),
@@ -133,7 +135,7 @@ function InnerPagination(_ref, ref) {
         selectedPageIndex: selectedIndexValue + 1
       });
     },
-    isDisabled: selectedIndexValue === pages.length - 1,
+    isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
     iconBefore: /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
       label: ""
     }),

package/dist/es2019/pagination.js

@@ -13,7 +13,7 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.4.16"
+  packageVersion: "14.5.0"
 };
 function InnerPagination({
   components = emptyObject,
@@ -30,7 +30,8 @@ function InnerPagination({
   getPageLabel,
   renderEllipsis = renderDefaultEllipsis,
   analyticsContext,
-  testId
+  testId,
+  isDisabled
 }, ref) {
   const [selectedIndexValue, setSelectedIndexValue] = useControlled(selectedIndex, () => defaultSelectedIndex || 0);
   const onChangeWithAnalytics = usePlatformLeafEventHandler({
@@ -64,6 +65,7 @@ function InnerPagination({
       "aria-current": page === selectedPage ? 'page' : undefined,
       "aria-label": pageIndexLabel,
       isSelected: page === selectedPage,
+      isDisabled: isDisabled,
       page: page,
       testId: testId && `${testId}--${page === selectedPage ? 'current-' : ''}page-${currPageIndex}`
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
@@ -84,7 +86,7 @@ function InnerPagination({
       event,
       selectedPageIndex: selectedIndexValue - 1
     }),
-    isDisabled: selectedIndexValue === 0,
+    isDisabled: isDisabled || selectedIndexValue === 0,
     iconBefore: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
       label: ""
     }),
@@ -102,7 +104,7 @@ function InnerPagination({
       event,
       selectedPageIndex: selectedIndexValue + 1
     }),
-    isDisabled: selectedIndexValue === pages.length - 1,
+    isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
     iconBefore: /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
       label: ""
     }),

package/dist/esm/pagination.js

@@ -17,7 +17,7 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.4.16"
+  packageVersion: "14.5.0"
 };
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
@@ -44,7 +44,8 @@ function InnerPagination(_ref, ref) {
     _ref$renderEllipsis = _ref.renderEllipsis,
     renderEllipsis = _ref$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref$renderEllipsis,
     analyticsContext = _ref.analyticsContext,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    isDisabled = _ref.isDisabled;
   var _useControlled = useControlled(selectedIndex, function () {
       return defaultSelectedIndex || 0;
     }),
@@ -81,6 +82,7 @@ function InnerPagination(_ref, ref) {
       "aria-current": page === selectedPage ? 'page' : undefined,
       "aria-label": pageIndexLabel,
       isSelected: page === selectedPage,
+      isDisabled: isDisabled,
       page: page,
       testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
@@ -103,7 +105,7 @@ function InnerPagination(_ref, ref) {
         selectedPageIndex: selectedIndexValue - 1
       });
     },
-    isDisabled: selectedIndexValue === 0,
+    isDisabled: isDisabled || selectedIndexValue === 0,
     iconBefore: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
       label: ""
     }),
@@ -123,7 +125,7 @@ function InnerPagination(_ref, ref) {
         selectedPageIndex: selectedIndexValue + 1
       });
     },
-    isDisabled: selectedIndexValue === pages.length - 1,
+    isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
     iconBefore: /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
       label: ""
     }),

package/dist/types/internal/components/navigator.d.ts

@@ -1,18 +1,18 @@
 import React, { ReactElement, SyntheticEvent } from 'react';
 export type NavigatorProps<T> = {
     /**
-     * This will be passed in as aria-label to button. This is what screen reader will read
+     * This will be passed in as aria-label to the button. Use this to supply a descriptive label for assistive technology.
      */
     'aria-label'?: string;
     /**
-     * Is the navigator disabled
+     * Sets whether the navigator is disabled.
      */
     isDisabled?: boolean;
     iconBefore: ReactElement;
     pages: T[];
     testId?: string;
     /**
-     * This function is called with the when user clicks on navigator
+     * This function is called when the user clicks on the navigator.
      */
     onClick?: (event: SyntheticEvent) => void;
     component?: React.ElementType<any>;

package/dist/types/pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { PaginationPropTypes } from './types';
-declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, pageLabel, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
+declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, pageLabel, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, isDisabled, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
 declare const _default: typeof InnerPagination;
 export default _default;

package/dist/types/types.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactElement, SyntheticEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface PaginationPropTypes<T = unknown> {
     /**
-     * Replace the built-in Page, Previous, Next and/ or Ellipsis component
+     * Replace the built-in page, previous, next and/ or ellipsis component
      */
     components?: {
         Page?: React.ElementType;
@@ -10,11 +10,11 @@ export interface PaginationPropTypes<T = unknown> {
         Next?: React.ElementType;
     };
     /**
-     * Index of the page to be selected by default
+     * Index of the page to be selected by default.
      */
     defaultSelectedIndex?: number;
     /**
-     * Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object
+     * Helper function to get text displayed on the page button. This is helpful in scenarios when page the page passed in is an object.
      */
     getPageLabel?: (page: T, pageIndex: number) => number | string;
     /**
@@ -41,33 +41,33 @@ export interface PaginationPropTypes<T = unknown> {
      */
     previousLabel?: string;
     /**
-     * Style to spread on the container element
+     * Style to spread on the container element.
      */
     style?: CSSProperties;
     /**
-     * Maximum number of pages to be displayed in the pagination
+     * Maximum number of pages to be displayed in the pagination.
      */
     max?: number;
     /**
-     * The onChange handler which is called when the page is changed
+     * The onChange handler which is called when the page is changed.
      */
     onChange?: (event: SyntheticEvent, page: T, analyticsEvent?: UIAnalyticsEvent) => void;
     /**
-     * Array of the pages to display
+     * Array of the pages to display.
      */
     pages: T[];
     /**
-     * Index of the selected page. This will make this pagination controlled
+     * Index of the selected page. This will make this pagination controlled.
      */
     selectedIndex?: number;
     /**
-     * The react Node returned from the function is rendered instead of the default ellipsis node
+     * The react Node returned from the function is rendered instead of the default ellipsis node.
      */
     renderEllipsis?: (arg: {
         key: string;
     }) => ReactElement;
     /**
-     * Additional information to be included in the `context` of analytics events
+     * Additional information to be included in the `context` of analytics events.
      */
     analyticsContext?: Record<string, any>;
     /**
@@ -83,4 +83,8 @@ export interface PaginationPropTypes<T = unknown> {
      * - Right navigator - {testId}--right-navigator
      */
     testId?: string;
+    /**
+     * Sets whether the Paginator is disabled
+     */
+    isDisabled?: boolean;
 }

package/dist/types-ts4.5/internal/components/navigator.d.ts

@@ -1,18 +1,18 @@
 import React, { ReactElement, SyntheticEvent } from 'react';
 export type NavigatorProps<T> = {
     /**
-     * This will be passed in as aria-label to button. This is what screen reader will read
+     * This will be passed in as aria-label to the button. Use this to supply a descriptive label for assistive technology.
      */
     'aria-label'?: string;
     /**
-     * Is the navigator disabled
+     * Sets whether the navigator is disabled.
      */
     isDisabled?: boolean;
     iconBefore: ReactElement;
     pages: T[];
     testId?: string;
     /**
-     * This function is called with the when user clicks on navigator
+     * This function is called when the user clicks on the navigator.
      */
     onClick?: (event: SyntheticEvent) => void;
     component?: React.ElementType<any>;

package/dist/types-ts4.5/pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { PaginationPropTypes } from './types';
-declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, pageLabel, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
+declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, pageLabel, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, isDisabled, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
 declare const _default: typeof InnerPagination;
 export default _default;

package/dist/types-ts4.5/types.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactElement, SyntheticEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface PaginationPropTypes<T = unknown> {
     /**
-     * Replace the built-in Page, Previous, Next and/ or Ellipsis component
+     * Replace the built-in page, previous, next and/ or ellipsis component
      */
     components?: {
         Page?: React.ElementType;
@@ -10,11 +10,11 @@ export interface PaginationPropTypes<T = unknown> {
         Next?: React.ElementType;
     };
     /**
-     * Index of the page to be selected by default
+     * Index of the page to be selected by default.
      */
     defaultSelectedIndex?: number;
     /**
-     * Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object
+     * Helper function to get text displayed on the page button. This is helpful in scenarios when page the page passed in is an object.
      */
     getPageLabel?: (page: T, pageIndex: number) => number | string;
     /**
@@ -41,33 +41,33 @@ export interface PaginationPropTypes<T = unknown> {
      */
     previousLabel?: string;
     /**
-     * Style to spread on the container element
+     * Style to spread on the container element.
      */
     style?: CSSProperties;
     /**
-     * Maximum number of pages to be displayed in the pagination
+     * Maximum number of pages to be displayed in the pagination.
      */
     max?: number;
     /**
-     * The onChange handler which is called when the page is changed
+     * The onChange handler which is called when the page is changed.
      */
     onChange?: (event: SyntheticEvent, page: T, analyticsEvent?: UIAnalyticsEvent) => void;
     /**
-     * Array of the pages to display
+     * Array of the pages to display.
      */
     pages: T[];
     /**
-     * Index of the selected page. This will make this pagination controlled
+     * Index of the selected page. This will make this pagination controlled.
      */
     selectedIndex?: number;
     /**
-     * The react Node returned from the function is rendered instead of the default ellipsis node
+     * The react Node returned from the function is rendered instead of the default ellipsis node.
      */
     renderEllipsis?: (arg: {
         key: string;
     }) => ReactElement;
     /**
-     * Additional information to be included in the `context` of analytics events
+     * Additional information to be included in the `context` of analytics events.
      */
     analyticsContext?: Record<string, any>;
     /**
@@ -83,4 +83,8 @@ export interface PaginationPropTypes<T = unknown> {
      * - Right navigator - {testId}--right-navigator
      */
     testId?: string;
+    /**
+     * Sets whether the Paginator is disabled
+     */
+    isDisabled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.4.16",
+  "version": "14.5.0",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,12 +40,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.16.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^3.0.0",
+    "@atlaskit/ds-explorations": "^3.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.20.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0"
   },
@@ -54,9 +54,10 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",

package/tmp/api-report-tmp.d.ts

@@ -1,47 +0,0 @@
-## API Report File for "@atlaskit/pagination"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import type { CSSProperties } from 'react';
-import { default as React_2 } from 'react';
-import type { ReactElement } from 'react';
-import type { SyntheticEvent } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-const _default: typeof InnerPagination;
-export default _default;
-
-// @public (undocumented)
-function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, pageLabel, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React_2.Ref<HTMLDivElement>): JSX.Element;
-
-// @public (undocumented)
-export interface PaginationPropTypes<T = unknown> {
-    analyticsContext?: Record<string, any>;
-    components?: {
-        Page?: React.ElementType;
-        Previous?: React.ElementType;
-        Next?: React.ElementType;
-    };
-    defaultSelectedIndex?: number;
-    getPageLabel?: (page: T, pageIndex: number) => number | string;
-    label?: string;
-    max?: number;
-    nextLabel?: string;
-    onChange?: (event: SyntheticEvent, page: T, analyticsEvent?: UIAnalyticsEvent) => void;
-    pageLabel?: string;
-    pages: T[];
-    previousLabel?: string;
-    renderEllipsis?: (arg: {
-        key: string;
-    }) => ReactElement;
-    selectedIndex?: number;
-    style?: CSSProperties;
-    testId?: string;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```