@atlaskit/pagination 16.3.1 → 17.0.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/pagination
 
+## 17.0.1
+
+### Patch Changes
+
+- [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
+  Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
+  gating.
+- Updated dependencies
+
+## 17.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.3.1
 
 ### Patch Changes

package/dist/cjs/pagination.js

@@ -34,7 +34,7 @@ var styles = {
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "16.3.0"
+  packageVersion: "17.0.0"
 };
 function NavigatorIcon(_ref) {
   var chevronDirection = _ref.chevronDirection;

package/dist/es2019/pagination.js

@@ -21,7 +21,7 @@ const styles = {
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "16.3.0"
+  packageVersion: "17.0.0"
 };
 function NavigatorIcon({
   chevronDirection

package/dist/esm/pagination.js

@@ -25,7 +25,7 @@ var styles = {
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "16.3.0"
+  packageVersion: "17.0.0"
 };
 function NavigatorIcon(_ref) {
   var chevronDirection = _ref.chevronDirection;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "16.3.1",
+	"version": "17.0.1",
 	"description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -13,14 +13,6 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"**/*.compiled.css"
 	],
@@ -40,14 +32,15 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^35.0.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/visually-hidden": "^3.1.0",
+		"@atlaskit/analytics-next": "^12.0.0",
+		"@atlaskit/button": "^24.1.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tokens": "^15.0.0",
+		"@atlaskit/visually-hidden": "^4.0.0",
+		"@atlassian/react-compiler-gating": "^0.2.0",
 		"@babel/runtime": "^7.0.0",
 		"memoize-one": "^6.0.0"
 	},
@@ -58,16 +51,16 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/code": "^17.5.0",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/section-message": "^8.12.0",
-		"@atlassian/react-compiler-gating": "workspace:^",
+		"@atlaskit/code": "^18.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/heading": "^6.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/section-message": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {

package/pagination/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/pagination.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/pagination.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/pagination.d.ts"
 }

package/pagination.docs.tsx

@@ -1,47 +1,49 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'Pagination',
-		description: 'A component for pagination controls.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Pagination',
-			package: '@atlaskit/pagination',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for navigating through paged content',
-			'Provide clear page indicators',
-			'Consider total page count display',
-			'Use appropriate page limits',
-		],
-		contentGuidelines: [
-			'Use clear page labels',
-			'Provide meaningful navigation text',
-			'Use consistent pagination terminology',
-			'Consider page context information',
-		],
-		accessibilityGuidelines: [
-			'Provide clear page navigation labels',
-			'Use appropriate ARIA labels for pagination',
-			'Ensure keyboard navigation support',
-			'Announce page changes to screen readers',
-		],
-		examples: [
-			{
+			description: 'A component for pagination controls.',
+			status: 'general-availability',
+			import: {
 				name: 'Pagination',
-				description: 'Pagination example',
-				source: path.resolve(__dirname, './examples/ai/pagination.tsx'),
+				package: '@atlaskit/pagination',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['pagination', 'pages', 'navigation', 'paging', 'controls'],
-		categories: ['navigation'],
-	},
-];
+			usageGuidelines: [
+				'Use for navigating through paged content',
+				'Provide clear page indicators',
+				'Consider total page count display',
+				'Use appropriate page limits',
+			],
+			contentGuidelines: [
+				'Use clear page labels',
+				'Provide meaningful navigation text',
+				'Use consistent pagination terminology',
+				'Consider page context information',
+			],
+			accessibilityGuidelines: [
+				'Provide clear page navigation labels',
+				'Use appropriate ARIA labels for pagination',
+				'Ensure keyboard navigation support',
+				'Announce page changes to screen readers',
+			],
+			examples: [
+				{
+					name: 'Pagination',
+					description: 'Pagination example',
+					source: path.resolve(__dirname, './examples/ai/pagination.tsx'),
+				},
+			],
+			keywords: ['pagination', 'pages', 'navigation', 'paging', 'controls'],
+			categories: ['navigation'],
+		},
+	],
+};
 
 export default documentation;

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-import React, { type ReactElement, type SyntheticEvent } from 'react';
-type NavigatorProps = {
-    /**
-     * This will be passed in as aria-label to the button. Use this to supply a descriptive label for assistive technology.
-     */
-    'aria-label'?: string;
-    /**
-     * Sets whether the navigator is disabled.
-     */
-    isDisabled?: boolean;
-    iconBefore: ReactElement;
-    testId?: string;
-    /**
-     * This function is called when the user clicks on the navigator.
-     */
-    onClick?: (event: SyntheticEvent) => void;
-    component?: React.ElementType<any>;
-};
-export default function Navigator(props: NavigatorProps): React.JSX.Element;
-export {};

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { type ButtonProps } from '@atlaskit/button/standard-button';
-import type { Appearance } from '@atlaskit/button/types';
-type Diff<T, U> = T extends U ? never : T;
-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): React.JSX.Element;
-export {};

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

@@ -1,9 +0,0 @@
-import { type ReactElement } from 'react';
-type EllipsisProp = {
-    key: string;
-    testId?: string;
-    from: number;
-    to: number;
-};
-export default function renderEllipsis({ key, testId, from, to }: EllipsisProp): ReactElement;
-export {};

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

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

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

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

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { type PaginationPropTypes } from './types';
-/**
- * __Pagination__
- *
- * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
- *
- * - [Examples](https://atlassian.design/components/pagination/examples)
- * - [Code](https://atlassian.design/components/pagination/code)
- * - [Usage](https://atlassian.design/components/pagination/usage)
- */
-declare const Pagination: <T>(props: PaginationPropTypes<T> & {
-    ref?: React.Ref<HTMLDivElement>;
-}) => React.ReactElement;
-export default Pagination;

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

@@ -1,92 +0,0 @@
-import type { CSSProperties, ReactElement, SyntheticEvent } from 'react';
-import { type 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. This 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 nav wrapper.
-     * The default value is "pagination".
-     */
-    label?: string;
-    /**
-     * The aria-label for the next button.
-     * The default value is "next".
-     */
-    nextLabel?: string;
-    /**
-     * The aria-label for the individual page numbers.
-     * The default value is "page".
-     * The page number is automatically appended to the pageLabel.
-     * For Example, pageLabel="página" will render aria-label="página 1"
-     * as the label for page 1.
-     */
-    pageLabel?: string;
-    /**
-     * The aria-label for the previous button.
-     * The default value is "previous".
-     */
-    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;
-        from: number;
-        to: number;
-    }) => 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;
-    /**
-     * Sets whether the Paginator is disabled
-     */
-    isDisabled?: boolean;
-}