fix(ItemButton): serialization

Author: tenphi

.changeset/wild-parents-matter.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Don't pass onPress prop to the element in ItemBase.

src/components/actions/ItemButton/ItemButton.tsx

@@ -24,7 +24,7 @@ export const ItemButton = forwardRef(function ItemButton(
   allProps: CubeItemButtonProps,
   ref: FocusableRef<HTMLElement>,
 ) {
-  const { mods, to, htmlType, as, type, theme, ...rest } =
+  const { mods, to, htmlType, as, type, theme, onPress, ...rest } =
     allProps as CubeItemButtonProps & {
       as?: 'a' | 'button' | 'div' | 'span';
     };

src/components/actions/use-action.test.tsx

@@ -277,6 +277,26 @@ describe('performClickHandler', () => {
     ...modifiers,
   });
 
+  it('passes a serializable event to onPress (target preserved, non-enumerable)', () => {
+    const evt = createMockEvent();
+
+    performClickHandler(evt, {
+      navigate: mockNavigate,
+      resolvedHref: undefined,
+      to: undefined,
+      onPress: mockOnPress,
+      tracking: mockTracking,
+      navigationOptions: {},
+    });
+
+    expect(mockOnPress).toHaveBeenCalled();
+    const arg = mockOnPress.mock.calls[0][0];
+    expect(() => JSON.stringify(arg)).not.toThrow();
+    expect(arg.target).toBe(evt.target);
+    expect(arg.shiftKey).toBe(false);
+    expect(arg.metaKey).toBe(false);
+  });
+
   it('should handle history navigation', () => {
     const evt = createMockEvent();
 

src/components/actions/use-action.ts

@@ -140,6 +140,27 @@ export function parseTo(to: NavigateArg | undefined): {
   };
 }
 
+function sanitizePressEvent(evt: PressEvent): PressEvent {
+  const safeEvt: any = {
+    type: (evt as any)?.type,
+    pointerType: (evt as any)?.pointerType,
+    shiftKey: !!(evt as any)?.shiftKey,
+    metaKey: !!(evt as any)?.metaKey,
+    ctrlKey: !!(evt as any)?.ctrlKey,
+    altKey: !!(evt as any)?.altKey,
+  };
+  try {
+    Object.defineProperty(safeEvt, 'target', {
+      value: (evt as any)?.target,
+      enumerable: false,
+      configurable: true,
+    });
+  } catch (e) {
+    // do nothing
+  }
+  return safeEvt;
+}
+
 export function performClickHandler(
   evt,
   { navigate, resolvedHref, to, onPress, tracking, navigationOptions },
@@ -156,7 +177,7 @@ export function performClickHandler(
   const element = evt.target;
   const qa = element?.getAttribute('data-qa');
 
-  onPress?.(evt);
+  onPress?.(sanitizePressEvent(evt));
 
   if (to == null) {
     // Allow 0 as valid navigation (go to current page)