@atlaskit/page-header 12.2.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/page-header
 
+## 13.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
+
 ## 12.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "12.2.0",
+	"version": "13.0.0",
 	"description": "A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,9 +31,9 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -45,20 +45,21 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/breadcrumbs": "^16.1.0",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/inline-edit": "^15.6.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/page": "^14.0.0",
-		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/textfield": "^8.3.0",
+		"@atlaskit/breadcrumbs": "^17.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/inline-edit": "^16.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/page": "^15.0.0",
+		"@atlaskit/section-message": "^9.0.0",
+		"@atlaskit/select": "^22.0.0",
+		"@atlaskit/textfield": "^9.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"keywords": [
@@ -88,13 +89,5 @@
 			"deprecation": "no-deprecated-imports"
 		}
 	},
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"homepage": "https://atlassian.design/components/page-header"
 }

package/page-header/package.json

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

package/page-header.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: 'PageHeader',
-		description: 'A component for page headers.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'PageHeader',
-			package: '@atlaskit/page-header',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for consistent page header layout',
-			'Include breadcrumbs for navigation context',
-			'Provide relevant page actions',
-			'Use appropriate header hierarchy',
-		],
-		contentGuidelines: [
-			'Use clear, descriptive page titles',
-			'Provide meaningful breadcrumb labels',
-			'Use action-oriented button text',
-			'Keep header content focused',
-		],
-		accessibilityGuidelines: [
-			'Provide clear page titles',
-			'Use appropriate heading hierarchy',
-			'Ensure breadcrumb navigation is accessible',
-			'Provide clear action labels',
-		],
-		examples: [
-			{
-				name: 'Page Header',
-				description: 'Page Header example',
-				source: path.resolve(__dirname, './examples/ai/page-header.tsx'),
+			description: 'A component for page headers.',
+			status: 'general-availability',
+			import: {
+				name: 'PageHeader',
+				package: '@atlaskit/page-header',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['page', 'header', 'title', 'breadcrumbs', 'actions'],
-		categories: ['layout'],
-	},
-];
+			usageGuidelines: [
+				'Use for consistent page header layout',
+				'Include breadcrumbs for navigation context',
+				'Provide relevant page actions',
+				'Use appropriate header hierarchy',
+			],
+			contentGuidelines: [
+				'Use clear, descriptive page titles',
+				'Provide meaningful breadcrumb labels',
+				'Use action-oriented button text',
+				'Keep header content focused',
+			],
+			accessibilityGuidelines: [
+				'Provide clear page titles',
+				'Use appropriate heading hierarchy',
+				'Ensure breadcrumb navigation is accessible',
+				'Provide clear action labels',
+			],
+			examples: [
+				{
+					name: 'Page Header',
+					description: 'Page Header example',
+					source: path.resolve(__dirname, './examples/ai/page-header.tsx'),
+				},
+			],
+			keywords: ['page', 'header', 'title', 'breadcrumbs', 'actions'],
+			categories: ['layout'],
+		},
+	],
+};
 
 export default documentation;

package/dist/types-ts4.5/PageHeader/actions-wrapper.d.ts

@@ -1,15 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode } from 'react';
-/**
- * __Actions wrapper__.
- *
- * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
- *
- */
-declare const ActionsWrapper: ({ children }: {
-    children: ReactNode;
-}) => JSX.Element;
-export default ActionsWrapper;

package/dist/types-ts4.5/PageHeader/bottom-bar.d.ts

@@ -1,15 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode } from 'react';
-/**
- * __Bottom bar__.
- *
- * A bottom bar is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
- *
- */
-declare const BottomBar: ({ children }: {
-    children: ReactNode;
-}) => JSX.Element;
-export default BottomBar;

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

