@luscii-healthtech/web-ui 2.48.2 → 2.49.0

package/dist/web-ui.esm.js

@@ -7577,7 +7577,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 +7588,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 +7631,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 +7668,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 +7706,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 +7739,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 +7788,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 +7822,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 +8041,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);
   }