fix(selection-helper-web): fix missing class and style props (#460)

Author: r0b1n

packages/pluggableWidgets/selection-helper-web/package.json

@@ -31,6 +31,7 @@
     "build": "pluggable-widgets-tools build:web",
     "format": "prettier --write .",
     "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+    "release": "pluggable-widgets-tools release:ts",
     "verify": "rui-verify-package-format",
     "update-changelog": "rui-update-changelog-widget"
   },

packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.editorPreview.tsx

@@ -4,7 +4,12 @@ import { SelectionHelperComponent } from "./components/SelectionHelperComponent"
 
 export function preview(props: SelectionHelperPreviewProps): ReactElement {
     return (
-        <SelectionHelperComponent type={props.renderStyle} status="some">
+        <SelectionHelperComponent
+            type={props.renderStyle}
+            status="some"
+            className={props.class}
+            cssStyles={props.styleObject}
+        >
             {props.renderStyle === "custom"
                 ? [
                       <props.customNoneSelected.renderer key={"none"} caption={"No items selected: Place widgets here"}>

packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.tsx

@@ -18,7 +18,13 @@ export function SelectionHelper(props: SelectionHelperContainerProps): ReactElem
     const selection = contextValue.value;
 
     return (
-        <SelectionHelperComponent type={props.renderStyle} status={selection.status} onClick={selection.toggle}>
+        <SelectionHelperComponent
+            type={props.renderStyle}
+            status={selection.status}
+            onClick={selection.toggle}
+            className={props.class}
+            cssStyles={props.style}
+        >
             {selection.status === "all" && props.customAllSelected}
             {selection.status === "some" && props.customSomeSelected}
             {selection.status === "none" && props.customNoneSelected}

packages/pluggableWidgets/selection-helper-web/src/components/SelectionHelperComponent.tsx

@@ -1,11 +1,13 @@
-import { createElement, ReactElement, ReactNode, useMemo } from "react";
+import { createElement, CSSProperties, ReactElement, ReactNode, useMemo } from "react";
 import { ThreeStateCheckBox } from "@mendix/pluggable-widgets-commons/components/web";
 
 interface Props {
     type: "checkbox" | "custom";
     status: "all" | "some" | "none";
     onClick?: () => void;
     children: ReactNode;
+    className: string;
+    cssStyles?: CSSProperties;
 }
 
 export function SelectionHelperComponent(props: Props): ReactElement {
@@ -14,7 +16,7 @@ export function SelectionHelperComponent(props: Props): ReactElement {
     }, []);
 
     return (
-        <div className="widget-selection-helper">
+        <div className={`widget-selection-helper ${props.className}`} style={props.cssStyles}>
             {props.type === "custom" ? (
                 <div
                     className="selection-helper-custom"