@atlaskit/empty-state 10.2.0 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/empty-state
 
+## 11.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
+
+## 11.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
+
 ## 10.2.0
 
 ### Minor Changes

package/empty-state/package.json

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

package/empty-state.docs.tsx

@@ -1,54 +1,56 @@
 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: 'EmptyState',
-		description:
-			'A component for when there is nothing to display (no tasks, cleared inbox, no results).',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'EmptyState',
-			package: '@atlaskit/empty-state',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use when nothing to display in a view (no tasks, no results, cleared inbox)',
-			'Header is required; illustration, description, and buttons are optional',
-			'Use wide (464px) or narrow (304px) layout as appropriate',
-			'Provide one primary CTA; do not stack multiple primary buttons',
-			'Use illustration as spot only—do not resize; keep relevant, neutral or humorous',
-			'Explain why the state is empty and provide clear next steps',
-			'Consider i18n for illustrations (e.g. culturally neutral imagery, translatable alt text)',
-		],
-		contentGuidelines: [
-			'Blank slate: inspirational, motivating tone',
-			'All done: celebratory tone',
-			'No results: neutral tone with next steps',
-			'Use clear, descriptive headers',
-			'Provide specific next steps; avoid negative language',
-		],
-		accessibilityGuidelines: [
-			'Avoid jargon; use simple language',
-			'Use descriptive link text (not "click here")',
-			'Add alt text only if the illustration is meaningful; otherwise omit or mark decorative',
-			'Provide clear empty state messaging',
-			'Use appropriate headings and structure',
-			'Ensure actionable content is accessible',
-		],
-		examples: [
-			{
-				name: 'Empty State',
-				description: 'Empty State example',
-				source: path.resolve(__dirname, './examples/ai/empty-state.tsx'),
+			description:
+				'A component for when there is nothing to display (no tasks, cleared inbox, no results).',
+			status: 'general-availability',
+			import: {
+				name: 'EmptyState',
+				package: '@atlaskit/empty-state',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['empty', 'state', 'placeholder', 'no-content', 'void'],
-		categories: ['status'],
-	},
-];
+			usageGuidelines: [
+				'Use when nothing to display in a view (no tasks, no results, cleared inbox)',
+				'Header is required; illustration, description, and buttons are optional',
+				'Use wide (464px) or narrow (304px) layout as appropriate',
+				'Provide one primary CTA; do not stack multiple primary buttons',
+				'Use illustration as spot only—do not resize; keep relevant, neutral or humorous',
+				'Explain why the state is empty and provide clear next steps',
+				'Consider i18n for illustrations (e.g. culturally neutral imagery, translatable alt text)',
+			],
+			contentGuidelines: [
+				'Blank slate: inspirational, motivating tone',
+				'All done: celebratory tone',
+				'No results: neutral tone with next steps',
+				'Use clear, descriptive headers',
+				'Provide specific next steps; avoid negative language',
+			],
+			accessibilityGuidelines: [
+				'Avoid jargon; use simple language',
+				'Use descriptive link text (not "click here")',
+				'Add alt text only if the illustration is meaningful; otherwise omit or mark decorative',
+				'Provide clear empty state messaging',
+				'Use appropriate headings and structure',
+				'Ensure actionable content is accessible',
+			],
+			examples: [
+				{
+					name: 'Empty State',
+					description: 'Empty State example',
+					source: path.resolve(__dirname, './examples/ai/empty-state.tsx'),
+				},
+			],
+			keywords: ['empty', 'state', 'placeholder', 'no-content', 'void'],
+			categories: ['status'],
+		},
+	],
+};
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "10.2.0",
+	"version": "11.0.1",
 	"description": "An empty state appears when there is no data to display and describes what the user can do next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,15 +27,16 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Empty state",
-			"category": "Status indicators"
+			"category": "Messaging"
 		}
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/button": "^24.1.0",
+		"@atlaskit/heading": "^6.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/spinner": "^20.0.0",
+		"@atlaskit/tokens": "^15.0.0",
+		"@atlassian/react-compiler-gating": "^0.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -46,13 +47,13 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/section-message": "^8.12.0",
-		"@atlassian/react-compiler-gating": "workspace:^",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/section-message": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -74,13 +75,5 @@
 			"deprecation": "no-deprecated-imports"
 		}
 	},
-	"homepage": "https://atlassian.design/components/empty-state/",
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	}
+	"homepage": "https://atlassian.design/components/empty-state/"
 }

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/empty-state.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { EmptyStateProps } from './types';
-/**
- * __Empty state__
- *
- * A component used for presenting various empty states.
- * e.g. (no items, empty search, broken link, welcome screen etc.)
- *
- * @example
- * ```tsx
- * import EmptyState from '@atlaskit/empty-state';
- *
- * // An example of a 404 state
- * export default () => {
- *  <EmptyState
- *   header="Page not found"
- *   imageUrl="https://cdn.io/images/404"
- *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
- *   primaryAction={<Button appearance="primary">Home Page</Button>}
- *   secondaryAction={<Button>Report a problem</Button>}
- *  />;
- * };
- * ```
- */
-declare const EmptyState: ({ buttonGroupLabel, description, header, headingLevel, headingSize, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, tertiaryAction, testId, }: EmptyStateProps) => React.JSX.Element;
-export default EmptyState;

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

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

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

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

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

@@ -1,2 +0,0 @@
-export { default } from './empty-state';
-export type { Width, RenderImageProps, EmptyStateProps } from './types';

