@atlaskit/pagination 14.2.1 → 14.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/pagination
 
+## 14.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.2.2
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
 ## 14.2.1
 
 ### Patch Changes

package/codemods/migrations/rename-pagination-prop-types.tsx

@@ -1,7 +1,8 @@
 import { renameNamedImportWithAliasName } from '@atlaskit/codemod-utils';
 
-export const renamePaginationPropTypeToPaginationProps = renameNamedImportWithAliasName(
-  '@atlaskit/pagination',
-  'PaginationPropTypes',
-  'PaginationProps',
-);
+export const renamePaginationPropTypeToPaginationProps =
+  renameNamedImportWithAliasName(
+    '@atlaskit/pagination',
+    'PaginationPropTypes',
+    'PaginationProps',
+  );

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

@@ -15,13 +15,12 @@ var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
-var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
 var navigatorStyles = (0, _react2.css)({
-  paddingRight: gridSize / 2,
-  paddingLeft: gridSize / 2
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 
 function Navigator(props) {

package/dist/cjs/internal/components/render-ellipsis.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 /**  @jsx jsx */
 var ellipsisStyles = (0, _react.css)({
   display: 'inline-flex',
-  padding: '0 8px',
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-100, 8px)"),
   alignItems: 'center',
   textAlign: 'center'
 });

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.2.1"
+  packageVersion: "14.2.3"
 };
 var navStyles = (0, _react2.css)({
   display: 'flex'

package/dist/cjs/version.json

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

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

@@ -4,11 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
 const navigatorStyles = css({
-  paddingRight: gridSize / 2,
-  paddingLeft: gridSize / 2
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 export default function Navigator(props) {
   return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/es2019/internal/components/render-ellipsis.js

@@ -2,7 +2,7 @@
 import { css, jsx } from '@emotion/react';
 const ellipsisStyles = css({
   display: 'inline-flex',
-  padding: '0 8px',
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-100, 8px)"}`,
   alignItems: 'center',
   textAlign: 'center'
 });

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.2.1"
+  packageVersion: "14.2.3"
 };
 const navStyles = css({
   display: 'flex'

package/dist/es2019/version.json

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

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

@@ -4,11 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
 var navigatorStyles = css({
-  paddingRight: gridSize / 2,
-  paddingLeft: gridSize / 2
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 export default function Navigator(props) {
   return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/esm/internal/components/render-ellipsis.js

@@ -2,7 +2,7 @@
 import { css, jsx } from '@emotion/react';
 var ellipsisStyles = css({
   display: 'inline-flex',
-  padding: '0 8px',
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-100, 8px)"),
   alignItems: 'center',
   textAlign: 'center'
 });

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.2.1"
+  packageVersion: "14.2.3"
 };
 var navStyles = css({
   display: 'flex'

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.2.1",
+  "version": "14.2.3",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,13 +13,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
@@ -27,6 +20,7 @@
     ".": "./src/index.tsx"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -36,11 +30,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0"
@@ -52,7 +46,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/dynamic-table": "^14.8.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -77,6 +71,7 @@
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -2,18 +2,27 @@
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
+<!--
+	Generated API Report version: 2.0
+-->
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
 ```ts
 /// <reference types="react" />
 
 import type { CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
 import type { ReactElement } from 'react';
 import type { SyntheticEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-declare const _default: typeof InnerPagination;
+// @public (undocumented)
+const _default: typeof InnerPagination;
 export default _default;
 
-declare function InnerPagination<T>(
+// @public (undocumented)
+function InnerPagination<T>(
   {
     components,
     defaultSelectedIndex,
@@ -31,57 +40,33 @@ declare function InnerPagination<T>(
     testId,
   }: PaginationPropTypes<T>,
   ref: React.Ref<HTMLDivElement>,
-): JSX.Element;
+): jsx.JSX.Element;
 
-export declare interface PaginationPropTypes<T = unknown> {
-  /** Replace the built-in Page, Previous, Next and/ or Ellipsis component */
+// @public (undocumented)
+export interface PaginationPropTypes<T = unknown> {
+  analyticsContext?: Record<string, any>;
   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 */
+  nextLabel?: string;
   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 */
+  previousLabel?: string;
   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
-     */
+  selectedIndex?: number;
+  style?: CSSProperties;
   testId?: string;
 }
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { PaginationPropTypes } from '../types';

package/dist/types-ts4.0/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './pagination';
-export type { PaginationPropTypes } from './types';

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

@@ -1,22 +0,0 @@
-/** @jsx jsx */
-import React, { ReactElement, SyntheticEvent } from 'react';
-import { jsx } from '@emotion/react';
-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
-     */
-    isDisabled?: boolean;
-    iconBefore: ReactElement;
-    pages: T[];
-    testId?: string;
-    /**
-     * 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: NavigatorProps<T>): jsx.JSX.Element;

package/dist/types-ts4.0/internal/components/page.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-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 PageProps = Diff<ButtonProps, {
-    appearance?: Appearance;
-    autoFocus: boolean;
-    isDisabled: boolean;
-    isLoading: boolean;
-    spacing: 'compact' | 'default' | 'none';
-    shouldFitContainer: boolean;
-    type: 'button' | 'submit';
-}> & {
-    page?: any;
-};
-export default function Page(props: PageProps): JSX.Element;
-export {};

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

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

package/dist/types-ts4.0/internal/constants.d.ts

@@ -1 +0,0 @@
-export declare const emptyObject: {};

package/dist/types-ts4.0/internal/utils/collapse-range.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-declare const collapseRange: <T>(pages: T[], current: number, { max, ellipsis, transform, }: {
-    max: number;
-    ellipsis: (arg: {
-        key: string;
-    }) => ReactElement;
-    transform: (page: T, index: number, testId?: string | undefined) => ReactElement;
-}, testId?: string | undefined) => ReactElement[];
-export default collapseRange;

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { jsx } from '@emotion/react';
-import { PaginationPropTypes } from './types';
-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.JSX.Element;
-declare const _default: typeof InnerPagination;
-export default _default;

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

@@ -1,75 +0,0 @@
-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
-     */
-    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;
-}