fix(resize-handle): restore to useCallback, add tests

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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;');
+  });
+});

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(() => {

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>
+  );
+}