@luscii-healthtech/web-ui 2.48.2 → 2.49.0

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

@@ -1,5 +1,11 @@
-import { type FieldValues } from "react-hook-form/dist/index.ie11";
-import { FormProps, GenericFormProps } from "./form.types";
+import { type FieldValues, type UseFormMethods as UseFormReturn, DeepPartial, SubmitErrorHandler, SubmitHandler, UnpackNestedValue } from "react-hook-form/dist/index.ie11";
+import { FormFieldConfiguration } from "./form.types";
+export interface GenericFormProps<TFieldValues extends FieldValues> {
+    fields: FormFieldConfiguration<TFieldValues>[];
+    onValid: SubmitHandler<TFieldValues>;
+    onError?: SubmitErrorHandler<TFieldValues>;
+    defaultValues?: UnpackNestedValue<DeepPartial<TFieldValues>>;
+}
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
@@ -9,6 +15,10 @@ import { FormProps, GenericFormProps } from "./form.types";
  * TODO: make the buttons configurable.
  */
 export declare function GenericForm<TFieldValues extends FieldValues>({ fields, onValid, onError, defaultValues, }: GenericFormProps<TFieldValues>): JSX.Element;
+export interface FormProps<TFieldValues extends FieldValues> {
+    fields: FormFieldConfiguration<TFieldValues>[];
+    useFormReturn: UseFormReturn<TFieldValues>;
+}
 /**
  * Creates a Form based on the fields input.
  *

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

@@ -1,3 +1,9 @@
 import React from "react";
-import { FormCheckboxProps } from "./form.types";
+import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
+import { FieldCheckboxConfiguration, FormFieldLabelerWithFormProps } from "./form.types";
+interface FormCheckboxProps extends FieldCheckboxConfiguration, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+}
 export declare const FormFieldCheckbox: React.ForwardRefExoticComponent<FormCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
+import { FieldCheckboxListConfiguration, FormFieldLabelerWithFormProps } from "./form.types";
+interface FormCheckboxListProps extends FieldCheckboxListConfiguration, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+}
+export declare const FormFieldCheckboxList: React.FC<FormCheckboxListProps>;
+export {};

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

@@ -0,0 +1,7 @@
+import { FormFieldLabelerWithFormProps } from "./form.types";
+/**
+ * Decorator for any input component. Adds a label and additional information to be shown.
+ *
+ * Includes the default error handling from react-hook-form.
+ */
+export declare function FormFieldLabeler({ name, children, label, fieldRequired, info, fieldErrors, decoratorClassname, }: FormFieldLabelerWithFormProps): JSX.Element;

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

@@ -1,3 +1,9 @@
 import React from "react";
-import { FormImagePickerProps } from "./form.types";
+import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
+import { ImagePickerFieldConfiguration, FormFieldLabelerWithFormProps } from "./form.types";
+interface FormImagePickerProps extends ImagePickerFieldConfiguration, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+}
 export declare const FormImagePicker: React.ForwardRefExoticComponent<FormImagePickerProps & React.RefAttributes<any>>;
+export {};

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

@@ -1,6 +1,14 @@
-import React from "react";
-import { FormInputProps } from "./form.types";
+import React, { HTMLInputTypeAttribute } from "react";
+import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
+import { InputProps } from "../Input/Input";
+import { FormFieldLabelerWithFormProps } from "./form.types";
+interface FormInputProps extends Omit<InputProps, "name">, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+    type: Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
+}
 /**
  * Input field that can be used in any react-hook-form context.
  */
 export declare const FormInput: React.ForwardRefExoticComponent<FormInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -1,6 +1,13 @@
 import React from "react";
-import { FormRadioGroupProps } from "./form.types";
+import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
+import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
+import { FormFieldLabelerWithFormProps } from "./form.types";
+interface FormRadioGroupProps extends Omit<RadioGroupProps, "name">, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+}
 /**
  * Radio Group that can be used in any react-hook-form context.
  */
 export declare const FormRadioGroup: React.ForwardRefExoticComponent<FormRadioGroupProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -1,3 +1,10 @@
 import React from "react";
