EuiFlyoutMenu

Author: tsullivan

packages/eui/src/components/flyout/flyout.tsx

@@ -47,6 +47,8 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { euiFlyoutStyles } from './flyout.styles';
 import { EuiFlyoutChild } from './flyout_child';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import { EuiFlyoutMenu } from './flyout_menu';
 import { EuiFlyoutChildProvider } from './flyout_child_manager';
 
 export const TYPES = ['push', 'overlay'] as const;
@@ -230,6 +232,13 @@ export const EuiFlyout = forwardRef(
     const hasChildFlyout = !!childFlyoutElement;
 
     // Validate props, determine close button position and set child flyout classes
+    const hasFlyoutMenu = React.Children.toArray(children).some(
+      (child) =>
+        React.isValidElement(child) &&
+        (child.type === EuiFlyoutMenu ||
+          (child.type as any).displayName === 'EuiFlyoutMenu')
+    );
+
     let closeButtonPosition: 'inside' | 'outside';
     let childFlyoutClasses: string[] = [];
     if (hasChildFlyout) {
@@ -452,7 +461,7 @@ export const EuiFlyout = forwardRef(
       [onClose, hasOverlayMask, outsideClickCloses]
     );
 
-    const closeButton = !hideCloseButton && (
+    const closeButton = !hideCloseButton && !hasFlyoutMenu && (
       <EuiFlyoutCloseButton
         {...closeButtonProps}
         onClose={onClose}
@@ -514,7 +523,9 @@ export const EuiFlyout = forwardRef(
           >
             {!isPushed && screenReaderDescription}
             {closeButton}
-            {contentToRender}
+            <EuiFlyoutMenuContext.Provider value={{ onClose }}>
+              {contentToRender}
+            </EuiFlyoutMenuContext.Provider>
           </Element>
         </EuiFocusTrap>
       </EuiFlyoutWrapper>

packages/eui/src/components/flyout/flyout_child.stories.tsx

@@ -20,6 +20,7 @@ import { EuiSpacer } from '../spacer';
 import { EuiRadioGroup, EuiRadioGroupOption } from '../form';
 import { LOKI_SELECTORS } from '../../../.storybook/loki';
 import { EuiBreakpointSize } from '../../services';
+import { EuiFlyoutMenu } from './flyout_menu';
 
 const breakpointSizes: EuiBreakpointSize[] = ['xs', 's', 'm', 'l', 'xl'];
 
@@ -314,6 +315,7 @@ const ChildBackgroundStylesFlyout = () => {
           type="push"
           pushMinBreakpoint="xs"
         >
+          <EuiFlyoutMenu title="Main Flyout" />
           <EuiFlyoutBody>
             <EuiText>
               <p>This is the main flyout content.</p>
@@ -327,6 +329,7 @@ const ChildBackgroundStylesFlyout = () => {
               size="s"
               backgroundStyle="default"
             >
+              <EuiFlyoutMenu title="Child flyout: Default background style" />
               <ChildFlyoutContent />
             </EuiFlyoutChild>
           )}
@@ -336,6 +339,7 @@ const ChildBackgroundStylesFlyout = () => {
               size="s"
               backgroundStyle="shaded"
             >
+              <EuiFlyoutMenu title="Child flyout: Shaded background style" />
               <ChildFlyoutContent />
             </EuiFlyoutChild>
           )}

packages/eui/src/components/flyout/flyout_child.tsx

@@ -23,6 +23,8 @@ import { euiFlyoutChildStyles } from './flyout_child.styles';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { EuiFlyoutContext } from './flyout_context';
 import { EuiFlyoutBody } from './flyout_body';
+import { EuiFlyoutMenu } from './flyout_menu';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
 import { EuiFocusTrap } from '../focus_trap';
 
 /**
@@ -117,8 +119,16 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
 
   let flyoutTitleText: string | undefined;
   let hasDescribedByBody = false;
+  let hasFlyoutMenu = false;
   Children.forEach(children, (child) => {
     if (React.isValidElement(child)) {
+      if (
+        child.type === EuiFlyoutMenu ||
+        (child.type as any).displayName === 'EuiFlyoutMenu'
+      ) {
+        hasFlyoutMenu = true;
+      }
+
       if ((child.type as any)?.displayName === 'EuiFlyoutHeader') {
         // Attempt to extract string content from header for ARIA
         const headerChildren = child.props.children;
@@ -243,7 +253,7 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
             {flyoutTitleText}
           </h2>
         )}
-        {!hideCloseButton && (
+        {!hideCloseButton && !hasFlyoutMenu && (
           <EuiFlyoutCloseButton
             className="euiFlyoutChild__closeButton"
             onClose={handleClose}
@@ -270,7 +280,9 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
             className="euiFlyoutChild__overflowContent"
             css={styles.overflow.wrapper}
           >
-            {processedChildren}
+            <EuiFlyoutMenuContext.Provider value={{ onClose }}>
+              {processedChildren}
+            </EuiFlyoutMenuContext.Provider>
           </div>
         </div>
       </div>

packages/eui/src/components/flyout/flyout_menu.styles.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { useEuiTheme } from '../../services';
+
+export const useEuiFlyoutMenuStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    euiFlyoutMenu: css`
+      block-size: calc(${euiTheme.size.m} * 3.5);
+      flex-shrink: 0;
+      padding-block: ${euiTheme.size.m};
+      padding-inline: ${euiTheme.size.l};
+      border-block-end: ${euiTheme.border.width.thin} solid
+        ${euiTheme.border.color};
+    `,
+  };
+};

packages/eui/src/components/flyout/flyout_menu.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import classNames from 'classnames';
+import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
+import { useGeneratedHtmlId } from '../../services';
+import { CommonProps } from '../common';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiTitle } from '../title';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { useEuiFlyoutMenuStyles } from './flyout_menu.styles';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+
+export type EuiFlyoutMenuProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    backButton?: React.ReactNode;
+    popover?: React.ReactNode;
+    title?: React.ReactNode;
+    hideCloseButton?: boolean;
+  };
+
+export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
+  children,
+  className,
+  backButton,
+  popover,
+  title,
+  hideCloseButton,
+  ...rest
+}) => {
+  const { onClose } = useContext(EuiFlyoutMenuContext);
+
+  const styles = useEuiFlyoutMenuStyles();
+  const cssStyles = [styles.euiFlyoutMenu];
+  const classes = classNames('euiFlyoutMenu', className);
+  const titleId = useGeneratedHtmlId();
+
+  let titleNode;
+  if (title) {
+    titleNode = (
+      <EuiTitle size="xxs" id={titleId}>
+        <h3>{title}</h3>
+      </EuiTitle>
+    );
+  }
+
+  const handleClose = (event: MouseEvent | TouchEvent | KeyboardEvent) => {
+    onClose?.(event);
+  };
+
+  let closeButton;
+  if (!hideCloseButton) {
+    closeButton = (
+      <EuiFlyoutCloseButton
+        onClose={handleClose}
+        side="right"
+        closeButtonPosition="inside"
+      />
+    );
+  }
+
+  return (
+    <div className={classes} css={cssStyles} {...rest}>
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="spaceBetween"
+        gutterSize="none"
+        responsive={false}
+      >
+        <EuiFlexItem>
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="m"
+            responsive={false}
+            wrap
+          >
+            {backButton && <EuiFlexItem grow={false}>{backButton}</EuiFlexItem>}
+            {popover && <EuiFlexItem grow={false}>{popover}</EuiFlexItem>}
+            {titleNode && <EuiFlexItem grow={false}>{titleNode}</EuiFlexItem>}
+            {children && <EuiFlexItem grow={false}>{children}</EuiFlexItem>}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        {closeButton && <EuiFlexItem grow={false}>{closeButton}</EuiFlexItem>}
+      </EuiFlexGroup>
+    </div>
+  );
+};

packages/eui/src/components/flyout/flyout_menu_context.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createContext } from 'react';
+import { EuiFlyoutProps } from './flyout';
+
+interface EuiFlyoutMenuContextProps {
+  onClose?: EuiFlyoutProps['onClose'];
+}
+
+export const EuiFlyoutMenuContext = createContext<EuiFlyoutMenuContextProps>(
+  {}
+);

packages/eui/src/components/flyout/index.ts

@@ -26,12 +26,16 @@ export { EuiFlyoutResizable } from './flyout_resizable';
 export { EuiFlyoutChild } from './flyout_child';
 export type { EuiFlyoutChildProps } from './flyout_child';
 
+export type { EuiFlyoutMenuProps } from './flyout_menu';
+export { EuiFlyoutMenu } from './flyout_menu';
+
 export type {
   EuiFlyoutSessionApi,
   EuiFlyoutSessionConfig,
   EuiFlyoutSessionOpenChildOptions,
-  EuiFlyoutSessionOpenMainOptions,
   EuiFlyoutSessionOpenGroupOptions,
+  EuiFlyoutSessionOpenMainOptions,
+  EuiFlyoutSessionOpenSystemOptions,
   EuiFlyoutSessionProviderComponentProps,
   EuiFlyoutSessionRenderContext,
 } from './sessions';