@atlaskit/section-message 8.12.15 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/section-message
 
+## 9.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
+
+## 8.13.0
+
+### Minor Changes
+
+- [`36317b7bc1752`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36317b7bc1752) -
+  Add `headingLevel` prop to customize heading element and ensure makers can use proper and
+  accessible heading structures.
+
 ## 8.12.15
 
 ### Patch Changes

package/dist/cjs/section-message.js

@@ -51,6 +51,8 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
     actions = _ref.actions,
     title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
@@ -91,7 +93,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(_heading.default, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([sectionMessageStyles.content])

package/dist/es2019/section-message.js

@@ -40,6 +40,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
   appearance = 'information',
   actions,
   title,
+  headingLevel = 'h2',
   icon,
   isDismissible,
   onDismiss,
@@ -79,7 +80,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     testId: testId && `${testId}--content`,
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: ax([sectionMessageStyles.content])

package/dist/esm/section-message.js

@@ -42,6 +42,8 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
     actions = _ref.actions,
     title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
@@ -82,7 +84,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: ax([sectionMessageStyles.content])

package/dist/types/types.d.ts

@@ -4,7 +4,8 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
  * Appearance determines the icon and background color pairing indicating the message type
  */
 export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
-export interface SectionMessageProps {
+type HeadingElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface BaseSectionMessageProps {
     /**
      * The appearance styling to use for the section message.
      */
@@ -14,6 +15,11 @@ export interface SectionMessageProps {
      * we recommend that this should be a paragraph.
      */
     children: React.ReactNode;
+    /**
+     * Allows the section message's `title` to be rendered as the specified HTML
+     * heading element. The default heading element is `h2`.
+     */
+    headingLevel?: HeadingElements;
     /**
      * The heading of the section message.
      */
@@ -49,6 +55,14 @@ export interface SectionMessageProps {
      */
     testId?: string;
 }
+type ConditionalSectionMessageProps = {
+    headingLevel?: HeadingElements;
+    title: string;
+} | {
+    headingLevel?: never;
+    title?: never;
+};
+export type SectionMessageProps = BaseSectionMessageProps & ConditionalSectionMessageProps;
 export interface SectionMessageActionProps {
     /**
      * The text that needs to be displayed for section message action.
@@ -82,3 +96,4 @@ export interface SectionMessageActionProps {
      */
     testId?: string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "8.12.15",
+	"version": "9.0.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,14 +12,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"
 	],
@@ -39,14 +31,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^35.0.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/heading": "^6.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -56,17 +48,18 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/code": "^17.5.0",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/range": "^10.1.0",
+		"@atlaskit/analytics-next": "^12.0.0",
+		"@atlaskit/code": "^18.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/form": "^16.0.0",
+		"@atlaskit/range": "^11.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {

package/section-message/package.json

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

package/section-message-action/package.json

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

package/section-message.docs.tsx

@@ -1,50 +1,52 @@
 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: 'SectionMessage',
-		description: 'A component for section-level messages.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'SectionMessage',
-			package: '@atlaskit/section-message',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for section-level important info that persists until action or resolution',
-			'Use when: destructive consequences, action needed to proceed, connectivity or auth issues',
-			'Anatomy: icon+color, title (optional), description, actions (optional)',
-			'Use Banner for site-wide; Flag after an event; Inline message for smaller context',
-		],
-		contentGuidelines: [
-			'Title: state the issue or reason',
-			'Description: clear, concise, empathetic; use active verbs',
-			'Avoid blame—use "we\'re having trouble" not "you\'re having issues"',
-			'Provide clear next steps when needed',
-		],
-		accessibilityGuidelines: [
-			'Do not rely on color alone for severity',
-			'Avoid dead ends—always indicate how to proceed',
-			'Use descriptive link text that describes the destination',
-			'Ensure section message content is announced by screen readers',
-			'Use appropriate color contrast for text readability',
-			'Provide clear, actionable messaging',
-			'Consider keyboard navigation for interactive section messages',
-		],
-		examples: [
-			{
-				name: 'Section Message',
-				description: 'Section Message example',
-				source: path.resolve(__dirname, './examples/ai/section-message.tsx'),
+			description: 'A component for section-level messages.',
+			status: 'general-availability',
+			import: {
+				name: 'SectionMessage',
+				package: '@atlaskit/section-message',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['section', 'message', 'alert', 'notification', 'contextual', 'information'],
-		categories: ['feedback'],
-	},
-];
+			usageGuidelines: [
+				'Use for section-level important info that persists until action or resolution',
+				'Use when: destructive consequences, action needed to proceed, connectivity or auth issues',
+				'Anatomy: icon+color, title (optional), description, actions (optional)',
+				'Use Banner for site-wide; Flag after an event; Inline message for smaller context',
+			],
+			contentGuidelines: [
+				'Title: state the issue or reason',
+				'Description: clear, concise, empathetic; use active verbs',
+				'Avoid blame—use "we\'re having trouble" not "you\'re having issues"',
+				'Provide clear next steps when needed',
+			],
+			accessibilityGuidelines: [
+				'Do not rely on color alone for severity',
+				'Avoid dead ends—always indicate how to proceed',
+				'Use descriptive link text that describes the destination',
+				'Ensure section message content is announced by screen readers',
+				'Use appropriate color contrast for text readability',
+				'Provide clear, actionable messaging',
+				'Consider keyboard navigation for interactive section messages',
+			],
+			examples: [
+				{
+					name: 'Section Message',
+					description: 'Section Message example',
+					source: path.resolve(__dirname, './examples/ai/section-message.tsx'),
+				},
+			],
+			keywords: ['section', 'message', 'alert', 'notification', 'contextual', 'information'],
+			categories: ['feedback'],
+		},
+	],
+};
 
 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/section-message-action.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../section-message-action';
-export type { SectionMessageActionProps } from '../types';

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

@@ -1,2 +0,0 @@
-export { default } from '../section-message';
-export type { SectionMessageProps } from '../types';

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

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

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

@@ -1,3 +0,0 @@
-export { default } from './section-message';
-export { default as SectionMessageAction } from './section-message-action';
-export type { Appearance, SectionMessageProps, SectionMessageActionProps } from './types';

package/dist/types-ts4.5/internal/appearance-icon.d.ts

@@ -1,10 +0,0 @@
-import React, { type ComponentType } from 'react';
-import type { Appearance, SectionMessageProps } from '../types';
-export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
-    Icon: React.ElementType<any, keyof React.JSX.IntrinsicElements> | (({ primaryColor }: {
-        primaryColor: string;
-    }) => React.JSX.Element);
-    backgroundColor: string;
-    primaryIconColor: string;
-    LegacyFallbackIcon?: ComponentType<any>;
-};

