@chris-c-brine/rhf-mui-kit 0.2.0 → 0.5.0

package/dist/components/AutocompleteElementDisplay.d.ts

@@ -2,10 +2,8 @@ import { type AutocompleteElementProps } from "react-hook-form-mui";
 import { type ChipTypeMap } from "@mui/material";
 import type { FieldPath, FieldValues } from "react-hook-form";
 import { type ElementType } from "react";
-export type AutocompleteElementDisplayProps<TValue, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends ElementType = ChipTypeMap["defaultComponent"], TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = AutocompleteElementProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName> & Viewable;
-export declare const AutocompleteElementDisplay: <TValue, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends ElementType = ChipTypeMap["defaultComponent"], TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ viewOnly, disableUnderline, textFieldProps, autocompleteProps, ...props }: AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
-type Viewable = {
+export type AutocompleteElementDisplayProps<TValue, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends ElementType = ChipTypeMap["defaultComponent"], TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = AutocompleteElementProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName> & {
     viewOnly?: boolean;
     disableUnderline?: boolean;
 };
-export {};
+export declare const AutocompleteElementDisplay: <TValue, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends ElementType = ChipTypeMap["defaultComponent"], TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ viewOnly, disableUnderline, textFieldProps, autocompleteProps, ...props }: AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AutocompleteElementDisplay.js

@@ -2,30 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { AutocompleteElement } from "react-hook-form-mui";
 import { useMemo } from "react";
 import lodash from "lodash";
+import { getTextElementDisplayProps } from "../utils";
 const { merge } = lodash;
-export const AutocompleteElementDisplay = ({ viewOnly, disableUnderline, textFieldProps, autocompleteProps, ...props }) => {
+export const AutocompleteElementDisplay = ({ viewOnly = undefined, disableUnderline, textFieldProps, autocompleteProps, ...props }) => {
     const autocompleteAdjustedProps = useMemo(() => merge({
         readOnly: viewOnly,
-        disableClearable: viewOnly,
+        disableClearable: autocompleteProps?.disableClearable || viewOnly,
         disabled: viewOnly,
-        slotProps: {
-            input: { disableUnderline },
-            chip: {
-                disabled: false,
-            },
-        },
     }, autocompleteProps, viewOnly
         ? {
             sx: {
-                ".MuiAutocomplete-endAdornment": {
-                    display: "none",
-                },
                 ".MuiAutocomplete-tag": {
-                    opacity: "1 !important"
+                    opacity: "1 !important",
                 },
             },
         }
-        : {}), [autocompleteProps, viewOnly, disableUnderline]);
-    const textFieldAdjustedProps = useMemo(() => merge(viewOnly ? { variant: "standard" } : {}, textFieldProps), [viewOnly, textFieldProps]);
-    return (_jsx(AutocompleteElement, { ...props, autocompleteProps: autocompleteAdjustedProps, textFieldProps: textFieldAdjustedProps }));
+        : {}), [autocompleteProps, viewOnly]);
+    const textFieldAdjustedProps = useMemo(() => getTextElementDisplayProps(textFieldProps, viewOnly, disableUnderline), [textFieldProps, viewOnly, disableUnderline]);
+    return (_jsx(AutocompleteElement, { autocompleteProps: autocompleteAdjustedProps, textFieldProps: textFieldAdjustedProps, ...props }));
 };

package/dist/components/ObjectElementDisplay.d.ts

@@ -1,6 +1,6 @@
-import { type ElementType, ReactNode } from "react";
-import { type ChipProps, type ChipTypeMap } from "@mui/material";
-import type { FieldPath, FieldValues } from "react-hook-form";
+import { type ElementType } from "react";
+import { type ChipProps, type ChipTypeMap, type ListItemProps } from "@mui/material";
+import type { FieldPath, FieldValue, FieldValues } from "react-hook-form";
 import { type AutocompleteElementDisplayProps } from "./AutocompleteElementDisplay";
 /**
  * Extends AutocompleteElementDisplayProps with additional properties for handling object values.
@@ -27,9 +27,17 @@ export type ObjectElementDisplayProps<TValue, Multiple extends boolean | undefin
      * Can return any ReactNode for custom rendering.
      *
      * @param value - The option value or null
-     * @returns A ReactNode to display as the option label
+     * @returns A string to display as the option label
      */
