@equinor/eds-core-react/dist/esm/components/Menu/MenuSection.js

The React implementation of the Equinor Design System

import { memo } from 'react';
import styled from 'styled-components';
import { menu } from './Menu.tokens.js';
import { spacingsTemplate } from '@equinor/eds-utils';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Divider } from '../Divider/Divider.js';
import { Typography } from '../Typography/Typography.js';

const Header = styled.div.attrs(() => ({
  tabIndex: 0
})).withConfig({
  displayName: "MenuSection__Header",
  componentId: "sc-gfcbvg-0"
})(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
  const {
    children,
    title,
    index
  } = props;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [index !== 0 && /*#__PURE__*/jsx("div", {
      children: /*#__PURE__*/jsx(Divider, {
        variant: "small"
      })
    }), title && /*#__PURE__*/jsx(Header, {
      role: "group",
      children: /*#__PURE__*/jsx(Typography, {
        group: "navigation",
        variant: "label",
        children: title
      })
    }), children]
  });
});

// MenuSection.displayName = 'EdsMenuSection'

export { MenuSection };