package/dist/types-ts4.5/section-message-action.d.ts

@@ -1,12 +0,0 @@
-import type { SectionMessageActionProps } from './types';
-/**
- * __Section message action__
- *
- * A section message action is designed to work with the `action` prop from
- * `SectionMessage`. It renders either a button or a link depending on whether
- * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
- *
- * - [Examples](https://atlassian.design/components/section-message/examples#actions)
- */
-declare const SectionMessageAction: import('react').NamedExoticComponent<SectionMessageActionProps>;
-export default SectionMessageAction;

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

@@ -1,12 +0,0 @@
-import type { SectionMessageProps } from './types';
-/**
- * __Section message__
- *
- * A section message is used to alert users to a particular section of the screen.
- *
- * - [Examples](https://atlassian.design/components/section-message/examples)
- * - [Code](https://atlassian.design/components/section-message/code)
- * - [Usage](https://atlassian.design/components/section-message/usage)
- */
-declare const SectionMessage: React.ForwardRefExoticComponent<React.PropsWithoutRef<SectionMessageProps> & React.RefAttributes<HTMLElement>>;
-export default SectionMessage;

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

@@ -1,84 +0,0 @@
-import type { ReactElement } from 'react';
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-/**
- * Appearance determines the icon and background color pairing indicating the message type
- */
-export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
-export interface SectionMessageProps {
-    /**
-     * The appearance styling to use for the section message.
-     */
-    appearance?: Appearance;
-    /**
-     * The main content of the section message. This accepts a react node, although
-     * we recommend that this should be a paragraph.
-     */
-    children: React.ReactNode;
-    /**
-     * The heading of the section message.
-     */
-    title?: string;
-    /**
-     * Actions for the user to take after reading the section message. Accepts a ReactElement
-     * or an array of one or more SectionMessageAction React elements, which are applied as link buttons.
-     * Middle dots are automatically added between multiple link buttons, so no elements
-     * should be present between multiple actions.
-     *
-     * In general, avoid using more than two actions.
-     */
-    actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
-    /**
-     * An Icon component to be rendered instead of the default icon for the component.
-     * This should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)
-     * to see how to provide this icon.
-     */
-    icon?: React.ElementType;
-    /**
-     * Displays a dismiss button, that allows the user to dismiss the message.
-     * It will be removed from the DOM immediately and will not be re-rendered.
-     * It does not handle persistence of the dismissed state across page reloads or remounts.
-     */
-    isDismissible?: boolean;
-    /**
-     * A callback function that is called when the user dismisses the message.
-     */
-    onDismiss?: () => void;
-    /**
-     * A `testId` prop 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;
-}
-export interface SectionMessageActionProps {
-    /**
-     * The text that needs to be displayed for section message action.
-     */
-    children: React.ReactNode;
-    /**
-     * A custom link component. This prop is designed to allow a custom link
-     * component to be passed to the rendered link button. The
-     * intended use-case is for when a custom router component such as react router
-     * is being used within the application.
-     *
-     * This component will only be used if a href prop is passed.
-     */
-    linkComponent?: React.ComponentType<any>;
-    /**
-     * Click handler which will be attached to the rendered link button. The second argument can be used to
-     * track analytics data. See the tutorial in the analytics-next package for details.
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /**
-     * The URL that the rendered link button will point to.
-     */
-    href?: string;
-    /**
-     * The target attribute of the link. This is only used if the href prop is passed.
-     */
-    target?: HTMLAnchorElement['target'];
-    /**
-     * A `testId` prop 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;
-}