@atlaskit/pagination 14.1.8 → 14.1.9

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/pagination
 
+## 14.1.9
+
+### Patch Changes
+
+- [`ac051e856a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac051e856a6) - Internal code change turning on new linting rules.
+- Updated dependencies
+
 ## 14.1.8
 
 ### Patch Changes

package/dist/cjs/internal/components/navigator.js

@@ -25,7 +25,8 @@ var navigatorStyles = (0, _core.css)({
 });
 
 function Navigator(props) {
-  return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+  return (0, _core.jsx)(_standardButton.default // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
     appearance: "subtle",
     spacing: "none",
     css: navigatorStyles

package/dist/cjs/internal/components/page.js

@@ -14,6 +14,7 @@ var _react = _interopRequireDefault(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 function Page(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, props, {
     appearance: "subtle"
   }));

package/dist/cjs/internal/utils/collapse-range.js

@@ -11,6 +11,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
+// TODO: comma needed after generic declaration below, or the .tsx file thinks
+// it is a JSX element. Tidy up in a future refactor.
 var collapseRange = function collapseRange(pages, current, _ref, testId) {
   var max = _ref.max,
       ellipsis = _ref.ellipsis,

package/dist/cjs/pagination.js

@@ -42,7 +42,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.1.8"
+  packageVersion: "14.1.9"
 };
 var navStyles = (0, _core.css)({
   display: 'flex'

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.1.8",
+	"version": "14.1.9",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/navigator.js

@@ -11,7 +11,8 @@ const navigatorStyles = css({
   paddingLeft: gridSize / 2
 });
 export default function Navigator(props) {
-  return jsx(Button, _extends({}, props, {
+  return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
     appearance: "subtle",
     spacing: "none",
     css: navigatorStyles

package/dist/es2019/internal/components/page.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default function Page(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
     appearance: "subtle"
   }));

package/dist/es2019/internal/utils/collapse-range.js

@@ -1,4 +1,5 @@
-import memoizeOne from 'memoize-one';
+import memoizeOne from 'memoize-one'; // TODO: comma needed after generic declaration below, or the .tsx file thinks
+// it is a JSX element. Tidy up in a future refactor.
 
 const collapseRange = (pages, current, {
   max,

package/dist/es2019/pagination.js

@@ -14,7 +14,7 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.1.8"
+  packageVersion: "14.1.9"
 };
 const navStyles = css({
   display: 'flex'

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.1.8",
+	"version": "14.1.9",
 	"sideEffects": false
 }

package/dist/esm/internal/components/navigator.js

@@ -11,7 +11,8 @@ var navigatorStyles = css({
   paddingLeft: gridSize / 2
 });
 export default function Navigator(props) {
-  return jsx(Button, _extends({}, props, {
+  return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
     appearance: "subtle",
     spacing: "none",
     css: navigatorStyles

package/dist/esm/internal/components/page.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default function Page(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
     appearance: "subtle"
   }));

package/dist/esm/internal/utils/collapse-range.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import memoizeOne from 'memoize-one';
+import memoizeOne from 'memoize-one'; // TODO: comma needed after generic declaration below, or the .tsx file thinks
+// it is a JSX element. Tidy up in a future refactor.
 
 var collapseRange = function collapseRange(pages, current, _ref, testId) {
   var max = _ref.max,

package/dist/esm/pagination.js

@@ -21,7 +21,7 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.1.8"
+  packageVersion: "14.1.9"
 };
 var navStyles = css({
   display: 'flex'

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.1.8",
+	"version": "14.1.9",
 	"sideEffects": false
 }

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

@@ -1,15 +1,21 @@
 /** @jsx jsx */
 import React, { ReactElement, SyntheticEvent } from 'react';
-export declare type NavigatorPropsType<T> = {
-    /** This will be passed in as aria-label to button. This is what screen reader will read */
+export declare type NavigatorProps<T> = {
+    /**
+     * This will be passed in as aria-label to button. This is what screen reader will read
+     */
     'aria-label'?: string;
-    /** Is the navigator disabled */
+    /**
+     * Is the navigator disabled
+     */
     isDisabled?: boolean;
     iconBefore: ReactElement;
     pages: T[];
     testId?: string;
-    /** This function is called with the when user clicks on navigator */
+    /**
+     * This function is called with the when user clicks on navigator
+     */
     onClick?: (event: SyntheticEvent) => void;
     component?: React.ElementType<any>;
 };
-export default function Navigator<T>(props: NavigatorPropsType<T>): JSX.Element;
+export default function Navigator<T>(props: NavigatorProps<T>): JSX.Element;

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

@@ -2,7 +2,7 @@
 import { ButtonProps } from '@atlaskit/button/standard-button';
 import type { Appearance } from '@atlaskit/button/types';
 declare type Diff<T, U> = T extends U ? never : T;
-declare type PagePropsType = Diff<ButtonProps, {
+declare type PageProps = Diff<ButtonProps, {
     appearance?: Appearance;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -13,5 +13,5 @@ declare type PagePropsType = Diff<ButtonProps, {
 }> & {
     page?: any;
 };
-export default function Page(props: PagePropsType): JSX.Element;
+export default function Page(props: PageProps): JSX.Element;
 export {};

package/dist/types/internal/components/render-ellipsis.d.ts

@@ -1,6 +1,6 @@
 /**  @jsx jsx */
 import { ReactElement } from 'react';
-export declare type EllipsisPropType = {
+export declare type EllipsisProp = {
     key: string;
 };
-export default function renderEllipsis({ key, }: EllipsisPropType): ReactElement;
+export default function renderEllipsis({ key }: EllipsisProp): ReactElement;

package/dist/types/types.d.ts

@@ -1,49 +1,75 @@
 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;
         Previous?: React.ElementType;
         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. It is helpful in scenarios when page the page passed in is an object
+     */
     getPageLabel?: (page: T, pageIndex: number) => number | string;
-    /** The aria-label for the pagination wrapper */
+    /**
+     * The aria-label for the pagination wrapper
+     */
     label?: string;
-    /** The aria-label for the next button */
+    /**
+     * The aria-label for the next button
+     */
     nextLabel?: string;
-    /** The aria-label for the previous button */
+    /**
+     * The aria-label for the previous button
+     */
     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>;
     /**
-      A `testId` prop is provided for specified elements,
-      which is a unique string that appears as a data attribute `data-testid`
-      in the rendered code, serving as a hook for automated tests.
-  
-      Will set data-testid on these elements when defined:
-      - Pagination nav wrapper - {testId}
-      - Page - {testId}--page-{page index}
-      - Current page - {testId}--current-page-{page index}
-      - Left navigator - {testId}--left-navigator
-      - Right navigator - {testId}--right-navigator
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid`
+     * in the rendered code, serving as a hook for automated tests.
+     *
+     * Will set data-testid on these elements when defined:
+     * - Pagination nav wrapper - {testId}
+     * - Page - {testId}--page-{page index}
+     * - Current page - {testId}--current-page-{page index}
+     * - Left navigator - {testId}--left-navigator
+     * - Right navigator - {testId}--right-navigator
      */
     testId?: string;
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.1.8",
+  "version": "14.1.9",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "homepage": "https://atlassian.design/components/pagination/",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,7 +14,11 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    "./types": "./src/entry-points/types.tsx",
+    ".": "./src/index.tsx"
+  },
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -26,7 +31,7 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
     "@babel/runtime": "^7.0.0",
