@luscii-healthtech/web-ui 2.20.0 → 2.20.2

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { type FieldValues } from "react-hook-form/dist/index.ie11";
 import { FormProps, GenericFormProps } from "./form.types";
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
@@ -8,7 +9,7 @@ import { FormProps, GenericFormProps } from "./form.types";
  *
  * TODO: make the buttons configurable.
  */
-export declare function GenericForm<TFieldValues>({ fields, onValid, onError, defaultValues, }: GenericFormProps<TFieldValues>): JSX.Element;
+export declare function GenericForm<TFieldValues extends FieldValues>({ fields, onValid, onError, defaultValues, }: GenericFormProps<TFieldValues>): JSX.Element;
 /**
  * Creates a Form based on the fields input.
  *
@@ -16,4 +17,4 @@ export declare function GenericForm<TFieldValues>({ fields, onValid, onError, de
  *
  * This allows you to use and modify the useFormReturn before injecting it here.
  */
-export declare function Form<TFieldValues, TContext>({ fields, useFormReturn, }: FormProps<TFieldValues, TContext>): JSX.Element;
+export declare function Form<TFieldValues extends FieldValues>({ fields, useFormReturn, }: FormProps<TFieldValues>): JSX.Element;

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

@@ -1,3 +1,3 @@
-import { FieldErrors, RegisterOptions } from "react-hook-form";
+import { FieldErrors, RegisterOptions } from "react-hook-form/dist/index.ie11";
 export declare const hasError: (name?: string, errors?: FieldErrors) => boolean;
 export declare const isRequired: (options?: RegisterOptions) => boolean;

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

