@atlaskit/heading/dist/cjs/heading-context.js

A heading is a typography component used to display text in different sizes and formats.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _headingLevelContext = require("./heading-level-context");
var _useHeadingLevel = require("./use-heading-level");
/**
 * __Heading level provider__
 *
 * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
 *
 * @example
 * ```tsx
 * // Will correctly infer the heading level
 * <HeadingContext value={1}>
 *  <Heading>H1</Heading>
 *  <HeadingContext>
 *    <Heading>H2</Heading>
 *  </HeadingContext>
 * </HeadingContext>
 * ```
 */
var HeadingLevelContextProvider = function HeadingLevelContextProvider(_ref) {
  var children = _ref.children,
    value = _ref.value;
  var parentHeadingLevel = (0, _useHeadingLevel.useHeadingLevel)();
  var headingLevel = parentHeadingLevel + 1;
  return /*#__PURE__*/_react.default.createElement(_headingLevelContext.HeadingLevelContext.Provider, {
    value: value || headingLevel
  }, children);
};
var _default = exports.default = HeadingLevelContextProvider;