feat: Breaking - use EventHandler types for all callbacks

packages/react-resize-handle/src/hooks/useResizeHandle.ts

@@ -15,6 +15,22 @@ const clampWithMode = (
   return relative || value === UNMEASURED ? value : clamp(value, min, max);
 };
 
+import { EventData, EventHandler } from '@fluentui/react-utilities';
+
+export const EVENTS = {
+  keyboard: 'fui-react-resize-handle-keyboard',
+  touch: 'fui-react-resize-handle-touch',
+  mouse: 'fui-react-resize-handle-mouse',
+  setValue: 'fui-react-resize-handle-setValue',
+} as const;
+
+export type ResizeHandleUpdateEventData = (
+  | EventData<typeof EVENTS.keyboard, KeyboardEvent>
+  | EventData<typeof EVENTS.touch, TouchEvent>
+  | EventData<typeof EVENTS.mouse, MouseEvent>
+  | EventData<typeof EVENTS.setValue, CustomEvent>
+) & { value: number };
+
 export type UseResizeHandleParams = {
   /**
    * The direction in which the element is considered growing in size ('end', 'start', 'up', or 'down').
@@ -37,24 +53,20 @@ export type UseResizeHandleParams = {
    *
    * @remarks The passed function should be memoization for better performance.
    */
-  onChange?: (
-    value: number,
-    event?: MouseEvent | TouchEvent | KeyboardEvent
-  ) => void;
+  onChange?: EventHandler<ResizeHandleUpdateEventData>;
   /**
    * A callback that will be called when the resize operation starts.
    */
-  onDragStart?: (e: NativeTouchOrMouseEvent, value: number) => void;
+  onDragStart?: EventHandler<ResizeHandleUpdateEventData>;
   /**
    * A callback that will be called when the resize operation ends.
    */
-  onDragEnd?: (e: NativeTouchOrMouseEvent, value: number) => void;
+  onDragEnd?: EventHandler<ResizeHandleUpdateEventData>;
   /**
    * A function that will be called to get the value that will be set as the aria-valuetext attribute on the resize handle.
    * Use this for localization.
    */
   getA11ValueText?: (value: number) => string | undefined;
-
   /**
    * Only measure relative change in size, useful to use with CSS calc() function.
    * Example: clamp(60px, calc(20% + var(--nav-size)), 40%)
@@ -64,6 +76,38 @@ export type UseResizeHandleParams = {
   relative?: boolean;
 };
 
+const getUpdateEventData = (
+  event: NativeTouchOrMouseEvent | KeyboardEvent | CustomEvent,
+  value: number
+): ResizeHandleUpdateEventData => {
+  switch (event.constructor) {
+    case TouchEvent:
+      return {
+        type: EVENTS.touch,
+        value,
+        event: event as TouchEvent,
+      };
+    case KeyboardEvent:
+      return {
+        type: EVENTS.keyboard,
+        value,
+        event: event as KeyboardEvent,
+      };
+    case MouseEvent:
+      return {
+        type: EVENTS.mouse,
+        value,
+        event: event as MouseEvent,
+      };
+    default:
+      return {
+        type: EVENTS.setValue,
+        value,
+        event: event as CustomEvent,
+      };
+  }
+};
+
 const DEFAULT_GET_A11_VALUE_TEXT: UseResizeHandleParams['getA11ValueText'] = (
   value
 ) => (value === UNMEASURED ? undefined : `${value.toFixed(0)}px`);
@@ -118,7 +162,12 @@ export const useResizeHandle = (params: UseResizeHandleParams) => {
           variableName,
           `${currentValue.current}px`
         );
-        onChange?.(currentValue.current, event);
+
+        const eventToPass = event || new CustomEvent(EVENTS.setValue);
+        onChange?.(
+          eventToPass,
+          getUpdateEventData(eventToPass, currentValue.current)
+        );
       }
     },
     [getA11ValueText, maxValue, minValue, onChange, variableName]
@@ -168,11 +217,11 @@ export const useResizeHandle = (params: UseResizeHandleParams) => {
   );
 
   const onDragStartLocal = useEventCallback((e: NativeTouchOrMouseEvent) => {
-    onDragStart?.(e, currentValue.current);
+    onDragStart?.(e, getUpdateEventData(e, currentValue.current));
   });
 
   const onDragEndLocal = useEventCallback((e: NativeTouchOrMouseEvent) => {
-    onDragEnd?.(e, currentValue.current);
+    onDragEnd?.(e, getUpdateEventData(e, currentValue.current));
   });
 
   const getCurrentValue = React.useCallback(() => {

packages/react-resize-handle/src/index.ts

@@ -1 +1,6 @@
-export { useResizeHandle } from './hooks/useResizeHandle';
+export { useResizeHandle, EVENTS } from './hooks/useResizeHandle';
+
+export type {
+  ResizeHandleOnChangeEventData,
+  UseResizeHandleParams,
+} from './hooks/useResizeHandle';

packages/react-resize-handle/stories/Default.stories.tsx

@@ -75,14 +75,13 @@ const Component = (props: ComponentProps) => {
     variableName: NAV_SIZE_CSS_VAR,
     growDirection: 'end',
     relative: true,
-    onChange: (value: number, event) => {
-      console.log(event);
-      props.onChange(value);
+    onChange: (_, data) => {
+      console.log(data);
     },
-    onDragStart: (e, value: number) => {
+    onDragStart: (_, { value }) => {
       props.onDragStart(value);
     },
-    onDragEnd: (e, value: number) => {
+    onDragEnd: (_, { value }) => {
       props.onDragEnd(value);
     },
   });