@@ -1,4 +1,4 @@
-import { Control, DeepPartial, FieldErrors, FieldPath, FieldValues, RegisterOptions, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { Control, DeepPartial, FieldErrors, FieldName, FieldValues, RegisterOptions, SubmitErrorHandler, SubmitHandler, UnpackNestedValue, UseFormMethods as UseFormReturn } from "react-hook-form/dist/index.ie11";
 import React, { HTMLInputTypeAttribute } from "react";
 import { InputProps } from "../Input/Input";
 import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
@@ -9,14 +9,14 @@ export interface GenericFormProps<TFieldValues extends FieldValues> {
     fields: FormFieldProps<TFieldValues>[];
     onValid: SubmitHandler<TFieldValues>;
     onError?: SubmitErrorHandler<TFieldValues>;
-    defaultValues?: DeepPartial<TFieldValues>;
+    defaultValues?: UnpackNestedValue<DeepPartial<TFieldValues>>;
 }
-export interface FormProps<TFieldValues extends FieldValues, TContext> {
+export interface FormProps<TFieldValues extends FieldValues> {
     fields: FormFieldProps<TFieldValues>[];
-    useFormReturn: UseFormReturn<TFieldValues, TContext>;
+    useFormReturn: UseFormReturn<TFieldValues>;
 }
-interface FormFieldGenericProps<TFieldType, TFieldValues> extends FormFieldDecoratorProps {
-    name: FieldPath<TFieldValues>;
+interface FormFieldGenericProps<TFieldType> extends FormFieldDecoratorProps {
+    name: FieldName<FieldValues>;
     options?: RegisterOptions;
     fieldProps?: TFieldType;
 }
@@ -25,24 +25,24 @@ export interface FormFieldDecoratorProps {
     info?: string;
     decoratorClassname?: string;
 }
-export declare type FormFieldProps<TFieldValues> = FormFieldInputProps<TFieldValues> | FormFieldSelectProps<TFieldValues> | FormFieldImagePickerProps<TFieldValues> | FormFieldRadioGroupProps<TFieldValues> | FormFieldRowProps<TFieldValues>;
-export interface FormFieldRowProps<TFieldValues> extends Record<keyof FormFieldGenericProps<never, TFieldValues>, never> {
+export declare type FormFieldProps<TFieldValues> = FormFieldInputProps | FormFieldSelectProps | FormFieldImagePickerProps | FormFieldRadioGroupProps | FormFieldRowProps<TFieldValues>;
+export interface FormFieldRowProps<TFieldValues> extends Record<keyof FormFieldGenericProps<never>, never> {
     type: "row";
     key: string;
     fields: FormFieldProps<TFieldValues>[];
 }
-export interface FormFieldInputProps<TFieldValues> extends FormFieldGenericProps<Omit<InputProps, "name">, TFieldValues> {
+export interface FormFieldInputProps extends FormFieldGenericProps<Omit<InputProps, "name">> {
     type: AllowedTextInputTypes;
 }
-export interface FormFieldRadioGroupProps<TFieldValues> extends FormFieldGenericProps<Omit<RadioGroupProps, "name">, TFieldValues> {
+export interface FormFieldRadioGroupProps extends FormFieldGenericProps<Omit<RadioGroupProps, "name">> {
     type: "radioGroup";
 }
-export interface FormFieldSelectProps<TFieldValues> extends FormFieldGenericProps<SelectProps, TFieldValues> {
+export interface FormFieldSelectProps extends FormFieldGenericProps<SelectProps> {
     type: "select";
     fieldProps: SelectProps;
 }
 declare type ImagePickerFieldProps = Omit<ImagePickerProps, "name" | "handleChange"> & Partial<Pick<ImagePickerProps, "handleChange">>;
-export interface FormFieldImagePickerProps<TFieldValues> extends FormFieldGenericProps<ImagePickerFieldProps, TFieldValues> {
+export interface FormFieldImagePickerProps extends FormFieldGenericProps<ImagePickerFieldProps> {
     type: "imagePicker";
     fieldProps: ImagePickerFieldProps;
 }
@@ -58,6 +58,8 @@ export interface FormInputProps extends Omit<InputProps, "name">, FormFieldDecor
     type: Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
 }
 export interface FormRadioGroupProps extends Omit<RadioGroupProps, "name">, FormFieldDecoratorWithGeneratedProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
 }
 export interface FormSelectProps extends Omit<SelectProps, "name">, FormFieldDecoratorWithGeneratedProps {
     control: Control;

package/dist/components/Input/Input.d.ts

@@ -10,7 +10,7 @@ export declare const INPUT_TYPES: Record<string, AllowedTextInputTypes>;
 declare type CustomHTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "ref"> & {
     isError?: boolean;
 };
-declare type FakeEventTarget = {
+export declare type FakeEventTarget = {
     target: {
         value: string;
         name: string;
@@ -27,7 +27,29 @@ export interface InputProps extends CustomHTMLInputProps {
     withPrefix?: string;
     withSuffix?: string;
     icon?: React.VoidFunctionComponent<IconProps>;
-    onChange?: (event: FakeEventTarget) => void;
+    /**
+     * Check the `asFormField` prop of this component to understand why this signature.
+     */
+    onChange?: (event: FakeEventTarget | string) => void;
+    /**
+     * ### TO BE USED WHEN INSIDE REACT-HOOK-FORM
+     *
+     * react-hook-form uses the onChange event differently.
+     * Instead of passing an `event` object, it uses the value itself from the callback.
+     *
+     * So we need to use this flag to determine how to call the onChange callback.
+     *
+     * @example
+     *
+     * // In react-hook-forms:
+     *
+     * onChange({target: { name: 'myInput' }, value: 'text'}) // -> this whole object will be set as the value
+     *
+     * // so instead do:
+     *
+     * onChange('text') // -> 🤝
+     */
+    asFormField?: boolean;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/web-ui-tailwind.css

@@ -1517,10 +1517,6 @@ video {
   max-height: 19.5rem;
 }
 
-.max-h-120 {
-  max-height: 30rem;
-}
-
 .max-h-135 {
   max-height: 33.75rem;
 }

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

@@ -28,7 +28,7 @@ var draftToHtml = _interopDefault(require('draftjs-to-html'));
 var htmlToDraft = _interopDefault(require('html-to-draftjs'));
 require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
 var pick = _interopDefault(require('lodash/pick'));
-var reactHookForm = require('react-hook-form');
+var index_ie11 = require('react-hook-form/dist/index.ie11');
 var errorMessage = require('@hookform/error-message');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 
@@ -1354,7 +1354,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 = {
@@ -1381,6 +1381,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 === "";
@@ -1411,7 +1412,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
@@ -1691,7 +1692,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
@@ -6222,27 +6223,29 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     label: label,
     info: info,
     decoratorClassname: decoratorClassname
-  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+  }, /*#__PURE__*/React__default.createElement(index_ie11.Controller, {
     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,
@@ -6257,11 +6260,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(index_ie11.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"];
@@ -6284,12 +6298,11 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
     label: label,
     info: info,
     decoratorClassname: decoratorClassname
-  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+  }, /*#__PURE__*/React__default.createElement(index_ie11.Controller, {
     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
@@ -6424,9 +6437,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);
@@ -6585,6 +6596,7 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
   }))), /*#__PURE__*/React__default.createElement(ModalBase, {
     size: "wide",
     onCloseClick: handleCloseModal,
+    scrollableContent: true,
     footerTrailingComponents: {
       primaryButtonProps: {
         onClick: handleConfirmSelection,
@@ -6604,7 +6616,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,
@@ -6644,14 +6656,13 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
     label: label,
     info: info,
     decoratorClassname: decoratorClassname
-  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+  }, /*#__PURE__*/React__default.createElement(index_ie11.Controller, {
     name: name,
     control: control,
     rules: rules,
-    render: function render(_ref2) {
+    render: function render(field) {
       var _field$value;
 
-      var field = _ref2.field;
       React.useEffect(function () {
         if (fieldProps.preselectedImage && !field.value) {
           field.onChange({
@@ -6664,7 +6675,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,
@@ -6688,7 +6700,7 @@ function GenericForm(_ref) {
       onValid = _ref.onValid,
       onError = _ref.onError,
       defaultValues = _ref.defaultValues;
-  var useFormReturn = reactHookForm.useForm({
+  var useFormReturn = index_ie11.useForm({
     criteriaMode: "all",
     defaultValues: defaultValues
   });
@@ -6733,8 +6745,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) {
@@ -6788,12 +6799,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);