@luscii-healthtech/web-ui 2.57.0 → 2.58.0

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

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

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

@@ -9,14 +9,22 @@ export interface CheckboxListProps {
     hasDividers?: boolean;
     className?: string;
 }
-export interface CheckboxGroupProps {
+declare type WithCollapsible = {
+    /**
+     * When `false`, will prevent the checkbox list from being collapsed (also disabling clicking to expand/collapse)
+     * in the component and it will be displayed expanded by default.
+     * @default true
+     */
+    collapsible?: boolean;
+};
+export declare type CheckboxGroupProps = {
     title?: string;
     items: CheckboxListItem[];
     onChange: (event: CheckboxChangeEvent) => void;
     hasDividers?: boolean;
     className?: string;
     isCollapsed?: boolean;
-}
+} & WithCollapsible;
 export interface CheckboxGroupItemProps {
     id: string;
     label: string;
@@ -32,12 +40,13 @@ export interface CheckboxListItem {
     isDisabled?: boolean;
     className?: string;
 }
-export interface CheckboxGroup {
+export declare type CheckboxGroup = {
     title?: string;
     items: CheckboxListItem[];
     isCollapsed?: boolean;
-}
+} & WithCollapsible;
 export interface CheckboxChangeEvent {
     id: string;
     newCheckedValue: boolean;
 }
+export {};

package/dist/components/Form/form.types.d.ts

@@ -66,7 +66,7 @@ export interface FieldCheckboxConfiguration extends FormFieldBaseConfiguration<O
  * Omiting `groups` and `onChange` here because these will be handled by
  * the `Control` component from react-hook-form.
  */
-export interface FieldCheckboxListConfiguration extends FormFieldBaseConfiguration<Omit<CheckboxListProps, "groups" | "onChange">> {
+export interface FieldCheckboxListConfiguration extends FormFieldBaseConfiguration<Pick<CheckboxListProps, "hasDividers" | "className">> {
     type: "checkboxlist";
 }
 /**

package/dist/web-ui-tailwind.css

@@ -1528,6 +1528,10 @@ video {
   margin-top: 1.25rem;
 }
 
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }

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

@@ -5678,13 +5678,20 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       _ref$hasDividers = _ref.hasDividers,
       hasDividers = _ref$hasDividers === void 0 ? false : _ref$hasDividers,
       _ref$isCollapsed = _ref.isCollapsed,
-      isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed;
+      isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed,
+      _ref$collapsible = _ref.collapsible,
+      collapsible = _ref$collapsible === void 0 ? true : _ref$collapsible;
 
   var _useState = React.useState(CheckboxState.UNCHECKED),
       groupCheckboxState = _useState[0],
       setGroupCheckboxState = _useState[1];
+  /**
+   * If the prop `collapsible` is set to false, the default state of this list will
+   * be expanded, and no change event can update that state.
+   */
 
-  var _useState2 = React.useState(isCollapsed),
+
+  var _useState2 = React.useState(collapsible ? isCollapsed : false),
       collapsed = _useState2[0],
       setCollapsed = _useState2[1];
 
@@ -5752,7 +5759,9 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       event.stopPropagation();
     }
 
-    setCollapsed(!collapsed);
+    if (collapsible) {
+      setCollapsed(!collapsed);
+    }
   };
 
   var checkedItemsCount = items == null ? void 0 : items.filter(function (item) {
@@ -5760,6 +5769,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   }).length;
   var groupTitle = checkedItemsCount > 0 ? title + " (" + checkedItemsCount + ")" : title;
   var itemClassName = hasDividers ? "py-3 last:border-b-0 border-b border-slate-200" : "my-1";
+  var CollapseStateChevron = collapsed ? ChevronRightIcon : ChevronDownIcon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames("flex flex-col ", className, {
       "last:border-b-0 border-b border-slate-200": hasDividers && isCollapsed,
@@ -5775,14 +5785,15 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   }, /*#__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, {
+  }, collapsible && /*#__PURE__*/React__default.createElement(CollapseStateChevron, {
     onClick: handleGroupCollapse
   }), /*#__PURE__*/React__default.createElement(Text, {
     type: "strong",
     text: groupTitle || "",
-    className: "ml-4"
+    className: classNames({
+      "ml-4": collapsible,
+      "ml-1": !collapsible
+    })
   }), " "), /*#__PURE__*/React__default.createElement(Checkbox, {
     onChange: handleGroupClick,
     className: "ml-auto",
@@ -5797,7 +5808,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       onChange: onChange,
       isChecked: item.isChecked,
       isDisabled: item.isDisabled,
-      className: classNames("ml-10", itemClassName)
+      className: classNames({
+        "ml-10": collapsible,
+        "ml-5": !collapsible
+      }, itemClassName)
     });
   }));
 };
@@ -5818,6 +5832,7 @@ var CheckboxList = function CheckboxList(_ref) {
         items: group.items,
         title: group.title,
         isCollapsed: group.isCollapsed,
+        collapsible: group.collapsible,
         onChange: onChange,
         hasDividers: hasDividers
       });