import { EuiPopover , EuiText , EuiListGroup , EuiSpacer , EuiHorizontalRule , EuiListGroupItem , EuiPopoverProps , EuiListGroupItemProps , } from '@elastic/eui' ; import React , { HTMLAttributes , ReactNode } from 'react' ; import styled from 'styled-components' ; import { EuiListGroupProps } from '@elastic/eui' ; type Props = EuiPopoverProps & HTMLAttributes < HTMLDivElement > ; export function SectionTitle ( { children } ) { return ( < > < EuiText size = { 's' } grow = { false } > < h5 > { children } < /h5> < /EuiText> < EuiSpacer size = { 'xs' } / > < />); } export function SectionSubtitle ( { children } ) { return ( < > < EuiText size = { 'xs' } color = { 'subdued' } grow = { false } > < small > { children } < /small> < /EuiText> < EuiSpacer size = { 's' } / > < />); } export function SectionLinks ( { children , ... props } ) { return ( < EuiListGroup { ... props } flush = { true } bordered = { false } > { children } < /EuiListGroup>); } export function SectionSpacer ( ) { return < EuiSpacer size = { 'l' } />; } export const Section = styled . div `
  margin-bottom: 16px;
  &:last-of-type {
    margin-bottom: 0;
  }
` ; export type SectionLinkProps = EuiListGroupItemProps ; export function SectionLink ( props ) { return < EuiListGroupItem style = { { padding : 0 } } size = { 'xs' } { ... props } />; } export function ActionMenuDivider ( ) { return < EuiHorizontalRule margin = { 's' } />; } export function ActionMenu ( props ) { return < EuiPopover { ... props } ownFocus = { true } / > ; }