fix(WebComponents): Update to rc.4

packages/main/package.json

@@ -19,7 +19,7 @@
     "postbuild": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.0.0-rc.3",
+    "@ui5/webcomponents": "1.0.0-rc.4",
     "@ui5/webcomponents-react-base": "0.6.0-rc.14",
     "lodash.debounce": "^4.0.8",
     "react-table": "7.0.0-beta.12",

packages/main/src/components/MessageBox/MessageBox.jss.ts

@@ -73,7 +73,6 @@ const style = ({ parameters, contentDensity }: JSSTheme) => ({
   },
   footer: {
     height: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
-    lineHeight: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',

packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts

@@ -64,8 +64,8 @@ const styles = ({ contentDensity, parameters }: JSSTheme) => ({
     '&:focus': {
       outline: 'none'
     },
-    '& >*': {
-      verticalAlign: 'bottom'
+    '& > *': {
+      verticalAlign: 'middle'
     }
   },
   withText: {

packages/main/src/interfaces/Ui5WebComponentMetadata.ts

@@ -6,6 +6,7 @@ export interface Ui5WebComponentMetadata {
   getProperties?: () => DynamicObjectList<Ui5Property>;
   events?: DynamicObjectList<any>;
   getSlots?: () => DynamicObjectList<any>;
+  getEvents?: () => DynamicObjectList<any>;
   metadata: {
     events: DynamicObjectList<Ui5Property>;
   };

packages/main/src/internal/WithWebComponent.test.tsx

@@ -24,4 +24,27 @@ describe('withWebComponent', () => {
     component.fireEvent('click');
     expect(callback.callCount).toEqual(2);
   });
+
+  test('Bind new event handler', () => {
+    let Button: FC<any> = withWebComponent(UI5Button);
+    const callback = spy();
+    const wrapper = mountThemedComponent(<Button onClick={callback} />);
+    const component = wrapper
+      .find('ui5-button')
+      .first()
+      .instance();
+    // @ts-ignore
+    component.fireEvent('click');
+    expect(callback.callCount).toEqual(1);
+
+    const anotherCallback = spy();
+    wrapper.setProps({
+      children: cloneElement(wrapper.prop('children'), { onClick: anotherCallback })
+    });
+    wrapper.update();
+    // @ts-ignore
+    component.fireEvent('click');
+    expect(callback.callCount).toEqual(1);
+    expect(anotherCallback.callCount).toEqual(1);
+  });
 });

packages/main/src/internal/withWebComponent.tsx

@@ -18,11 +18,6 @@ function capitalizeFirstLetter(s: string) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
 
-function convertEventListenerPropToEventKey(s: string) {
-  const eventName = s.replace('on', '');
-  return eventName.charAt(0).toLowerCase() + eventName.slice(1);
-}
-
 function toKebabCase(s: string) {
   return s.replace(/([A-Z])/g, (a, b) => `-${b.toLowerCase()}`);
 }
@@ -51,6 +46,9 @@ export function withWebComponent<T>(WebComponent): RefForwardingComponent<Ui5Dom
       },
       getSlots() {
         return {};
+      },
+      getEvents() {
+        return {};
       }
     };
   };
@@ -66,7 +64,7 @@ export function withWebComponent<T>(WebComponent): RefForwardingComponent<Ui5Dom
   };
 
   const getEventsFromMetadata = () => {
-    return Object.keys(getWebComponentMetadata().metadata.events || {});
+    return Object.keys(getWebComponentMetadata().getEvents() || {});
   };
 
   const createEventWrapperFor = (eventIdentifier, eventHandler) => (e) => {
@@ -78,8 +76,7 @@ export function withWebComponent<T>(WebComponent): RefForwardingComponent<Ui5Dom
       return acc;
     }, {});
 
-    const eventMeta =
-      (getWebComponentMetadata().metadata.events && getWebComponentMetadata().metadata.events[eventIdentifier]) || {};
+    const eventMeta = getWebComponentMetadata().getEvents()[eventIdentifier] || {};
 
     payload = Object.keys(eventMeta).reduce((acc, val) => {
       if (val === 'detail' && e[val]) {
@@ -132,33 +129,13 @@ export function withWebComponent<T>(WebComponent): RefForwardingComponent<Ui5Dom
           getWcRef().current.removeEventListener(eventIdentifier, eventRegistryWrapped.current[alternativeKey]);
         }
       });
