[wip] flyout manager

Author: clintandrewhall

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

@@ -10,7 +10,14 @@ import React, { useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { EuiButton, EuiCallOut, EuiSpacer, EuiText, EuiTitle } from '../index';
+import {
+  EuiButton,
+  EuiCallOut,
+  // EuiComponentDefaultsProvider,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '../index';
 
 import {
   EuiFlyout,
@@ -68,6 +75,9 @@ const StatefulFlyout = (
   };
 
   return (
+    // <EuiComponentDefaultsProvider
+    //   componentDefaults={{ EuiFlyout: { managed: false } }}
+    // >
     <>
       <EuiButton size="s" onClick={() => handleToggle(!_isOpen)}>
         Toggle flyout
@@ -82,6 +92,7 @@ const StatefulFlyout = (
         />
       )}
     </>
+    // </EuiComponentDefaultsProvider>
   );
 };
 

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

@@ -73,7 +73,7 @@ function isEuiFlyoutSizeNamed(value: any): value is EuiFlyoutSize {
 export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
 export type _EuiFlyoutPaddingSize = (typeof PADDING_SIZES)[number];
 
-interface _EuiFlyoutProps {
+export interface _EuiFlyoutProps {
   onClose: (event: MouseEvent | TouchEvent | KeyboardEvent) => void;
   /**
    * Defines the width of the panel.

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

@@ -6,8 +6,12 @@
  * Side Public License, v 1.
  */
 
-export type { EuiFlyoutProps, EuiFlyoutSize } from './flyout';
 export { EuiFlyout } from './flyout';
+export type { EuiFlyoutProps } from './flyout';
+
+// When props can be better aligned, we can switch to `managed`.
+// export { EuiFlyout } from './managed';
+// export type { EuiFlyoutProps } from './managed';
 
 export type { EuiFlyoutBodyProps } from './flyout_body';
 export { EuiFlyoutBody } from './flyout_body';

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

@@ -0,0 +1,154 @@
+/*
+ * 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 React, {
+  createContext,
+  useReducer,
+  ReactNode,
+  useCallback,
+} from 'react';
+import { generateManagedFlyoutId } from './eui_flyout';
+import type {
+  ManagedFlyoutContextValue,
+  RenderedManagedFlyout,
+  RenderManagedFlyoutParams,
+  RenderManagedFlyoutCallback,
+  RenderManagedFlyoutProps,
+} from './types';
+import { reducer, initialState } from './reducer';
+
+/**
+ * Context for managing flyouts.
+ */
+export const ManagedFlyoutContext = createContext<
+  ManagedFlyoutContextValue | undefined
+>(undefined);
+
+/**
+ * Provider component for ManagedFlyout context.
+ */
+export const ManagedFlyoutProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [renderedManagedFlyouts, setRenderedManagedFlyouts] = React.useState<
+    RenderedManagedFlyout[]
+  >([]);
+
+  /**
+   * Add a new flyout and set it as active.
+   */
+  const addManagedFlyout = useCallback(
+    (id: string, meta?: Record<string, any>) => {
+      if (state.flyouts.find((f) => f.id === id)) {
+        return;
+      }
+      dispatch({ type: 'ADD_FLYOUT', id, meta });
+      dispatch({ type: 'SET_ACTIVE', id });
+    },
+    [state.flyouts, dispatch]
+  );
+
+  /**
+   * Close a flyout by id. Activates the last flyout if any remain.
+   */
+  const closeManagedFlyout = useCallback(
+    (id: string) => {
+      dispatch({ type: 'CLOSE_FLYOUT', id });
+      setRenderedManagedFlyouts((prev) => prev.filter((f) => f.id !== id));
+
+      // After closing, activate the last flyout if any remain
+      const remainingFlyouts = state.flyouts.filter((f) => f.id !== id);
+
+      if (remainingFlyouts.length > 0) {
+        const last = remainingFlyouts.at(-1);
+        if (last) {
+          dispatch({ type: 'SET_ACTIVE', id: last.id });
+        }
+      }
+    },
+    [state.flyouts, dispatch]
+  );
+
+  /**
+   * Returns a callback to render a managed flyout.
+   */
+  const createManagedFlyoutRenderer = (
+    params?: RenderManagedFlyoutParams
+  ): RenderManagedFlyoutCallback => {
+    const { id: providedId, onClose: userOnClose } = params || {};
+    const id = providedId || generateManagedFlyoutId();
+
+    const renderer: RenderManagedFlyoutCallback = (
+      fn: (props: Required<RenderManagedFlyoutProps>) => React.ReactNode
+    ) => {
+      if (renderedManagedFlyouts.find((f) => f.id === id)) {
+        return id;
+      }
+
+      const onClose = () => {
+        setRenderedManagedFlyouts((prev) => prev.filter((f) => f.id !== id));
+        dispatch({ type: 'CLOSE_FLYOUT', id });
+        if (userOnClose) {
+          userOnClose({ type: 'internal', flyoutId: id } as any);
+        }
+      };
+
+      setRenderedManagedFlyouts((prev) => [
+        ...prev,
+        {
+          id,
+          onClose,
+          element: fn({ id, onClose }),
+        },
+      ]);
+      return id;
+    };
+
+    return renderer;
+  };
+
+  return (
+    <ManagedFlyoutContext.Provider
+      value={{
+        flyouts: state.flyouts,
+        activeFlyoutId: state.activeFlyoutId,
+        addManagedFlyout,
+        closeManagedFlyout,
+        createManagedFlyoutRenderer,
+      }}
+    >
+      {children}
+      {renderedManagedFlyouts.map(({ id, element }) => (
+        <ManagedFlyoutIsRenderedProvider key={id}>
+          {element}
+        </ManagedFlyoutIsRenderedProvider>
+      ))}
+    </ManagedFlyoutContext.Provider>
+  );
+};
+
+/**
+ * Context to track if a flyout is rendered.
+ */
+export const ManagedFlyoutIsRenderedContext = createContext<boolean>(false);
+
+/**
+ * Provider to indicate a flyout is rendered.
+ */
+export const ManagedFlyoutIsRenderedProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => (
+  <ManagedFlyoutIsRenderedContext.Provider value={true}>
+    {children}
+  </ManagedFlyoutIsRenderedContext.Provider>
+);

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

@@ -0,0 +1,107 @@
+/*
+ * 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 React, { useRef, useEffect } from 'react';
+import {
+  EuiFlyout as EuiUnmanagedFlyout,
+  _EuiFlyoutProps as EuiUnmanagedFlyoutProps,
+} from '../flyout';
+import {
+  EuiManagedFlyout,
+  EuiManagedFlyoutBaseProps,
+} from './eui_flyout_managed';
+// import { usePropsWithComponentDefaults } from '../../provider/component_defaults';
+import { htmlIdGenerator } from '../../../services';
+import {
+  useCreateManagedFlyoutRenderer,
+  useIsManagedFlyoutRendered,
+} from './hooks';
+
+/**
+ * Props for an unmanaged flyout. Used when `managed` is false or undefined.
+ */
+interface UnmanagedProps extends EuiUnmanagedFlyoutProps {
+  managed?: false;
+}
+
+/**
+ * Props for a managed flyout. Used when `managed` is true.
+ */
+type ManagedProps = EuiManagedFlyoutBaseProps & {
+  flyoutId?: string;
+  managed?: true;
+};
+
+/**
+ * Props for the EuiFlyout component. Can be either managed or unmanaged.
+ */
+export type EuiFlyoutProps = UnmanagedProps | ManagedProps;
+
+/**
+ * Generates a unique managed flyout id, optionally namespaced by a provided id.
+ */
+export const generateManagedFlyoutId = (id?: string) =>
+  htmlIdGenerator('euiManagedFlyout')(id);
+
+/**
+ * Type guard for managed flyout props.
+ */
+// function isManaged(props: EuiFlyoutProps): props is ManagedProps {
+//   return props.managed === true;
+// }
+
+/**
+ * Internal component for rendering a managed flyout. Handles registration and rendering
+ * of the flyout instance in the flyout manager context.
+ */
+const InternalManagedFlyout = (props: ManagedProps) => {
+  // Generate or reuse a flyout id for this managed instance
+  const flyoutId = useRef(props.flyoutId || generateManagedFlyoutId());
+  // Check if this flyout is already rendered in the tree
+  const isRendered = useIsManagedFlyoutRendered();
+
+  // Get a callback that will render this flyout when invoked
+  const createManagedFlyoutRenderer = useCreateManagedFlyoutRenderer({
+    id: flyoutId.current,
+    onClose: props.onClose,
+  });
+
+  useEffect(() => {
+    // Only create a renderer for the flyout if not already rendered
+    if (!isRendered) {
+      flyoutId.current = createManagedFlyoutRenderer(
+        ({ onClose, id: flyoutId }) => (
+          <EuiManagedFlyout {...{ ...props, onClose, flyoutId }} />
+        )
+      );
+    }
+  }, [isRendered, props, createManagedFlyoutRenderer]);
+
+  return <EuiManagedFlyout {...{ ...props, flyoutId: flyoutId.current }} />;
+};
+
+/**
+ * EuiFlyout component. Renders either a managed or unmanaged flyout based on props.
+ *
+ * - If `managed` is true, uses InternalManagedFlyout (which uses context for stacking, etc).
+ * - Otherwise, renders the legacy/unmanaged flyout.
+ */
+export const EuiFlyout = (initialProps: EuiFlyoutProps) => {
+  // const propsWithDefaults = usePropsWithComponentDefaults(
+  //   'EuiFlyout',
+  //   initialProps
+  // );
+
+  const { managed, ...props } = initialProps;
+
+  if (managed) {
+    return <InternalManagedFlyout {...props} />;
+  } else {
+    return <EuiUnmanagedFlyout {...props} />;
+  }
+};