@@ -1,51 +0,0 @@
-import React, { type ReactElement, type ReactNode } from 'react';
-type PageHeaderProps = {
-    /**
-     * Contents of the action bar to be rendered next to the page title.
-     */
-    actions?: ReactElement;
-    /**
-     * Contents of the action bar to be rendered next to the page title. Typically a button group.
-     */
-    bottomBar?: ReactElement;
-    /**
-     * Page breadcrumbs to be rendered above the title.
-     */
-    breadcrumbs?: ReactElement;
-    /**
-     * Contents of the bottom bar to be rendered below the page title. Typically contains a search bar and/or filters.
-     */
-    children?: ReactNode;
-    /**
-     * Content of the page title. The text wraps by default.
-     */
-    disableTitleStyles?: boolean;
-    /**
-     * Returns the inner ref to the DOM element of the title. This is exposed so the focus can be set.
-     */
-    innerRef?: (element: HTMLElement) => void;
-    /**
-     * Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible.
-     */
-    truncateTitle?: boolean;
-    /**
-     * Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.
-     */
-    id?: string;
-    /**
-     * 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.
-     */
-    testId?: string;
-};
-/**
- * __Page header__
- *
- * A page header defines the top of a page. It contains a title and can be optionally combined with
- * breadcrumbs buttons, search, and filters.
- *
- * - [Examples](https://atlassian.design/components/page-header/examples)
- * - [Code](https://atlassian.design/components/page-header/code)
- * - [Usage](https://atlassian.design/components/page-header/usage)
- */
-declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, testId, }: PageHeaderProps) => React.JSX.Element;
-export default PageHeader;

package/dist/types-ts4.5/PageHeader/outer-wrapper.d.ts

@@ -1,16 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode } from 'react';
-/**
- * __Outer wrapper__.
- *
- * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
- * the BottomBar and its Breadcrumbs.
- *
- */
-declare const OuterWrapper: ({ children }: {
-    children: ReactNode;
-}) => JSX.Element;
-export default OuterWrapper;

package/dist/types-ts4.5/PageHeader/title-container.d.ts

@@ -1,17 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode } from 'react';
-interface TitleProps {
-    truncateTitle?: boolean;
-    children?: ReactNode;
-}
-/**
- * Title container.
- *
- * A title container is a container that wraps around the title and its styles (if applied).
- *
- */
-declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
-export default TitleContainer;

package/dist/types-ts4.5/PageHeader/title-wrapper.d.ts

@@ -1,17 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode } from 'react';
-interface TitleProps {
-    truncateTitle?: boolean;
-    children?: ReactNode;
-}
-/**
- * __Title wrapper__.
- *
- * A title wrapper is a wrapper around the title and the actions.
- *
- */
-declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
-export default TitleWrapper;

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

@@ -1,19 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-interface TitleProps {
-    children?: React.ReactNode;
-    id?: string;
-    truncateTitle?: boolean;
-    testId?: string;
-}
-/**
- * __Styled title wrapper__.
- *
- * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
- *
- */
-declare const Title: React.ForwardRefExoticComponent<React.PropsWithoutRef<TitleProps> & React.RefAttributes<HTMLHeadingElement>>;
-export default Title;

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

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

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

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

package/offerings.json

@@ -1,34 +0,0 @@
-[
-	{
-		"name": "PageHeader",
-		"package": "@atlaskit/page-header",
-		"import": {
-			"name": "PageHeader",
-			"package": "@atlaskit/page-header",
-			"type": "default"
-		},
-		"keywords": ["page", "header", "title", "breadcrumbs", "actions"],
-		"categories": ["layout"],
-		"shortDescription": "A component for page headers.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Provide clear page titles",
-			"Use appropriate heading hierarchy",
-			"Ensure breadcrumb navigation is accessible",
-			"Provide clear action labels"
-		],
-		"usageGuidelines": [
-			"Use for consistent page header layout",
-			"Include breadcrumbs for navigation context",
-			"Provide relevant page actions",
-			"Use appropriate header hierarchy"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive page titles",
-			"Provide meaningful breadcrumb labels",
-			"Use action-oriented button text",
-			"Keep header content focused"
-		],
-		"examples": ["./examples/ai/page-header.tsx"]
-	}
-]