package/dist/types-ts4.5/styled/actions-container.d.ts

@@ -1,16 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type FC, type ReactNode } from 'react';
-/**
- * __Actions container__
- *
- * A container for actions: primary action, secondary action, and tertiary action.
- *
- * @internal
- */
-declare const ActionsContainer: FC<{
-    children: ReactNode;
-}>;
-export default ActionsContainer;

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

@@ -1,20 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type FC, type ReactNode } from 'react';
-import type { Width } from '../index';
-type ContainerProps = {
-    testId?: string;
-    width: Width;
-    children: ReactNode;
-};
-/**
- * __Container__
- *
- * Upper level container for Empty State.
- *
- * @internal
- */
-declare const Container: FC<ContainerProps>;
-export default Container;

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

@@ -1,21 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type FC } from 'react';
-type ImageProps = {
-    height?: number;
-    maxHeight: number;
-    maxWidth: number;
-    width?: number;
-    src: string;
-};
-/**
- * __Image__
- *
- * Image in Empty State.
- *
- * @internal
- */
-declare const Image: FC<ImageProps>;
-export default Image;

package/dist/types-ts4.5/styled/spinner-container.d.ts

@@ -1,16 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type FC, type ReactNode } from 'react';
-/**
- * __Spinner container__
- *
- * A spinner container for loading state of Empty State.
- *
- * @internal
- */
-declare const SpinnerContainer: FC<{
-    children?: ReactNode;
-}>;
-export default SpinnerContainer;

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

@@ -1,84 +0,0 @@
-import type { ReactNode } from 'react';
-export interface RenderImageProps {
-    maxImageWidth?: number;
-    maxImageHeight?: number;
-    imageWidth?: number;
-    imageHeight?: number;
-}
-export type Width = 'narrow' | 'wide';
-export interface EmptyStateProps {
-    /**
-     * Title that briefly describes the page to the user.
-     */
-    header: string;
-    /**
-     * The value used to set the heading level of the header element.
-     * Must be in the range of 1 to 6. Defaults to 4.
-     */
-    headingLevel?: number;
-    /**
-     * The keyword used to set the visual appearance of the header element.
-     * Defaults to "medium". "xsmall" can be used for empty states in smaller contexts such as popups.
-     */
-    headingSize?: 'xsmall' | 'medium';
-    /**
-     * The main block of text that holds additional supporting information.
-     */
-    description?: ReactNode;
-    /**
-     * Controls how much horizontal space the component fills. Defaults to "wide".
-     */
-    width?: Width;
-    /**
-     * The url of image that will be shown above the title, fed directly into the `src` prop of an <img> element.
-     * Note, this image will be constrained by the `maxWidth` and `maxHeight` props.
-     */
-    imageUrl?: string;
-    /**
-     * Maximum width (in pixels) of the image, default value is 160.
-     */
-    maxImageWidth?: number;
-    /**
-     * Maximum height (in pixels) of the image, default value is 160.
-     */
-    maxImageHeight?: number;
-    /**
-     * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
-     */
-    primaryAction?: ReactNode;
-    /**
-     * An alternative API to supply an image using a render prop. Only rendered if no `imageUrl` is supplied.
-     */
-    renderImage?: (props: RenderImageProps) => React.ReactNode;
-    /**
-     * Secondary action button for the page.
-     */
-    secondaryAction?: ReactNode;
-    /**
-     * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
-     */
-    tertiaryAction?: ReactNode;
-    /**
-     * A hook for automated testing.
-     */
-    testId?: string;
-    /**
-     * Used to indicate a loading state. Will show a spinner next to the action buttons when true.
-     */
-    isLoading?: boolean;
-    /**
-     * Width of the image that is rendered in EmptyState component.
-     * Useful when you want image to be of exact width to stop it bouncing around when loading in.
-     */
-    imageWidth?: number;
-    /**
-     * Height of the image that is rendered in EmptyState component.
-     * Useful when you want image to be of exact height to stop it bouncing around when loading in.
-     * Only set `height` if you want the image to resize down on smaller devices.
-     */
-    imageHeight?: number;
-    /**
-     * Accessible name for the action buttons group of empty state. Can be used for internationalization. Default is "Button group".
-     */
-    buttonGroupLabel?: string;
-}

package/offerings.json

@@ -1,35 +0,0 @@
-[
-	{
-		"name": "EmptyState",
-		"package": "@atlaskit/empty-state",
-		"import": {
-			"name": "EmptyState",
-			"package": "@atlaskit/empty-state",
-			"type": "default"
-		},
-		"keywords": ["empty", "state", "placeholder", "no-content", "void"],
-		"categories": ["status"],
-		"shortDescription": "A component for empty states.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Provide clear empty state messaging",
-			"Use appropriate headings and structure",
-			"Ensure actionable content is accessible",
-			"Consider screen reader experience"
-		],
-		"usageGuidelines": [
-			"Use when nothing to display in a view",
-			"Explain why the state is empty",
-			"Provide clear next steps",
-			"Keep tone helpful and encouraging",
-			"Consider all scenarios causing the empty state"
-		],
-		"contentGuidelines": [
-			"Use inspirational, motivating tone for first-time view",
-			"Provide specific next steps",
-			"Avoid negative language",
-			"Use clear, descriptive headers"
-		],
-		"examples": ["./examples/ai/empty-state.tsx"]
-	}
-]