[EuiResizableContainer] Add resizable container callbacks

src-docs/src/views/resizable_container/resizable_container_callbacks.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import {
+  EuiText,
+  EuiResizableContainer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiStat,
+  EuiPanel,
+} from '../../../../src/components';
+// @ts-ignore - faker does not have type declarations
+import { fake } from 'faker';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+const text = (
+  <>
+    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{fake('{{lorem.paragraphs}}')}</p>
+  </>
+);
+
+export default () => {
+  const firstPanelId = useGeneratedHtmlId({ prefix: 'firstPanel' });
+  const secondPanelId = useGeneratedHtmlId({ prefix: 'secondPanel' });
+  const [resizeTrigger, setResizeTrigger] = useState<'pointer' | 'key'>();
+  const [sizes, setSizes] = useState({
+    [firstPanelId]: 50,
+    [secondPanelId]: 50,
+  });
+
+  return (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title={resizeTrigger ?? ''}
+                titleSize="m"
+                description="Trigger"
+                isLoading={!resizeTrigger}
+              />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title={`${Math.round(sizes[firstPanelId])}%`}
+                titleSize="m"
+                description="First panel"
+                isLoading={!resizeTrigger}
+              />
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title={`${Math.round(sizes[secondPanelId])}%`}
+                titleSize="m"
+                description="Second panel"
+                isLoading={!resizeTrigger}
+              />
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiResizableContainer
+          style={{ height: '200px' }}
+          onPanelWidthChange={(newSizes) => {
+            setSizes((prevSizes) => ({ ...prevSizes, ...newSizes }));
+          }}
+          onResizeStart={(trigger) => setResizeTrigger(trigger)}
+          onResizeEnd={() => setResizeTrigger(undefined)}
+        >
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                id={firstPanelId}
+                size={sizes[firstPanelId]}
+                minSize="30%"
+              >
+                <EuiText>
+                  <div>{text}</div>
+                  <a href="">Hello world</a>
+                </EuiText>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel
+                id={secondPanelId}
+                size={sizes[secondPanelId]}
+                minSize="200px"
+              >
+                <EuiText>{text}</EuiText>
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

src-docs/src/views/resizable_container/resizable_container_example.js

@@ -23,6 +23,7 @@ import { PanelModeType } from '!!prop-loader!../../../../src/components/resizabl
 import ResizableContainerBasic from './resizable_container_basic';
 import ResizableContainerVertical from './resizable_container_vertical';
 import ResizableContainerResetValues from './resizable_container_reset_values';
+import ResizableContainerCallbacks from './resizable_container_callbacks';
 import ResizablePanels from './resizable_panels';
 import ResizablePanelCollapsible from './resizable_panel_collapsible';
 import ResizablePanelCollapsibleResponsive from './resizable_panel_collapsible_responsive';
@@ -32,6 +33,7 @@ import ResizablePanelCollapsibleExt from './resizable_panel_collapsible_external
 const ResizableContainerSource = require('!!raw-loader!./resizable_container_basic');
 const ResizableContainerVerticalSource = require('!!raw-loader!./resizable_container_vertical');
 const ResizableContainerResetValuesSource = require('!!raw-loader!./resizable_container_reset_values');
+const ResizableContainerCallbacksSource = require('!!raw-loader!./resizable_container_callbacks');
 const ResizablePanelsSource = require('!!raw-loader!./resizable_panels');
 const ResizablePanelCollapsibleSource = require('!!raw-loader!./resizable_panel_collapsible');
 const ResizablePanelCollapsibleResponsiveSource = require('!!raw-loader!./resizable_panel_collapsible_responsive');
@@ -80,6 +82,29 @@ const verticalSnippet = `<EuiResizableContainer direction="vertical">
   )}
 </EuiResizableContainer>`;
 
+const callbacksSnippet = `<EuiResizableContainer
+  onResizeStart={(trigger) => console.log('onResizeStart', trigger)}
+  onResizeEnd={() => console.log('onResizeEnd')}
+>
+  {(EuiResizablePanel, EuiResizableButton) => (
+    <>
+      <EuiResizablePanel initialSize={50} minSize="20%">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+
+      <EuiResizableButton />
+
+      <EuiResizablePanel initialSize={50} minSize="20%">
+        <EuiText>
+          <p>{text}</p>
+        </EuiText>
+      </EuiResizablePanel>
+    </>
+  )}
+</EuiResizableContainer>`;
+
 const collapsibleSnippet = `<EuiResizableContainer>
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
@@ -313,6 +338,30 @@ export const ResizableContainerExample = {
       demo: <ResizableContainerVertical />,
       snippet: verticalSnippet,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: ResizableContainerCallbacksSource,
+        },
+      ],
+      title: 'Resizable container callbacks',
+      text: (
+        <>
+          <p>
+            <strong>EuiResizableContainer</strong> supports{' '}
+            <EuiCode>onResizeStart</EuiCode> and <EuiCode>onResizeEnd</EuiCode>{' '}
+            callback props to listen for when resizing starts and ends. The{' '}
+            <EuiCode>onResizeStart</EuiCode> callback is passed a{' '}
+            <EuiCode>{"trigger: 'pointer' | 'key'"}</EuiCode> parameter to
+            determine which user action triggered the resize.
+          </p>
+        </>
+      ),
+      props: { EuiResizableContainer, EuiResizablePanel, EuiResizableButton },
+      demo: <ResizableContainerCallbacks />,
+      snippet: callbacksSnippet,
+    },
     {
       source: [
         {

src/components/resizable_container/resizable_button.tsx

@@ -23,11 +23,12 @@ import { useEuiResizableContainerContext } from './context';
 import {
   EuiResizableButtonController,
   EuiResizableButtonMouseEvent,
-  EuiResizableButtonKeyDownEvent,
+  EuiResizableButtonKeyEvent,
 } from './types';
 
 interface EuiResizableButtonControls {
-  onKeyDown: (eve: EuiResizableButtonKeyDownEvent) => void;
+  onKeyDown: (eve: EuiResizableButtonKeyEvent) => void;
+  onKeyUp: (eve: EuiResizableButtonKeyEvent) => void;
   onMouseDown: (eve: EuiResizableButtonMouseEvent) => void;
   onTouchStart: (eve: EuiResizableButtonMouseEvent) => void;
   onFocus: (id: string) => void;

src/components/resizable_container/resizable_container.test.tsx

@@ -7,10 +7,11 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { mount, render } from 'enzyme';
+import { findTestSubject, requiredProps } from '../../test';
 
 import { EuiResizableContainer } from './resizable_container';
+import { keys } from '../../services';
 
 describe('EuiResizableContainer', () => {
   test('is rendered', () => {
@@ -170,4 +171,168 @@ describe('EuiResizableContainer', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('on resize callbacks', () => {
+    const mountWithCallbacks = ({
+      direction,
+    }: {
+      direction?: 'vertical' | 'horizontal';
+    } = {}) => {
+      const onResizeStart = jest.fn();
+      const onResizeEnd = jest.fn();
+      const component = mount(
+        <EuiResizableContainer
+          {...requiredProps}
+          onResizeStart={onResizeStart}
+          onResizeEnd={onResizeEnd}
+          direction={direction}
+          data-test-subj="euiResizableContainer"
+        >
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel initialSize={50}>Testing</EuiResizablePanel>
+              <EuiResizableButton data-test-subj="euiResizableButton" />
+              <EuiResizablePanel initialSize={50}>123</EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      );
+      const container = findTestSubject(component, 'euiResizableContainer');
+      const button = findTestSubject(component, 'euiResizableButton');
+      return { container, button, onResizeStart, onResizeEnd };
+    };
+
+    test('onResizeStart and onResizeEnd are called for pointer events', () => {
+      const {
+        container,
+        button,
+        onResizeStart,
+        onResizeEnd,
+      } = mountWithCallbacks();
+      button.simulate('mousedown', {
+        pageX: 0,
+        pageY: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('pointer');
+      container.simulate('mouseup');
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      button.simulate('mousedown', {
+        pageX: 0,
+        pageY: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      expect(onResizeStart).toHaveBeenCalledTimes(2);
+      expect(onResizeStart).toHaveBeenLastCalledWith('pointer');
+      container.simulate('mouseleave');
+      expect(onResizeEnd).toHaveBeenCalledTimes(2);
+      button.simulate('touchstart', {
+        touches: [
+          {
+            clientX: 0,
+            clientY: 0,
+          },
+        ],
+      });
+      expect(onResizeStart).toHaveBeenCalledTimes(3);
+      expect(onResizeStart).toHaveBeenLastCalledWith('pointer');
+      container.simulate('touchend');
+      expect(onResizeEnd).toHaveBeenCalledTimes(3);
+    });
+
+    test('onResizeStart and onResizeEnd are called for left/right keyboard events', () => {
+      const { button, onResizeStart, onResizeEnd } = mountWithCallbacks();
+      button.simulate('keydown', { key: keys.ARROW_RIGHT });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keyup', { key: keys.ARROW_RIGHT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      button.simulate('keydown', { key: keys.ARROW_LEFT });
+      expect(onResizeStart).toHaveBeenCalledTimes(2);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keyup', { key: keys.ARROW_LEFT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(2);
+    });
+
+    test('onResizeStart and onResizeEnd are called for up/down keyboard events', () => {
+      const { button, onResizeStart, onResizeEnd } = mountWithCallbacks({
+        direction: 'vertical',
+      });
+      button.simulate('keydown', { key: keys.ARROW_UP });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keyup', { key: keys.ARROW_UP });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      button.simulate('keydown', { key: keys.ARROW_DOWN });
+      expect(onResizeStart).toHaveBeenCalledTimes(2);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keyup', { key: keys.ARROW_DOWN });
+      expect(onResizeEnd).toHaveBeenCalledTimes(2);
+    });
+
+    test('onResizeStart and onResizeEnd are called only for the correct keyboard events', () => {
+      const { button, onResizeStart, onResizeEnd } = mountWithCallbacks();
+      button.simulate('keydown', { key: keys.ARROW_DOWN });
+      expect(onResizeStart).toHaveBeenCalledTimes(0);
+      button.simulate('keydown', { key: keys.ARROW_RIGHT });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keyup', { key: keys.ARROW_DOWN });
+      expect(onResizeEnd).toHaveBeenCalledTimes(0);
+      button.simulate('keyup', { key: keys.ARROW_RIGHT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+    });
+
+    test('onResizeStart and onResizeEnd are called correctly when switching resize direction with the keyboard', () => {
+      const { button, onResizeStart, onResizeEnd } = mountWithCallbacks();
+      button.simulate('keydown', { key: keys.ARROW_RIGHT });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keydown', { key: keys.ARROW_LEFT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenCalledTimes(2);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('keyup', { key: keys.ARROW_RIGHT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      button.simulate('keyup', { key: keys.ARROW_LEFT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(2);
+    });
+
+    test('onResizeEnd is called before starting a new resize if a keyboard resize is triggered while a pointer resize is in progress', () => {
+      const {
+        container,
+        button,
+        onResizeStart,
+        onResizeEnd,
+      } = mountWithCallbacks();
+      button.simulate('mousedown', {
+        pageX: 0,
+        pageY: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('pointer');
+      button.simulate('keydown', { key: keys.ARROW_RIGHT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenCalledTimes(2);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      container.simulate('mouseup');
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+      button.simulate('keyup', { key: keys.ARROW_RIGHT });
+      expect(onResizeEnd).toHaveBeenCalledTimes(2);
+    });
+
+    test('onResizeEnd is called for keyboard resizes when the button is blurred', () => {
+      const { button, onResizeStart, onResizeEnd } = mountWithCallbacks();
+      button.simulate('keydown', { key: keys.ARROW_RIGHT });
+      expect(onResizeStart).toHaveBeenCalledTimes(1);
+      expect(onResizeStart).toHaveBeenLastCalledWith('key');
+      button.simulate('blur');
+      expect(onResizeEnd).toHaveBeenCalledTimes(1);
+    });
+  });
 });