@luscii-healthtech/web-ui 0.15.6 → 1.0.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export interface CheckboxProps {
     explanation?: string;
     type?: "regular" | "switch";
     isChecked?: boolean;
+    isIndeterminate?: boolean;
     isDisabled?: boolean;
     name?: string;
     value?: string;
@@ -13,5 +14,5 @@ export interface CheckboxProps {
     className?: string;
     error?: boolean;
 }
-export declare const Checkbox: ({ id, text, explanation, type, isChecked, isDisabled, name, value, onChange, className, error, }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ id, text, explanation, type, isChecked, isIndeterminate, isDisabled, name, value, onChange, className, error, }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/dist/components/CheckboxList/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckboxGroupProps } from "./CheckboxList.types";
+export declare const CheckboxGroup: ({ title, items, onChange, className }: CheckboxGroupProps) => JSX.Element;

package/dist/components/CheckboxList/CheckboxList.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CheckboxListProps } from "./CheckboxList.types";
+export { CheckboxListProps };
+export declare const CheckboxList: ({ groups, onChange, className, }: CheckboxListProps) => JSX.Element;
+export default CheckboxList;

package/dist/components/CheckboxList/CheckboxList.types.d.ts

@@ -0,0 +1,37 @@
+export declare enum CheckboxState {
+    CHECKED = "checked",
+    INDETERMINATE = "indeterminate",
+    UNCHECKED = "unchecked"
+}
+export interface CheckboxListProps {
+    groups: CheckboxGroup[];
+    onChange: (event: CheckboxChangeEvent) => void;
+    className?: string;
+}
+export interface CheckboxGroupProps {
+    title?: string;
+    items: CheckboxListItem[];
+    onChange: (event: CheckboxChangeEvent) => void;
+    className?: string;
+}
+export interface CheckboxGroupItemProps {
+    id: string;
+    label: string;
+    isChecked?: boolean;
+    onChange: (event: CheckboxChangeEvent) => void;
+    className?: string;
+}
+export interface CheckboxListItem {
+    id: string;
+    label: string;
+    isChecked?: boolean;
+    className?: string;
+}
+export interface CheckboxGroup {
+    title?: string;
+    items: CheckboxListItem[];
+}
+export interface CheckboxChangeEvent {
+    id: string;
+    newCheckedValue: boolean;
+}

package/dist/components/CheckboxList/CheckboxListItem.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckboxGroupItemProps } from "./CheckboxList.types";
+export declare const CheckboxListItem: ({ id, label, isChecked, onChange, className, }: CheckboxGroupItemProps) => JSX.Element;

package/dist/components/Icons/ChevronDownIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+export declare const ChevronDownIcon: (props: IconProps) => JSX.Element;

package/dist/components/Icons/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+export declare const ChevronRightIcon: (props: IconProps) => JSX.Element;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { TableFieldConfig, TableFieldContent, TableFieldText, TableFieldAction,
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
 export { List, ListProps, ListItemProps, OnAssetLoadErrorPayload, } from "./components/List/List";
+export { CheckboxList, CheckboxListProps, } from "./components/CheckboxList/CheckboxList";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";

package/dist/web-ui-tailwind.css

@@ -1269,6 +1269,11 @@ video {
   margin-right: 0;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1358,6 +1363,10 @@ video {
   margin-top: 2rem;
 }
 
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }

package/dist/web-ui.cjs.development.js

@@ -946,7 +946,7 @@ function CenteredHero(_ref) {
   })));
 }
 