-import { FormSelectProps } from "./form.types";
+import { Control, RegisterOptions } from "react-hook-form/dist/index.ie11";
+import { SelectProps } from "../Select/Select";
+import { FormFieldLabelerWithFormProps } from "./form.types";
+interface FormSelectProps extends Omit<SelectProps, "name">, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+}
 export declare const FormSelect: React.ForwardRefExoticComponent<FormSelectProps & React.RefAttributes<any>>;
+export {};

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

@@ -1,4 +1,4 @@
-import { Control, DeepPartial, FieldErrors, FieldName, FieldValues, RegisterOptions, SubmitErrorHandler, SubmitHandler, UnpackNestedValue, UseFormMethods as UseFormReturn } from "react-hook-form/dist/index.ie11";
+import { FieldErrors, FieldName, FieldValues, RegisterOptions } from "react-hook-form/dist/index.ie11";
 import React, { HTMLInputTypeAttribute } from "react";
 import { InputProps } from "../Input/Input";
 import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
@@ -6,78 +6,69 @@ import { SelectProps } from "../Select/Select";
 import { ImagePickerProps } from "../ImagePicker/ImagePicker";
 import { PartialProperties } from "../../types/general.types";
 import { CheckboxProps } from "../Checkbox/Checkbox";
+import { CheckboxListProps } from "../CheckboxList/CheckboxList.types";
 export declare type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
 export declare type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
