@atlaskit/heading 4.1.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/heading
 
+## 4.3.0
+
+### Minor Changes
+
+- [#116138](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116138)
+  [`b50c5d5d65ae2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b50c5d5d65ae2) -
+  Bump to the latest version of @compiled/react
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.0
+
+### Minor Changes
+
+- [#116022](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116022)
+  [`49d35008263f7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49d35008263f7) -
+  Added ref forwarding support.
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/heading.partial.js

@@ -1,4 +1,4 @@
-/* heading.partial.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* heading.partial.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./heading.partial.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _primitives = require("@atlaskit/primitives");
@@ -77,19 +78,16 @@ var useColor = function useColor(colorProp) {
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-var Heading = function Heading(_ref) {
-  var children = _ref.children,
-    size = _ref.size,
-    id = _ref.id,
-    testId = _ref.testId,
-    as = _ref.as,
-    colorProp = _ref.color;
+var Heading = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    size = props.size,
+    id = props.id,
+    testId = props.testId,
+    as = props.as,
+    colorProp = props.color;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-
-  // Technically size can be undefined here due to how the types work.
-  // Once removing the level prop this assertion can be removed since size will be a required prop.
   var _useHeading = (0, _headingContext.useHeading)(sizeTagMap[size]),
     _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
     hLevel = _useHeading2[0],
@@ -99,10 +97,11 @@ var Heading = function Heading(_ref) {
   var color = useColor(colorProp);
   return /*#__PURE__*/React.createElement(Component, {
     id: id,
+    ref: ref,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
     className: (0, _runtime.ax)([styles.reset, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
   }, children);
-};
+});
 var _default = exports.default = Heading;

package/dist/es2019/heading.partial.js

@@ -1,7 +1,8 @@
-/* heading.partial.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* heading.partial.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./heading.partial.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
 import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
 import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
 import { useHeading } from './heading-context';
@@ -66,30 +67,29 @@ const useColor = colorProp => {
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-const Heading = ({
-  children,
-  size,
-  id,
-  testId,
-  as,
-  color: colorProp
-}) => {
+const Heading = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    size,
+    id,
+    testId,
+    as,
+    color: colorProp
+  } = props;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-
-  // Technically size can be undefined here due to how the types work.
-  // Once removing the level prop this assertion can be removed since size will be a required prop.
   const [hLevel, inferredElement] = useHeading(sizeTagMap[size]);
   const Component = as || inferredElement;
   const needsAriaRole = Component === 'div' && hLevel;
   const color = useColor(colorProp);
   return /*#__PURE__*/React.createElement(Component, {
     id: id,
+    ref: ref,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
     className: ax([styles.reset, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
   }, children);
-};
+});
 export default Heading;

package/dist/esm/heading.partial.js

@@ -1,8 +1,9 @@
-/* heading.partial.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* heading.partial.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./heading.partial.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
 import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
 import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
 import { useHeading } from './heading-context';
@@ -67,19 +68,16 @@ var useColor = function useColor(colorProp) {
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-var Heading = function Heading(_ref) {
-  var children = _ref.children,
-    size = _ref.size,
-    id = _ref.id,
-    testId = _ref.testId,
-    as = _ref.as,
-    colorProp = _ref.color;
+var Heading = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    size = props.size,
+    id = props.id,
+    testId = props.testId,
+    as = props.as,
+    colorProp = props.color;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-
-  // Technically size can be undefined here due to how the types work.
-  // Once removing the level prop this assertion can be removed since size will be a required prop.
   var _useHeading = useHeading(sizeTagMap[size]),
     _useHeading2 = _slicedToArray(_useHeading, 2),
     hLevel = _useHeading2[0],
@@ -89,10 +87,11 @@ var Heading = function Heading(_ref) {
   var color = useColor(colorProp);
   return /*#__PURE__*/React.createElement(Component, {
     id: id,
+    ref: ref,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
     className: ax([styles.reset, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
   }, children);
-};
+});
 export default Heading;

package/dist/types/heading-context.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
 /**
@@ -31,5 +31,5 @@ interface HeadingLevelContextProps {
  * </HeadingContext>
  * ```
  */
-declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => JSX.Element;
+declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => React.JSX.Element;
 export default HeadingLevelContextProvider;

package/dist/types/heading.partial.d.ts

@@ -77,5 +77,5 @@ type HeadingSize = keyof typeof headingSizeStylesMap;
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
+declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export default Heading;

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
 /**
@@ -34,5 +34,5 @@ interface HeadingLevelContextProps {
  * </HeadingContext>
  * ```
  */
-declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => JSX.Element;
+declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => React.JSX.Element;
 export default HeadingLevelContextProvider;

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

@@ -77,5 +77,5 @@ type HeadingSize = keyof typeof headingSizeStylesMap;
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
+declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export default Heading;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "4.1.0",
+	"version": "4.3.0",
 	"description": "A heading is a typography component used to display text in different sizes and formats.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,11 +31,11 @@
 		"codegen": "ts-node ./scripts/codegen.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/css": "^0.8.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/css": "^0.9.0",
+		"@atlaskit/primitives": "^13.6.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.1",
+		"@compiled/react": "^0.18.2",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
@@ -46,7 +46,7 @@
 		"@af/formatting": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^20.4.0",
+		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/ds-lib": "^3.5.0",
 		"@atlaskit/ssr": "*",
 		"@atlassian/codegen": "^0.1.0",