@atlaskit/heading 1.4.1 → 1.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/heading
 
+## 1.4.3
+
+### Patch Changes
+
+- [#41226](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41226) [`fc7aba3cbae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc7aba3cbae) - [ux] Further fixes related to heading getting into possible invalid state. Heading will now always produce valid markup / aria-attributes for any configuration. Previously if there was no `HeadingContext` in the tree the heading would not produce accessibly correct markup in some cases. This is now resolved.
+
+## 1.4.2
+
+### Patch Changes
+
+- [#41124](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41124) [`40cd7f0c882`](https://bitbucket.org/atlassian/atlassian-frontend/commits/40cd7f0c882) - Fix to prevent heading getting into possible invalid state.
+
 ## 1.4.1
 
 ### Patch Changes

package/dist/cjs/heading-context.js

@@ -4,7 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useHeadingElement = exports.default = void 0;
+exports.useHeadingLevel = exports.useHeading = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -16,9 +16,22 @@ var HeadingLevelContext = /*#__PURE__*/(0, _react.createContext)(0);
  * @internal
  * @returns The current heading level context.
  */
-var useHeadingElement = exports.useHeadingElement = function useHeadingElement() {
+var useHeadingLevel = exports.useHeadingLevel = function useHeadingLevel() {
   return (0, _react.useContext)(HeadingLevelContext);
 };
+
+/**
+ * Infers the correct heading markup based on the current heading level context.
+ */
+var useHeading = exports.useHeading = function useHeading(fallback) {
+  var hLevel = useHeadingLevel();
+  /**
+   * Order here is important, we for now apply
+   * 1. inferred a11y level (this only applies if context is present)
+   * 2. default final fallback
+   */
+  return [hLevel, hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || fallback];
+};
 /**
  * __Heading level provider__
  *
@@ -38,7 +51,7 @@ var useHeadingElement = exports.useHeadingElement = function useHeadingElement()
 var HeadingLevelContextProvider = function HeadingLevelContextProvider(_ref) {
   var children = _ref.children,
     value = _ref.value;
-  var parentHeadingLevel = useHeadingElement();
+  var parentHeadingLevel = useHeadingLevel();
   var headingLevel = parentHeadingLevel + 1;
   return /*#__PURE__*/_react.default.createElement(HeadingLevelContext.Provider, {
     value: value || headingLevel

package/dist/cjs/heading.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _headingContext = require("./heading-context");
 var _heading = _interopRequireDefault(require("./heading.partial"));
@@ -117,20 +118,18 @@ var Heading = function Heading(_ref) {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-  var hLevel = (0, _headingContext.useHeadingElement)();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
+  var _useHeading = (0, _headingContext.useHeading)(levelMap[level]),
+    _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
+    hLevel = _useHeading2[0],
+    inferredElement = _useHeading2[1];
+  var Markup = as || inferredElement;
   var isSubtleHeading = level === 'h200' || level === 'h100';
+  var needsAriaRole = Markup === 'div' && hLevel;
   return (0, _react.jsx)(Markup, {
     id: id,
     "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    "aria-level": Markup === 'div' ? hLevel : undefined,
+    role: needsAriaRole ? 'heading' : undefined,
+    "aria-level": needsAriaRole ? hLevel : undefined,
     css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
   }, children);
 };

package/dist/cjs/heading.partial.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _headingContext = require("./heading-context");
 /** @jsx jsx */
@@ -54,19 +56,17 @@ var Heading = function Heading(_ref) {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-  var hLevel = (0, _headingContext.useHeadingElement)();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[variant];
+  var _useHeading = (0, _headingContext.useHeading)(levelMap[variant]),
+    _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
+    hLevel = _useHeading2[0],
+    inferredElement = _useHeading2[1];
+  var Markup = as || inferredElement;
+  var needsAriaRole = Markup === 'div' && hLevel;
   return (0, _react.jsx)(Markup, {
     id: id,
     "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    "aria-level": Markup === 'div' ? hLevel : undefined,
+    role: needsAriaRole ? 'heading' : undefined,
+    "aria-level": needsAriaRole ? hLevel : undefined,
     css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
   }, children);
 };

package/dist/es2019/heading-context.js

@@ -8,9 +8,22 @@ const HeadingLevelContext = /*#__PURE__*/createContext(0);
  * @internal
  * @returns The current heading level context.
  */
-export const useHeadingElement = () => {
+export const useHeadingLevel = () => {
   return useContext(HeadingLevelContext);
 };
+
+/**
+ * Infers the correct heading markup based on the current heading level context.
+ */
+export const useHeading = fallback => {
+  const hLevel = useHeadingLevel();
+  /**
+   * Order here is important, we for now apply
+   * 1. inferred a11y level (this only applies if context is present)
+   * 2. default final fallback
+   */
+  return [hLevel, hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || fallback];
+};
 /**
  * __Heading level provider__
  *
@@ -31,7 +44,7 @@ const HeadingLevelContextProvider = ({
   children,
   value
 }) => {
-  const parentHeadingLevel = useHeadingElement();
+  const parentHeadingLevel = useHeadingLevel();
   const headingLevel = parentHeadingLevel + 1;
   return /*#__PURE__*/React.createElement(HeadingLevelContext.Provider, {
     value: value || headingLevel

package/dist/es2019/heading.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { useHeadingElement } from './heading-context';
+import { useHeading } from './heading-context';
 import NewHeading from './heading.partial';
 // https://atlassian.design/foundations/typography
 const levelMap = {
@@ -108,20 +108,15 @@ const Heading = ({
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-  const hLevel = useHeadingElement();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  const Markup = as || hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || levelMap[level];
+  const [hLevel, inferredElement] = useHeading(levelMap[level]);
+  const Markup = as || inferredElement;
   const isSubtleHeading = level === 'h200' || level === 'h100';
+  const needsAriaRole = Markup === 'div' && hLevel;
   return jsx(Markup, {
     id: id,
     "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    "aria-level": Markup === 'div' ? hLevel : undefined,
+    role: needsAriaRole ? 'heading' : undefined,
+    "aria-level": needsAriaRole ? hLevel : undefined,
     css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
   }, children);
 };

package/dist/es2019/heading.partial.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { useHeadingElement } from './heading-context';
+import { useHeading } from './heading-context';
 // https://atlassian.design/foundations/typography
 const levelMap = {
   xxlarge: 'h1',
@@ -47,19 +47,14 @@ const Heading = ({
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-  const hLevel = useHeadingElement();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  const Markup = as || hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || levelMap[variant];
+  const [hLevel, inferredElement] = useHeading(levelMap[variant]);
+  const Markup = as || inferredElement;
+  const needsAriaRole = Markup === 'div' && hLevel;
   return jsx(Markup, {
     id: id,
     "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    "aria-level": Markup === 'div' ? hLevel : undefined,
+    role: needsAriaRole ? 'heading' : undefined,
+    "aria-level": needsAriaRole ? hLevel : undefined,
     css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
   }, children);
 };

package/dist/esm/heading-context.js

@@ -8,9 +8,22 @@ var HeadingLevelContext = /*#__PURE__*/createContext(0);
  * @internal
  * @returns The current heading level context.
  */
-export var useHeadingElement = function useHeadingElement() {
+export var useHeadingLevel = function useHeadingLevel() {
   return useContext(HeadingLevelContext);
 };
+
+/**
+ * Infers the correct heading markup based on the current heading level context.
+ */
+export var useHeading = function useHeading(fallback) {
+  var hLevel = useHeadingLevel();
+  /**
+   * Order here is important, we for now apply
+   * 1. inferred a11y level (this only applies if context is present)
+   * 2. default final fallback
+   */
+  return [hLevel, hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || fallback];
+};
 /**
  * __Heading level provider__
  *
@@ -30,7 +43,7 @@ export var useHeadingElement = function useHeadingElement() {
 var HeadingLevelContextProvider = function HeadingLevelContextProvider(_ref) {
   var children = _ref.children,
     value = _ref.value;
-  var parentHeadingLevel = useHeadingElement();
+  var parentHeadingLevel = useHeadingLevel();
   var headingLevel = parentHeadingLevel + 1;
   return /*#__PURE__*/React.createElement(HeadingLevelContext.Provider, {
     value: value || headingLevel

package/dist/esm/heading.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["level", "variant"];
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { useHeadingElement } from './heading-context';
+import { useHeading } from './heading-context';
 import NewHeading from './heading.partial';
 // https://atlassian.design/foundations/typography
 var levelMap = {
@@ -110,20 +111,18 @@ var Heading = function Heading(_ref) {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-  var hLevel = useHeadingElement();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
+  var _useHeading = useHeading(levelMap[level]),
+    _useHeading2 = _slicedToArray(_useHeading, 2),
+    hLevel = _useHeading2[0],
+    inferredElement = _useHeading2[1];
+  var Markup = as || inferredElement;
   var isSubtleHeading = level === 'h200' || level === 'h100';
+  var needsAriaRole = Markup === 'div' && hLevel;
   return jsx(Markup, {
     id: id,
     "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    "aria-level": Markup === 'div' ? hLevel : undefined,
+    role: needsAriaRole ? 'heading' : undefined,
+    "aria-level": needsAriaRole ? hLevel : undefined,
     css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
   }, children);
 };

package/dist/esm/heading.partial.js

@@ -1,6 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { useHeadingElement } from './heading-context';
+import { useHeading } from './heading-context';
 // https://atlassian.design/foundations/typography
 var levelMap = {
   xxlarge: 'h1',
@@ -47,19 +48,17 @@ var Heading = function Heading(_ref) {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
-  var hLevel = useHeadingElement();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[variant];
+  var _useHeading = useHeading(levelMap[variant]),
+    _useHeading2 = _slicedToArray(_useHeading, 2),
+    hLevel = _useHeading2[0],
+    inferredElement = _useHeading2[1];
+  var Markup = as || inferredElement;
+  var needsAriaRole = Markup === 'div' && hLevel;
   return jsx(Markup, {
     id: id,
     "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    "aria-level": Markup === 'div' ? hLevel : undefined,
+    role: needsAriaRole ? 'heading' : undefined,
+    "aria-level": needsAriaRole ? hLevel : undefined,
     css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
   }, children);
 };

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

@@ -1,15 +1,20 @@
 import { ReactNode } from 'react';
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
 /**
  * @internal
  * @returns The current heading level context.
  */
-export declare const useHeadingElement: () => HeadingElement;
+export declare const useHeadingLevel: () => HeadingLevel;
+/**
+ * Infers the correct heading markup based on the current heading level context.
+ */
+export declare const useHeading: (fallback: HeadingElement) => readonly [HeadingLevel, HeadingElement];
 export interface HeadingLevelContextProps {
     /**
      * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
      */
-    value?: HeadingElement;
+    value?: HeadingLevel;
     /**
      * Semantic heirarchy of content below the heading context.
      */

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

@@ -1,15 +1,23 @@
 import { ReactNode } from 'react';
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
 /**
  * @internal
  * @returns The current heading level context.
  */
-export declare const useHeadingElement: () => HeadingElement;
+export declare const useHeadingLevel: () => HeadingLevel;
+/**
+ * Infers the correct heading markup based on the current heading level context.
+ */
+export declare const useHeading: (fallback: HeadingElement) => readonly [
+    HeadingLevel,
+    HeadingElement
+];
 export interface HeadingLevelContextProps {
     /**
      * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
      */
-    value?: HeadingElement;
+    value?: HeadingLevel;
     /**
      * Semantic heirarchy of content below the heading context.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -30,12 +30,12 @@ export const HeadingContextProvider: ({
 }: HeadingLevelContextProps) => JSX.Element;
 
 // @public (undocumented)
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // @public (undocumented)
 interface HeadingLevelContextProps {
   children: ReactNode;
-  value?: HeadingElement;
+  value?: HeadingLevel;
 }
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -16,12 +16,12 @@ export default _default;
 export const HeadingContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
 
 // @public (undocumented)
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // @public (undocumented)
 interface HeadingLevelContextProps {
     children: ReactNode;
-    value?: HeadingElement;
+    value?: HeadingLevel;
 }
 
 // @public (undocumented)