@luscii-healthtech/web-ui 2.48.1 → 2.49.0

package/dist/components/ButtonV2/ButtonProps.type.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconProps } from "../Icons/types/IconProps.type";
+import type { IconKey, IconProps } from "../Icons/types/IconProps.type";
 import { TextColor, TextHoverColor } from "../Text/Text";
 /**
  * Properties that are present in all variants of the button
@@ -8,7 +8,7 @@ import { TextColor, TextHoverColor } from "../Text/Text";
 export interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     text?: string;
-    icon?: React.FunctionComponent<IconProps>;
+    icon?: React.FunctionComponent<IconProps> | IconKey;
     isDisabled?: boolean;
     className?: string;
 }

package/dist/components/ConfirmationDialog/ConfirmationDialogTitle.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { ConfirmationDialogTitleProps } from "./types/ConfirmationDialog.types";
+import type { ConfirmationDialogTitleProps } from "./types/ConfirmationDialog.types";
 export declare const ConfirmationDialogTitle: React.FC<ConfirmationDialogTitleProps>;

package/dist/components/ConfirmationDialog/types/ConfirmationDialog.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProps } from "../../Icons/types/IconProps.type";
+import type { IconKey, IconProps } from "../../Icons/types/IconProps.type";
 import type { NotificationBannerColor } from "../../NotificationBanner/NotificationBanner";
 interface ConfirmationDialogTexts {
     message: string | string[];
@@ -23,7 +23,7 @@ export interface ConfirmationDialogProps {
     isProcessing?: boolean;
     withTitle?: {
         title: string;
-        icon?: React.FC<IconProps>;
+        icon?: React.FC<IconProps> | IconKey;
     };
     choices?: {
         defaultChoice?: ConfirmationDialogChoice["value"];

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/components/Icon/Icon.d.ts

@@ -3,4 +3,11 @@ import { IconProps, IconKey } from "../Icons/types/IconProps.type";
 export declare const Icon: React.FC<{
     name: IconKey;
 } & IconProps>;
+/**
+ * This is a temporary component to transition the way we pass icons to components.
+ * Once all components are passed an IconKey instead of a function component we can replace it with the Icon component.
+ */
+export declare const IconComponentOrKey: React.FC<{
+    name: React.FunctionComponent<IconProps> | IconKey;
+} & IconProps>;
 export default Icon;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { AllowedTextInputTypes } from "../Form/form.types";
-import { IconProps } from "../Icons/types/IconProps.type";
+import type { IconKey, IconProps } from "../Icons/types/IconProps.type";
 import { FormFieldWidth } from "../Form/form.types";
 import "./Input.css";
 export declare const INPUT_TYPES: Record<string, AllowedTextInputTypes>;
@@ -27,7 +27,7 @@ export interface InputProps extends CustomHTMLInputProps {
     isDisabled?: boolean;
     withPrefix?: string;
     withSuffix?: string;
-    icon?: React.VoidFunctionComponent<IconProps>;
+    icon?: React.FC<IconProps> | IconKey;
     width?: FormFieldWidth;
     /**
      * Check the `asFormField` prop of this component to understand why this signature.

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";