[EuiCollapsibleNavBeta] Allow consumer to control the collapsed state (…

…#7979) Co-authored-by: Cee Chen <[email protected]>
elastic · Aug 27, 2024 · 8fb38bb · 8fb38bb
1 parent f76c5f9
commit 8fb38bb
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.test.tsx
@@ -64,6 +64,47 @@ describe('EuiCollapsibleNavBeta', () => {
     expect(onCollapseToggle).toHaveBeenLastCalledWith(true);
   });
 
+  it('lets the consumer control the collapsed state', () => {
+    const onCollapseToggle = jest.fn();
+
+    const Controlled = () => {
+      const [isCollapsed, setIsCollapsed] = React.useState(false);
+      onCollapseToggle.mockImplementation((isCollapsed: boolean) => {
+        setIsCollapsed(isCollapsed);
+      });
+
+      return (
+        <>
+          <button
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            data-test-subj="controlledToggle"
+          >
+            Control nav
+          </button>
+          <EuiCollapsibleNavBeta
+            isCollapsed={isCollapsed}
+            onCollapseToggle={onCollapseToggle}
+            data-test-subj="nav"
+          >
+            Nav content
+          </EuiCollapsibleNavBeta>
+        </>
+      );
+    };
+    const { getByTestSubject } = render(<Controlled />);
+
+    expect(getByTestSubject('nav')).toHaveStyle({ 'inline-size': '248px' }); // initially expanded
+
+    fireEvent.click(getByTestSubject('controlledToggle')); // controlled toggle
+    expect(onCollapseToggle).toHaveBeenCalledTimes(0); // should not have triggered callback
+    expect(getByTestSubject('nav')).toHaveStyle({ 'inline-size': '48px' }); // collapsed state
+
+    fireEvent.click(getByTestSubject('euiCollapsibleNavButton')); // uncontrolled toggle
+    expect(onCollapseToggle).toHaveBeenCalledTimes(1);
+    expect(onCollapseToggle).toHaveBeenCalledWith(false);
+    expect(getByTestSubject('nav')).toHaveStyle({ 'inline-size': '248px' }); // expanded state
+  });
+
   describe('responsive behavior', () => {
     const mockWindowResize = (width: number) => {
       window.innerWidth = width;

diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -47,9 +47,16 @@ export type EuiCollapsibleNavBetaProps = CommonProps &
      */
     children?: ReactNode;
     /**
-     * Whether the navigation flyout should default to initially collapsed or expanded
+     * Whether the navigation flyout should default to initially collapsed or expanded.
+     * Used for **uncontrolled** state.
      */
     initialIsCollapsed?: boolean;
+    /**
+     * If defined, the navigation collapsed/expanded state is **controlled**
+     * by the consumer and `onCollapseToggle` must be passed as well.
+     * This prop supercedes `initialIsCollapsed`.
+     */
+    isCollapsed?: boolean;
     /**
      * Optional callback that fires when the user toggles the nav between
      * collapsed and uncollapsed states
@@ -87,6 +94,7 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   children,
   className,
   initialIsCollapsed = false,
+  isCollapsed: propsIsCollapsed,
   onCollapseToggle,
   width: _width = 248,
   side = 'left',
@@ -108,7 +116,17 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
       }),
     [onCollapseToggle]
   );
-  const onClose = useCallback(() => setIsCollapsed(true), []);
+  const onClose = useCallback(() => {
+    setIsCollapsed(true);
+    onCollapseToggle?.(true);
+  }, [onCollapseToggle]);
+
+  // Controlled state
+  useEffect(() => {
+    if (propsIsCollapsed !== undefined) {
+      setIsCollapsed(propsIsCollapsed);
+    }
+  }, [propsIsCollapsed]);
 
   /**
    * Responsive behavior