SwatchColorPicker: add event param to event handlers (#21635)

change/@fluentui-react-83b3a738-2b48-4f6b-bf5a-d6ad5be98f07.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "SwatchColorPicker: add event param to event handlers",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -2449,14 +2449,22 @@ export interface IButtonGridCellProps<T> {
     index?: number;
     item: T;
     label?: string;
-    onClick?: (item: T) => void;
-    onFocus?: (item: T) => void;
-    onHover?: (item?: T) => void;
+    // (undocumented)
+    onClick?: (item: T, event?: React_2.MouseEvent<HTMLButtonElement>) => void;
+    // (undocumented)
+    onFocus?: (item: T, event?: React_2.FocusEvent<HTMLButtonElement>) => void;
+    // (undocumented)
+    onHover?: (item?: T, event?: React_2.MouseEvent<HTMLButtonElement>) => void;
+    // (undocumented)
     onKeyDown?: (ev: React_2.KeyboardEvent<HTMLButtonElement>) => void;
+    // (undocumented)
     onMouseEnter?: (ev: React_2.MouseEvent<HTMLButtonElement>) => boolean;
+    // (undocumented)
     onMouseLeave?: (ev: React_2.MouseEvent<HTMLButtonElement>) => void;
+    // (undocumented)
     onMouseMove?: (ev: React_2.MouseEvent<HTMLButtonElement>) => boolean;
     onRenderItem: (item: T) => JSX.Element;
+    // (undocumented)
     onWheel?: (ev: React_2.MouseEvent<HTMLButtonElement>) => void;
     role?: string;
     selected?: boolean;
@@ -3405,11 +3413,11 @@ export interface IColorPickerGridCellProps {
     isRadio?: boolean;
     item: IColorCellProps;
     label?: string;
-    onClick?: (item: IColorCellProps) => void;
+    onClick?: (item: IColorCellProps, event?: React_2.MouseEvent<HTMLButtonElement>) => void;
     // (undocumented)
-    onFocus?: (item: IColorCellProps) => void;
+    onFocus?: (item: IColorCellProps, event?: React_2.FormEvent<HTMLButtonElement>) => void;
     // (undocumented)
-    onHover?: (item?: IColorCellProps) => void;
+    onHover?: (item?: IColorCellProps, event?: React_2.MouseEvent<HTMLButtonElement>) => void;
     // (undocumented)
     onKeyDown?: (ev: React_2.KeyboardEvent<HTMLButtonElement>) => void;
     onMouseEnter?: (ev: React_2.MouseEvent<HTMLButtonElement>) => boolean;
@@ -8801,8 +8809,8 @@ export interface ISwatchColorPickerProps extends React_2.RefAttributes<HTMLEleme
     // @deprecated (undocumented)
     isControlled?: boolean;
     mouseLeaveParentSelector?: string | undefined;
-    onCellFocused?: (id?: string, color?: string) => void;
-    onCellHovered?: (id?: string, color?: string) => void;
+    onCellFocused?: (id?: string, color?: string, event?: React_2.FormEvent<HTMLButtonElement>) => void;
+    onCellHovered?: (id?: string, color?: string, event?: React_2.MouseEvent<HTMLButtonElement>) => void;
     onChange?: (event: React_2.FormEvent<HTMLElement>, id: string | undefined, color: string | undefined) => void;
     // @deprecated (undocumented)
     onColorChanged?: (id?: string, color?: string) => void;

packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts

@@ -87,11 +87,11 @@ export interface IColorPickerGridCellProps {
   /**
    * Handler for when a color cell is clicked.
    */
-  onClick?: (item: IColorCellProps) => void;
+  onClick?: (item: IColorCellProps, event?: React.MouseEvent<HTMLButtonElement>) => void;
 
-  onHover?: (item?: IColorCellProps) => void;
+  onHover?: (item?: IColorCellProps, event?: React.MouseEvent<HTMLButtonElement>) => void;
 
-  onFocus?: (item: IColorCellProps) => void;
+  onFocus?: (item: IColorCellProps, event?: React.FormEvent<HTMLButtonElement>) => void;
 
   /**
    * Custom styles for the component.

packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx

@@ -122,12 +122,15 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
    * When the whole swatchColorPicker is blurred,
    * make sure to clear the pending focused stated
    */
-  const onSwatchColorPickerBlur = React.useCallback((): void => {
-    if (onCellFocused) {
-      internalState.cellFocused = false;
-      onCellFocused();
-    }
-  }, [internalState, onCellFocused]);
+  const onSwatchColorPickerBlur = React.useCallback(
+    (event?: React.FocusEvent<HTMLButtonElement>): void => {
+      if (onCellFocused) {
+        internalState.cellFocused = false;
+        onCellFocused(undefined, undefined, event);
+      }
+    },
+    [internalState, onCellFocused],
+  );
 
   /**
    * Callback passed to the GridCell that will manage triggering the onCellHovered callback for mouseEnter
@@ -210,9 +213,9 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
    * NOTE: This will not be triggered if shouldFocusOnHover === true
    */
   const onGridCellHovered = React.useCallback(
-    (item?: IColorCellProps): void => {
+    (item?: IColorCellProps, event?: React.MouseEvent<HTMLButtonElement>): void => {
       if (onCellHovered) {
-        return item ? onCellHovered(item.id, item.color) : onCellHovered();
+        item ? onCellHovered(item.id, item.color, event) : onCellHovered(undefined, undefined, event);
       }
     },
     [onCellHovered],
@@ -222,14 +225,14 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
    * Callback passed to the GridCell class that will trigger the onCellFocus callback of the SwatchColorPicker
    */
   const onGridCellFocused = React.useCallback(
-    (item?: IColorCellProps): void => {
+    (item?: IColorCellProps, event?: React.FormEvent<HTMLButtonElement>): void => {
       if (onCellFocused) {
         if (item) {
           internalState.cellFocused = true;
-          return onCellFocused(item.id, item.color);
+          return onCellFocused(item.id, item.color, event);
         } else {
           internalState.cellFocused = false;
-          return onCellFocused();
+          return onCellFocused(undefined, undefined, event);
         }
       }
     },
@@ -240,17 +243,17 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
    * Handle the click on a cell
    */
   const onCellClick = React.useCallback(
-    (item: IColorCellProps): void => {
+    (item: IColorCellProps, event?: React.MouseEvent<HTMLButtonElement>): void => {
       if (disabled) {
         return;
       }
 
       if (item.id !== selectedId) {
         if (onCellFocused && internalState.cellFocused) {
           internalState.cellFocused = false;
-          onCellFocused();
+          onCellFocused(undefined, undefined, event);
         }
-        setSelectedId(item.id);
+        setSelectedId(item.id, event);
       }
     },
     [disabled, internalState, onCellFocused, selectedId, setSelectedId],

packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts

@@ -75,13 +75,13 @@ export interface ISwatchColorPickerProps extends React.RefAttributes<HTMLElement
    * Callback for when the user hovers over a color cell.
    * If `id` and `color` are unspecified, cells are no longer being hovered.
    */
-  onCellHovered?: (id?: string, color?: string) => void;
+  onCellHovered?: (id?: string, color?: string, event?: React.MouseEvent<HTMLButtonElement>) => void;
 
   /**
    * Callback for when the user focuses a color cell.
    * If `id` and `color` are unspecified, cells are no longer being focused.
    */
-  onCellFocused?: (id?: string, color?: string) => void;
+  onCellFocused?: (id?: string, color?: string, event?: React.FormEvent<HTMLButtonElement>) => void;
 
   /**
    * Custom render function for the color cell

packages/react/src/utilities/ButtonGrid/ButtonGridCell.tsx

@@ -28,18 +28,21 @@ export const ButtonGridCell = <T, P extends IButtonGridCellProps<T>>(props: IBut
 
   const buttonProps = getNativeProps(props, buttonProperties);
 
-  const handleClick = React.useCallback((): void => {
-    if (onClick && !disabled) {
-      onClick(item);
-    }
-  }, [disabled, item, onClick]);
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>): void => {
+      if (onClick && !disabled) {
+        onClick(item, event);
+      }
+    },
+    [disabled, item, onClick],
+  );
 
   const handleMouseEnter = React.useCallback(
     (ev: React.MouseEvent<HTMLButtonElement>): void => {
       const didUpdateOnEnter = onMouseEnter && onMouseEnter(ev);
 
       if (!didUpdateOnEnter && onHover && !disabled) {
-        onHover(item);
+        onHover(item, ev);
       }
     },
     [disabled, item, onHover, onMouseEnter],
@@ -50,7 +53,7 @@ export const ButtonGridCell = <T, P extends IButtonGridCellProps<T>>(props: IBut
       const didUpdateOnMove = onMouseMove && onMouseMove(ev);
 
       if (!didUpdateOnMove && onHover && !disabled) {
-        onHover(item);
+        onHover(item, ev);
       }
     },
     [disabled, item, onHover, onMouseMove],
@@ -61,17 +64,20 @@ export const ButtonGridCell = <T, P extends IButtonGridCellProps<T>>(props: IBut
       const didUpdateOnLeave = onMouseLeave && onMouseLeave(ev);
 
       if (!didUpdateOnLeave && onHover && !disabled) {
-        onHover();
+        onHover(undefined, ev);
       }
     },
     [disabled, onHover, onMouseLeave],
   );
 
-  const handleFocus = React.useCallback((): void => {
-    if (onFocus && !disabled) {
-      onFocus(item);
-    }
-  }, [disabled, item, onFocus]);
+  const handleFocus = React.useCallback(
+    (event: React.FocusEvent<HTMLButtonElement>): void => {
+      if (onFocus && !disabled) {
+        onFocus(item, event);
+      }
+    },
+    [disabled, item, onFocus],
+  );
 
   return (
     <CommandButton

packages/react/src/utilities/ButtonGrid/ButtonGridCell.types.ts

@@ -14,52 +14,43 @@ export interface IButtonGridCellProps<T> {
   id: string;
 
   /**
-   * Optional, if the this option should be disabled
+   * If the this option should be disabled
    */
   disabled?: boolean;
 
   /**
-   * Optional, if the cell is currently selected
+   * If the cell is currently selected
    */
   selected?: boolean;
 
-  /**
-   * The on click handler
-   */
-  onClick?: (item: T) => void;
+  onClick?: (item: T, event?: React.MouseEvent<HTMLButtonElement>) => void;
 
   /**
    * The render callback to handle rendering the item
    */
   onRenderItem: (item: T) => JSX.Element;
 
-  /**
-   * Optional, the onHover handler
-   */
-  onHover?: (item?: T) => void;
+  onHover?: (item?: T, event?: React.MouseEvent<HTMLButtonElement>) => void;
 
-  /**
-   * Optional, the onFocus handler
-   */
-  onFocus?: (item: T) => void;
+  onFocus?: (item: T, event?: React.FocusEvent<HTMLButtonElement>) => void;
 
   /**
    * The accessible role for this option
    */
   role?: string;
 
   /**
-   * Optional, className(s) to apply
+   * className(s) to apply
    */
   className?: string;
 
   /**
-   * Optional, the CSS class used for when the cell is disabled
+   * CSS classes to apply when the cell is disabled
    */
   cellDisabledStyle?: string[];
 
   /**
-   * Optional, the CSS class used for when the cell is selected
+   * CSS classes to apply when the cell is selected
    */
   cellIsSelectedStyle?: string[];
 
@@ -70,15 +61,12 @@ export interface IButtonGridCellProps<T> {
 
   /**
    * The label for this item.
-   * Visible text if this item is a header,
-   * tooltip if is this item is normal
    */
   label?: string;
 
   /**
    * Method to provide the classnames to style a button.
-   * The default value for this prop is the getClassnames func
-   * defined in BaseButton.classnames.
+   * The default value for this prop is `getClassnames` defined in `BaseButton.classNames`.
    */
   getClassNames?: (
     theme: ITheme,
@@ -92,30 +80,13 @@ export interface IButtonGridCellProps<T> {
     isSplit: boolean | undefined,
   ) => IButtonClassNames;
 
-  /**
-   * Optional, mouseEnter handler.
-   * @returns true if the event should be processed, false otherwise
-   */
   onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
 
-  /**
-   * Optional, mouseMove handler
-   * @returns true if the event should be processed, false otherwise
-   */
   onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
 
-  /**
-   * Optional, mouseLeave handler
-   */
   onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 
-  /**
-   * Optional, onWheel handler
-   */
   onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 
-  /**
-   * Optional, onkeydown handler
-   */
   onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
 }