From 72dc95c6ebeb51a1d73fe6a0a137b76f77f4fb77 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 19 Aug 2024 12:39:12 +0200
Subject: [PATCH] fix(resize-handle): restore to useCallback, add tests

---
 ...-9a67b6d5-5968-4c4a-806a-cf1d5cd12ca4.json |  7 ++
 ...useResizeHandle.component-browser-spec.tsx | 25 +++++++
 .../src/hooks/useResizeHandle.ts              | 11 ++--
 ...zeHandleExample.component-browser-spec.tsx | 65 +++++++++++++++++++
 4 files changed, 101 insertions(+), 7 deletions(-)
 create mode 100644 change/@fluentui-contrib-react-resize-handle-9a67b6d5-5968-4c4a-806a-cf1d5cd12ca4.json
 create mode 100644 packages/react-resize-handle/src/hooks/useResizeHandle.component-browser-spec.tsx
 create mode 100644 packages/react-resize-handle/src/hooks/useResizeHandleExample.component-browser-spec.tsx

diff --git a/change/@fluentui-contrib-react-resize-handle-9a67b6d5-5968-4c4a-806a-cf1d5cd12ca4.json b/change/@fluentui-contrib-react-resize-handle-9a67b6d5-5968-4c4a-806a-cf1d5cd12ca4.json
new file mode 100644
index 00000000..6fe41421
--- /dev/null
+++ b/change/@fluentui-contrib-react-resize-handle-9a67b6d5-5968-4c4a-806a-cf1d5cd12ca4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(resize-handle): restore to useCallback, add tests",
+  "packageName": "@fluentui-contrib/react-resize-handle",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-resize-handle/src/hooks/useResizeHandle.component-browser-spec.tsx b/packages/react-resize-handle/src/hooks/useResizeHandle.component-browser-spec.tsx
new file mode 100644
index 00000000..7b5185e3
--- /dev/null
+++ b/packages/react-resize-handle/src/hooks/useResizeHandle.component-browser-spec.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { TestArea } from './useResizeHandleExample.component-browser-spec';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test.describe('useResizeHandle', () => {
+  test('"onChange" is called after dragging', async ({ mount, page }) => {
+    const component = await mount(<TestArea />);
+
+    const dragHandle = component.getByRole('separator');
+    const valueEl = component.getByTestId('value');
+
+    await expect(valueEl).toContainText('Default value');
+
+    // Drag the handle to the right
+    await dragHandle.hover();
+    await page.mouse.down();
+    await page.mouse.move(100, 0);
+    await page.mouse.up();
+
+    await expect(valueEl).toContainText('--width: 83px;');
+  });
+});
diff --git a/packages/react-resize-handle/src/hooks/useResizeHandle.ts b/packages/react-resize-handle/src/hooks/useResizeHandle.ts
index 47cddaa2..91f1ba57 100644
--- a/packages/react-resize-handle/src/hooks/useResizeHandle.ts
+++ b/packages/react-resize-handle/src/hooks/useResizeHandle.ts
@@ -34,6 +34,8 @@ export type UseResizeHandleParams = {
   maxValue?: number;
   /**
    * A callback that will be called when the element is resized.
+   *
+   * @remarks The passed function should be memoization for better performance.
    */
   onChange?: (value: number) => void;
   /**
@@ -81,11 +83,6 @@ export const useResizeHandle = (params: UseResizeHandleParams) => {
   const elementRef = React.useRef<HTMLElement | null>(null);
 
   const currentValue = React.useRef(UNMEASURED);
-  const handleChange: UseResizeHandleParams['onChange'] = useEventCallback(
-    (value) => {
-      onChange?.(value);
-    }
-  );
 
   const updateElementsAttrs = React.useCallback(() => {
     const a11yValue = relative
@@ -115,9 +112,9 @@ export const useResizeHandle = (params: UseResizeHandleParams) => {
         variableName,
         `${currentValue.current}px`
       );
-      handleChange(currentValue.current);
+      onChange?.(currentValue.current);
     }
-  }, [getA11ValueText, maxValue, minValue, handleChange, variableName]);
+  }, [getA11ValueText, maxValue, minValue, onChange, variableName]);
 
   // In case the maxValue or minValue is changed, we need to make sure we are not exceeding the new limits
   React.useEffect(() => {
diff --git a/packages/react-resize-handle/src/hooks/useResizeHandleExample.component-browser-spec.tsx b/packages/react-resize-handle/src/hooks/useResizeHandleExample.component-browser-spec.tsx
new file mode 100644
index 00000000..8343a581
--- /dev/null
+++ b/packages/react-resize-handle/src/hooks/useResizeHandleExample.component-browser-spec.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useResizeHandle } from './useResizeHandle';
+
+export function TestArea() {
+  const codeRef = React.useRef<HTMLElement>(null);
+  const handleChange = React.useCallback((value: number) => {
+    if (codeRef.current) {
+      codeRef.current.textContent = `--width: ${value}px;`;
+    }
+  }, []);
+
+  const handle = useResizeHandle({
+    variableName: '--width',
+    growDirection: 'end',
+    minValue: 50,
+    maxValue: 400,
+    onChange: handleChange,
+  });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <div
+        ref={handle.wrapperRef}
+        style={{
+          '--width': '50px',
+          display: 'grid',
+          gridTemplateColumns: 'var(--width) 10px auto',
+          width: '100%',
+          height: '400px',
+          gap: '4px',
+        }}
+      >
+        <div
+          ref={handle.elementRef}
+          style={{
+            border: '2px dotted blue',
+            height: '100%',
+          }}
+        />
+        <div
+          ref={handle.handleRef}
+          role="separator"
+          style={{
+            cursor: 'ew-resize',
+            backgroundColor: 'grey',
+            borderRadius: '4px',
+          }}
+        />
+        <div
+          style={{
+            border: '2px dotted green',
+            height: '100%',
+          }}
+        />
+      </div>
+      <code
+        ref={codeRef}
+        style={{ padding: '4px', border: '2px solid orange' }}
+        data-testid="value"
+      >
+        Default value
+      </code>
+    </div>
+  );
+}