@atlaskit/dropdown-menu/dist/es2019/internal/components/group-title.js

A dropdown menu displays a list of actions or options to a user.

/* group-title.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./group-title.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useContext } from 'react';
import { cx } from '@atlaskit/css';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Box } from '@atlaskit/primitives/compiled/box';
import { NewSpacingContext } from '../context/spacing-context';
const styles = {
  heading: "_11c8i4vh _1rjcze3t _18zrpxbi _syazazsu",
  newHeading: "_11c8i4vh _1rjcu2gc _syazi7uo _bozgutpp _y4ti1ejb",
  compact: "_1rjc12x7 _bozgu2gc _y4tiv47k"
};

/**
 * __Group title__
 *
 * Used to visually represent the title for DropdownMenu groups.
 *
 * Pre-existing a11y note: uses `role="menuitem"` with `aria-hidden="true"`.
 * WAI-ARIA APG recommends `role="presentation"` for non-interactive group
 * headings, with the group linked via `aria-labelledby`. Out of scope for
 * the top-layer migration — this is legacy behavior.
 *
 * @internal
 */
const GroupTitle = ({
  id,
  title
}) => {
  const spacing = useContext(NewSpacingContext);
  const isCompact = spacing === 'compact';
  if (fg('platform-dst-new-menu')) {
    return /*#__PURE__*/React.createElement(Box, {
      id: id,
      xcss: cx(styles.newHeading, isCompact && styles.compact)
    }, title);
  }
  return /*#__PURE__*/React.createElement(Box, {
    "data-ds--menu--heading-item": true,
    role: "menuitem",
    id: id,
    "aria-hidden": "true",
    xcss: styles.heading
  }, title);
};
export default GroupTitle;