@luscii-healthtech/web-ui 2.16.4 → 2.17.0

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

@@ -19,6 +19,7 @@ export interface CheckboxGroupItemProps {
     id: string;
     label: string;
     isChecked?: boolean;
+    isDisabled?: boolean;
     onChange: (event: CheckboxChangeEvent) => void;
     className?: string;
 }
@@ -26,6 +27,7 @@ export interface CheckboxListItem {
     id: string;
     label: string;
     isChecked?: boolean;
+    isDisabled?: boolean;
     className?: string;
 }
 export interface CheckboxGroup {

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

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

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

@@ -4022,6 +4022,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
   var id = _ref.id,
       label = _ref.label,
       isChecked = _ref.isChecked,
+      isDisabled = _ref.isDisabled,
       onChange = _ref.onChange,
       className = _ref.className;
 
@@ -4036,6 +4037,10 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
   var handleItemClick = function handleItemClick(event) {
     event.stopPropagation();
 
+    if (isDisabled) {
+      return;
+    }
+
     if (onChange) {
       onChange({
         id: id,
@@ -4068,6 +4073,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     className: "mr-auto"
   }), /*#__PURE__*/React__default.createElement(Checkbox, {
     isChecked: checked,
+    isDisabled: isDisabled,
     onChange: handleCheckboxClick,
     id: id
   }));
@@ -4097,30 +4103,49 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       collapsed = _useState2[0],
       setCollapsed = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      isDisabled = _useState3[0],
+      setIsDisabled = _useState3[1];
+
   React.useEffect(function () {
-    if ((items == null ? void 0 : items.length) > 0) {
-      var indeterminate = items.some(function (item) {
-        return item.isChecked !== items[0].isChecked;
-      });
+    var enabledItems = items.filter(function (item) {
+      return !item.isDisabled;
+    });
 
-      if (!indeterminate && items[0].isChecked) {
-        setGroupCheckboxState(CheckboxState.CHECKED);
-      } else if (!indeterminate && !items[0].isChecked) {
-        setGroupCheckboxState(CheckboxState.UNCHECKED);
-      } else {
-        setGroupCheckboxState(CheckboxState.INDETERMINATE);
-      }
-    } else {
+    if (enabledItems.length === 0) {
       setGroupCheckboxState(CheckboxState.UNCHECKED);
+      return;
     }
+
+    var indeterminate = enabledItems.some(function (item) {
+      return item.isChecked !== enabledItems[0].isChecked;
+    });
+
+    if (indeterminate) {
+      setGroupCheckboxState(CheckboxState.INDETERMINATE);
+      return;
+    }
+
+    if (enabledItems[0].isChecked) {
+      setGroupCheckboxState(CheckboxState.CHECKED);
+    } else if (!enabledItems[0].isChecked) {
+      setGroupCheckboxState(CheckboxState.UNCHECKED);
+    }
+
+    setIsDisabled(!enabledItems.some(function (item) {
+      return !item.isDisabled;
+    }));
   }, [items]);
 
   var handleGroupClick = function handleGroupClick(event) {
     event.stopPropagation();
+    var enabledItems = items.filter(function (item) {
+      return !item.isDisabled;
+    });
 
     if ((groupCheckboxState === CheckboxState.CHECKED || groupCheckboxState === CheckboxState.INDETERMINATE) && onChange) {
       //if checked or indeterminate >> make all items unchecked
-      items.forEach(function (item) {
+      enabledItems.forEach(function (item) {
         return onChange({
           id: item.id,
           newCheckedValue: false
@@ -4128,7 +4153,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       });
     } else if (onChange) {
       // else if unchecked >> make all items  checked
-      items.forEach(function (item) {
+      enabledItems.forEach(function (item) {
         return onChange({
           id: item.id,
           newCheckedValue: true
@@ -4168,6 +4193,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     onChange: handleGroupClick,
     className: "ml-auto",
     isChecked: groupCheckboxState === CheckboxState.CHECKED,
+    isDisabled: isDisabled,
     isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE
   })), !collapsed && items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(CheckboxListItem, {
@@ -4176,6 +4202,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       label: item.label,
       onChange: onChange,
       isChecked: item.isChecked,
+      isDisabled: item.isDisabled,
       className: "ml-10 my-1"
     });
   }));
@@ -4204,6 +4231,7 @@ var CheckboxList = function CheckboxList(_ref) {
           label: item.label,
           onChange: onChange,
           isChecked: item.isChecked,
+          isDisabled: item.isDisabled,
           className: "my-1"
         });
       });