-export interface GenericFormProps<TFieldValues extends FieldValues> {
-    fields: FormFieldProps<TFieldValues>[];
-    onValid: SubmitHandler<TFieldValues>;
-    onError?: SubmitErrorHandler<TFieldValues>;
-    defaultValues?: UnpackNestedValue<DeepPartial<TFieldValues>>;
-}
-export interface FormProps<TFieldValues extends FieldValues> {
-    fields: FormFieldProps<TFieldValues>[];
-    useFormReturn: UseFormReturn<TFieldValues>;
-}
-interface FormFieldGenericProps<TFieldType> extends FormFieldDecoratorProps {
+interface FormFieldBaseConfiguration<TFieldType> extends FormFieldLabelerProps {
     name: FieldName<FieldValues>;
     options?: RegisterOptions;
     fieldProps?: TFieldType;
 }
-export interface FormFieldDecoratorProps {
+export interface FormFieldLabelerProps {
     label?: string;
     info?: string;
+    /**
+     * allow for custom styling of the labeler component
+     */
     decoratorClassname?: string;
 }
-export declare type FormFieldProps<TFieldValues> = FormFieldInputProps | FormFieldSelectProps | FormFieldImagePickerProps | FormFieldRadioGroupProps | FormFieldRowProps<TFieldValues> | FormFieldCheckboxBaseProps;
-export interface FormFieldRowProps<TFieldValues> extends Record<keyof FormFieldGenericProps<never>, never> {
+export declare type FormFieldConfiguration<TFieldValues> = FieldInputConfiguration | FieldSelectConfiguration | FieldImagePickerConfiguration | FieldRadioGroupConfiguration | FieldRowConfiguration<TFieldValues> | FieldCheckboxConfiguration | FieldCheckboxListConfiguration;
+/**
+ * @backwardscompatibility
+ * @deprecated - this is an alias for `FormFieldConfiguration`, for backwards compatibility the name can remain for now, but
+ * import `FormFieldConfiguration` whenever you need this type in the future.
+ */
+export declare type FormFieldProps<TFieldValues> = FormFieldConfiguration<TFieldValues>;
+export interface FieldRowConfiguration<TFieldValues> extends Record<keyof FormFieldBaseConfiguration<never>, never> {
     type: "row";
     key: string;
-    fields: FormFieldProps<TFieldValues>[];
+    fields: FormFieldConfiguration<TFieldValues>[];
 }
-export interface FormFieldInputProps extends FormFieldGenericProps<Omit<InputProps, "name">> {
+export interface FieldInputConfiguration extends FormFieldBaseConfiguration<Omit<InputProps, "name">> {
     type: AllowedTextInputTypes;
 }
-export interface FormFieldRadioGroupProps extends FormFieldGenericProps<Omit<RadioGroupProps, "name">> {
+export interface FieldRadioGroupConfiguration extends FormFieldBaseConfiguration<Omit<RadioGroupProps, "name">> {
     type: "radioGroup";
 }
-export interface FormFieldSelectProps extends FormFieldGenericProps<SelectProps> {
+export interface FieldSelectConfiguration extends FormFieldBaseConfiguration<SelectProps> {
     type: "select";
     fieldProps: SelectProps;
 }
-declare type ImagePickerFieldProps = PartialProperties<Omit<ImagePickerProps, "name">, "handleChange">;
-export interface FormFieldImagePickerProps extends FormFieldGenericProps<ImagePickerFieldProps> {
+export declare type ImagePickerFieldConfiguration = PartialProperties<Omit<ImagePickerProps, "name">, "handleChange">;
+export interface FieldImagePickerConfiguration extends FormFieldBaseConfiguration<ImagePickerFieldConfiguration> {
     type: "imagePicker";
-    fieldProps: ImagePickerFieldProps;
+    fieldProps: ImagePickerFieldConfiguration;
 }
-export interface FormFieldCheckboxBaseProps extends FormFieldGenericProps<Omit<CheckboxProps, "name" | "type">> {
+export interface FieldCheckboxConfiguration extends FormFieldBaseConfiguration<Omit<CheckboxProps, "name" | "type">> {
     type: "checkbox";
     variant?: CheckboxProps["type"];
 }
-export interface FormFieldDecoratorWithGeneratedProps extends FormFieldDecoratorProps {
+/**
+ * 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">> {
+    type: "checkboxlist";
+}
+/**
+ * This type is the base for every form field component wrapped in the `FormFieldLabeler` and `Control` from `react-form-hook`.
+ * This is your baseline for creating a new form field type. For reference, look at FormInput.tsx.
+ *
+ */
+export interface FormFieldLabelerWithFormProps extends FormFieldLabelerProps {
     name: string;
     fieldErrors: FieldErrors;
     fieldRequired: boolean;
     children?: React.ReactNode;
 }
-export interface FormInputProps extends Omit<InputProps, "name">, FormFieldDecoratorWithGeneratedProps {
-    control: Control;
-    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
-    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;
-    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
-}
-export interface FormImagePickerProps extends ImagePickerFieldProps, FormFieldDecoratorWithGeneratedProps {
-    control: Control;
-    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
-}
-export interface FormCheckboxProps extends FormFieldCheckboxBaseProps, FormFieldDecoratorWithGeneratedProps {
-    control: Control;
-    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
-}
 export {};

package/dist/index.d.ts

@@ -71,8 +71,7 @@ export { Timeline } from "./components/Timeline/Timeline";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 export { default as Text } from "./components/Text/Text";
 export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
-export { GenericForm, Form } from "./components/Form/Form";
-export { GenericFormProps, FormProps } from "./components/Form/form.types";
+export { GenericForm, Form, FormProps, GenericFormProps, } from "./components/Form/Form";
 export { Icon } from "./components/Icon";
 export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";

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

@@ -7585,7 +7585,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,
@@ -7596,7 +7596,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, {
@@ -7639,7 +7639,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,
@@ -7676,7 +7676,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,
@@ -7714,7 +7714,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,
@@ -7747,7 +7747,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,
@@ -7796,7 +7796,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,
@@ -7830,6 +7830,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(index_ie11.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 = React.useState(value),
+          checkboxListValues = _useState[0],
+          setCheckboxListValues = _useState[1];
+
+      React.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.
  *
@@ -7971,6 +8049,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);
   }