@primer/react/lib-esm/ActionList/Heading.js

An implementation of GitHub's Primer Design System using React

import React, { forwardRef } from 'react';
import { ListContext } from './shared.js';
import VisuallyHidden from '../_VisuallyHidden.js';
import { ActionListContainerContext } from './ActionListContainerContext.js';
import { invariant } from '../utils/invariant.js';
import { clsx } from 'clsx';
import classes from './Heading.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import Heading$1 from '../Heading/Heading.js';

const Heading = /*#__PURE__*/forwardRef(({
  as,
  size,
  children,
  visuallyHidden = false,
  className,
  ...props
}, forwardedRef) => {
  var _props$id;
  const innerRef = React.useRef(null);
  useRefObjectAsForwardedRef(forwardedRef, innerRef);
  const {
    headingId: headingId,
    variant: listVariant
  } = React.useContext(ListContext);
  const {
    container
  } = React.useContext(ActionListContainerContext);

  // Semantic <menu>s don't have a place for headers within them, they should be aria-labelledby the menu button's name.
  !(container !== 'ActionMenu') ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.`) : invariant(false) : void 0;
  return /*#__PURE__*/jsx(VisuallyHidden, {
    isVisible: !visuallyHidden,
    children: /*#__PURE__*/jsx(Heading$1, {
      as: as,
      variant: size,
      ref: innerRef
      // use custom id if it is provided. Otherwise, use the id from the context
      ,
      id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : headingId,
      className: clsx(className, classes.ActionListHeader),
      "data-list-variant": listVariant,
      ...props,
      children: children
    })
  });
});
Heading.displayName = 'ActionList.Heading';

export { Heading };