@carbon/react/lib/components/UIShell/HeaderContainer.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * 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';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var keys = require('../../internal/keyboard/keys.js');
var match = require('../../internal/keyboard/match.js');
var useEvent = require('../../internal/useEvent.js');

function HeaderContainer({
  render: Children,
  isSideNavExpanded = false,
  ...rest
}) {
  //state for expandable sidenav
  const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
  useEvent.useWindowEvent('keydown', event => {
    if (match.match(event, keys.Escape)) {
      setIsSideNavExpandedState(false);
    }
  });
  const handleHeaderMenuButtonClick = React.useCallback(() => {
    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
  }, [setIsSideNavExpandedState]);
  return /*#__PURE__*/React.createElement(Children
  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
  , _rollupPluginBabelHelpers.extends({}, rest, {
    isSideNavExpanded: isSideNavExpandedState,
    onClickSideNavExpand: handleHeaderMenuButtonClick
  }));
}
HeaderContainer.propTypes = {
  /**
   * Optionally provide a custom class name that is applied to the underlying <header>
   */
  isSideNavExpanded: PropTypes.bool,
  /**
   * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
   * The function or component can then use those properties to within the components it
   * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
   * into this component for convenience.
   */
  render: PropTypes.elementType.isRequired
};

exports.default = HeaderContainer;