feat(pluggable-widgets-commons): add three state checkbox

Author: r0b1n

…election-helper-web/src/ui/CheckBox.scss …tawidgets/web/_three-state-checkbox.scsspackages/pluggableWidgets/selection-helper-web/src/ui/CheckBox.scss renamed to packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss packages/pluggableWidgets/selection-helper-web/src/ui/CheckBox.scss renamed to packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss

@@ -5,5 +5,6 @@
 @import "drop-down-sort";
 @import "gallery";
 @import "gallery-design-properties";
+@import "three-state-checkbox";
 @import "tree-node";
 @import "tree-node-design-properties";

packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss

@@ -1,5 +1,5 @@
 import { createElement, ReactElement, ReactNode, useMemo } from "react";
-import { CheckBox } from "./CheckBox";
+import { ThreeStateCheckBox } from "@mendix/pluggable-widgets-commons/components/web";
 
 interface Props {
     type: "checkbox" | "custom";
@@ -30,7 +30,7 @@ export function SelectionHelperComponent(props: Props): ReactElement {
                 </div>
             ) : (
                 <div className="selection-helper-checkbox mx-checkbox form-group label-after">
-                    <CheckBox id={id} value={props.status} onChange={props.onClick} />
+                    <ThreeStateCheckBox id={id} value={props.status} onChange={props.onClick} />
                     <label htmlFor={id} className="control-label">
                         {props.children}
                     </label>

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

@@ -1,13 +1,12 @@
 import { createElement, ReactElement, useEffect, useRef } from "react";
-import "../ui/CheckBox.scss";
 
-interface CheckBoxProps {
-    id: string;
+interface ThreeStateCheckBoxProps {
+    id?: string;
     value: "all" | "some" | "none";
     onChange?: () => void;
 }
 
-export function CheckBox({ id, value, onChange }: CheckBoxProps): ReactElement {
+export function ThreeStateCheckBox({ id, value, onChange }: ThreeStateCheckBoxProps): ReactElement {
     const checkboxRef = useRef<HTMLInputElement | null>(null);
     useEffect(() => {
         if (!checkboxRef.current) {

…n-helper-web/src/components/CheckBox.tsx …rc/components/web/ThreeStateCheckBox.tsxpackages/pluggableWidgets/selection-helper-web/src/components/CheckBox.tsx renamed to packages/shared/pluggable-widgets-commons/src/components/web/ThreeStateCheckBox.tsx packages/pluggableWidgets/selection-helper-web/src/components/CheckBox.tsx renamed to packages/shared/pluggable-widgets-commons/src/components/web/ThreeStateCheckBox.tsx

@@ -2,6 +2,7 @@ export * from "./components";
 export * from "./FilterSelector";
 export * from "./InfiniteBody";
 export * from "./Pagination";
+export * from "./ThreeStateCheckBox";
 export * from "./usePositionObserver";
 export * from "./utils";
 export * from "./preview";

packages/shared/pluggable-widgets-commons/src/components/web/index.ts

@@ -0,0 +1,88 @@
+input[type="checkbox"].three-state-checkbox {
+    position: relative !important; //Remove after mxui merge
+    width: 16px;
+    height: 16px;
+    margin: 0 !important; // Remove after mxui merge
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    transform: translateZ(0);
+
+    &:before,
+    &:after {
+        position: absolute;
+        display: block;
+        transition: all 0.3s ease;
+    }
+
+    &:before {
+        // Checkbox
+        width: 100%;
+        height: 100%;
+        content: "";
+        border: 1px solid #e7e7e9;
+        border-radius: 4px;
+        background-color: transparent;
+    }
+
+    &:not(:indeterminate):after {
+        // Checkmark
+        width: 8px;
+        height: 4px;
+        margin: 5px 4px;
+        transform: rotate(-45deg);
+        pointer-events: none;
+        border: 2px solid #ffffff;
+        border-top: 0;
+        border-right: 0;
+    }
+
+    &:indeterminate:after {
+        // Checkmark
+        width: 8px;
+        height: 4px;
+        margin: 5px 4px;
+        transform: rotate(0deg);
+        pointer-events: none;
+        border: 0 solid #ffffff;
+        border-bottom-width: 2px;
+        transition: border 0s;
+    }
+
+    &:not(:disabled):not(:checked):hover:after {
+        content: "";
+        border-color: #e7e7e9; // color of checkmark on hover
+    }
+
+    &:indeterminate:before,
+    &:checked:before {
+        border-color: #264ae5;
+        background-color: #264ae5;
+    }
+
+    &:indeterminate:after,
+    &:checked:after {
+        content: "";
+    }
+
+    &:disabled:before {
+        background-color: #f8f8f8;
+    }
+
+    &:checked:disabled:before {
+        border-color: transparent;
+        background-color: rgba(#264ae5, 0.4);
+    }
+
+    &:disabled:after,
+    &:checked:disabled:after {
+        border-color: #f8f8f8;
+    }
+
+    & + .control-label {
+        margin-left: 8px;
+    }
+}