@@ -38,7 +43,8 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/dynamic-table": "^14.6.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/dynamic-table": "^14.7.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -60,6 +66,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
@@ -71,10 +78,5 @@
       ]
     }
   },
-  "af:exports": {
-    "./types": "./src/entry-points/types.ts",
-    ".": "./src/index.ts"
-  },
-  "homepage": "https://atlassian.design/components/pagination/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -0,0 +1,87 @@
+## API Report File for "@atlaskit/pagination"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import type { CSSProperties } from 'react';
+import type { ReactElement } from 'react';
+import type { SyntheticEvent } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+declare const _default: typeof InnerPagination;
+export default _default;
+
+declare function InnerPagination<T>(
+  {
+    components,
+    defaultSelectedIndex,
+    selectedIndex,
+    label,
+    previousLabel,
+    nextLabel,
+    style,
+    max,
+    onChange,
+    pages,
+    getPageLabel,
+    renderEllipsis,
+    analyticsContext,
+    testId,
+  }: PaginationPropTypes<T>,
+  ref: React.Ref<HTMLDivElement>,
+): JSX.Element;
+
+export declare interface PaginationPropTypes<T = unknown> {
+  /** Replace the built-in Page, Previous, Next and/ or Ellipsis component */
+  components?: {
+    Page?: React.ElementType;
+    Previous?: React.ElementType;
+    Next?: React.ElementType;
+  };
+  /** 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  */
+  getPageLabel?: (page: T, pageIndex: number) => number | string;
+  /** The aria-label for the pagination wrapper */
+  label?: string;
+  /** The aria-label for the next button */
+  nextLabel?: string;
+  /** The aria-label for the previous button */
+  previousLabel?: string;
+  /** Style to spread on the container element */
+  style?: CSSProperties;
+  /** Maximum number of pages to be displayed in the pagination */
+  max?: number;
+  /** 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 */
+  pages: T[];
+  /** 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 */
+  renderEllipsis?: (arg: { key: string }) => ReactElement;
+  /** Additional information to be included in the `context` of analytics events */
+  analyticsContext?: Record<string, any>;
+  /**
+     A `testId` prop is provided for specified elements,
+     which is a unique string that appears as a data attribute `data-testid`
+     in the rendered code, serving as a hook for automated tests.
+
+     Will set data-testid on these elements when defined:
+     - Pagination nav wrapper - {testId}
+     - Page - {testId}--page-{page index}
+     - Current page - {testId}--current-page-{page index}
+     - Left navigator - {testId}--left-navigator
+     - Right navigator - {testId}--right-navigator
+     */
+  testId?: string;
+}
+
+export {};
+```