-var css_248z$5 = ".cweb-checkbox {\n  outline: none;\n  transition: all 0.3s ease;\n}\n\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n}\n\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border: 1px solid #ff6266;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon {\n  display: block;\n}\n\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n  width: 56px;\n  height: 28px;\n  position: relative;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #d1d5db;\n  border-radius: 16px;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n  position: relative;\n  display: block;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  top: 4px;\n  left: 4px;\n  background-color: white;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa6;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n  left: 32px;\n}\n";
+var css_248z$5 = ".cweb-checkbox {\n  outline: none;\n  transition: all 0.3s ease;\n}\n\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n}\n\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border: 1px solid #ff6266;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon {\n  display: block;\n}\n\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n  width: 56px;\n  height: 28px;\n  position: relative;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #d1d5db;\n  border-radius: 16px;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n  position: relative;\n  display: block;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  top: 4px;\n  left: 4px;\n  background-color: white;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa6;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n  left: 32px;\n}\n";
 styleInject(css_248z$5);
 
 var Checkbox = function Checkbox(_ref) {
@@ -957,6 +957,8 @@ var Checkbox = function Checkbox(_ref) {
       type = _ref$type === void 0 ? "regular" : _ref$type,
       _ref$isChecked = _ref.isChecked,
       isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
+      _ref$isIndeterminate = _ref.isIndeterminate,
+      isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
       isDisabled = _ref.isDisabled,
       name = _ref.name,
       value = _ref.value,
@@ -969,12 +971,18 @@ var Checkbox = function Checkbox(_ref) {
       setChecked = _useState[1];
 
   var _useState2 = React.useState(false),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
+      indeterminate = _useState2[0],
+      setIndeterminate = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      isFocused = _useState3[0],
+      setIsFocused = _useState3[1];
+
+  var checkboxRef = React__default.useRef(null);
   var containerClassName = classNames("cweb-checkbox", className, {
     "is-focused": isFocused,
-    "is-checked": checked,
+    "is-checked": checked && !indeterminate,
+    "is-indeterminate": indeterminate,
     "opacity-50 cursor-not-allowed is-disabled": isDisabled,
     "type-regular": type === "regular",
     "type-switch": type === "switch",
@@ -982,10 +990,19 @@ var Checkbox = function Checkbox(_ref) {
   });
   React.useEffect(function () {
     setChecked(isChecked);
+    setIndeterminate(false);
   }, [isChecked]);
+  React.useEffect(function () {
+    setIndeterminate(isIndeterminate);
+  }, [isIndeterminate]);
+  React.useEffect(function () {
+    if (checkboxRef != null && checkboxRef.current) {
+      checkboxRef.current.indeterminate = !indeterminate;
+    }
+  }, [indeterminate]);
 
   var handleChange = function handleChange(event) {
-    setChecked(!checked);
+    setIndeterminate(false);
 
     if (onChange) {
       onChange(event);
@@ -1011,6 +1028,7 @@ var Checkbox = function Checkbox(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("input", {
     id: id,
+    ref: checkboxRef,
     "data-test-id": "checkbox-" + name,
     className: "cweb-checkbox-input",
     name: name,
@@ -1023,9 +1041,9 @@ var Checkbox = function Checkbox(_ref) {
     onChange: handleChange
   }), /*#__PURE__*/React__default.createElement("span", {
     className: classNames("cweb-checkbox-icon-container", "transition-colors duration-300", {
-      "bg-primary": checked,
-      "bg-white": !checked,
-      "hover:bg-primary-dark": checked,
+      "bg-primary": checked || indeterminate,
+      "bg-white": !checked && !indeterminate,
+      "hover:bg-primary-dark": checked || indeterminate,
       "outline-primary": isFocused,
       "cursor-not-allowed": isDisabled,
       "cursor-pointer": !isDisabled
@@ -2320,7 +2338,7 @@ function generateCustomStyles(hasError, isIE11) {
   };
 }
 
-var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props) {
+var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var className = props.className,
       styles = props.styles;
   var hasError = (className == null ? void 0 : className.includes("has-error")) || false;
@@ -2328,6 +2346,7 @@ var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props) {
   var customStyles = generateCustomStyles(hasError, isIE11);
   var mergedStyles = ReactSelect.mergeStyles(customStyles, styles);
   return /*#__PURE__*/React__default.createElement(ReactSelect__default, Object.assign({}, props, {
+    ref: ref,
     className: classNames("customized-select", className),
     styles: mergedStyles
   }));
@@ -2793,6 +2812,219 @@ var List = function List(_ref) {
   })));
 };
 
+var CheckboxListItem = function CheckboxListItem(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      isChecked = _ref.isChecked,
+      onChange = _ref.onChange,
+      className = _ref.className;
+
+  var _useState = React.useState(isChecked || false),
+      checked = _useState[0],
+      setChecked = _useState[1];
+
+  React.useEffect(function () {
+    setChecked(isChecked || false);
+  }, [isChecked]);
+
+  var handleItemClick = function handleItemClick() {
+    if (onChange) {
+      onChange({
+        id: id,
+        newCheckedValue: !checked
+      });
+    }
+
+    setChecked(!checked);
+  };
+
+  var handleCheckboxClick = function handleCheckboxClick(event) {
+    var targetId = event.target.id;
+    var newCheckedValue = event.target.checked;
+
+    if (onChange) {
+      onChange({
+        id: targetId,
+        newCheckedValue: newCheckedValue
+      });
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-row space-between cursor-pointer", className),
+    "item-id": id,
+    onClick: handleItemClick
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    text: label,
+    className: "mr-auto"
+  }), /*#__PURE__*/React__default.createElement(Checkbox, {
+    isChecked: checked,
+    onChange: handleCheckboxClick,
+    id: id
+  }));
+};
+
+var ChevronRightIcon = function ChevronRightIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z",
+    fill: "currentColor"
+  }));
+};
+
+var ChevronDownIcon = function ChevronDownIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M17.5995 8.99904C17.2095 8.60904 16.5795 8.60904 16.1895 8.99904L12.3095 12.879L8.42955 8.99904C8.03955 8.60904 7.40955 8.60904 7.01955 8.99904C6.62955 9.38904 6.62955 10.019 7.01955 10.409L11.6095 14.999C11.9995 15.389 12.6295 15.389 13.0195 14.999L17.6095 10.409C17.9895 10.029 17.9895 9.38904 17.5995 8.99904Z",
+    fill: "currentColor"
+  }));
+};
+
+var CheckboxState;
+
+(function (CheckboxState) {
+  CheckboxState["CHECKED"] = "checked";
+  CheckboxState["INDETERMINATE"] = "indeterminate";
+  CheckboxState["UNCHECKED"] = "unchecked";
+})(CheckboxState || (CheckboxState = {}));
+
+var CheckboxGroup = function CheckboxGroup(_ref) {
+  var title = _ref.title,
+      items = _ref.items,
+      onChange = _ref.onChange,
+      className = _ref.className;
+
+  var _useState = React.useState(CheckboxState.UNCHECKED),
+      groupCheckboxState = _useState[0],
+      setGroupCheckboxState = _useState[1];
+
+  var _useState2 = React.useState(true),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  React.useEffect(function () {
+    if ((items == null ? void 0 : items.length) > 0) {
+      var indeterminate = items.some(function (item) {
+        return item.isChecked !== items[0].isChecked;
+      });
+
+      if (!indeterminate && items[0].isChecked) {
+        setGroupCheckboxState(CheckboxState.CHECKED);
+      } else if (!indeterminate && !items[0].isChecked) {
+        setGroupCheckboxState(CheckboxState.UNCHECKED);
+      } else {
+        setGroupCheckboxState(CheckboxState.INDETERMINATE);
+      }
+    } else {
+      setGroupCheckboxState(CheckboxState.UNCHECKED);
+    }
+  }, [items]);
+
+  var handleGroupClick = function handleGroupClick() {
+    if ((groupCheckboxState === CheckboxState.CHECKED || groupCheckboxState === CheckboxState.INDETERMINATE) && onChange) {
+      //if checked or indeterminate >> make all items unchecked
+      items.forEach(function (item) {
+        return onChange({
+          id: item.id,
+          newCheckedValue: false
+        });
+      });
+    } else if (onChange) {
+      // else if unchecked >> make all items  checked
+      items.forEach(function (item) {
+        return onChange({
+          id: item.id,
+          newCheckedValue: true
+        });
+      });
+    }
+  };
+
+  var handleGroupCollapse = function handleGroupCollapse() {
+    setCollapsed(!collapsed);
+  };
+
+  var checkedItemsCount = items == null ? void 0 : items.filter(function (item) {
+    return item == null ? void 0 : item.isChecked;
+  }).length;
+  var groupTitle = checkedItemsCount > 0 ? title + " (" + checkedItemsCount + ")" : title;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-col", className)
+  }, title && /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row my-1 items-center w-full space-between"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-6 cursor-pointer mr-auto flex flex-row items-center text-slate-300 hover:text-slate-500 transition duration-300",
+    onClick: handleGroupCollapse
+  }, collapsed ? /*#__PURE__*/React__default.createElement(ChevronRightIcon, {
+    onClick: handleGroupCollapse
+  }) : /*#__PURE__*/React__default.createElement(ChevronDownIcon, {
+    onClick: handleGroupCollapse
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    type: "strong",
+    text: groupTitle || "",
+    className: " ml-4"
+  }), " :"), /*#__PURE__*/React__default.createElement(Checkbox, {
+    onChange: handleGroupClick,
+    className: "ml-auto",
+    isChecked: groupCheckboxState === CheckboxState.CHECKED,
+    isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE
+  })), !collapsed && items.map(function (item) {
+    return /*#__PURE__*/React__default.createElement(CheckboxListItem, {
+      key: item.id,
+      id: item.id,
+      label: item.label,
+      onChange: onChange,
+      isChecked: item.isChecked,
+      className: "ml-10 my-1"
+    });
+  }));
+};
+
+var CheckboxList = function CheckboxList(_ref) {
+  var groups = _ref.groups,
+      onChange = _ref.onChange,
+      className = _ref.className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-col", className)
+  }, (groups == null ? void 0 : groups.length) > 0 && groups.map(function (group) {
+    if (group.title) {
+      return /*#__PURE__*/React__default.createElement(CheckboxGroup, {
+        key: group.title,
+        items: group.items,
+        title: group.title,
+        onChange: onChange
+      });
+    } else {
+      return group.items.map(function (item) {
+        return /*#__PURE__*/React__default.createElement(CheckboxListItem, {
+          key: item.id,
+          id: item.id,
+          label: item.label,
+          onChange: onChange,
+          isChecked: item.isChecked,
+          className: "my-1"
+        });
+      });
+    }
+  }));
+};
+
 var TEXT_TYPE_OPTIONS = {
   DEFAULT: "default",
   STRONG: "strong",
@@ -5335,6 +5567,7 @@ exports.ChartIcon = ChartIcon;
 exports.ChatBoxIcon = ChatBoxIcon;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
+exports.CheckboxList = CheckboxList;
 exports.ChevronDoubleIcon = ChevronDoubleIcon;
 exports.ConfirmationDialog = ConfirmationDialog;
 exports.CrossIcon = CrossIcon;