@luscii-healthtech/web-ui 2.20.0 → 2.20.2

package/dist/web-ui.esm.js

@@ -20,7 +20,7 @@ import draftToHtml from 'draftjs-to-html';
 import htmlToDraft from 'html-to-draftjs';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import pick from 'lodash-es/pick';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form/dist/index.ie11';
 import { ErrorMessage } from '@hookform/error-message';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 
@@ -1346,7 +1346,7 @@ var SearchIcon = function SearchIcon(props) {
 var css_248z$5 = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$5);
 
-var _excluded$3 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "name", "value", "onChange", "isError"];
+var _excluded$3 = ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "icon", "name", "value", "onChange", "isError", "asFormField"];
 // Don't know why yet but it can be fixed later.
 
 var INPUT_TYPES = {
@@ -1373,6 +1373,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       value = _ref$value === void 0 ? "" : _ref$value,
       onChange = _ref.onChange,
       isError = _ref.isError,
+      asFormField = _ref.asFormField,
       otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var hasNoExtraContent = withPrefix === "" && withSuffix === "";
@@ -1403,7 +1404,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var handleChangeEvent = function handleChangeEvent(event) {
     setInnerValue(event.currentTarget.value); // This allows backwards compatibility with our usages of the input
 
-    onChange == null ? void 0 : onChange({
+    onChange == null ? void 0 : onChange(asFormField ? event.currentTarget.value : {
       target: {
         name: name || "",
         value: event.currentTarget.value
@@ -1683,7 +1684,7 @@ var AccordionList = function AccordionList(_ref) {
     value: searchString,
     placeholder: searchPlaceholder,
     onChange: function onChange(e) {
-      return setSearchString(e.currentTarget.value);
+      setSearchString(typeof e === "string" ? e : e.currentTarget.value);
     }
   }), buttonProps && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SecondaryButton, _extends({}, buttonProps)))), filteredAccordionItems.length ? /*#__PURE__*/React__default.createElement(Accordion, _extends({}, accordionProps, {
     items: filteredAccordionItems
@@ -6218,23 +6219,25 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     name: name,
     control: control,
     rules: rules,
-    render: function render(_ref2) {
-      var field = _ref2.field;
+    render: function render(field) {
       return /*#__PURE__*/React__default.createElement(Input, _extends({}, fieldProps, field, {
         isError: hasError(name, fieldErrors),
+        asFormField: true,
         ref: innerRef
       }));
     }
   }));
 });
 
-var _excluded$n = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var _excluded$n = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 /**
  * Radio Group that can be used in any react-hook-form context.
  */
 
 var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
-  var name = _ref.name,
+  var control = _ref.control,
+      name = _ref.name,
+      rules = _ref.rules,
       fieldErrors = _ref.fieldErrors,
       fieldRequired = _ref.fieldRequired,
       label = _ref.label,
@@ -6249,11 +6252,22 @@ var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (_ref, inne
     label: label,
     info: info,
     decoratorClassname: decoratorClassname
-  }, /*#__PURE__*/React__default.createElement(RadioGroupV2, _extends({}, fieldProps, {
-    isError: hasError(name, fieldErrors),
-    ref: innerRef,
-    name: name
-  })));
+  }, /*#__PURE__*/React__default.createElement(Controller, {
+    name: name,
+    control: control,
+    rules: rules,
+    render: function render(_ref2) {
+      var onChange = _ref2.onChange,
+          value = _ref2.value;
+      return /*#__PURE__*/React__default.createElement(RadioGroupV2, _extends({}, fieldProps, {
+        isError: hasError(name, fieldErrors),
+        ref: innerRef,
+        name: name,
+        onChange: onChange,
+        defaultValue: value
+      }));
+    }
+  }));
 });
 
 var _excluded$o = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
@@ -6280,8 +6294,7 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
     name: name,
     control: control,
     rules: rules,
-    render: function render(_ref2) {
-      var field = _ref2.field;
+    render: function render(field) {
       return /*#__PURE__*/React__default.createElement(Select, _extends({}, selectProps, field, {
         isError: hasError(name, fieldErrors),
         ref: innerRef
@@ -6416,9 +6429,7 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
   }, [preselectedImage]);
 
   var handleSearchChange = function handleSearchChange(event) {
-    var _event$target$value;
-
-    var searchQuery = (_event$target$value = event.target.value) != null ? _event$target$value : "";
+    var searchQuery = event.target.value;
     setSearch(searchQuery);
     setFilteredCategories(categories.filter(function (category) {
       return isSubstring(category.folder, searchQuery);
@@ -6577,6 +6588,7 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
   }))), /*#__PURE__*/React__default.createElement(ModalBase, {
     size: "wide",
     onCloseClick: handleCloseModal,
+    scrollableContent: true,
     footerTrailingComponents: {
       primaryButtonProps: {
         onClick: handleConfirmSelection,
@@ -6596,7 +6608,7 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
     placeholder: localisation.search,
     onChange: handleSearchChange
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row flex-wrap items-center w-full overflow-y-auto max-h-120"
+    className: "flex flex-row flex-wrap items-center w-full"
   }, filteredCategories == null ? void 0 : filteredCategories.map(function (category) {
     return /*#__PURE__*/React__default.createElement(ImageCategory, {
       category: category,
@@ -6640,10 +6652,9 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
     name: name,
     control: control,
     rules: rules,
-    render: function render(_ref2) {
+    render: function render(field) {
       var _field$value;
 
-      var field = _ref2.field;
       useEffect(function () {
         if (fieldProps.preselectedImage && !field.value) {
           field.onChange({
@@ -6656,7 +6667,8 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
       }, []);
       return /*#__PURE__*/React__default.createElement(ImagePicker, _extends({}, fieldProps, field, {
         handleChange: function handleChange(e) {
-          field.onChange(e);
+          // On react-hook-forms v6, the onChange event wants the value only, not the event object.
+          field.onChange(e.target.value);
           fieldProps == null ? void 0 : fieldProps.handleChange == null ? void 0 : fieldProps.handleChange(e);
         },
         preselectedImage: (_field$value = field.value) != null ? _field$value : fieldProps.preselectedImage,
@@ -6725,8 +6737,7 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       _formFieldProps$field = formFieldProps.fieldProps,
       fieldProps = _formFieldProps$field === void 0 ? {} : _formFieldProps$field;
   var decoratorProps = pick(formFieldProps, ["label", "info", "decoratorClassname"]);
-  var register = useFormReturn.register,
-      control = useFormReturn.control,
+  var control = useFormReturn.control,
       errors = useFormReturn.formState.errors;
 
   switch (type) {
@@ -6780,12 +6791,18 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
       }));
 
     case "radioGroup":
-      return /*#__PURE__*/React__default.createElement(FormRadioGroup, _extends({
-        key: name
-      }, decoratorProps, {
-        fieldRequired: isRequired(options),
-        fieldErrors: errors
-      }, fieldProps, register(name, options)));
+      {
+        return /*#__PURE__*/React__default.createElement(FormRadioGroup, _extends({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors
+        }, fieldProps, {
+          name: name,
+          rules: options,
+          control: control
+        }));
+      }
 
     default:
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);