@luscii-healthtech/web-ui 2.30.0 → 2.31.0

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

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

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

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

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

@@ -6,12 +6,14 @@ export declare enum CheckboxState {
 export interface CheckboxListProps {
     groups: CheckboxGroup[];
     onChange: (event: CheckboxChangeEvent) => void;
+    hasDividers?: boolean;
     className?: string;
 }
 export interface CheckboxGroupProps {
     title?: string;
     items: CheckboxListItem[];
     onChange: (event: CheckboxChangeEvent) => void;
+    hasDividers?: boolean;
     className?: string;
     isCollapsed?: boolean;
 }

package/dist/web-ui-tailwind.css

@@ -1088,6 +1088,10 @@ video {
   border-width: 1px;
 }
 
+.border-b-0 {
+  border-bottom-width: 0;
+}
+
 .border-l-2 {
   border-left-width: 2px;
 }

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

@@ -4070,7 +4070,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("flex flex-row space-between cursor-pointer", className),
+    className: classNames("flex flex-row space-between cursor-pointer items-center", className),
     "item-id": id,
     onClick: handleItemClick
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -4097,6 +4097,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       items = _ref.items,
       onChange = _ref.onChange,
       className = _ref.className,
+      _ref$hasDividers = _ref.hasDividers,
+      hasDividers = _ref$hasDividers === void 0 ? false : _ref$hasDividers,
       _ref$isCollapsed = _ref.isCollapsed,
       isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed;
 
@@ -4179,10 +4181,19 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     return item == null ? void 0 : item.isChecked;
   }).length;
   var groupTitle = checkedItemsCount > 0 ? title + " (" + checkedItemsCount + ")" : title;
+  var itemClassName = hasDividers ? "py-3 last:border-b-0 border-b border-slate-200" : "my-1";
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("flex flex-col", className)
+    className: classNames("flex flex-col ", className, {
+      "last:border-b-0 border-b border-slate-200": hasDividers && isCollapsed,
+      "border-b-0": hasDividers && !isCollapsed
+    })
   }, title && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row my-1 items-center w-full space-between"
+    className: classNames("flex flex-row items-center w-full space-between", {
+      "border-b border-slate-200 py-3": hasDividers,
+      "my-1": !hasDividers
+    }, {
+      "last:border-b-0": hasDividers && isCollapsed
+    })
   }, /*#__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
@@ -4193,7 +4204,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   }), /*#__PURE__*/React__default.createElement(Text, {
     type: "strong",
     text: groupTitle || "",
-    className: " ml-4"
+    className: "ml-4"
   }), " "), /*#__PURE__*/React__default.createElement(Checkbox, {
     onChange: handleGroupClick,
     className: "ml-auto",
@@ -4208,7 +4219,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       onChange: onChange,
       isChecked: item.isChecked,
       isDisabled: item.isDisabled,
-      className: "ml-10 my-1"
+      className: classNames("ml-10", itemClassName)
     });
   }));
 };
@@ -4216,7 +4227,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
 var CheckboxList = function CheckboxList(_ref) {
   var groups = _ref.groups,
       onChange = _ref.onChange,
-      className = _ref.className;
+      className = _ref.className,
+      _ref$hasDividers = _ref.hasDividers,
+      hasDividers = _ref$hasDividers === void 0 ? false : _ref$hasDividers;
+  var itemClassName = hasDividers ? "py-3 border-b border-slate-200 last:border-b-0" : "my-1";
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames("flex flex-col", className)
   }, (groups == null ? void 0 : groups.length) > 0 && groups.map(function (group) {
@@ -4226,7 +4240,8 @@ var CheckboxList = function CheckboxList(_ref) {
         items: group.items,
         title: group.title,
         isCollapsed: group.isCollapsed,
-        onChange: onChange
+        onChange: onChange,
+        hasDividers: hasDividers
       });
     } else {
       return group.items.map(function (item) {
@@ -4237,7 +4252,7 @@ var CheckboxList = function CheckboxList(_ref) {
           onChange: onChange,
           isChecked: item.isChecked,
           isDisabled: item.isDisabled,
-          className: "my-1"
+          className: itemClassName
         });
       });
     }