-
-      /*
-       * TODO Remove this after https://github.com/SAP/ui5-webcomponents/issues/833 has been fixed.
-       * This is a workaround for binding unknown event attributes
-       */
-      const unknownPassedEvents = Object.entries(props)
-        .filter(([prop, value]) => /^on/.test(prop) && !!value)
-        .map(([prop]) => prop)
-        .filter((prop) => !knownEvents.includes(`on${prop}`));
-
-      unknownPassedEvents.forEach((eventIdentifier) => {
-        const eventHandler = props[eventIdentifier];
-        const eventKey = convertEventListenerPropToEventKey(eventIdentifier);
-        if (typeof eventHandler === 'function' && eventRegistry.current[eventIdentifier] !== eventHandler) {
-          if (eventRegistry.current[eventIdentifier]) {
-            getWcRef().current.removeEventListener(eventKey, eventRegistryWrapped.current[eventIdentifier]);
-          }
-          eventRegistryWrapped.current[eventIdentifier] = createEventWrapperFor(eventKey, eventHandler);
-          getWcRef().current.addEventListener(eventKey, eventRegistryWrapped.current[eventIdentifier]);
-          eventRegistry.current[eventIdentifier] = eventHandler;
-        } else if (eventRegistry.current[eventIdentifier] && !eventHandler) {
-          getWcRef().current.removeEventListener(eventKey, eventRegistryWrapped.current[eventIdentifier]);
-        }
-      });
     };
 
     const getRegularProps = () => {
+      if (getWcRef().current) {
+        bindEvents();
+      }
+
       const regularProps = {};
       const slotProps = {};
 

packages/main/src/webComponents/Button/index.tsx

@@ -1,4 +1,3 @@
-import { addCustomCSS } from '@ui5/webcomponents-base/dist/Theming';
 import { Event } from '@ui5/webcomponents-react-base/lib/Event';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
@@ -16,14 +15,6 @@ export interface ButtonPropTypes extends WithWebComponentPropTypes {
   children?: string; // @generated
 }
 
-addCustomCSS(
-  'ui5-button',
-  `
-.ui5-button-root {
- font-family: var(--sapUiFontFamily,var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif));
-}`
-);
-
 const Button: FC<ButtonPropTypes> = withWebComponent<ButtonPropTypes>(UI5Button);
 
 Button.displayName = 'Button';

packages/main/src/webComponents/ToggleButton/index.tsx

@@ -1,4 +1,3 @@
-import { addCustomCSS } from '@ui5/webcomponents-base/dist/Theming';
 import { Event } from '@ui5/webcomponents-react-base/lib/Event';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
@@ -17,14 +16,6 @@ export interface ToggleButtonPropTypes extends WithWebComponentPropTypes {
   children?: string; // @generated
 }
 
-addCustomCSS(
-  'ui5-togglebutton',
-  `
-.ui5-button-root {
- font-family: var(--sapUiFontFamily,var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif));
-}`
-);
-
 const ToggleButton: FC<ToggleButtonPropTypes> = withWebComponent<ToggleButtonPropTypes>(UI5ToggleButton);
 
 ToggleButton.displayName = 'ToggleButton';

yarn.lock

@@ -3013,28 +3013,28 @@
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
   integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
 
-"@ui5/webcomponents-base@0.16.0":
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.16.0.tgz#4f1ed9f2957e88d57eb2c6a0b6d7f19b47cc0f3c"
-  integrity sha512-PqCN/aSFGGC1cPyZJEeQAb7BDTdrXAdNR8Jh9bFQXQ7SfVBVxbCfWslMGAhxOJqf7F3sx6v/8JKLTe+yXcCZAw==
+"@ui5/webcomponents-base@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.17.0.tgz#01d84e84f243739b1d4b9d29a232530799eb1947"
+  integrity sha512-uI6bom1c668ZsokFKcBHKX82NEozGcoCVMyYnl7FoLF6ANoYq+RRVQud/5V3PBBtUcjAcLU95pyVlPyFLMu+ZA==
   dependencies:
-    "@ui5/webcomponents-core" "0.16.0"
+    "@ui5/webcomponents-core" "0.17.0"
     lit-html "^1.0.0"
     regenerator-runtime "0.12.1"
     url-search-params-polyfill "^5.0.0"
 
-"@ui5/webcomponents-core@0.16.0":
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.16.0.tgz#d3d3f856df315b6e807dc4d6d170cbfefc9abb0f"
-  integrity sha512-RwTlmMTiCGU3n34rJMf28pzGurIB7HwZ7igO/4hIQMVoj+6A0EHf67Tp8RuiMZc8/FZO/pN9KRihlPiGb2QyPQ==
+"@ui5/webcomponents-core@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.17.0.tgz#c48fc23b900c8aca73d8d5c5b329a8eb2cc0c3cb"
+  integrity sha512-rdfF+Yg9RoqINrjDgM9LLHxT4XkCG+65wl8dU4OKMywxFhbderdlggDan/rYBSDb0TGIxvWqF7YFUDPVV42n3w==
 
-"@ui5/webcomponents@1.0.0-rc.3":
-  version "1.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-1.0.0-rc.3.tgz#fe349b3e35646414d1155cf6794c5b45fa56288c"
-  integrity sha512-5Zegf2Ntc6RnP+VxGIxQ+f6DoHedj6+9bKHc/XTwOXRwDZ7ogf0LzJ4nn54JT1ypwct0wXLgsCrmxtWCxj0smA==
+"@ui5/webcomponents@1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-1.0.0-rc.4.tgz#c8bba475f0df50a262050bb3adee58978f2fdd47"
+  integrity sha512-1fmak9wvZ4zXO7i89rbkah6jJdD12f02gff1xGtw3bl+YygGxohYfbiVG61oS6+1RpdYCQQgLV1/d+DsE+Tazw==
   dependencies:
-    "@ui5/webcomponents-base" "0.16.0"
-    "@ui5/webcomponents-core" "0.16.0"
+    "@ui5/webcomponents-base" "0.17.0"
+    "@ui5/webcomponents-core" "0.17.0"
 
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"