feat(All Components): Allow all HTML events to be passed (#370)

As the events are not part of the typings you have to use ts-ignore in case you are using TypeScript.

Author: MarcusNotheis

packages/base/src/hooks/usePassThroughHtmlProps.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-const PROP_WHITELIST = /^(aria-|data-|id$)/;
+const PROP_WHITELIST = /^(aria-|data-|id$|on[A-Z])/;
 
 export const usePassThroughHtmlProps = (props) => {
   const passThroughPropNames = Object.keys(props).filter((name) => PROP_WHITELIST.test(name));

packages/main/src/components/AnalyticalCardHeader/index.tsx

@@ -128,11 +128,11 @@ export const AnalyticalCardHeader: FC<AnalyticalCardHeaderPropTypes> = forwardRe
     return (
       <div
         ref={ref}
-        onClick={onClick}
         className={headerClasses.valueOf()}
         title={tooltip}
         style={style}
         {...passThroughProps}
+        onClick={onClick}
       >
         <div className={classes.headerContent}>
           <div className={classes.headerTitles}>

packages/main/src/components/Avatar/index.tsx

@@ -91,12 +91,12 @@ const Avatar: FC<AvatarPropTypes> = forwardRef((props: AvatarPropTypes, ref: Ref
       ref={ref}
       className={cssClasses.join(' ')}
       style={inlineStyle}
-      onClick={handleOnClick}
       tabIndex={0}
-      onKeyDown={handleKeyDown}
       title={tooltip}
       slot={slot}
       {...passThroughProps}
+      onClick={handleOnClick}
+      onKeyDown={handleKeyDown}
     >
       {initials ? initials : children}
     </span>

packages/main/src/components/Carousel/index.tsx

@@ -170,19 +170,20 @@ const Carousel: FC<CarouselPropTypes> = forwardRef((props: CarouselPropTypes, re
       ref={ref}
       role="list"
       tabIndex={0}
-      onKeyDown={onKeyDown}
       {...passThroughProps}
+      onKeyDown={onKeyDown}
     >
       {childElementCount > 1 && pageIndicatorPlacement === PlacementType.Top && (
         <CarouselPagination
           arrowsPlacement={arrowsPlacement}
           showPageIndicator={showPageIndicator}
           pageIndicatorPlacement={pageIndicatorPlacement}
           activePage={currentlyActivePage}
-          children={children}
           goToPreviousPage={goToPreviousPage}
           goToNextPage={goToNextPage}
-        />
+        >
+          {children}
+        </CarouselPagination>
       )}
       <div
         className={classes.carouselInner}

packages/main/src/components/FlexBox/FlexBox.test.tsx

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
 import * as React from 'react';
+import sinon from 'sinon';
 
 describe('FlexBox', () => {
   test('JustifyContent: End', () => {
@@ -45,5 +46,17 @@ describe('FlexBox', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  test('pass through click handler', () => {
+    const callback = sinon.spy();
+    const wrapper = mount(
+      // @ts-ignore
+      <FlexBox onClick={callback}>
+        <span>Test 1</span>
+      </FlexBox>
+    );
+    wrapper.simulate('click');
+    expect(callback.called).toBe(true);
+  });
+
   createPassThroughPropsTest(FlexBox);
 });

packages/main/src/components/Form/index.tsx

@@ -79,14 +79,15 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
       )}
       <Grid
         ref={ref}
-        children={formGroups}
         defaultSpan={'XL6 L12 M12 S12'}
         className={className}
         slot={slot}
         style={style}
         tooltip={tooltip}
         {...passThroughProps}
-      />
+      >
+        {formGroups}
+      </Grid>
     </CurrentViewportRangeContext.Provider>
   );
 });

packages/main/src/components/Notification/index.tsx

@@ -244,10 +244,10 @@ const Notification: FC<NotificationProptypes> = forwardRef(
         <div
           style={notificationContainerStyles}
           className={`${classes.notificationContainer} ${className}`}
-          onClick={handleNotificationClick}
           title={tooltip}
           ref={ref}
           {...passThroughProps}
+          onClick={handleNotificationClick}
         >
           <div className={`${classes.priorityIndicator} ${indicatorClass}`} style={indicatorStyles} />
           <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>

packages/main/src/components/SegmentedButtonItem/index.tsx

@@ -75,11 +75,11 @@ const SegmentedButtonItem: FC<SegmentedButtonItemPropTypes> = forwardRef(
       <li
         ref={ref}
         className={segmentedButtonItemClasses.valueOf()}
-        onClick={handleOnClick}
         style={inlineStyles}
         title={tooltip}
         data-has-own-width={!!width}
         {...passThroughProps}
+        onClick={handleOnClick}
       >
         {icon && <div className={iconClasses.valueOf()}>{icon}</div>}
         {children}

packages/main/src/components/VariantManagement/index.tsx

@@ -156,7 +156,6 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
       <Popover
         ref={ref}
         open={open}
-        onAfterOpen={handleAfterOpen}
         headerText={popupTitle}
         placementType={placement}
         openBy={variantManagementButton}
@@ -166,6 +165,7 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
         style={style}
         tooltip={tooltip}
         {...passThroughProps}
+        onAfterOpen={handleAfterOpen}
       >
         <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
           {variantItems.map((item) => (

packages/main/src/webComponents/Button/demo.stories.tsx

@@ -4,49 +4,6 @@ import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import React from 'react';
 
-const customStyle1 = {
-  color: 'red'
-};
-
-const customStyle2 = {
-  width: '15rem'
-};
-
-class DemoButton extends React.Component {
-  state = {
-    showCS1: false,
-    showCS2: false
-  };
-
-  render() {
-    const { showCS1, showCS2 } = this.state;
-
-    const innerStyles = {
-      ...(showCS1 ? customStyle1 : {}),
-      ...(showCS2 ? customStyle2 : {})
-    };
-
-    return (
-      <div>
-        <div>
-          <Button onClick={() => this.setState({ showCS1: !showCS1 })}>Toggle Custom Style 1</Button>
-          <Button onClick={() => this.setState({ showCS2: !showCS2 })}>Toggle Custom Style 2</Button>
-        </div>
-        <Button
-          design={select('design', ButtonDesign, ButtonDesign.Default)}
-          disabled={boolean('disabled', false)}
-          icon={'add'}
-          iconEnd={boolean('iconEnd', false)}
-          onClick={action('Button clicked')}
-          innerStyles={innerStyles}
-        >
-          Some Content
-        </Button>
-      </div>
-    );
-  }
-}
-
 export default {
   title: 'UI5 Web Components / Button',
   component: Button
@@ -67,9 +24,3 @@ export const generatedDefaultStory = () => (
 generatedDefaultStory.story = {
   name: 'Generated default story'
 };
-
-export const withCustomStyles = () => <DemoButton />;
-
-withCustomStyles.story = {
-  name: 'With custom Styles'
-};