@luscii-healthtech/web-ui 2.48.2 → 2.49.1

package/dist/web-ui.esm.js

@@ -3555,22 +3555,6 @@ var TextLink = function TextLink(props) {
   }, props.text);
 };
 
-var DynamicIcon = function DynamicIcon(props) {
-  var icon = props.icon,
-      className = props.className;
-
-  if (typeof icon === "string") {
-    return /*#__PURE__*/React__default.createElement("img", {
-      src: icon,
-      className: className
-    });
-  }
-
-  return /*#__PURE__*/React__default.createElement(icon, {
-    className: className
-  });
-};
-
 var NotificationBanner = function NotificationBanner(props) {
   var _props$stretch = props.stretch,
       stretch = _props$stretch === void 0 ? true : _props$stretch,
@@ -3602,10 +3586,12 @@ var NotificationBanner = function NotificationBanner(props) {
     })
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classes
-  }, props.icon && /*#__PURE__*/React__default.createElement(DynamicIcon, {
-    className: "w-6 h-6 mr-3",
-    icon: props.icon
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }, props.icon && (typeof props.icon === "function" ? /*#__PURE__*/React__default.createElement(props.icon, {
+    className: "w-6 h-6 mr-3"
+  }) : /*#__PURE__*/React__default.createElement("img", {
+    src: props.icon,
+    className: "w-6 h-6 mr-3"
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col"
   }, props.children, (props.text || props.linkProps) && /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row items-center"
@@ -7577,7 +7563,7 @@ var FormFieldErrorMessages = function FormFieldErrorMessages(props) {
  * Includes the default error handling from react-hook-form.
  */
 
-function FormFieldDecorator(_ref) {
+function FormFieldLabeler(_ref) {
   var name = _ref.name,
       children = _ref.children,
       label = _ref.label,
@@ -7588,7 +7574,7 @@ function FormFieldDecorator(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames(decoratorClassname)
   }, label && /*#__PURE__*/React__default.createElement("label", {
-    className: "cweb-form-field-label block mb-1",
+    className: "block mb-1 cweb-form-field-label",
     htmlFor: name,
     "data-is-required": fieldRequired
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -7631,7 +7617,7 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
       decoratorClassname = _ref.decoratorClassname,
       fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
-  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
     name: name,
     fieldErrors: fieldErrors,
     fieldRequired: fieldRequired,
@@ -7668,7 +7654,7 @@ var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (_ref, inne
       decoratorClassname = _ref.decoratorClassname,
       fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
-  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
     name: name,
     fieldErrors: fieldErrors,
     fieldRequired: fieldRequired,
@@ -7706,7 +7692,7 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
       decoratorClassname = _ref.decoratorClassname,
       selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
-  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
     name: name,
     fieldErrors: fieldErrors,
     fieldRequired: fieldRequired,
@@ -7739,7 +7725,7 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
       decoratorClassname = _ref.decoratorClassname,
       fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
-  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
     name: name,
     fieldErrors: fieldErrors,
     fieldRequired: fieldRequired,
@@ -7788,7 +7774,7 @@ var FormFieldCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref, i
       decoratorClassname = _ref.decoratorClassname,
       fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
-  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
     name: name,
     fieldErrors: fieldErrors,
     fieldRequired: fieldRequired,
@@ -7822,6 +7808,84 @@ var FormFieldCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref, i
   }));
 });
 
+var FormFieldCheckboxList = function FormFieldCheckboxList(_ref) {
+  var control = _ref.control,
+      name = _ref.name,
+      rules = _ref.rules,
+      fieldErrors = _ref.fieldErrors,
+      fieldRequired = _ref.fieldRequired,
+      label = _ref.label,
+      info = _ref.info,
+      decoratorClassname = _ref.decoratorClassname,
+      _ref$fieldProps = _ref.fieldProps,
+      fieldProps = _ref$fieldProps === void 0 ? {
+    groups: [],
+    onChange: function onChange() {
+      return undefined;
+    }
+  } : _ref$fieldProps;
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
+    name: name,
+    fieldErrors: fieldErrors,
+    fieldRequired: fieldRequired,
+    label: label,
+    info: info,
+    decoratorClassname: decoratorClassname
+  }, /*#__PURE__*/React__default.createElement(Controller, {
+    name: name,
+    control: control,
+    rules: rules,
+    render: function render(_ref2) {
+      var _onChange = _ref2.onChange,
+          value = _ref2.value;
+      var className = fieldProps.className,
+          hasDividers = fieldProps.hasDividers;
+
+      var _useState = useState(value),
+          checkboxListValues = _useState[0],
+          setCheckboxListValues = _useState[1];
+
+      useEffect(function () {
+        setCheckboxListValues(value);
+      }, [value]);
+      return /*#__PURE__*/React__default.createElement(CheckboxList, {
+        groups: checkboxListValues,
+        hasDividers: hasDividers,
+        className: className,
+        onChange: function onChange(event) {
+          /**
+           * This needs to be asynchronously orchestrated
+           * because the CheckboxList component triggers multiple onChange
+           * events after each other when you click a group that checks/unchecks the items.
+           *
+           * By always relying on the previous state, React can make put all changes together in one go.
+           */
+          setCheckboxListValues(function (previousState) {
+            var newState = previousState.map(function (group) {
+              var newItems = group.items.map(function (item) {
+                if (item.id === event.id) {
+                  return _extends({}, item, {
+                    isChecked: event.newCheckedValue
+                  });
+                } else {
+                  return item;
+                }
+              });
+              return _extends({}, group, {
+                items: newItems
+              });
+            });
+
+            _onChange(newState);
+
+            return newState;
+          });
+        }
+      });
+    }
+  }));
+};
+
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
@@ -7963,6 +8027,21 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
         }));
       }
 
+    case "checkboxlist":
+      {
+        return /*#__PURE__*/React__default.createElement(FormFieldCheckboxList, _extends({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors,
+          type: "checkboxlist",
+          name: name,
+          rules: options,
+          control: control,
+          fieldProps: fieldProps
+        }));
+      }
+
     default:
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   }