-    getItemLabel: (value: TValue | null) => ReactNode;
+    getItemLabel: (value: TValue | null) => string;
+    /**
+     * Function to get additional props for an option list item.
+     * Used for customizing the rendering of the option.
+     *
+     * @param value - The option value or null
+     * @returns Additional props to apply to the list item
+     */
+    getOptionProps?: (value: TValue | null) => ListItemProps;
     /**
      * Function to convert a free text input string to a TValue object.
      * Required when freeSolo is true to create new items from text input.
@@ -54,6 +62,14 @@ export type ObjectElementDisplayProps<TValue, Multiple extends boolean | undefin
         value: TValue;
         index: number;
     }) => Partial<ChipProps> | undefined;
+    /**
+     * Optional function to transform the value before it's updated in the form.
+     * This allows for custom processing or enrichment of the selected value.
+     *
+     * @param value - The value that would normally be sent to the form
+     * @returns The transformed value to be stored in the form
+     */
+    transformValue?: (value: Multiple extends true ? TValue[] : TValue | null) => FieldValue<FieldValues>;
 };
 /**
  * A form component that displays a searchable dropdown for selecting object values.
@@ -76,4 +92,4 @@ export type ObjectElementDisplayProps<TValue, Multiple extends boolean | undefin
  *
  * @returns A React component for selecting object values
  */
-export declare const ObjectElementDisplay: <TValue, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends ElementType = ChipTypeMap["defaultComponent"], TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ options, autocompleteProps, getItemKey, getItemLabel, getChipProps, stringToNewItem, name, freeSolo, control, ...props }: ObjectElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+export declare const ObjectElementDisplay: <TValue, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends ElementType = ChipTypeMap["defaultComponent"], TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ options, autocompleteProps, getItemKey, getItemLabel, getChipProps, stringToNewItem, transformValue, name, freeSolo, control, getOptionProps, ...props }: ObjectElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ObjectElementDisplay.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { useMemo, useState } from "react";
-import { Checkbox, Chip, Typography } from "@mui/material";
+import { useMemo, useState, useEffect } from "react";
+import { Checkbox, Chip, ListItem, } from "@mui/material";
 import { AutocompleteElementDisplay, } from "./AutocompleteElementDisplay";
-import { getAutocompleteRenderValue } from "../utils";
+import { getAutocompleteTypedValue, isNonNullableString } from "../utils";
 import { useController } from "react-hook-form-mui";
-import { useOnMount } from "../hooks";
-import lodash from "lodash";
-const { omit } = lodash;
+import { merge } from "lodash";
 /**
  * A form component that displays a searchable dropdown for selecting object values.
  * Extends AutocompleteElementDisplay with object-specific functionality.
@@ -29,88 +27,53 @@ const { omit } = lodash;
  *
  * @returns A React component for selecting object values
  */
