@carbon/ibm-products/lib/components/SimpleHeader/SimpleHeader.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var index = require('../../_virtual/index.js');
var React = require('react');
var cx = require('classnames');
var settings = require('../../settings.js');
var pconsole = require('../../global/js/utils/pconsole.js');
var propsHelper = require('../../global/js/utils/props-helper.js');
var react = require('@carbon/react');
var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js');

const blockClass = `${settings.pkg.prefix}--simple-header`;
const componentName = 'SimpleHeader';
/**
 * The SimpleHeader is not public and only used internally by CreateFullPage.
 *
 * Component varieties:
 * - Header with Breadcrumbs
 * - Header with Title
 * - Header with Breadcrumbs and Title
 *
 *
 * The component will throw a warning message if neither a title or breadcrumbs are provided
 * since it requires at least one of them.
 * */
const SimpleHeader = _ref => {
  let {
    breadcrumbs,
    className,
    title,
    noTrailingSlash = true,
    maxVisible,
    overflowAriaLabel,
    overflowTooltipAlign,
    ...rest
  } = _ref;
  const warnIfNoTitleOrBreadcrumbs = React.useCallback(() => {
    if (!title && !breadcrumbs?.length) {
      pconsole.default.error(`Warning: You have tried using a ${componentName} component without specifying a title or breadcrumbs props`);
    }
  }, [breadcrumbs, title]);
  React.useEffect(() => {
    warnIfNoTitleOrBreadcrumbs();
  }, [title, breadcrumbs, warnIfNoTitleOrBreadcrumbs]);
  return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({
    className: cx(blockClass, className)
  }, rest), breadcrumbs?.length > 0 && /*#__PURE__*/React.createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
    noTrailingSlash: noTrailingSlash,
    className: cx(`${blockClass}__breadcrumbs`),
    breadcrumbs: breadcrumbs,
    maxVisible: maxVisible,
    overflowAriaLabel: overflowAriaLabel,
    overflowTooltipAlign: overflowTooltipAlign
  }), title && /*#__PURE__*/React.createElement(react.Heading, {
    className: cx(`${blockClass}__title`)
  }, title));
};
const overflowAriaLabel_required_if_breadcrumbs_exist = propsHelper.isRequiredIf(index.default.string, props => props.breadcrumbs?.length > 0);
SimpleHeader.propTypes = {
  /** Header breadcrumbs */
  breadcrumbs: index.default.arrayOf(index.default.shape({
    /** breadcrumb item key */
    key: index.default.string.isRequired,
    /** breadcrumb item label */
    label: index.default.string.isRequired,
    /** breadcrumb item link */
    href: index.default.string,
    /** breadcrumb item title tooltip */
    title: index.default.string,
    /** Provide if this breadcrumb item represents the current page */
    isCurrentPage: index.default.bool
  })),
  /** Header classname */
  className: index.default.string,
  /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
  maxVisible: index.default.number,
  /** A prop to omit the trailing slash for the breadcrumbs */
  noTrailingSlash: index.default.bool,
  /** Label for open/close overflow button used for breadcrumb items that do not fit */
  overflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
  /**
   * overflowTooltipAlign: align tooltip position
   */
  overflowTooltipAlign: react.Tooltip.propTypes.align,
  /** Header title */
  title: index.default.string
};

exports.SimpleHeader = SimpleHeader;
exports.overflowAriaLabel_required_if_breadcrumbs_exist = overflowAriaLabel_required_if_breadcrumbs_exist;