-export const ObjectElementDisplay = ({ options, autocompleteProps, getItemKey, getItemLabel, getChipProps, stringToNewItem, name, freeSolo, control, ...props }) => {
+export const ObjectElementDisplay = ({ options, autocompleteProps, getItemKey, getItemLabel, getChipProps, stringToNewItem, transformValue, name, freeSolo, control, getOptionProps, ...props }) => {
     /**
      * Access to the form field controller
      */
     const { field } = useController({ name, control });
-    /**
-     * State for the current text input in free-solo mode
-     */
-    const [freeSoloValue, setFreeSoloValue] = useState("");
     /**
      * State for storing dynamically added options that aren't in the original options list
+     * Includes both default values and values added during freeSolo mode
      */
-    const [newOptions, setNewOptions] = useState([]);
-    /**
-     * On component mount, handle initial field values that aren't in the options
-     * This is important for loading saved data that might reference items not in the current options
-     */
-    useOnMount(() => {
-        if (!freeSolo || !field.value)
-            return;
-        // Handle both single and multiple selection modes
+    const [newOptions, setNewOptions] = useState(() => {
+        if (!field.value)
+            return [];
+        // Convert field value to array for consistent handling
         const fieldValues = Array.isArray(field.value) ? field.value : [field.value];
-        // Filter out values that are already in options
-        const newFieldOptions = fieldValues.filter((value) => {
-            // Skip string values as they're handled differently
-            if (typeof value === "string")
-                return false;
-            // Check if this value exists in options
-            return !options.some((option) => getItemKey(option) === getItemKey(value));
-        });
-        // Add new values to newOptions if any were found
-        if (newFieldOptions.length > 0)
-            setNewOptions(newFieldOptions);
+        // Keep only object values that don't exist in the options array
+        return fieldValues.filter((value) => typeof value !== "string" &&
+            !options.some((option) => getItemKey(option) === getItemKey(value)));
     });
     /**
-     * Creates a new item from the current free-solo text input
-     * Returns undefined if:
-     * - Free-solo mode is disabled
-     * - No stringToNewItem converter is provided
-     * - Input is empty
-     * - An item with the same key already exists in options or newOptions
-     *
-     * @returns The new item created from the free-solo input, or undefined
+     * Update newOptions when field.value changes
+     * This ensures that any new values added to the field after rendering
+     * are properly included in newOptions and displayed
      */
-    const freeSoloItem = useMemo(() => {
-        if (!freeSolo || !stringToNewItem || !freeSoloValue.length)
-            return undefined;
-        const item = stringToNewItem(freeSoloValue);
-        const itemKey = getItemKey(item);
-        if (options.some((option) => getItemKey(option) === itemKey))
-            return undefined;
-        if (newOptions.some((option) => getItemKey(option) === itemKey))
-            return undefined;
-        return item;
-    }, [stringToNewItem, freeSoloValue, newOptions, freeSolo, options, getItemKey]);
+    useEffect(() => {
+        if (!field.value)
+            return;
+        const fieldValues = Array.isArray(field.value) ? field.value : [field.value];
+        const newFieldOptions = fieldValues.filter((value) => typeof value !== "string" &&
+            ![...options, ...newOptions].some((option) => getItemKey(option) === getItemKey(value)));
+        // Only update newOptions if there are new values to add
+        if (newFieldOptions.length > 0) {
+            setNewOptions((prevOptions) => [...prevOptions, ...newFieldOptions]);
+        }
+    }, [field.value, options, newOptions, getItemKey]);
     /**
-     * Creates a combined and deduplicated list of all available options
-     * Includes:
-     * - Original options from props
-     * - Dynamically added options from newOptions
-     * - Current free-solo item if it exists
-     *
-     * @returns Array of all available options with duplicates removed
+     * Combined list of all available options (original + dynamically added)
      */
     const allOptions = useMemo(() => {
-        if (!freeSolo)
-            return options;
-        // Combine all options and deduplicate by key
-        const combinedOptions = [...options, ...newOptions];
-        if (freeSoloItem)
-            combinedOptions.push(freeSoloItem);
-        // Deduplicate using getItemKey
-        const uniqueKeys = new Set();
-        return combinedOptions.filter((option) => {
+        const seen = new Set();
+        return [...options, ...newOptions].filter((option) => {
             const key = getItemKey(option);
-            if (uniqueKeys.has(key))
+            if (seen.has(key))
                 return false;
-            uniqueKeys.add(key);
+            seen.add(key);
             return true;
         });
-    }, [options, newOptions, freeSolo, freeSoloItem, getItemKey]);
-    // console.log({ allOptions });
+    }, [options, newOptions]);
     return (_jsx(AutocompleteElementDisplay, { name: name, control: control, options: allOptions, ...props, autocompleteProps: {
             /**
              * Determines if two options should be considered equal
@@ -119,46 +82,134 @@ export const ObjectElementDisplay = ({ options, autocompleteProps, getItemKey, g
             isOptionEqualToValue: (o, v) => getItemKey(o) === getItemKey(v),
             /**
              * Filters options based on the input value
-             * Checks if the option key contains the input value (case-insensitive)
+             * Checks if the option key or label contains the input value (case-insensitive)
+             * For freeSolo mode, adds a special "Add [value]" option when there's no exact match
              */
-            filterOptions: (options, { inputValue }) => options.filter((option) => getItemKey(option).toLowerCase().includes(inputValue.toLowerCase())),
+            filterOptions: (options, { inputValue }) => {
+                if (!inputValue)
+                    return options;
+                const searchValue = inputValue.toLowerCase();
+                // Filter options that match the input value (by key or label)
+                const filteredOptions = options.filter((option) => {
+                    const key = getItemKey(option).toLowerCase();
+                    const label = String(getItemLabel(option)).toLowerCase();
+                    return key.includes(searchValue) || label.includes(searchValue);
+                });
+                // For freeSolo mode, add "Add [value]" option if no exact match exists
+                if (freeSolo && stringToNewItem && inputValue.length > 0) {
+                    const hasExactMatch = filteredOptions.some((option) => String(getItemLabel(option)).toLowerCase() === searchValue);
+                    if (!hasExactMatch) {
+                        // Create a special option with a __isAddOption flag
+                        const addOption = {
+                            __isAddOption: true,
+                            inputValue,
+                            ...stringToNewItem(inputValue), // Include properties for type compatibility
+                        };
+                        return [addOption, ...filteredOptions];
+                    }
+                }
+                return filteredOptions;
+            },
             freeSolo, // Allowed to enter own string value
             autoComplete: true,
             autoHighlight: true, // The first option is highlighted by default
             openOnFocus: true, // Opens the menu when tabbed into
             /**
              * Custom rendering for each option in the dropdown list
-             * Displays a checkbox for multiple selection if showCheckbox is true
-             * Uses getItemLabel to render the option label
-             */
-            renderOption: (liProps, option, { selected }) => (_createElement("li", { ...liProps, key: `${name}-option-${getItemKey(option)}` },
-                props?.showCheckbox && _jsx(Checkbox, { sx: { marginRight: 1 }, checked: selected }),
-                typeof option === "string" ? option : getItemLabel(option))),
-            /**
-             * Handles changes to the selected value(s)
-             * In free-solo mode, adds the new item to newOptions when selected
-             * Delegates to the original onChange handler if provided
+             * Handles both regular options and special "Add" options in freeSolo mode
              */
+            renderOption: (liProps, option, { selected }, ownerState) => {
+                const itemProps = merge(liProps, getOptionProps?.(option) ?? {});
+                // Handles the special "Add" option in freeSolo mode
+                if (ownerState?.freeSolo &&
+                    typeof option === "object" &&
+                    option !== null &&
+                    "__isAddOption" in option) {
+                    const inputValue = option.inputValue;
+                    return (_createElement(ListItem, { ...itemProps, key: `${name}-add-option-${inputValue}` },
+                        "Add: '",
+                        inputValue,
+                        "'"));
+                }
+                // Handle regular option
+                return (_createElement(ListItem, { ...itemProps, key: `${name}-option-${getItemKey(option)}` },
+                    (props?.showCheckbox && ownerState?.multiple) && (_jsx(Checkbox, { sx: { marginRight: 1 }, checked: selected })),
+                    typeof option === "string" ? option : getItemLabel(option)));
+            },
             onChange: (event, value, reason, details) => {
-                if (freeSolo && freeSoloItem) {
-                    if (stringToNewItem == undefined) {
-                        throw new Error("Must implement stringToNewItem with freeSolo!");
+                /**
+                 * Helper function to apply transformValue if provided, otherwise return the original value
+                 */
+                const applyTransform = (val) => {
+                    return transformValue && val !== null
+                        ? field.onChange(transformValue(val))
+                        : field.onChange(val);
+                };
+                /**
+                 * Helper function to add a new item to newOptions if it doesn't exist already
+                 */
+                const addToNewOptions = (item) => {
+                    const itemKey = getItemKey(item);
+                    const itemExists = [...options, ...newOptions].some((option) => getItemKey(option) === itemKey);
+                    if (!itemExists) {
+                        setNewOptions((prev) => [...prev, item]);
+                    }
+                };
+                /**
+                 * Helper function to extract input value from string or AddOption
+                 */
+                const getInputValue = (item) => {
+                    if (typeof item === "string" && item.length > 0) {
+                        return item;
+                    }
+                    if (typeof item === "object" && item !== null && "__isAddOption" in item) {
+                        return item.inputValue;
+                    }
+                    return null;
+                };
+                // Handle freeSolo mode with stringToNewItem function
+                if (freeSolo && stringToNewItem) {
+                    // Handle special add option selection or string input
+                    const inputValue = getInputValue(value);
+                    if (inputValue) {
+                        const newItem = stringToNewItem(inputValue);
+                        if (props.multiple) {
+                            // For multiple selection, add the new item to the current values
+                            const currentValues = Array.isArray(field.value) ? field.value : [];
+                            const newValues = [...currentValues, newItem];
+                            applyTransform(newValues);
+                        }
+                        else {
+                            // For single selection, just use the new item
+                            applyTransform(newItem);
+                        }
+                        addToNewOptions(newItem);
+                        return;
+                    }
+                    // Handle array values (multiple selection)
+                    if (Array.isArray(value) && props.multiple) {
+                        // Convert any string values to objects and handle special add options
+                        const newValues = value?.map((item) => {
+                            const inputVal = getInputValue(item);
+                            return inputVal ? stringToNewItem(inputVal) : item;
+                        }) ?? [];
+                        applyTransform(newValues);
+                        // Add any new items to newOptions
+                        const allOptionsKeys = [...options, ...newOptions].map((option) => getItemKey(option));
+                        const newItems = newValues.filter((item) => typeof item !== "string" && !allOptionsKeys.includes(getItemKey(item)));
+                        if (newItems.length > 0) {
+                            setNewOptions((prev) => [...prev, ...newItems]);
+                        }
+                        return;
                     }
-                    setNewOptions((prev) => [...prev, freeSoloItem]);
-                    setFreeSoloValue("");
                 }
-                autocompleteProps?.onChange?.(event, value, reason, details);
-            },
-            /**
-             * Handles changes to the input text
-             * Updates freeSoloValue state with the current input
-             * Delegates to the original onInputChange handler if provided
-             */
-            onInputChange: (event, value, reason) => {
-                // event.preventDefault();
-                setFreeSoloValue(value);
-                // Call the original onInputChange if it exists
-                autocompleteProps?.onInputChange?.(event, value, reason);
+                // Default behavior for non-freeSolo cases
+                if (transformValue && value !== null) {
+                    applyTransform(value);
+                }
+                else {
+                    autocompleteProps?.onChange?.(event, value, reason, details);
+                }
             },
             /**
              * Custom rendering for the selected value(s)
@@ -167,21 +218,25 @@ export const ObjectElementDisplay = ({ options, autocompleteProps, getItemKey, g
              * Uses getItemLabel to render the value labels
              */
             renderValue: (value, getItemProps, ownerState) => {
-                const typedValue = getAutocompleteRenderValue(value, ownerState);
+                const typedValue = getAutocompleteTypedValue(value, ownerState);
+                // Handle array values (multiple selection)
                 if (Array.isArray(typedValue)) {
                     return typedValue.map((v, index) => {
                         // @ts-expect-error a key is returned, and the linter doesn't pick this up
                         const { key, ...chipProps } = getItemProps({ index });
+                        // Get the label - use string directly or extract from object
                         const label = typeof v === "string" ? v : getItemLabel(v);
-                        // Get additional chip props based on the value if the function is provided
+                        // Get additional chip props if available
                         const valueSpecificProps = typeof v !== "string" && getChipProps ? getChipProps({ value: v, index }) : {};
-                        return (_jsx(Chip, { label: label, ...valueSpecificProps, ...chipProps }, `${name}-chip-${key}`));
+                        return (_jsx(Chip, { ...valueSpecificProps, ...chipProps, label: label }, `${name}-chip-${key}`));
                     });
                 }
-                // @ts-expect-error a key is returned, and the linter doesn't pick this up
-                const { key, ...rawChipProps } = getItemProps({ index: 0 });
-                const itemProps = omit(rawChipProps, "onDelete");
-                return (_jsx(Typography, { component: "span", color: "text.primary", ...(props?.viewOnly ? omit(itemProps, "disabled") : itemProps), children: (typeof typedValue === "string") ? typedValue : getItemLabel(typedValue) }, `${name}-value-${key}`));
+                // Handles single value - return string or extracted label
+                return isNonNullableString(typedValue)
+                    ? typedValue
+                    : typedValue
+                        ? getItemLabel(typedValue)
+                        : "";
             },
             ...autocompleteProps,
         } }));

package/dist/components/TextElementDisplay.d.ts

@@ -0,0 +1,18 @@
+import { type TextFieldElementProps } from "react-hook-form-mui";
+import { type FieldPath, type FieldValues } from "react-hook-form";
+export type TextElementDisplayProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldElementProps<TFieldValues, TName> & Viewable;
+/**
+ * A form component that displays a text field with view-only capabilities.
+ * Extends TextFieldElement with view-only functionality.
+ *
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name
+ *
+ * @returns A React component for text input with view-only support
+ */
+export declare const TextElementDisplay: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ viewOnly, disableUnderline, ...props }: TextElementDisplayProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+type Viewable = {
+    viewOnly?: boolean;
+    disableUnderline?: boolean;
+};
+export {};

package/dist/components/TextElementDisplay.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextFieldElement } from "react-hook-form-mui";
+import { useMemo } from "react";
+import { getTextElementDisplayProps } from "../utils";
+/**
+ * A form component that displays a text field with view-only capabilities.
+ * Extends TextFieldElement with view-only functionality.
+ *
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name
+ *
+ * @returns A React component for text input with view-only support
+ */
+export const TextElementDisplay = ({ viewOnly, disableUnderline, ...props }) => {
+    const adjustedProps = useMemo(() => getTextElementDisplayProps(props, viewOnly, disableUnderline), [props, viewOnly, disableUnderline]);
+    return _jsx(TextFieldElement, { ...adjustedProps });
+};

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./AutocompleteElementDisplay";
 export * from "./ObjectElementDisplay";
+export * from "./TextElementDisplay";
 export * from "./ValidationElement";

package/dist/components/index.js

@@ -1,3 +1,4 @@
 export * from "./AutocompleteElementDisplay";
 export * from "./ObjectElementDisplay";
+export * from "./TextElementDisplay";
 export * from "./ValidationElement";

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),$=require("react-hook-form-mui"),l=require("react"),M=require("lodash"),x=require("@mui/material"),G=require("react-hook-form"),{merge:q}=M,D=({viewOnly:e,disableUnderline:n,textFieldProps:t,autocompleteProps:a,...f})=>{const i=l.useMemo(()=>q({readOnly:e,disableClearable:e,disabled:e,slotProps:{input:{disableUnderline:n},chip:{disabled:!1}}},a,e?{sx:{".MuiAutocomplete-endAdornment":{display:"none"},".MuiAutocomplete-tag":{opacity:"1 !important"}}}:{}),[a,e,n]),c=l.useMemo(()=>q(e?{variant:"standard"}:{},t),[e,t]);return p.jsx($.AutocompleteElement,{...f,autocompleteProps:i,textFieldProps:c})};function J(e,n){return n.multiple,n?.freeSolo,e}const{get:L}=M;function P(e,n){const t=L(e,n);return{error:!!t,helperText:t?.message||""}}function S(e){const n=l.useRef(!1);l.useEffect(()=>(n.current||(e(),n.current=!0),()=>{n.current=!0}),[])}const{omit:g}=M,Q=({options:e,autocompleteProps:n,getItemKey:t,getItemLabel:a,getChipProps:f,stringToNewItem:i,name:c,freeSolo:d,control:F,...C})=>{const{field:j}=$.useController({name:c,control:F}),[E,b]=l.useState(""),[y,k]=l.useState([]);S(()=>{if(!d||!j.value)return;const r=(Array.isArray(j.value)?j.value:[j.value]).filter(s=>typeof s=="string"?!1:!e.some(u=>t(u)===t(s)));r.length>0&&k(r)});const h=l.useMemo(()=>{if(!d||!i||!E.length)return;const o=i(E),r=t(o);if(!e.some(s=>t(s)===r)&&!y.some(s=>t(s)===r))return o},[i,E,y,d,e,t]),H=l.useMemo(()=>{if(!d)return e;const o=[...e,...y];h&&o.push(h);const r=new Set;return o.filter(s=>{const u=t(s);return r.has(u)?!1:(r.add(u),!0)})},[e,y,d,h,t]);return p.jsx(D,{name:c,control:F,options:H,...C,autocompleteProps:{isOptionEqualToValue:(o,r)=>t(o)===t(r),filterOptions:(o,{inputValue:r})=>o.filter(s=>t(s).toLowerCase().includes(r.toLowerCase())),freeSolo:d,autoComplete:!0,autoHighlight:!0,openOnFocus:!0,renderOption:(o,r,{selected:s})=>l.createElement("li",{...o,key:`${c}-option-${t(r)}`},C?.showCheckbox&&p.jsx(x.Checkbox,{sx:{marginRight:1},checked:s}),typeof r=="string"?r:a(r)),onChange:(o,r,s,u)=>{if(d&&h){if(i==null)throw new Error("Must implement stringToNewItem with freeSolo!");k(A=>[...A,h]),b("")}n?.onChange?.(o,r,s,u)},onInputChange:(o,r,s)=>{b(r),n?.onInputChange?.(o,r,s)},renderValue:(o,r,s)=>{const u=J(o,s);if(Array.isArray(u))return u.map((m,V)=>{const{key:T,...w}=r({index:V}),z=typeof m=="string"?m:a(m),B=typeof m!="string"&&f?f({value:m,index:V}):{};return p.jsx(x.Chip,{label:z,...B,...w},`${c}-chip-${T}`)});const{key:A,...R}=r({index:0}),O=g(R,"onDelete");return p.jsx(x.Typography,{component:"span",color:"text.primary",...C?.viewOnly?g(O,"disabled"):O,children:typeof u=="string"?u:a(u)},`${c}-value-${A}`)},...n}})},W=({name:e,rules:n,formControlProps:t={}})=>{const{register:a,formState:{errors:f}}=G.useFormContext(),{error:i,helperText:c}=P(f,e);return p.jsxs(x.FormControl,{error:i,...t,children:[p.jsx("input",{type:"hidden",...a(e,n)}),i&&p.jsx(x.FormHelperText,{children:c})]})};exports.AutocompleteElementDisplay=D;exports.ObjectElementDisplay=Q;exports.ValidationElement=W;exports.useFormError=P;exports.useOnMount=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),T=require("react-hook-form-mui"),h=require("react"),g=require("lodash"),M=require("@mui/material"),B=require("react-hook-form"),{merge:R}=g;function L(e,n){return n?.multiple,n?.freeSolo,e}const S=(e,n=!1,r=!1)=>R(e,n?{disabled:!0,variant:"standard",sx:{"& .MuiAutocomplete-endAdornment":{display:"none"},...r&&{"& .MuiInput-underline:before":{borderBottom:"none"},"& .MuiInput-underline:after":{borderBottom:"none"},"& .MuiInput-underline:hover:not(.Mui-disabled):before":{borderBottom:"none"}}}}:{});function w(e){return e!=null&&typeof e=="string"}const{merge:z}=g,$=({viewOnly:e=void 0,disableUnderline:n,textFieldProps:r,autocompleteProps:c,...E})=>{const f=h.useMemo(()=>z({readOnly:e,disableClearable:c?.disableClearable||e,disabled:e},c,e?{sx:{".MuiAutocomplete-tag":{opacity:"1 !important"}}}:{}),[c,e]),A=h.useMemo(()=>S(r,e,n),[r,e,n]);return y.jsx(T.AutocompleteElement,{autocompleteProps:f,textFieldProps:A,...E})},G=({options:e,autocompleteProps:n,getItemKey:r,getItemLabel:c,getChipProps:E,stringToNewItem:f,transformValue:A,name:C,freeSolo:F,control:q,getOptionProps:_,...V})=>{const{field:a}=T.useController({name:C,control:q}),[b,k]=h.useState(()=>a.value?(Array.isArray(a.value)?a.value:[a.value]).filter(t=>typeof t!="string"&&!e.some(s=>r(s)===r(t))):[]);h.useEffect(()=>{if(!a.value)return;const t=(Array.isArray(a.value)?a.value:[a.value]).filter(s=>typeof s!="string"&&![...e,...b].some(u=>r(u)===r(s)));t.length>0&&k(s=>[...s,...t])},[a.value,e,b,r]);const H=h.useMemo(()=>{const i=new Set;return[...e,...b].filter(t=>{const s=r(t);return i.has(s)?!1:(i.add(s),!0)})},[e,b]);return y.jsx($,{name:C,control:q,options:H,...V,autocompleteProps:{isOptionEqualToValue:(i,t)=>r(i)===r(t),filterOptions:(i,{inputValue:t})=>{if(!t)return i;const s=t.toLowerCase(),u=i.filter(l=>{const d=r(l).toLowerCase(),j=String(c(l)).toLowerCase();return d.includes(s)||j.includes(s)});return F&&f&&t.length>0&&!u.some(d=>String(c(d)).toLowerCase()===s)?[{__isAddOption:!0,inputValue:t,...f(t)},...u]:u},freeSolo:F,autoComplete:!0,autoHighlight:!0,openOnFocus:!0,renderOption:(i,t,{selected:s},u)=>{const l=g.merge(i,_?.(t)??{});if(u?.freeSolo&&typeof t=="object"&&t!==null&&"__isAddOption"in t){const d=t.inputValue;return h.createElement(M.ListItem,{...l,key:`${C}-add-option-${d}`},"Add: '",d,"'")}return h.createElement(M.ListItem,{...l,key:`${C}-option-${r(t)}`},V?.showCheckbox&&u?.multiple&&y.jsx(M.Checkbox,{sx:{marginRight:1},checked:s}),typeof t=="string"?t:c(t))},onChange:(i,t,s,u)=>{const l=o=>A&&o!==null?a.onChange(A(o)):a.onChange(o),d=o=>{const p=r(o);[...e,...b].some(x=>r(x)===p)||k(x=>[...x,o])},j=o=>typeof o=="string"&&o.length>0?o:typeof o=="object"&&o!==null&&"__isAddOption"in o?o.inputValue:null;if(F&&f){const o=j(t);if(o){const p=f(o);if(V.multiple){const x=[...Array.isArray(a.value)?a.value:[],p];l(x)}else l(p);d(p);return}if(Array.isArray(t)&&V.multiple){const p=t?.map(m=>{const D=j(m);return D?f(D):m})??[];l(p);const O=[...e,...b].map(m=>r(m)),x=p.filter(m=>typeof m!="string"&&!O.includes(r(m)));x.length>0&&k(m=>[...m,...x]);return}}A&&t!==null?l(t):n?.onChange?.(i,t,s,u)},renderValue:(i,t,s)=>{const u=L(i,s);return Array.isArray(u)?u.map((l,d)=>{const{key:j,...o}=t({index:d}),p=typeof l=="string"?l:c(l),O=typeof l!="string"&&E?E({value:l,index:d}):{};return y.jsx(M.Chip,{...O,...o,label:p},`${C}-chip-${j}`)}):w(u)?u:u?c(u):""},...n}})},J=({viewOnly:e,disableUnderline:n,...r})=>{const c=h.useMemo(()=>S(r,e,n),[r,e,n]);return y.jsx(T.TextFieldElement,{...c})},{get:N}=g;function P(e,n){const r=N(e,n);return{error:!!r,helperText:r?.message||""}}function Q(e){const n=h.useRef(!1);h.useEffect(()=>(n.current||(e(),n.current=!0),()=>{n.current=!0}),[])}const W=({name:e,rules:n,formControlProps:r={}})=>{const{register:c,formState:{errors:E}}=B.useFormContext(),{error:f,helperText:A}=P(E,e);return y.jsxs(M.FormControl,{error:f,...r,children:[y.jsx("input",{type:"hidden",...c(e,n)}),f&&y.jsx(M.FormHelperText,{children:A})]})};exports.AutocompleteElementDisplay=$;exports.ObjectElementDisplay=G;exports.TextElementDisplay=J;exports.ValidationElement=W;exports.useFormError=P;exports.useOnMount=Q;
 //# sourceMappingURL=index.cjs.map